Audio Module Not Enabled Error in Firefox with Zoom Video SDK UI Toolkit

I’m working with the Zoom Video SDK (JavaScript) and specifically using the Video SDK UI Toolkit (following the example from the Zoom SDK UI Toolkit GitHub repository).

Description
I’m encountering an issue with audio in Firefox only. The setup and code work correctly on all other major browsers, but when using Firefox, attempting to start audio fails with an error. The error is reproducible both in my application and on Zoom’s own UI Toolkit Demo site.

Error
When trying to start audio, the following error message appears:

Audio: The operation is invalid, perhaps caused by duplicated operations

And in the console, more details are provided:

start audio error Object { type: "INVALID_OPERATION", reason: "Module:audio is not enabled" }

Troubleshooting Routes

  1. I confirmed that this issue does not occur on other browsers like Chrome or Edge.
  2. I followed the sample application exactly as provided in Zoom’s GitHub repository.
  3. I also tested on the official Zoom UI Toolkit Demo site (videosdk.dev/uitoolkit), and the same issue occurs on Firefox when joining a session with fictional data.

How to Reproduce

  1. Use Firefox (last version or earlier) as the browser. (On windows or MacOs)
  2. Open the Zoom Video SDK UI Toolkit Demo.
  3. Join a session using any fictitious data to authenticate.
  4. Attempt to start audio within the session.
  5. The above error should appear, preventing audio from working as expected.

Thank you for any guidance!

New environment variables reading as empty string in Vite project

I have set up a Vite project with an .env file to read some environment variables, but some environment variables I create for my machine appear as an empty string.

I have created a new environment variable in my terminal: export VITE_TEST="TESTING"

Printed it out to confirm it was set: echo $VITE_TEST // Output: TESTING as expected

I have set up an .env file to read this new env var:

VITE_ENV_TEST=$VITE_TEST

When I print out this env var I defined in my .env file::

App.tsx

...
function App() {
    const [count, setCount] = useState(0);
    const test = import.meta.env.VITE_ENV_TEST;
    console.log(test);

   return (
      <P>{test}</p>
   )
}
...

The output in an empty string.

However when I update my .env file to use a system env var such as $HOME:

.env

VITE_ENV_TEST=$HOME

It correctly prints out my home directory.

Does anyone know why the new environment variable I created would not print correctly while $HOME does?

Nuxt Content – 500 Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue

I have an error when I go to a markdown document from my main page, and I click on the arrow to go back in my browser.

It notes me this error:

500
Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue

Here is the full error:

nuxt] error caught during app initialization H3Error: 
Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
Caused by: TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue

Here is my […slug].vue code:

<template>
    <main>
        <div>
            <content-renderer :value="prodData" />
        </div>
    </main>
</template>

<script lang="ts" setup>
    import { queryContent, useAsyncData, useRoute } from '#imports';

    const route = useRoute();
    const path = route.path;

    const { data } = await useAsyncData('content-data', () =>
        queryContent(path).findOne(),
    );

    const prodData = data.value;
</script>

Here is my index.vue code:

<template>
    <AllPage>
         <Projects />
    </AllPage>
</template>

<script lang="ts" setup></script>
<style scoped></style>

this is the Projects component:

<template>
    <div class="d-flex flex-column h-100 ga-10">
        <Card
            v-for="doc in docs"
            :key="doc._path"
            :description="doc.description"
            :image="doc.firstImage"
            :path="doc._path"
            :title="doc.title"
        />
    </div>
</template>

<script lang="ts" setup>
    import { queryContent, useAsyncData } from '#imports';

    function extractFirstImage(content) {
        if (!content || !content.children) return null; // Checks that the content exists and has children

        // Recursively searches through children to find the first image
        for (const node of content.children) {
            if (
                node.type === 'element' &&
                node.tag === 'img' &&
                node.props &&
                node.props.src
            ) {
                return node.props.src; // Returns the URL of the first image found
            }

            // If the child has children, call the function recursively
            if (node.children) {
                const image = extractFirstImage(node);
                if (image) return image;
            }
        }
        return null; // No image found
    }

    const { data } = await useAsyncData('projects', () =>
        queryContent('/projects').find(),
    );

    const docs = data.value.map((doc) => ({
        ...doc,
        firstImage: extractFirstImage(doc.body), // Extracts the first image
    }));
</script>

<style scoped>
    @import 'assets/css/dark-theme-content.css';
