Category: javascript

In my web app, for reasons I don’t know yet, whenever I hold down a key for about more than half a second, (more reliably replicable when held for 2 seconds), the next key I press (given that I press it while holding the other key down, and rapidly unpress the previous key), the new key pressed will fire twice, without the repeat property being true. this is the JavaScript code I use, which requires minimal HTML boilerplating

window.bin = false;
window.events = [];
document.addEventListener("mousedown", ()=>{
    console.log("start listening for keys");
    document.addEventListener("keydown", e=>{
        if (e.repeat) return;
        console.log(e);
        events.push(e);
        console.log(bin = !bin); //make it easier to tell that they are different events firing?
    });
}, {once: true});

Here’s a small diagram of what I’m doing with my keyboard. The X axis represents the progression of time, and the Y axis serves solely to show where key pressed overlap.
Each Keypress would last 2 seconds to get the most accuracy of replication.

X [ "A" Key ]     [ "C" Key ]
X         [ "B" Key ]     [ "D" Key ]

if I was to emulate this diagram in keypresses, My browser would display the following in the log

KeyBoardEvent properties that are the same:

isTrusted: true
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
--------------------
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isComposing: false
--------------------
--------------------
location: 0
metaKey: false
repeat: false
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: HTMLBodyElement
target: HTMLBodyElement
--------------------
type: "keydown"
view: Window

Simplified Log

> KeyboardEvent {code: "KeyA", key: "a", keyCode: 65, which: 65, timestamp: 6884.599999997765} 
> true
> KeyboardEvent {code: "KeyB", key: "b", keyCode: 66, which: 66, timestamp: 8024.89999999851} 
> false
> KeyboardEvent {code: "KeyB", key: "b", keyCode: 66, which: 66, timestamp: 8324.89999999851} 
> true
> KeyboardEvent {code: "KeyC", key: "c", keyCode: 67, which: 67, timestamp: 9139.699999999255}
> false
> KeyboardEvent {code: "KeyC", key: "c", keyCode: 67, which: 67, timestamp: 9439.800000000745} 
> true
> KeyboardEvent {code: "KeyD", key: "d", keyCode: 68, which: 68, timestamp: 10238.5} 
> false
> KeyboardEvent {code: "KeyD", key: "d", keyCode: 68, which: 68, timestamp: 10539.699999999255} 
> true

My Browser is Chrome Beta 127.0.6533.94 on ChromeOS. Sorry in advance if the question gives too much unnecessary information, or if this is just a bug.

I have cloned this repository: https://github.com/Variant3d/launch-examples/tree/main/babylonJS

And am trying to get it to work. It should work just like this page: https://demos.launchar.app/babylonJS/

So I set up CloudFlare to SSL tunnel so I could serve it on https, then when I tried running the application, it is stuck on loading. The first page is good, but when I click OPEN in the top right, it just is stuck on a spinning wheel and times out after 30 seconds. See here in images:

Any idea why this would get stuck and wouldn’t load the BabylonJS page? Also I edited main.js including console.log("MAIN JS at least CALLED") and it doesn’t appear to get logged in the console. Is the main.js in the src file being loaded?

I’m trying to use two separate map functions to loop through an array called quarterbacks and display their name and image inside a card. I had this code block working with just names in cards displaying the names as links that went to each individual player’s page. Now that I am trying to implement the images though it seems it’s not fetching the images the same way it did with just the names.

This is the code block that worked with just the names:

import { Link } from "react-router-dom";
import _navbar from "../../NavBar/navbar";
import React, { useEffect, useState } from "react";
import styles from "./card.module.css";

