Blancer.com Tutorials and projects

I’m using react-apexcharts to create a bar chart, and I want to customize the appearance of a selected bar when clicked.

designer want this.

I know that setting the states.active.filter to none removes the default darken effect:

states: {
  active: {
    filter: {
      type: 'none',
    },
  },
},

However, I would like to:

• Add a dashed border around the selected bar
• Apply a custom background color when selected

I tried using plotOptions and states but couldn’t find a way to achieve this.

How can I achieve this in ApexCharts?

Here is a minimal example of my current chart configuration:

const BarChart = (props: {
    series: any;
    height: number;
    xCategories: string[];
    horizontal?: boolean;
}) => (
    <ChartWrapper
        style={{
            position: `relative`,
            width: `100%`,
            margin: `0 auto`,
            boxSizing: `border-box`,
            border: `none`,
            padding: 0,
        }}
    >
        <ApexCharts
            type={'bar'}
            series={[
                {
                    name: '',
                    data: props.series,
                },
            ]}
            options={{
                chart: {
                    type: 'bar',
                    height: props.height,
                    toolbar: {show: false},
                    events: {
                        dataPointSelection(chart, options) {
                            console.log(chart, options);
                        },
                    },
                    background: 'transparent',
                },
                states: {
                    active: {
                        filter: {
                            type: 'none',
                        },
                    },
                },
                plotOptions: {
                    bar: {
                        barHeight: '50%',
                        borderRadius: 2,
                        horizontal: props.horizontal,
                        columnWidth: '8px',
                    },
                },
                dataLabels: {enabled: false},
                colors: [theme.palette.info.light],

                grid: {
                    show: true,
                    borderColor: theme.palette.greySecondary[100],
                    xaxis: {
                        lines: {
                            show: false,
                        },
                    },
                    yaxis: {
                        lines: {
                            show: true,
                        },
                    },
                },
                xaxis: {
                    categories: props.xCategories,
                    position: 'bottom',
                    axisBorder: {
                        show: true,
                    },
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                    },
                    tooltip: {
                        enabled: true,
                    },
                },
                yaxis: {
                    show: true,
                    axisBorder: {show: false},
                    axisTicks: {show: true},
                    labels: {
                        style: {
                            colors: theme.palette.greySecondary[600],
                        },
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
                tooltip: {
                    enabled: true,
                    theme: 'light',
                    style: {
                        fontSize: '12px',
                    },
                    y: {
                        formatter: (val: number) => val.toLocaleString(),
                    },
                },
            }}
            height={props.height || `auto`}
        />
    </ChartWrapper>
);

I am executing minified bundled js file using GraalVM to render the page server side, i am facing an issue, my web page is throwing error randomly and page does not get rendered and once i refresh the page it works fine. Although error occurrences are less but its causing bad user exeperience.
The error i get is below

org.graalvm.polyglot.PolyglotException: TypeError: Cannot read property 'length' of undefined
    at <js>.useMemo(bundled.js:89356)
    at <js>.exports.useMemo(bundled.js:98527)
    at <js>.Provider(bundled.js:94056)
    at <js>.d(bundled.js:89362)
    at <js>.Za(bundled.js:89365)
    at <js>.b.render(bundled.js:89370)
    at <js>.b.read(bundled.js:89370)
    at <js>.renderToString(bundled.js:89379)
    at <js>.global.render(bundled.js:170850)

I am not able to find any of my custom component in the stack trace even after turning off minification, the function which are minified and coming in the stack trace is from react-dom-server.browser.production.min.js file, and i am not able to understand the error

The form is working fine. All the selects and other form elements are works fine when I submit. The only problem is the community_id which is dependent on the district. Its always given The input was not found in the haystack. In the browser console the form sends the community_id but I don’t why I keep getting the haystack problem:
district_id: 9c72f59e-f733-11ef-89e9-00155d016f00
community_id: 4acc72cb-fc61-11ef-8c90-00155d016f00

Form:

    Elements
    // Add district selection
        $this->add([
            'name' => 'district_id',
            'type' => ElementSelect::class,
            'options' => [
                'label' => 'District',
                'empty_option' => 'Select District',
                'value_options' => $this->getDistrictOptions(),
                'label_attributes' => [
                    'class' => 'required-field'
                ],
            ],
            'attributes' => [
                'id' => 'district_id',
                'class' => 'form-control form-select',
                'required' => true,
                'data-dependent-url' => '/community/list'
            ],
        ]);
        
        // Add community selection
        $this->add([
            'name' => 'community_id',
            'type' => ElementSelect::class,
            'options' => [
                'label' => 'Community',
                'empty_option' => 'Select Community',
                'value_options' => $this->getCommunityOptions(),
                'label_attributes' => [
                    'class' => 'required-field'
                ],
            ],
            'attributes' => [
                'id' => 'community_id',
                'class' => 'form-control form-select',
                'required' => true,
                'disabled' => true,
                'data-dependent' => 'district_id',
                'value' => ''
            ],
        ]);


    *Inputfilters*
    'district_id' => [
                'required' => true,
                'filters' => [
                    ['name' => 'StringTrim'],
                ],
                'validators' => [
                    [
                        'name' => 'NotEmpty',
                        'options' => [
                            'messages' => [
                                'isEmpty' => 'Please select a district'
                            ],
                        ],
                    ],
                    [
                        'name' => 'Callback',
                        'options' => [
                            'callback' => [$this, 'validateDistrict'],
                            'messages' => [
                                'callbackValue' => 'Invalid district selected'
                            ],
                        ],
                    ],
                ],
            ],
            'community_id' => [
                'required' => true,
                'filters' => [
                    ['name' => 'StringTrim'],
                ],
                'validators' => [
                    [
                        'name' => 'NotEmpty',
                        'options' => [
                            'messages' => [
                                'isEmpty' => 'Please select a community or choose     Other and specify a new community name'
                            ],
                        ],
                    ],
                    [
                        'name' => 'Callback',
                        'options' => [
                            'callback' => [$this, 'validateCommunity'],
                            'messages' => [
                                'callbackValue' => 'Please select a valid community from the list or choose Other and specify a new community name'
                            ],
                        ],
                    ],
                ],
            ],

    *Validators*
    public function validateDistrict($value)
    {
        $district = $this->entityManager->getRepository(GrmEntityDistrict::class)
                ->find($value);
        
        return $district !== null;
    }
    
    public function validateCommunity($value)
    {
        // Log the submitted value
        error_log("Submitted community_id: " . $value);

        // Get the district ID
        $districtId = $this->get('district_id')->getValue();
        error_log("Selected district_id: " . $districtId);

        if (empty($districtId)) {
            error_log("District ID is empty.");
            return false;
        }

        // Handle 'other' option
        if ($value === 'other') {
            $otherCommunity = $this->get('other_community')->getValue();
            if (empty($otherCommunity)) {
                error_log("Other community name is empty.");
                return false;
            }
            return true;
        }

        // For numeric IDs, verify the community exists in the selected district
        if (is_numeric($value)) {
            try {
                $community = $this->entityManager->getRepository(GrmEntityCommunity::class)
                    ->findOneBy([
                        'id' => $value,
                        'district' => $districtId
                    ]);

                if ($community === null) {
                    error_log("Community not found in the selected district.");
                } else {
                    error_log("Community found: " . $community->getName());
                }

                return $community !== null;
            } catch (Exception $e) {
                error_log("Error validating community: " . $e->getMessage());
                return false;
            }
        }

        error_log("Invalid community_id value: " . $value);
        return false;
    }

Index.phtml:

    <!-- District and Community -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-center space-x-2">
                                <?= $this->formLabel($form->get('district_id')) ?>
                                <div class="flex-1">
                                    <?= $this->formElement($form->get('district_id'))     ?>
                                    <?= $this->formElementErrors($form->get('district_id')) ?>
                                </div>
                            </div>

                            <div class="flex items-center space-x-2">
                                <?= $this->formLabel($form->get('community_id')) ?>
                                <div class="flex-1">
                                    <?= $this->formElement($form->get('community_id')) ?>
                                    <?= $this->formElementErrors($form->get('community_id')) ?>
                                </div>
                            </div>
                        </div>

*Scripts*
`// Handle dependent dropdowns and form fields
$(document).ready(function() {
// District -> Community dependency
    $('#district_id').change(function() {
        const districtId = $(this).val();
        const communitySelect = $('#community_id');
        const otherCommunityContainer = $('.other-community-container');
        const otherCommunityField = $('#other_community');
        
        // Reset and hide other community field
        otherCommunityContainer.addClass('hidden');
        otherCommunityField.val('').prop('required', false);
        
        if (districtId) {
            // Show loading indicator
            communitySelect.prop('disabled', true).empty()
                .append('<option value="">Select Community</option>');
            
            $.ajax({
                url: '/community/list/' + districtId,
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    communitySelect.empty();
                    
                    // Add empty option
                    communitySelect.append('<option value="">Select Community</option>');
                    
                    if (response && response.length > 0) {
                        response.forEach(function(community) {
                            communitySelect.append(
                                $('<option></option>')
                                    .val(community.id)
                                    .text(community.name)
                            );
                        });
                    }
                    
                    // Add "Other" option
                    communitySelect.append('<option value="other">Other (Specify)</option>');
                    communitySelect.prop('disabled', false);
                },
                error: function() {
                    communitySelect.empty()
                        .append('<option value="">Error loading communities</option>')
                        .append('<option value="other">Other (Specify)</option>')
                        .prop('disabled', false);
                }
            });
        } else {
            communitySelect.empty()
                .append('<option value="">Select Community</option>')
                .append('<option value="other">Other (Specify)</option>')
                .prop('disabled', true);
            
            // Reset other community field
            otherCommunityContainer.addClass('hidden');
            otherCommunityField.val('').prop('required', false);
        }
    });

    // Handle Other Community selection
    $('#community_id').on('change', function() {
        const selectedValue = $(this).val();
        const otherCommunityContainer = $('.other-community-container');
        const otherCommunityField = $('#other_community');
        
        if (selectedValue === 'other') {
            otherCommunityContainer.removeClass('hidden');
            otherCommunityField.prop('required', true).val('');
        } else {
            otherCommunityContainer.addClass('hidden');
            otherCommunityField.prop('required', false).val('');
        }
    });

});`

Is there a way I can render the first_name and last_name as a defaultValues in the select option after fetching the data which is a relational table?

Currently, I was able to put other information as a defaultValues, but having a hard time on how can I render the first_name and last_name since it is a relational table?

const UpdateNewPaper = () => {

  const {data, isLoading} = useGetSinglePaperQuery(id)

   
  const form = useForm<UpdateNewPaperSchemaType>({
    resolver: zodResolver(UpdateNewPaperSchema),
  });



  useEffect(() => {
    if (data) {
      form.reset({
        title: data.title || "",
        authorId: data.Authors.first_name,
      });
    }
  }, [data, form]);




return (
  <Form>
      <form onSubmit={form.handleSubmit(onSubmit)}>
           <FormField
                    control={form.control}
                    name="authorId"
                    defaultValue={data?.Authors.first_name}
                    render={({ field }) => (
                      <FormItem className="w-full"> {/* Adjust the width here (e.g., w-64, w-80, w-96) */}
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger className="w-full"> {/* Ensure trigger takes full width of parent */}
                              <SelectValue placeholder="Author" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent className='w-full'>
                            {listofAuthors.data.map((author: ListOfAuthors) => (
                              <React.Fragment key={author.id}>
                                <SelectItem value={author.id}>{author.first_name} {author.last_name}</SelectItem>
                              </React.Fragment>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
      </form>

  </Form>
)


}

this is the data i’m receiving.

{
    "id": "c7a8ef7c-7b66-4536-9ea8-cdf6bf009c6c",
    "title": "new",
    "authorId": "7e99a9ba-4761-46ab-95f5-d77f2d95e311",
    "Authors": {
        "id": "7e99a9ba-4761-46ab-95f5-d77f2d95e311",
        "first_name": "random",
        "middle_name": "random",
    }
}

I am new to js and debugging for some issue, found that code has logic written on rowindex and for this loop my rowindex starts from length of datatable till 0 .
Where document suggest that it starts from 0 to length of datatable.

I really not getting what has made this simple loop do this reverse behaviour.

I suspected that some setup for datatable have caused this but thats not the case.

Please help if you have faced anything similar.
Thanks in advance

Hope you are doing well
I am trying to call one endpoint using residential proxy, but I am getting 403 Forbidden issue.
Could you let me know how can I call this endpoint?
Or is there any other option because I need to hide my original client ip address.
Thanks

This is the code that I tried

import fetch from 'node-fetch';
import { HttpsProxyAgent } from 'https-proxy-agent';
import axios from 'axios';
import https from 'https';

const proxyUrl = "http://customer-<Username>:<Password>@pr.oxylabs.io:7777";
const agent = new HttpsProxyAgent(proxyUrl);

async function fetchViaProxy() {
    try {
        const locationUrl = "https://ip.oxylabs.io/location";
        const locationResult = await axios.get(locationUrl, {
            httpsAgent: agent,
        });
        console.log(locationResult.data);
        
        const url = "http://x.x.x.x:3000/check";

        const result = await axios.get(url, {
            httpsAgent: agent,
        });

        const { response } = result.data;

        console.log(response);
    } catch (error) {
        console.error("Error fetching via proxy:", error);
    }
}

fetchViaProxy();

When I perform the following action in a code snippet, the browser scrolls up and down on its own.
I can prevent this by recording and restoring scrollY before and after the process, but what should I do to solve the fundamental problem?
windows GoogleChrome 134.0.6998.89 .

Scroll to the bottom, press the last button, and then press the top button while it is still on the screen, and windows will scroll by itself.

It is also reproduced in codeSnippet on stackoverflow.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <style>
    * {
      word-break: break-word;
      box-sizing: border-box;
    }
    body {
      margin: 0;
      min-height: 100vh;
    }
    .thin-table th,
    .thin-table td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    .my-anchor {
      anchor-name: --my-anchor;
    }
    .my-popover {
      position-anchor: --my-anchor;
      border: solid 1px black;
      background-color: cyan;
      position: absolute;
      position-area: span-right bottom;
      position-try-fallbacks: flip-block;
    }
  </style>
  <script>
    window.addEventListener(
      "DOMContentLoaded",
      (e) => {
        [...document.querySelectorAll("button")].forEach((e, i) => {
          e.innerText = `Button-${i + 100}`;
          e.addEventListener("click", (e) => showPopOver(e));
        });
      },
      false
    );
    function showPopOver(e, label) {
      document.querySelector(".my-anchor")?.classList.remove("my-anchor");
      e.target.classList.add("my-anchor");
      document.querySelector(".my-popover").style.display = "block";
    }
  </script>
</head>
<body>
  Scroll to the bottom, press the last button, and then press the top button
  while it is still on the screen, and windows will scroll by itself.<br />
  <div class="my-popover" style="display: none">popup</div>
  <table class="thin-table">
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
    <tr>
      <td>A</td>
      <td><button>B</button></td>
    </tr>
  </table>
</body>

When I called the receivepol1 contract function on the front-end webpage, the event text content of ‘Transaction Successful111111: ‘ was not displayed on the front-end webpage.
Why is this? Didn’t the “Index” event in the contract get a response? But I checked the transaction hash information and found that the index event in the contract had been triggered, but why was the text content not displayed on the front-end webpage?

the solidity contract code as follows：

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.4;
import "@chainlink/contracts/src/v0.8/automation/interfaces/KeeperCompatibleInterface.sol";
contract Biao {
    event Index(uint256 indexed amount1);
    address payable public myself;
    constructor() {
        myself = payable(msg.sender);
    }
    function receivepol1() public payable returns (uint256){
        uint256 amount1 = 2;
        emit Index(amount1);
        return amount1;
    }
}

the javascript code as follows：

contract = new web3.eth.Contract(abi, contractAddress);
contract.events.Index({}, async function(error, event) {
  if (!error){
      console.log('Event detected:', event); 
      indexvalue = event.returnValues.amount1;
      var text = document.createElement('span');
      text.innerText = 'Transaction Successful111111: '; 
      text.style.position = 'absolute';
      text.style.top = '690px';
      text.style.left = '500px';
      text.style.color = 'black';
      text.style.fontSize = '14px';
      text.style.fontWeight = 'bold';
      text.style.backgroundColor = 'rgba(0,0,0,0.5)'; 
      text.style.padding = '5px'; 
      document.body.appendChild(text);
  } else {
      console.error('Error listening to Debug events:', error);
  }
});

the html code as follows：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My DApp</title>
    <link rel="icon" href="aa.png" type="image/png">
</head>
<body>
    <h1>Welcome to My DApp</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.3.0/web3.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

Why is there no text information displayed on the front end of the web page? Is it because the code in the javascript is incorrect?

I’m attempting to create a reusable callback function for axios post requests based on this answer. The issue I’m running into now is that the destructured callback function is not being recognized in the component I’m attempting to use it in. Here is the component:

const AddParameterTest = ({ params, tankId }) => {

  const [date, setDate] = useState(parseAbsoluteToLocal(moment().format()));
  const [selectedParam, setSelectedParam] = useState(params[0]);
  const [value, setValue] = useState("");
  const valueRef = useRef();
  const { handlePost, status, error, response, loading } = axiosPost();
            ^This should be a function
  const onChange = (e) => {
    setValue(e.target.value);
  };

  const clickHandler = () => {
    const test = {
      param_id: selectedParam.id,
      param_value: value,
      test_date: moment(date).format("YYYY-MM-DD HH:mm:ss"),
      tank_id: tankId
    }
    
    const res = handlePost("api/tests/newTest", test); <--Error here on attempting to click the button
  }

  return (
    <>
      <ParamList params={params} selectedParam={selectedParam} onSelect={setSelectedParam} />
      <ParamValue value={value} onChange={onChange} ref={valueRef} />
      <MyDatePicker aria-label='date' value={date} onChange={setDate} />
      <Button title="Log" onClick={clickHandler} />
    </>
  )
}

export default AddParameterTest

Here is the js file for the util:

export const axiosPost = async () => {
  const [response, setResponse] = useState(null);
  const [status, setStatus] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { token } = useAuth();


  const handlePost = useCallback(async (url, data) => {
    setLoading(true);

    try {
      console.log("Data", data);
      console.log("url", url);
      const res = await axios.post(`${url}`, JSON.stringify(data),
        {
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-type": "application/json"
          }
        }
      )
      
      setResponse(res?.data);
    }
    catch(e) {
      setError(e);
    }
    finally {
      setLoading(false);
    }

  }, []);

  return { handlePost, status, error, response, loading }
}

Still rather messy but hoping that if I can figure out the issue, I can start to clean things up.

Any idea why it won’t recognize the handlePost as a function in the component? Is it even possible and the post I followed above is deprecated?

I have an issue where the image skeleton loader keeps loading infinitely even though I’m using the @load event in Quasar.

const imgLoaded = ref({});

// template
<q-skeleton v-if="!imgLoaded[img?.image_url]"></q-skeleton>

<q-img @load="(url) => imgLoaded[url] = true" :src="img?.image_url" />

The Quasar docs say that @load event is ‘Emitted when image has been loaded by the browser. @param src – URL of image that has been loaded’. After the handler sets imgLoaded[url] to true, the skeleton should stop showing and the image should be displayed. However, the skeleton keeps loading infinitely.

The same thing is happening with the onload. Now when I need the image url for img.src, I need to take it directly from the store:

// template
<q-skeleton v-if="!imgLoaded[img?.image_url]">

// script
const imgLoaded = ref({});

const onImgLoad = (url) => {
    imgLoaded.value[url] = true;
};

onMounted(() => {
    if (storeProducts.featuredProducts && storeProducts.featuredProducts.length) {
        storeProducts.featuredProducts.forEach((product) => {
            const img = new Image();
            img.onload = () => onImgLoad(product?.image_url);
            img.src = product?.image_url;
        });
    }
});

However, this approach also causes the skeleton loader to load infinitely.

I’m looking for a possible solution.

How can I transfer the users authentication status from one localhost, say on port 3000 to another localhost service running on port 3001?

I know firebase Authentication typically persists the users authentication across different pages and domain, however I need to pass the current users authentication to a webapp running on a different port but same domain.

React Webapp code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

//firebase config stores the data for the database and application. It was removed for security reasons

const app = initializeApp(firebase_conf)
const db = getFirestore(app)
const auth = getAuth(app)


export { db, auth };

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter basename="/peerscribe/webapp">
      <App/>
    </BrowserRouter>
  </React.StrictMode>
);

Website/Raw js code:

// Initialize Firebase app
const app = initializeApp(firebaseConfig);

// Initialize Firestore and Auth
const db = getFirestore(app);
const auth = getAuth(app);

// Set up authentication state observer
function setupAuthObserver() {
    onAuthStateChanged(auth, async (user) => {
        if (user) {
            // Check if email is verified and update Firestore if it has changed
            if (user.emailVerified) {
                const userDocRef = doc(db, 'users', user.uid);

                try {
                    // Get current user data from Firestore
                    const userDoc = await getDoc(userDocRef);

                    // Check if the document exists and email verification status needs updating
                    if (userDoc.exists() && userDoc.data().emailVerified === false) {
                        console.log('Updating email verification status in Firestore');

                        // Update the email verification status
                        await setDoc(userDocRef, {
                            emailVerified: true
                        }, { merge: true });

                        console.log('Email verification status updated successfully');
                    }
                } catch (error) {
                    console.error('Error updating email verification status:', error);
                }
            }
            modifyNavBar();
        }
    });
}

// Initialize the observer when the module loads
setupAuthObserver();

// Nav logic that always uses absolute links:
function modifyNavBar() {
  let anchors = document.querySelector('header').querySelectorAll('a');
  let loglinks = ['#', `http://localhost:3000/peerscribe/webapp/dashboard`];
  let dynamicAnchors = [anchors[3], anchors[4]];// WILL NEED TO BE CHANGED IF MORE NAVLINKS ARE ADDED
  let text = ["logout", "webapp"];
  for (let i = 0;i<dynamicAnchors.length;i++)
  {

    dynamicAnchors[i].setAttribute('href', loglinks[i]);
    dynamicAnchors[i].innerText = text[i];

    if (i == 0){
      dynamicAnchors[i].setAttribute('onclick', 'logout()');
    }
  }      
}

Things I’ve tried:

• using firebase’s Idtokens (not custom tokens)
• using cookies
• passing the firebase authentication object to the other service running on another port.

Everytime I try to retrieve a desired userId from a firebase firestore reference (which has been initialized) it returns the userId just fine. I know the userId and document exists within the firstore collection. I also know that it is seeing and retrieving all of the documents within a collection along with each documents respective data. However, when trying to use the currently authenticated userId (auth.currentUser) on the webapp, it returns null. It should match the userId that was found on the website(not the react app) and use it to compare the fields in each document.

I am very new to React apps, firebase, and how they work so I wouldn’t be surprised if the issue was right in front of me.

With this datalist generated by the code below, in chrome/edge, I click on the input box, and two dropdowns show up at the same time, like this. What am I doing wrong? it only shows the one list in both Firefox and Safari

https://jsfiddle.net/f0qw9Lmn/

const comboInput = document.getElementById('combo-input');
const datalist = document.getElementById('options');
comboInput.addEventListener('mousedown', function(e) {
  if (datalist.style['display'] == 'block') {
    datalist.style['display'] = 'none';
  } else {
    datalist.style['display'] = 'block';
  }
});

.combo-box {
  position: relative;
  display: inline-block;
}

/* always show arrow, not just on hover */
input::-webkit-calendar-picker-indicator {
  opacity: 100;
  display: inline-block;
}

#options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  display: none;
  background-color: #fff;
  z-index: 1;
}

#options option:hover {
  background-color: #eee;
}

<div class="combo-box">
  <input type="text" list="options" id="combo-input"/>
  <datalist id="options" style="display: none;" >
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option-->
  </datalist>
</div>

In V8, the engine is responsible for creating the JavaScript runtime call stack, which allows it to track its position within the code. The engine comprises two main components: Ignition, an interpreter that processes bytecode, and TurboFan, a compiler that generates optimized machine code.

My question is: When Ignition interprets bytecode, it utilizes handlers, which are C++ functions corresponding to specific bytecode instructions. Executing these handlers creates a C++ call stack, distinct from the JavaScript function call stack. How do these two stacks coexist in stack memory?

I am trying to produces a Windows application, my main workstation is macOS I packaged the exe file there and tried running it on Windows and I got an error so I tried building it on my Windows machine and the same issue occurred.

• I am using WebStorm
• Electron with React
• Using Electron builder to distribute the app

This is the error:

My package.json file:

{
  "name": "car_rental",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@electron/remote": "^2.1.2",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.8.2",
    "concurrently": "^9.1.2",
    "cross-env": "^7.0.3",
    "electron-is-dev": "^3.0.1",
    "motion": "^12.4.10",
    "react": "^19.0.0",
    "react-calendar": "^5.1.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.3.0",
    "react-scripts": "5.0.1",
    "wait-on": "^8.0.2",
    "web-vitals": "^2.1.4"
  },

  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electron:serve": "concurrently -k "cross-env BROWSER=none npm run start" "npm run electron:start"",
    "electron:build": "npm run build && electron-builder -c.extraMetadata.main=build/electron.js",
    "electron:start": "wait-on tcp:3000 &&  electron ."

  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^35.0.1",
    "electron-builder": "^25.1.8"
  },
  "build": {
    "appId": "your.id",
    "extends": null,
    "files": [
      "dist/**/*",
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    }
  }
}