</style>

This is the Card component :

<template>
    <v-card :href="path" class="project-card mx-auto rounded-lg" width="300px">
        <div class="img-container pa-3 w-100">
            <img
                v-if="displayImage"
                :src="images[`${displayImage}`]"
                alt="Image du document"
                class="card-img w-100 h-100 rounded-lg"
            />
        </div>

        <v-card-title class="card-title">{{ title }}</v-card-title>
        <v-card-subtitle class="card-description pb-3"
            >{{ description }}
        </v-card-subtitle>
    </v-card>
</template>
<script lang="ts" setup>
    import { filename } from 'pathe/utils';

    const props = defineProps({
        title: String,
        description: String,
        image: String,
        path: String,
    });

    console.log(props.path);

    const displayImage = props.image
      ?.replace('../../assets/img/content/', '')
      .replace(/.(png|jpe?g|gif|bmp|webp)$/gi, '');

    // Import all image files from the @/assets/img/content folder
    const glob = import.meta.glob(`@/assets/img/content/*`, {
        eager: true, // Immediately loads images to make them available as soon as the component is rendered
    });

    // Creates an images object where each key is a filename, and each value is the image URL
    const images = Object.fromEntries(
        Object.entries(glob).map(([key, value]) => [filename(key), value.default]),
    );
</script>
<style scoped></style>

This is my nuxt configuration file:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

export default defineNuxtConfig({
  css: ['~/assets/css/style.css'],
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css'
        },
        {
          rel: 'preconnect', href: 'https://fonts.googleapis.com'
        },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
        {
          href: 'https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap',
          rel: 'stylesheet'
        }
      ],
      script: [
        {
          src: 'https://cdn.anychart.com/releases/v8/js/anychart-base.min.js'

        },
        {
          src: 'https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js'
        }
      ]
    }
  },
  build: {
    transpile: ['vuetify']
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
    '@nuxt/content'
  ],/*
  content: {
    documentDriven: true
  }, */
  vite: {
    vue: {
      template: {
        transformAssetUrls
      }
    }
  },
  runtimeConfig: {
    public: {
      imageBasePath: '~/assets/img'
    }
  }
});

Using window objects to define javascript variables for Chrome extension

I am trying to create a dynamic overlay for a browser game that will update team information as it updates within the game. The function that is used in the game to do so is:

updateGameInfo()

I have the HTML/CSS/JS defined, so for team member name, it would be

const memberName = document.getElementById("name")

And I would like to change it after updateGameInfo() is complete to be

memberName.textContent = window.gameInfo.party[0].name

How can I create this function to automatically run after updateGameInfo() and get the relevant information to change the variables?

Hamburger button is not expanding when pressed

On the mobile view, I turn my nav bar into a collapsible menu, however for some reason the javascript code is not working.

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const profileIcon = document.querySelector(".profile-icon");

hamburger.addEventListener("click", () => {
 console.log("Hamburger clicked!"); 
 navLinks.classList.toggle("active");
 profileIcon.classList.toggle("active");
});   

Here is the css for creating the three line menu button:


.hamburger {
  display: none; /* Hidden by default; shown on mobile */
  cursor: pointer;
  flex-direction: column;
  gap: 0.3rem;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

/* Responsive Styles for Mobile */
@media screen and (max-width: 768px) {
 

  .hamburger {
      display: flex; /* Show hamburger on mobile */
  } 
}

Here is the website in question: https://enmasantos.github.io/vitality_vista/

Withdrawal BYBIT API

I’m trying to withdraw funds from my wallet via the BYBIT API, but it ends with an error:

{
  rateLimitApi: undefined,
  retCode: 131002,
  retMsg: 'Withdraw address chain or destination tag are not equal',
  result: {},
  retExtInfo: {},
  time: 1730925459032
}

Mine code:

const { RestClientV5 } = require('bybit-api');

const client = new RestClientV5({
  testnet: false,
  key: 'api_key', // stub, for example
  secret: 'secret_key', // stub, for example
});

client
  .submitWithdrawal({
    coin: 'USDT',
    chain: 'ETH',
    address: '0xfa3c24a644b03d20833866f59c539ec4794891ab',
    amount: '10',
    timestamp: Date.now(),
    forceChain: 0,
    accountType: 'FUND', // FUND, UNIFIED
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Here is an example from the documentation:

Documentation: https://bybit-exchange.github.io/docs/v5/asset/withdraw

const { RestClientV5 } = require('bybit-api');

const client = new RestClientV5({
  testnet: true,
  key: 'apikey',
  secret: 'apisecret',
});

client
  .submitWithdrawal({
    coin: 'USDT',
    chain: 'ETH',
    address: '0x99ced129603abc771c0dabe935c326ff6c86645d',
    amount: '24',
    timestamp: 1672196561407,
    forceChain: 0,
    accountType: 'FUND',
  })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

Response example (from docs):

{
    "retCode": 0,
    "retMsg": "success",
    "result": {
        "id": "10195"
    },
    "retExtInfo": {},
    "time": 1672196571239
}

How can this problem be solved? Thanks in advance for your advice, ladies and gentlemen!

I tried changing networks: TON, TRX, but still the same error…

Converting axios to useFetch Nuxt 3

The problem i am encountering is that i started a project , and i build the entire API call using axios. Since i am in Nuxt 3 , i am trying to convert it to useFetch. I am encountering a problem , and one is that when i reload the page , the data is not fetched again when i am using useFetch.

This is my ApiService.js (converted to useFetch) :

import { useUserStore } from "~/store/user";
import qs from "qs";

class ApiService {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }

    async apiRequest(method, url, data = null, options = {}, returnData) {
        const store = useUserStore();
        const requestUrl = `${this.baseURL}/${url}`;
        const params = options.params ? `?${qs.stringify(options.params, { arrayFormat: 'comma' })}` : '';

        try {
            // Make the request using useFetch
            const { data: responseData, error, status } = await useFetch(`${requestUrl}${params}`, {
                method,
                body: data,
                credentials: options.withCredentials ? 'include' : 'omit',
                headers: {
                    'Content-Type': 'application/json',
                },
            });

            if (error.value) {
                // Handling specific error statuses based on error.value
                const errorStatus = error.value.response?.status || 500;
                const errorReturnObj = {
                    status: errorStatus,
                    message: error.value.response?._data || error.value.message,
                };

                // Handling specific error codes
                if (errorStatus === 401) {
                    console.error("Expired token");
                    store.showSnackbar("Token-ul a expirat/Access neautorizat!");
                    navigateTo('/user/logout');
                } else if (errorStatus === 400) {
                    return returnData ? errorReturnObj : -2;
                } else if (errorStatus === 515) {
                    return returnData ? errorReturnObj : -3;
                } else if (errorStatus === 404) {
                    return returnData ? errorReturnObj : -4;
                }
                console.error(error.value.message || error.value.response?.status);
                return 0;
            }

            console.log("data parameter",data)
            console.log("responseData",responseData.value)


            // Success response handling
            const returnObj = {
                status: status,
                message: responseData.value
            };

            if (returnData === null) {
                return returnObj;
            }
            return returnData ? responseData.value : 1;

        } catch (error) {
            console.error(error);
            return 0;
        }
    }

    get(url, returnData = false, isBlob = false, isAnonymous = false, params = {}) {
        const options = {
            params,
            ...(isAnonymous ? { withCredentials: false } : { withCredentials: true }),
        };
        return this.apiRequest("GET", url, null, options, returnData);
    }

    post(url, data, returnData = false, isAnonymous = false) {
        const options = isAnonymous ? {} : { withCredentials: true };
        return this.apiRequest("POST", url, data, options, returnData);
    }

    put(url, data, returnData = false, isAnonymous = false) {
        const options = isAnonymous ? {} : { withCredentials: true };
        return this.apiRequest("PUT", url, data, options, returnData);
    }

    delete(url, data = null, returnData = false, isAnonymous = false) {
        const options = isAnonymous ? {} : { withCredentials: true };
        return this.apiRequest("DELETE", url, data, options, returnData);
    }
}

export default ApiService;

This is Products.js :

import ApiService from "./ApiService"

class ProductsService extends ApiService{
    constructor(){
        super("http://localhost:5043/api/product")
    }

    /**
     * @param {int?} pageNumber [The page number of with the current products]
     * @param {Array<string>} productTypes [The array of product types to filter]
     * @param {Array<string>} colorTypes [The array of color types to filter]
     * @param {Array<string>} widthRange [The array of product dimensions width to filter]
     * @param {Array<string>} heightRange [The array of product dimension height to filter]
     * @param {Array<int>} priceRange [The array of product price to filter]
     * @param {boolean} reverseFace [The type of reverse face (true or false)]
     * @returns {List} [The list with a limit of 15 products]
     */
    
    getProductsForUsers(pageNumber , productTypes , colorTypes, productDimensions, productPrice , productReverseFace, currency){
       
        const params = {
            productTypes,
            colorTypes,
            productDimensions,
            productPrice,
            productReverseFace
        }
        return this.get(`paginated/${pageNumber}/${currency}` , true , false , true , params) 
    }

    /**
     * @param {NONE}
     * @returns {Object
     * {
     *      filterColors : IMutableHashSet(ReadOnly),
     *      filterProductTypes : IMutableHashSet(ReadOnly)
     * }}
     *  [The class with the filter options - color and productTypes]
     */
    
    getFilterOptions(currency = "RON"){
        return this.get(`filterOptions/${currency}` , true , false , true) 
    }

    /**
     * @param {String} productCode [The product code]
     * @param {String} productType [The type of the product]
     * @param {String} currency [The current currency : RON or EUR]
     * 
     * @returns {Object{
     *      - integer : 1 or 0 (depends on succes)
     *      - productData : class (null if product has not been found )
     * }}
     */

    getProductData(productCode , productType, currency){
        console.log('IN PRODUCTS.JS',this.get(`${productCode}/${productType}/${currency}` , true , false, true))
        return this.get(`${productCode}/${productType}/${currency}` , true , false, true)
    }

    /**
     * @param {FormData} form [The form with the review info]
     * @returns {KeyValuePair<int,string>} [The info about the succefullness of the request]
     */

    postProductReview(form){
        return this.post('postReview' , form , false , false);
    }
}

export default new ProductsService()


And here i call getProductData in my .vue file:


const getProductData = async () => {
    const response = await productService.getProductData(productCode,productType , selectedCurrency.value);
    console.log("IN GET PRODUCT DATA" , response)
    if(response === -4){
        navigateTo(localePath('/error/notFound'))
    }else if(response === -2){
        navigateTo(localePath('/error/generalError'))
    }

    Object.assign(product.value , response)
    console.log(product.value)
    if (product.value.culoriProdus && product.value.culoriProdus.length > 0) {
        // Set the default color as the first color available
        selectedColor.value = {
           name : product.value.culoriProdus[0].numeCuloareDto,
           colorCode: product.value.culoriProdus[0].codCuloareDto
        };
        activeButtonColors.value = 0;
        filterImagesByColor(selectedColor.value.name);
    }
    if(product.value.dimensiuniProdus && product.value.dimensiuniProdus.length > 0){
        dimensionsLength.value = product.value.dimensiuniProdus.length;
        selectedDimension.value = { 
            width: product.value.dimensiuniProdus[0].lungimeDto,
            height: product.value.dimensiuniProdus[0].latimeDto,
            price :  product.value.dimensiuniProdus[0].pretDto,
            priceDiscount:  product.value.dimensiuniProdus[0].pretRedusDto
        }
        activeButtonDimensions.value = 0;
    }
    if(product.value.reviewsProdus){
        reviewsLen.value = product.value.reviewsProdus.length
    }
}

/* missing code */

onBeforeMount(async () => {
    getCurrentLocale()
   await getProductData()
  
})
</script>

multiple incarnations of “same” variable in JS local scope – chrome debugger

Have a look a this loop in javascript, and what is showing in the debugger. for some reason there are 4 occurrences of the item variable, however there should be only 1 (unless it seems I’m missing something).

You can see on the right side filteredAttributes.values is an array with 1 object. It gets sorted and mapped, the first time into the inner loop, when setting a breakpoint reveals unexpected values.

What is going on here?!

multiple variable occurrences

{filteredAttribute?.values.length > 0 ? (
  filteredAttribute?.values
    .sort((a, b) => a.fmOrder - b.fmOrder)
    .map((item, i) => {

PayPal Button Not Responding After Clicking “Pay” – React Integration

I’m integrating PayPal into my React app using the @paypal/react-paypal-js library, and I’m encountering an issue. When I click the “Pay” button after entering all payment details, nothing happens—the payment process doesn’t proceed, and no confirmation or error message appears.

The rest of the PayPal setup, including creating the order, works without issues. However, the final “Pay” button click doesn’t trigger any action, and there are no visible errors. I’ve tried several troubleshooting steps, but I’m not sure what else to check.

Here’s the code for my PayPal component:

import { clientId, ROOT_URL } from "../utils/constants";
import { useState } from "react";

const PayPalComponent = ({ amount, handlePayment }) => {
const [orderId, setOrderId] = useState(null);

return (
  <PayPalScriptProvider options={{ "client-id": clientId, currency: "USD", components: "buttons,funding-eligibility" }}>
    <div>
      <h2>Complete Payment</h2>
      <PayPalButtons
        fundingSource={FUNDING.CARD}
        createOrder={async (data, actions) => {
          try {  
            const order = await fetch(
              `${ROOT_URL}/paypal/create-order`,
              {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({ amount: amount }),
              }
            );  
            const result = await order.json();
            if (result.status === "success") {
              setOrderId(result.data.id);
              return result.data.id;
            }
          } catch (error) {
            console.error("Error creating order:", error);
            throw error;
          }
        }}
        onApprove={async (data, actions) => {
          try {
            if (orderId) {
              const order = await fetch(
                `${ROOT_URL}/paypal/capture-order/${orderId}`,
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                }
              );  
              const result = await order.json();
              console.log(result, "Results");
              if (result.status === "success") {
                handlePayment(true, orderId, data.payerID);
              }
            }
          } catch (error) {
            console.error("Error capturing order:", error);
            throw error;
          }
        }}
        onError={(err) => {
          console.error("Payment Error:", err);
        }}
        style={{ layout: "vertical" }}
        funding={{ disallowed: [FUNDING.PAYPAL] }}
      />
    </div>
  </PayPalScriptProvider>
);
};

export default PayPalComponent;```


Troubleshooting Steps I’ve Tried
Checked Browser Compatibility:

I tried different browsers and cleared the cache and cookies to ensure there were no issues caused by outdated or cached data.
I also checked that my browser's pop-up blocker was disabled to ensure that PayPal could open necessary pop-ups for payment.
Checked Developer Console for JavaScript Errors:

There are no JavaScript errors in the console when I click the "Pay" button, which makes it difficult to debug the issue.
PayPal Account Settings:

Verified that my PayPal account is active and that it supports the currency being used in the app.
Tried Different Devices and Browsers:

Tested on multiple devices and browsers to ensure the issue wasn't device-specific, but the problem persists.
Updated PayPal SDK:

I confirmed that my @paypal/react-paypal-js package is up-to-date to avoid issues due to outdated code.
Checked Network and Internet Connection:

Verified that the internet connection is stable during testing, so network interruptions are unlikely to be the cause.

Cannot find module or its corresponding type declarations in a deno project

I recently started exploring deno. I wanted to run a script and write data into a file and save it in a folder. In that case I used fs-extra. Even if I install the package, i am getting the error “Cannot find module ‘npm:fs-extra’ or its corresponding type declarations

Installation command I used:
deno install npm:fs-extra

deno.json file:

  "tasks": {
    "dev": "deno run --watch main.ts"
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@1",
    "fs-extra": "npm:fs-extra@^11.2.0",
    "mongodb": "npm:mongodb@^6.10.0"
  }
}

I imported it to the main.ts like this:
import fs from 'npm:fs-extra';

I tried using this way as well:
import fs from 'fs-extra';

But neither way worked out

Variables in JavaScript

I’m just wondering if it’s possible to exclude the “var” part when creating a variable in JavaScript. For example if I were to type “var greeting = hi” could I just say “greeting = hi” like in Python?
Thanks.

Dataform js publish() dependency declaration doesn’t work

I have a source file definitions/source/tiktok/advertiser.sqlx with the following declaration:

config {
    type: "declaration",
    schema: "tiktok_ads",
    name: "advertiser",
    description: "All advertising accounts from Tiktok"
}

I am trying to define a table with javascript using the below:

publish("tiktok2", {
    schema: "sample_schema",
    type: "table",
    dependencies: (["tiktok_ads.advertiser"]),
    description: "table description"
}).query(ctx => `
      SELECT
        advertiser.name AS campaign_advertiser
      FROM
        tiktok_ads.advertiser advertiser
`)

However the dependendencies propery is generating an error (Missing dependency detected: Action "the-brand-usa.sample_schema.tiktok" depends on "{"name":"tiktok_ads.advertiser","includeDependentAssertions":false}" which does not exist).

I know the table exists and the source file is declared properly because if I replace the query to use ref() then METADATA displays the dependency properly and the whole workspace compiles properly without errors.

      SELECT
        advertiser.name AS campaign_advertiser
      FROM
        ${ctx.ref("tiktok_ads", "advertiser")} advertiser

No task registered for key ReactNativeFirebaseMessagingHeadlessTask react native expo 51 with expo route

Question: Hi, I am using React Native with Expo SDK 51 and Expo Router. For notifications, I am using FCM v1. I receive notifications when my app is in the foreground, background, and even when it’s in a killed state. Additionally, when I click on a notification, it redirects me to the specific chat or post as expected.

However, I am facing an issue when my app is in a killed state. If I receive multiple notifications (e.g., 5 notifications) and try to open each one individually, nothing happens. But when I collapse all the notifications and then click on them, the app opens, although it fails to route to the intended destination.

Could someone please help me resolve this issue?

My project structure is like this:

app/

|-- index.jsx

|-- _layout.jsx

My index.jsx is like this:

const index = () => {
  return <></>;
};

export default index;

And this is my _layout.jsx

import * as Notifications from "expo-notifications";
import messaging from "@react-native-firebase/messaging";
import React, { useEffect, useState } from "react";
import { Stack, useRouter } from "expo-router";

Notifications.setNotificationHandler({
  handleNotification: async () => {
    const isOnChatPage = useAppStateStore.getState().isOnChatPage;
    return {
      shouldShowAlert: !isOnChatPage,
      shouldPlaySound: true,
      shouldSetBadge: false,
    };
  },
});

const HomeComponents = () => {
  const navigation = useRouter();
  const [response, setResponse] = useState({});

  useEffect(() => {
    const notificationOpenedAppListener = messaging().onNotificationOpenedApp(
      (remoteMessage) => {
        const screenType = remoteMessage?.data?.type;
        const chatId = remoteMessage?.data?.chat_id;
        const groupReplyId = remoteMessage?.data?.group_reply_id;

        if (screenType === "personal_chat" && chatId) {
          navigation.navigate(`/homescreen/chats/personalchat/${chatId}`);
        } else if (screenType === "group_reply" && groupReplyId) {
          navigation.navigate({
            pathname: "/homescreen/chats/groups/replayshow",
            params: { id: groupReplyId },
          });
        }
      }
    );

    const getInitialNotificationListener = messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        if (remoteMessage) {
          const screenType = remoteMessage?.data?.type;
          const chatId = remoteMessage?.data?.chat_id;
          const groupReplyId = remoteMessage?.data?.group_reply_id;

          if (screenType === "personal_chat" && chatId) {
            navigation.navigate(`/homescreen/chats/personalchat/${chatId}`);
          } else if (screenType === "group_reply" && groupReplyId) {
            navigation.navigate({
              pathname: "/homescreen/chats/groups/replayshow",
              params: { id: groupReplyId },
            });
          }
        }
      });

    const setBackgroundMessageHandlerListener = messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      setResponse(remoteMessage);
      const chatId = remoteMessage.data.chat_id;
      const screenType = remoteMessage.data.type;
      const groupReplyId = remoteMessage?.data?.group_reply_id;

      if (screenType === "personal_chat" && chatId) {
        navigation.navigate(`/homescreen/chats/personalchat/${chatId}`);
      }
      if (screenType === "comment") {
        navigation.navigate(`/homescreen/post`);
      }
      if (screenType === "group_reply" && groupReplyId) {
        navigation.navigate({
          pathname: "/homescreen/chats/groups/replayshow",
          params: { id: groupReplyId },
        });
      }

      // Manually trigger a local notification
      await Notifications.scheduleNotificationAsync({
        content: {
          title: remoteMessage.notification.title,
          body: remoteMessage.notification.body,
          data: remoteMessage.data,
        },
        trigger: null, // Show immediately
      });
    });

    const onMessageListener = messaging().onMessage(async (remoteMessage) => {
      try {
        setResponse(remoteMessage);
        // Schedule notification to display
        await Notifications.scheduleNotificationAsync({
          content: {
            title: remoteMessage.notification.title,
            body: remoteMessage.notification.body,
            data: remoteMessage.data,
          },
          trigger: null, // Show immediately
        });
      } catch (error) {
        console.error("Error:", error);
      }
    });

    // Handle notification clicks
    const notificationResponseReceivedListener =
      Notifications.addNotificationResponseReceivedListener(() => {
        try {
          console.log(response);
          const screenType = response?.data?.type;
          const chatId = response?.data?.chat_id;
          const postId = response?.data?.post_id;
          const groupReplyId = response?.data?.group_reply_id;

          if (screenType === "personal_chat" && chatId) {
            navigation.navigate(`/homescreen/chats/personalchat/${chatId}`);
          }
          if (screenType === "comment" && postId) {
            navigation.navigate(`/homescreen/post/${postId}`);
          }
          if (screenType === "group_reply" && groupReplyId) {
            navigation.navigate({
              pathname: "/homescreen/chats/groups/replayshow",
              params: { id: groupReplyId },
            });
          }
        } catch (error) {
          console.error("Notification click error:", error);
        }
      });

    return () => {
      notificationOpenedAppListener();
      onMessageListener();
    };
  }, [navigation, response]);

  return <></>;
};

export default HomeComponents;

Issues:

  1. When the app is in a killed state and a new message arrives, clicking on the notification doesn’t open the app.

  2. When clicking on the notification, I’m getting the error: “No task registered for key ReactNativeFirebaseMessagingHeadlessTask”.

Could someone please guide me on how to resolve these issues?

Redirect keyword search result to a url

I am learning website building, html, css, javascript. I want to know how to redirect a search result to a url on click event.
I have a simple local website, not online, just on my pc.
I have few pages on it, with some kind of instructions on each page.
There is no back end, or server or database connected. So search only looks at avaialbe hard coded keywords in js file.

I built a search bar with autocomplete.
When I start typing in search box, possible matches show up in result box.

search result box

Results are coming from hard coded keywords in javascript file:

let availableKeywords = [
    'how to learn cooking',
    'hot to filter water',
    'how to make a soup',
    'how to use a mixer',
    'how to make flour',
    'how to write a recipe',
    'how to instal light bulb',
    'how to bake a cookie',
    'how to replace hard drive',
];

HTML Code for search box:

@*  Search bar area *@
<div class="search-box">
    <div class="row">
        <input type="text" id="input-box" placeholder="Search..." autocomplete="off" />
        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
    </div>
   
    <div class="result-box">
        @*  this should be populated by script after searching keywords *@
    </div>
</div>

My JS function to check input box and match to keywords:

inputBox.onkeyup = function () {
    let result = [];
    let input = inputBox.value;
    /*if not zero or null*/
    if (input.length) {
        /* filter will match keywords defined above */
        result = availableKeywords.filter((keyword) => {
            return keyword.toLowerCase().includes(input.toLowerCase());
        });
        /* this is for debugging, it will be displayed in browser-console area */
        console.log(result);
    }
    /* show matches in results box */
    display(result);
    
    if (!result.length) {
        resultsBox.innerHTML = '';
    }
}

/* this will populate drop down box under search field if any matches */
function display(result) {
    const content = result.map((list) => {
        return "<li onclick=selectInput(this)>" + list + "</li>";
    });
    /* insert result list in html page */
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

I would like to be able to redirect to a particular page/url when user clicks on one of the search results. For example if I click on “how to make soup”, I want the browser to go to //..makesoup.html

I do not know how to do that.
I suspect I need to create a map or dictionary that will map keywords to a url, something that should look like this (i guess):
The code below probably has wrong syntaxis, so my bad.

let keywordsWitUrl = [
    { 'how to learn cooking': "learnCooking.html"},
    { 'hot to filter water': "filterWater.html"},
    { 'how to make a soup': "makeSoup.html"},
    { 'how to use a mixer': "useMixer.html"},
    { 'how to make flour': "makeFlour.html"},
    { 'how to write a recipe': "writeRecipe.html"},
    { 'how to instal light bulb': "instalBulb.html"},
    { 'how to bake a cookie': "bakeCookie.html"},
    { 'how to replace hard drive': "replaceHD.html"}
];

I dont know how to do that in javascript and I can not find any help online..

How can I make my search to only search keywords and not associated urls ?
How can I bind keywords/full name of the instruction to a url?

I already have “on click” event, right now it just inserts the full name of instruction into the search box, and clears the result box.
How do I make page change to correct url when I click on some search result?

/* click event, display full article name and clear result box */
function selectInput(list) {
    inputBox.value = list.innerHTML;
    resultsBox.innerHTML = '';
}

I am not even sure where to start..
Any advice would help.
Thank you.