const quarterbacks = [3139477, 4241479, 3918298, 3915511, 2577417];
  const fetchFullName = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=${encodeURIComponent(id)}`,
      {
        headers: {
          "x-rapidapi-key": "secret key",
          "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
        },
      },
    );
    if (!res.ok) {
      throw new Error(`Name lookup for id '${id}' failed`);
    }
    return (await res.json()).athlete.fullName;

  };
  
  // returns an array of {id, name} objects
  const fetchFullNames = async (ids) =>
    Promise.all(ids.map(async (id) => ({ id, name: await fetchFullName(id) })));

  export default function _quarterbacksPage() {
    const [names, setNames] = useState([]);
  
    useEffect(() => {
      fetchFullNames(quarterbacks).then(setNames).catch(console.error);
    }, []);
  
    return (
      <>
        <_navbar />
          {names.map(({id, name }) => (
            <div className={styles.card} key={id}>   
              <Link className={styles.cardText} to={`/quarterback/${id}`}>
                    {name}
              </Link>
            </div>
          ))}
      </>
    );
  }

This is the code block that’s not working giving me the error:

import { Link } from "react-router-dom";
import _navbar from "../../NavBar/navbar";
import React, { useEffect, useState } from "react";
import styles from "./card.module.css";

const quarterbacks = [3139477, 4241479, 3918298, 3915511, 2577417];
  const fetchFullName = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-fullinfo?id=${encodeURIComponent(id)}`,
      {
        headers: {
          "x-rapidapi-key": "secret key",
          "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
        },
      },
    );
    if (!res.ok) {
      throw new Error(`Name lookup for id '${id}' failed`);
    }
    return (await res.json()).athlete.fullName;

  };
  
  // returns an array of {id, name} objects
  const fetchFullNames = async (ids) =>
    Promise.all(ids.map(async (id) => ({ id, name: await fetchFullName(id) })));


  const fetchImage = async (id) => {
    const res = await fetch(
      `https://nfl-api-data.p.rapidapi.com/nfl-ath-img?id=${encodeURIComponent(id)}`,
        {
          headers: {
            "x-rapidapi-key": "secret key",
            "x-rapidapi-host": "nfl-api-data.p.rapidapi.com",
          },
        },
      );
      if(!res.ok) {
        throw new Error(`Image lookup for id '${id}' failed`);
        
      }
      return (await res.json()).image.href;
    
  }
  const fetchImages = (ids) => {
    Promise.all(ids.map(async (id) => ({ image : await fetchImage(id)})));
  } 

  
  

  export default function _quarterbacksPage() {
    const [names, setNames] = useState([]);
    const [images, setImages] = useState([]);
  
    useEffect(() => {
      fetchFullNames(quarterbacks).then(setNames).catch(console.error);
      fetchImages(quarterbacks).then(setImages).catch(console.error);
    }, []);
  
    return (
      <>
        <_navbar />
          {names.map(({id, name }) => (
            <div className={styles.card} key={id}>   
              {images.map(({image}) => (             
                <img src={image} alt="player picture"/>
              ))}
              <Link className={styles.cardText} to={`/quarterback/${id}`}>
                    {name}
              </Link>
            </div>
          ))}
      </>
    );
  }

I am using lemonade.js as signature pad for my webpage The draw event works but I don’t know how to save the output as an image file to my server, via ajax post.

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/signature/dist/index.min.js"> 
</script>
<div id="root"></div>
<script>
// Get the element to render signature component inside
const root = document.getElementById("root");
// Call signature with the root element and the options object
Signature(root, {
     value: [],
     width: 400,
     height: 200,
     instructions: "Please sign this document"
 });
 </script>
 </html>

I have copied an youtube tutorial of how to make an “autocomplete search bar” – Made By GreekStack, Everything is working fine I was just windering if there was an way to actually redirect the user to an different HTML page.

I would like to make my search bar be able to redirect users to an different HTML page. This is made with Javascipt, HTML, and CSS.

Here Is My Javascript:

let avaliableKeywords = [
    '6TEST6',
    '5TEST5',
    '4TEST4',
    '3TEST3',
    '2TEST2',
    '1TEST1',
];

const resultsBox = document.querySelector(".result-box")
const inputBox = document.getElementById("input-box")

inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter((keyword)=>{
         return   keyword.toLowerCase().includes(input.toLowerCase());
    });
    console.log(result);
    }
    display(result);

    if(!result.length){
        resultsBox.innerHTML = '';
    }
}

function display(result){
    const content = result.map((list)=>{
        return "<li onclick=selectInput(this)>" + list + "</li>";
    });

    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}


function selectInput(list){
    inputBox.value = list.innerHTML
    resultsBox.innerHTML = '';
}

rc/middleware/Cloudinary-Middleware/cloudinary.service.ts:8:36 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