My electron.js file is located in the public folder. This is the content:

const {app, BrowserWindow, Menu} = require("electron");
const isDev = require("electron-is-dev");
const path = require("path");

require("@electron/remote/main").initialize();

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            devTools: true,
            enableRemoteModule: true
        }, autoHideMenuBar: true,
    });
    Menu.setApplicationMenu(null);

    win.loadURL(isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}`);

}

app.whenReady().then(()=>{
    createWindow();
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    })
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
})

I would prefer a solution based on macOS so that I could directly package Windows app on my macOS (M1) machine.

I’m trying to retrieve custom properties from the select2 controls using the method described here:

https://select2.org/programmatic-control/retrieving-selections

I can see it says the following:

Calling select2(‘data’) will return a JavaScript array of objects representing the current selection. Each object will contain all of the properties/values that were in the source data objects passed through processResults and templateResult callbacks.

$('#mySelect2').select2('data');

However, my problem is that for some reason, doing the select2(‘data’) only returns the ID and Text values but does not bring back any other custom properties I set.

My ProcessResults looks like so:

    processResults: function (response) {
        if (!config.serverSide) {
            return {
                results: (response.results || []).map(function (item) {
                    return {
                        id: item[idField],
                        text: item[textField],
                        disabled: item.Disabled === true,
                        dataItem: item <== this is what i'm trying to get.
                    };
                })
            };
        } else {
            return {
                results: (response.Results || []).map(function (item) {
                    return {
                        id: item[idField],
                        text: item[textField],
                        disabled: item.Disabled === true,
                        dataItem: item <== this is what i'm trying to get.
                    };
                }),
                pagination: {
                    more: response.Pagination?.more || false
                }
            };
        }
    }

What’s interesting is that when any sort of event handlers are called, I can see the whole object show up and can also see that the dataItem is available for use.

So doing the following allows me to access my dataItem:

$('#element').on('select2:select', (e) => {
    let data = e.params.data;
    let item = data.dataItem;
});

I’ve tried multiple ways to try and extract the dataItem value using .select2(‘data’) but I just can’t seem to figure out why it doesn’t work.

Any help in figuring out how to access custom properties would be appreciated!