8 async uploadImages(files: multer.File[] | multer.File): Promise<(UploadApiResponse | UploadApiErrorResponse)[]> {

                                 ~~~~

src/middleware/Cloudinary-Middleware/cloudinary.service.ts:8:52 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

8 async uploadImages(files: multer.File[] | multer.File): Promise<(UploadApiResponse | UploadApiErrorResponse)[]> {

                                                 ~~~~

src/products/products.controller.ts:24:87 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

24 async postProduct(@Body() body: addProductDto, @UploadedFiles() files: Array<multer.File>) {

                                                                                     ~~~~

src/products/products.controller.ts:66:120 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

66 async updateProduct(@Param(‘id’) id: string, @Body() body: updateProductDto, @UploadedFiles() files?: Array<multer.File>) {

                                                                                                                      ~~~~

src/products/products.service.ts:20:42 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

20 async addImagesforUrls(files: multer.File[]): Promise<string[]> {

                                        ~~~~

src/products/products.service.ts:43:71 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

43 async addProduct(addProductDto: addProductDto, prodImages: multer.File[] ) : Promise {

                                                                     ~~~~

src/products/products.service.ts:95:100 – error TS2694: Namespace ‘multer’ has no exported member ‘File’.

95 async updateProduct(updateProductDto: updateProductDto, productId: string, prodImages?: multer.File[]): Promise {

                                                                                                  ~~~~

The only issues is it’s running on my teammates backend serves yet on mine its throwing theses errors

I have tried to run

yarn add @types/multer —dev

Tried to add
Types:[“node”,”multer”]
to my tsconfig.json

I eventually added
“TypesRoot”: [“node_modules/@types”]

But out of 7 errors am left with 6

I double checked iff we using the same typescript version with my teammates we have same package.json. crazy l that am the only one with thse errors

I have a really basic code

const response = await fetch('/api/user');
const user = await response.json();

And from Sentry I see the following error undefined is not an object (evaluating 'response.json')

I am unable to reproduce it, seems like it happens only on iPhone on any browser. I tried on iPhone and I have no issue.

Furthermore, I can just add a condition to check typeof response === 'undefined' but I would like to understand, from the fetch documentation it should never return undefined

I am upgrading my cloud functions on firebase from the first generation to the secondI use defineSecret to get a secret I have created on Google cloud, I need to deploy the functions, but the process doe not complete and givees me this error:

Error: Cannot access the value of secret “private_key” during function deployment. Secret values are only available at runtime.

this is the code of my function:

import * as admin from "firebase-admin";
import {defineSecret, defineString} from "firebase-functions/params";
const clientEmail = defineString("client-email");
const privateKey= defineSecret("private_key");
const projectId = defineString("project_key");
admin.initializeApp({
    credential: admin.credential.cert({
        privateKey: privateKey.value().replace(/\n/g, "n"),
        projectId: projectId.value(),
        clientEmail: clientEmail.value(),
    }),
    databaseURL: "myUrl",
});

const db = admin.firestore();
const realtime = admin.database();
export {admin, db, realtime};

what the error says is obvious, but I do not know what is wrong with my code; thanks in advance

I have a node JS program that works fine when testing with Postman it works fine. When the customer tries to connect through Apigee that get a 503 services unavailable.

Expect the customer to run a GET method and return database data.

I’ve implemented the intercepting route in my application, and it’s working fine. However, I want to display only the modal and not the page on reload. The content I’m seeing online all explains how to implement this using just the intercepting and the parallel route.

Is there a way to create a modal with a shareable link without using the parallel and intercepting route? I want to be able to share a link that opens the modal directly, without displaying the entire page.

My current setup uses the intercepting route, which works well, but I want to find a solution that avoids the need for the parallel route.

I’ve implemented the intercepting route, but I want to show the modal on reload instead of the full page. The existing solutions use parallel and intercepting routes, which I want to avoid. How can I create a shareable modal link without the parallel and intercepting routes?

what I want is to show a modal alert mode when the patient has allergies and I am handling events
the error that I get

Mi modal

<div>
    <div class="modal fade" wire:ignore.self id="allergieAlertModal" tabindex="-1" aria-labelledby="md-add-fileLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="md-add-fileLabel">{{ __('Allergies') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('openAllergieAlertModal', function() {
                try {
                    var allergieAlertModal = new bootstrap.Modal(document.getElementById(
                        'allergieAlertModal'), {
                        keyboard: false
                    });
                    allergieAlertModal.show();
                } catch (error) {
                    console.error('Error opening allergieAlertModal:', error);
                }
            });
        });
    </script>
@endpush

the class my modal

<?php

namespace AppHttpLivewireMedicalsClinicalHistoriesComponents;

use LivewireComponent;

class AllergiesAlertModal extends Component
{
    protected $listeners = ['medicals.clinical-histories.components.alert' => 'openAllergiesAlert'];

    public function openAllergiesAlert()
    {
/*aqui mando un evento al frontend y lo escucho en mi modal*/
        $this->dispatchBrowserEvent('openAllergieAlertModal');
    }

    public function render()
    {
        return view('livewire.medicals.clinical-histories.components.allergies-alert-modal');
    }
}

I am working with Laravel and Livewire using nested components.

public function mount($patientId)
    {
        $this->updateView = false;

        $this->patient = Client::query()
            ->with('patientData')
            ->find($patientId);

        if (!$this->patient) {
            redirect()->route('medicals.patients.index');
        }

        if ($this->patient->patientData->allergies) {
            $this->emit('medicals.clinical-histories.components.alert');
        }
    }

    public function render()
    {
        return view('livewire.medicals.clinical-histories.master');
    }
}

The master class is the parent component that contains my modal

<div>
    @livewire('shared.toolbar', [
        'title' => __('Patients'),
        'tags' => config('components.toolbar.medicals.patients.personalHistories.list.tags'),
    ])

    <div class="row mt-2">
        <div class="col-12">
            <div class="card" style="border-radius:15px">
                <div class="card-body">
                    @livewire('medicals.clinical-histories.components.patient-data', ['patient' => $patient])
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card h-15" style="border-radius:15px">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.vital-signs', ['patient' => $patient, 'historyId' => $historyId])
                        </div>
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.personal-history', ['patient' => $patient])
                        </div>
                        <div class="col-12 col-md-12 col-xl-4">
                            @livewire('medicals.clinical-histories.components.allergies', ['patient' => $patient])
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
                    @if ($updateView)
                        @livewire('medicals.clinical-histories.components.evolution-notes-edit', ['patient' => $patient])
                    @else
                        @livewire('medicals.clinical-histories.components.evolution-notes', ['patient' => $patient])
                    @endif
                </div>
                <div class="col-12 col-md-12 col-lg-6 col-xl-6 mb-2">
                    @livewire('medicals.clinical-histories.components.clinical-histories', ['patient' => $patient])
                </div>
            </div>
        </div>
        @livewire('medicals.clinical-histories.prescriptions.components.prescription-modal', ['patient' => $patient])
    </div>
    @livewire('medicals.clinical-histories.components.cie10-modal')
    @livewire('medicals.clinical-histories.components.allergies-alert-modal')
</div>

the error I want to solve
use a dd (in case you get into the allergy condition);

I’m trying to implement live video streaming using WebSocket in a test HTML page. The backend sends video stream blobs in response to a message “start” , but the video on the frontend only displays the first frame and then freezes. Below is the HTML and JavaScript code I’m using:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Streaming</title>
</head>
<body>
<video id="videoPlayer" controls width="500" height="300"></video>
<script>
    const socketServerUrl = "ws://localhost:8080/ws";
    const socket = new WebSocket(socketServerUrl);
    socket.binaryType = 'arraybuffer';

    let mediaSource = new MediaSource();
    const video = document.getElementById('videoPlayer');
    video.src = URL.createObjectURL(mediaSource);

    let sourceBuffer;

    mediaSource.addEventListener('sourceopen', () => {
        sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');

        sourceBuffer.addEventListener('updateend', () => {
            if (mediaSource.readyState === 'open' && !sourceBuffer.updating && !video.paused) {
                video.play();
            }
        });

        sourceBuffer.addEventListener('error', (event) => {
            console.log('SourceBuffer error:', event);
        });

        // Handling WebSocket data
        socket.onmessage = (event) => {
            const arrayU8 = new Uint8Array(event.data);
            if (arrayU8.length == 0) {
                return;
            }

            sourceBuffer.appendBuffer(arrayU8);
        };
    });

    socket.onerror = (error) => {
        console.log('WebSocket error:', error);
    };

    socket.onclose = () => {
        console.log('WebSocket connection closed.');
    };

    socket.onopen = () => {
        socket.send(JSON.stringify({"action": "start"}));
    };
</script>
</body>
</html>

I tried to accumulate a blob (around 700KB) on the backend and send it, in this case the video plays for a short time, so the problem is not in the video codec.

It’s as if the JavaScript only plays the first blob and then gets stuck. What could be causing the video to freeze after the first frame, and how can I resolve this issue?

PS
the order of sent and received blobs is correct

I am trying to load multiple JSON files from my local directory into Tabulator 6.2 table. I verified JSON files are correctly formatted. And that my Tabulator table fields match JSON file fields and my Tabulator table will load successful a single JSON file. I need to get multiple JSON files from my local SaDirectory to load into my table.

My SaDirectory contains these JSON formatted files:
123.JSON
124.JSON
125.JSON

I tried to load with this ajax code:

var table = new Tabulator("#example-table", {
ajaxURL:"C:UsersDesktopSaDirectory" });
});

Also tried this Tabulator import code:
table.import(“json”, “.json”)

I can load one JSON file, but cannot get tabulator to load all JSON files from
SaDirectory.
Please help. Thanks.

so i’m having this blogger template and i’m trying to reverse engineer it. But,the javascript code is Vague, or encoded to whatever blackmagic it is, could someone help me in removing the curse.

i tried using online DEobfuscators but they don’t seem to work (or i didn’t know how to use them). Here is the code, please tell me if it is possible to decode/unencrypt it.

this is not from “view page source” tab, it’s from the theme editor

Thanks

var _0x266b=['Aw5Uzxjive1m','yM9KEq=='];(function(_0x4158ca,_0x266bee){var _0xc52651=function(_0x54f703){while(--_0x54f703){_0x4158ca['push'](_0x4158ca['shift']());}};_0xc52651(++_0x266bee);}(_0x266b,0x11b));var _0xc526=function(_0x4158ca,_0x266bee){_0x4158ca=_0x4158ca-0x0;var _0xc52651=_0x266b[_0x4158ca];if(_0xc526['FkYCxu']===undefined){var _0x54f703=function(_0x13367c){var _0x2831f1='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',_0x14c797=String(_0x13367c)['replace'](/=+$/,'');var _0x419ce9='';for(var _0x1e3380=0x0,_0xb1f049,_0x2508c9,_0x551808=0x0;_0x2508c9=_0x14c797['charAt'](_0x551808++);~_0x2508c9&&(_0xb1f049=_0x1e3380%0x4?_0xb1f049*0x40+_0x2508c9:_0x2508c9,_0x1e3380++%0x4)?_0x419ce9+=String['fromCharCode'](0xff&_0xb1f049>>(-0x2*_0x1e3380&0x6)):0x0){_0x2508c9=_0x2831f1['indexOf'](_0x2508c9);}return _0x419ce9;};_0xc526['YwRuLT']=function(_0x4299a1){var _0x353001=_0x54f703(_0x4299a1);var _0x3be29b=[];for(var _0xb8f631=0x0,_0x1c77ac=_0x353001['length'];_0xb8f631<_0x1c77ac;_0xb8f631++){_0x3be29b+='%'+('00'+_0x353001['charCodeAt'](_0xb8f631)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x3be29b);},_0xc526['rcVuIR']={},_0xc526['FkYCxu']=!![];}var _0x4766f6=_0xc526['rcVuIR'][_0x4158ca];return _0x4766f6===undefined?(_0xc52651=_0xc526['YwRuLT'](_0xc52651),_0xc526['rcVuIR'][_0x4158ca]=_0xc52651):_0xc52651=_0x4766f6,_0xc52651;};var _0x54f7=function(_0x4158ca,_0x266bee){_0x4158ca=_0x4158ca-0x0;var _0xc52651=_0x266b[_0x4158ca];if(_0x54f7['VsDdtQ']===undefined){var _0x54f703=function(_0x2831f1){var _0x14c797='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',_0x419ce9=String(_0x2831f1)['replace'](/=+$/,'');var _0x1e3380='';for(var _0xb1f049=0x0,_0x2508c9,_0x551808,_0x4299a1=0x0;_0x551808=_0x419ce9['charAt'](_0x4299a1++);~_0x551808&&(_0x2508c9=_0xb1f049%0x4?_0x2508c9*0x40+_0x551808:_0x551808,_0xb1f049++%0x4)?_0x1e3380+=String['fromCharCode'](0xff&_0x2508c9>>(-0x2*_0xb1f049&0x6)):0x0){_0x551808=_0x14c797['indexOf'](_0x551808);}return _0x1e3380;};var _0x13367c=function(_0x353001,_0x3be29b){var _0xb8f631=[],_0x1c77ac=0x0,_0x1b9b37,_0x3a1c43='',_0x138790='';_0x353001=_0x54f703(_0x353001);for(var _0x338226=0x0,_0x2a600a=_0x353001['length'];_0x338226<_0x2a600a;_0x338226++){_0x138790+='%'+('00'+_0x353001['charCodeAt'](_0x338226)['toString'](0x10))['slice'](-0x2);}_0x353001=decodeURIComponent(_0x138790);var _0x5d4234;for(_0x5d4234=0x0;_0x5d4234<0x100;_0x5d4234++){_0xb8f631[_0x5d4234]=_0x5d4234;}for(_0x5d4234=0x0;_0x5d4234<0x100;_0x5d4234++){_0x1c77ac=(_0x1c77ac+_0xb8f631[_0x5d4234]+_0x3be29b['charCodeAt'](_0x5d4234%_0x3be29b['length']))%0x100,_0x1b9b37=_0xb8f631[_0x5d4234],_0xb8f631[_0x5d4234]=_0xb8f631[_0x1c77ac],_0xb8f631[_0x1c77ac]=_0x1b9b37;}_0x5d4234=0x0,_0x1c77ac=0x0;for(var _0x24b657=0x0;_0x24b657<_0x353001['length'];_0x24b657++){_0x5d4234=(_0x5d4234+0x1)%0x100,_0x1c77ac=(_0x1c77ac+_0xb8f631[_0x5d4234])%0x100,_0x1b9b37=_0xb8f631[_0x5d4234],_0xb8f631[_0x5d4234]=_0xb8f631[_0x1c77ac],_0xb8f631[_0x1c77ac]=_0x1b9b37,_0x3a1c43+=String['fromCharCode'](_0x353001['charCodeAt'](_0x24b657)^_0xb8f631[(_0xb8f631[_0x5d4234]+_0xb8f631[_0x1c77ac])%0x100]);}return _0x3a1c43;};_0x54f7['srczUc']=_0x13367c,_0x54f7['pRyhKr']={},_0x54f7['VsDdtQ']=!![];}var _0x4766f6=_0x54f7['pRyhKr'][_0x4158ca];return _0x4766f6===undefined?(_0x54f7['FtZmtn']===undefined&&(_0x54f7['FtZmtn']=!![]),_0xc52651=_0x54f7['srczUc'](_0xc52651,_0x266bee),_0x54f7['pRyhKr'][_0x4158ca]=_0xc52651):_0xc52651=_0x4766f6,_0xc52651;};function onull(){var _0xb1f049=_0xc526;document[_0xb1f049('0x0')][_0xb1f049('0x1')]='';}

Tried asking GPT, using online remove the coding, nothing seemed to work, i really don’t know what to do, if there is something i can know i’d be keen to learn about it.

I want to navigate to a new page depending on what is selected in a Material UI Select component. Here is the
SelectFoodChange.js :

import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function SelectFoodChange() {
  const [page, setPage] = React.useState('');

  const handleChange = (event) => {
    setPage(event.target.value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="demo-simple-select-helper-label">Food Page</InputLabel>
        <Select
          value={page}
          label="Food Page"
          onChange={handleChange}
        >
          <MenuItem value="branded-foods">Branded Foods</MenuItem>
          <MenuItem value="whole-foods">Whole Foods</MenuItem>

        </Select>
      </FormControl>
    </div>
  );
}

Here is Food page which imports SelectFoodPage component:

Food.js

import React from 'react';
import SelectFoodPage from './SelectFoodPage';
function Food() {
  return (
    <div className='Food'>
       {<SelectFoodPage />}
     </div>
  );
}
export default Food;

Here is how I change pages depending on selected item in a burger menu:

App.js

import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Food from './pages/food/Food';

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path='/' element={<Home />}></Route>
          <Route path='/food' element={<Food />}></Route>
        </Routes>
      </Router>
    </>
  )
}

export default App;

How do I navigate to a new page depending on what is selected in a Material UI Select component?