Category: javascript

we are currently doing a redirect from our app to another internal application. The redirect was written from the application level bottle and redirects to another UI using a dynamic ID. Are there are hard fast best practices for redirects? Does doing it at the application level vs NGINX level effects performance? Any first hand knowledge on which approach if any is more efficient/better? application level is what we currently have, and it works. Is there are valid benefit to take the time to redo it at the nginx level? Our Nginx Handles the URL from the application redirect. Diagram:

So i have this calender. You can see below. When the page is first loaded i populate the ‘events’ propertie of the calender which works fine. What i am having problem with is updateing the ‘events’ propertie inside the ‘viewrender’ eventcallback. Is that possible.

Iam using fullcalender version 3.9.

I tried inside the viewrender to set …. this.setevents. But it dont seem to work

    $("#request_calender").fullCalendar({
    eventOverlap: true,
    selectable: true,
    views: {
        listDay: {
            buttonText: 'Custom View',
        },
        agendaWeek: {
            columnFormat: 'ddd D/M'
        }
    },
    slotLabelFormat: 'H:mm',
    customButtons: {
        toggleWeekends: {
            text: 'show weekends',
            click: function() {
                toggleWeekends();
            },
        }
    },
    header: {
        left: "prev,next today toggleWeekends unBooked",
        center: "title",
        right: "agendaDay,agendaWeek,month,listWeek"
    },
    weekends: false,
    weekNumbers: true,
    defaultView: 'agendaWeek',
    select: function(startDate, endDate) {
        start_date = startDate.format();
        end_date = endDate.format();
        new_request(start_date, end_date);
    },
    events: calender_array,
    timeFormat: 'H(:mm)',
    eventRender: function(e, t) {
      //some code here
    },
    eventClick: function(event, jsEvent, view) {
        console.log("event:", event);
        request_id = event['request_id'];
        request_details(request_id);
    },
    viewRender: function(view, element) {
        //HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
        if (view.name == 'listDay') {
            showCustomView();
        }
    }
});

I am using async waterfall to process nested condition in request, and using express framework. But I am confused how to process data to the next function in waterfall while the data is <promise>. This promise data is a query from sequalize.

Here is the sketch

exports.getanythinghere = async function() {

  var query = "SELECT anything, here "
            + "FROM anywhere WHERE ignore this query";

  return new Promise((resolve, reject) => {
    db.sequelize.query(query , {
      type: QueryTypes.SELECT    
    }).then(wth => {
      resolve(wth);
    })
  });

}


async.waterfall([
  function(callback) {
    const trying = getanythinghere (); 
    callback(null, trying); 
  },
  function(dataone, callbackt) {
    console.log("dataone is ", dataone); 
  }
], function(err, res) {
  if (err) return callback(err);
  callback(null, res);    
});//waterfall

There dataone is always dataone is Promise { <pending> }

What I am missing here. In jquery, I will do getanythinghere().done(function(){});

But I want to have it in this callback of waterfall.

I used to do this few years ago, but I forgot since too much with java and php

Any help please..

I learn JavaScript React and now I have problem with positioning of an MP4 movie.
I have a Codesandbox
I want it fit the Box in portrait with let’s say height: '20vw and landscape but whatever I try I can’t get it to look good.

Like this, here the movie should be just a 4th of the height and not this mega high.

Whatever I try this height cant be reduced please advice?

I’m trying to create my project in React. This part of the project consists in a list of item, each one has a button X to delete that item. Every single item, is a component of my react app. When the button is pressed, i set a variable (passed throught the useContext) called setPopup, so a popup appears, asking if you are sure you want to delete the file. The proble is that when I click the file, this error occurs:

TypeError: Cannot read properties of undefined (reading 'setPopup')

This is the code of the component:

import '../styles/styleF.css';
import {PopupContest} from './HomePage';
import { useContext } from 'react';

const SFile = (n) => {
    const v = useContext(PopupContest);
    let currentImg = c;
    return <> 
        <div className="fileSingle">
            <img src={currentImg} alt="img" style={{'height':'50px', 'width':'50px','position':'relative', 'top':'5', 'left':'0'}} />
            <h3>{n.name + "." + n.img}</h3>
            <button style={{'height':'50%', 'marginTop':'10px'}} onClick={() => {v.setPopup(6); v.setSelectFile(n.ident + "")}}>X</button>
        </div>
    </>
}

export default SFile;

I would like to knwo why this is happening, and how to fix it correctly. The code that effectively delete the file is in other file and component, and works. I read in some answers that I should check if it is undefined, but to make the check condition, the code breaks anyway. So, I don’t know how to manage it. Can someone help? Thank you so much

Hi everyone!

I’m in need of some help regarding redirecting my website during certain days each year. I want to be able to redirect my website from the current one (A) to the other one (B) between 1st of march to 15th of april. I can’t find any way to do this without making a wierd cluster of websites that loads and redirect the user back and forth to multiple pages. I tried to add certain code in the script and such but no success. I’m trying also to not include a specific year only the dates so it runs same dates each year without modification. The code I use today for the season is:

<script>var date=new Date();
if(date.getMonth()==3){
  window.location="https://www.MYWEBSITE.com/site_B.html"}</script>

wich only redirects the full months of april wich is’nt optimal at all. All ideas are welcome and I appreciate all help 🙂

So, i have a code that is using react-route, and i have a few pages, but when i get to one of them, i can’t enter the others, since the URL gets stuck in the actual page, is there any way to solve this? When i go from the app page, to the CheckOut page, my url gets like this: localhost:3000/CheckOut, and when i try to move to the Comprar page, its gets like this: localhost:3000/CheckOut/Comprar, which is not working, and when i manually write the url like this: localhost:3000/Comprar, it do work, i want to know how can i get to the Checkout page, and then go to the Comprar page, and the URL should look like this: localhost:3000/Comprar.

App.js:

import './styles/App.css';
import React, {useState} from "react"
import DefineDestino from './components/DefineDestino';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import CheckOut from './pages/CheckOut';
import Comprar from './pages/Comprar';

function App() {
  const [estadoOrigem, setEstadoOrigem] = useState()
  const [estadoDestino, setEstadoDestino] = useState()
  return (
      <Router>
        <div className="App">
          <div className="mainContent">
            <h1>Escolha um destino.</h1>
              <div className="estados">
                <h1>Local de Origem</h1>
                <select value={estadoOrigem} onChange={e => setEstadoOrigem(e.target.value)}>
                    <option>Rio de Janeiro</option>
                    <option>São Paulo</option>
                    <option>Minas Gerais</option>
                    <option>Brasília</option>
                    <option>Pará</option>
                    <option>Ceará</option>
                    <option>Paraná</option>
                    <option>Mato Grosso</option>
                </select>
            </div>
            <div className="estados">
              <h1>Destino Final</h1>
              <select className="select" value={estadoDestino} onChange={e => setEstadoDestino(e.target.value)}>
                  <option>Rio de Janeiro</option>
                  <option>São Paulo</option>
                  <option>Minas Gerais</option>
                  <option>Brasília</option>
                  <option>Pará</option>
                  <option>Ceará</option>
                  <option>Paraná</option>
                  <option>Mato Grosso</option>
              </select>
          </div>
              < DefineDestino origem={estadoOrigem} destino={estadoDestino}></DefineDestino>
              <Routes>
                <Route path="/CheckOut" element={<CheckOut />}></Route>
                <Route path="/Comprar" element={<Comprar />}></Route>
              </Routes>
          </div>
        </div>
      </Router>
    );
}

DefineDestino.js:

import React, {useState} from "react"
import { Link } from "react-router-dom";
import '../styles/DefineDestino.css'

export default function DefineDestino(props) {
    const [initialValue, setValue] = useState(0)
    const dados = {
        locais: [
            {
                estado: 'Rio de Janeiro', 
                aeroportos: 'Santos Dumont', 
                valor: 3000
            },
            {
                estado: 'São Paulo',
                aeroportos: 'Aeroporto Internacional de São Paulo-Guarulhos', 
                valor: 2500
            },
            {
                estado: 'Pará',
                aeroportos: 'Aeroporto Internacional de Belém', 
                valor: 1500
            },
            {
                estado: 'Minas Gerais',
                aeroportos: 'Aeroporto Internacional de Belo Horizonte-Confins', 
                valor: 1750
            },
            {
                estado: 'Brasília',
                aeroportos: 'Aeroporto Internacional de Brasília', 
                valor: 1600
            },
            {
                estado: 'Mato Grosso',
                aeroportos: 'Aeroporto Internacional de Cuiabá', 
                valor: 1350
            },
            {
                estado: 'Paraná',
                aeroportos: 'Aeroporto Internacional de Curitiba', 
                valor: 1200
            },
            {
                estado: 'Ceará',
                aeroportos: 'Aeroporto Internacional de Fortaleza', 
                valor: 1200
            }
        ]
    }
    
    var local = props.destino

    const increment = () => {
        return {
            type:'increment'
        }
    }

    function estadosReducer(state, action) {
        if (action.type === 'increment') {
            var item
            for (item of dados.locais) {
                if (item.estado === local) {
                    switch(local) {
                        case 'Rio de Janeiro':
                            setValue(initialValue + item.valor)
                            break
                        case 'São Paulo':
                            setValue(initialValue + item.valor)
                            break
                        case 'Pará':
                            setValue(initialValue + item.valor)
                            break
                        case 'Minas Gerais':
                            setValue(initialValue + item.valor)
                            break
                        case 'Brasília':
                            setValue(initialValue + item.valor)
                            break
                        case 'Mato Grosso':
                            setValue(initialValue + item.valor)
                            break
                        case 'Paraná':
                            setValue(initialValue + item.valor)
                            break
                        case 'Ceará':
                            setValue(initialValue + item.valor)
                            break
                    }
                }
            }
        }
    }

    return(
        <div>
            <h1>De: {props.origem}</h1>
            <h1>Para: {props.destino}</h1>
            <h1>Valor: {initialValue}</h1>
            <button onClick={() => estadosReducer(initialValue, increment())}><Link to={"CheckOut"}>Realizar Checkout</Link></button>
        </div>
    )
}

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

Comprar.js:

import '../styles/App.css';

function Comprar(props) {
  return (
    <div className="Compra">
        <h1>Compra efetuada! Boa viagem :)</h1>
    </div>
  );
}

export default Comprar;

I put that equation on console: 0.07 * 100 and thats the result: 7.000000000000001
But if i put 0.06 * 100 or 0.08 * 100 I get a normal result.

Why does this happen is how do I resolve it?

I have a problem to set the user in my web page. I used AppContext where all the components to update the states are.When I run my code, it says that setUser is undefine, but I defined in AppContext and imported in App.jsx. Anyone can help? I saw others solution and it seems that const { setUser } = useContext(AppContext);have to be out of the component ,but shows an error.
This is App.jsx

import "./App.css";
import { Header } from "./components/header/Header";
import { Nav } from "./components/nav/Nav.jsx";
import { getUser } from "./services/users";
import { AppContext } from "./context/AppContext";
import { Notification } from "./components/notification/Notification";
import { Router } from "./routers/Router";

function App() {
  const { setUser } = useContext(AppContext);
  useEffect(() => {
    getUser().then((user) => {
      setUser(user);
    });
  }, [setUser]);
  return (
    <div>
      <Notification />
      <Nav />
      <Header />
      <Router />
      <AppContext />
    </div>
  );
}

export default App;

This is AppContext.jsx

import React,{ useState } from "react";
 import { usePagination } from "../components/utils/pagination.jsx";


export const AppContext = React.createContext();


export default function AppProvider({ children }) {
    const [user,setUser] = useState({})
    const [points, setPoints] = useState(0)
    const [products, setProducts] = useState([])
    const [reedemStatus, setReedemStatus] = useState({})
    const [history, setHistory] = useState([])


    const paginationList = usePagination(products, 16)
    const paginationHistoryList = usePagination(history, 16)

    const totalProducts = products.length
    const totalHistory = history.length

    const handlerAddPoint =(value)=>{
        const newUser = {...user}
        newUser.points = user.points + value
        setUser(newUser)
      }
    
      const handlerSubtractPoint =(points)=>{
        const newUser = {...user}
        newUser.points = user.points - points
        setUser(newUser)
      }
    return(
        <AppContext.Provider value={{user,
            setUser,  
            handlerAddPoint, 
            handlerSubtractPoint, 
            points,
            setPoints,  
            products, 
            setProducts, 
            totalProducts,
            paginationList,
            reedemStatus, 
            setReedemStatus,
            history,
             setHistory, 
             paginationHistoryList,
             totalHistory}}>
             {children}
        </AppContext.Provider>
    );
}

I am looking to create a simple accordion within my chrome ext to display data. I am using the following JS tutorial but I seem to be struggling to register a click.

I have returned some data using the following:

//background.js

...

 // Looping through object's key value pair to place into divs
  for (const [key, value] of Object.entries(params)) {
    queryParams += `
      <div class="text-sm my-1">
        <span class="font-bold uppercase mr-1">${key}: </span><span class="font-normal font-mono capitalizev c-word-wrap">${value}</span>
      </div>
    `;
  }

  return (completeData += `
    <div class="element my-3">

      <div class="question flex justify-between pl-6 pr-12 py-4 bg-purple-500">
        <span class="text-base text-white font-bold">${pixelType}</span>
        <button id="btn">
          <i class="fas fa-plus-circle"></i>
        </button>
      </div>

      <div class="answer hideText">
        <span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
          <span id="query-params">${queryParams}</span>
      </div>

    </div>
 
  `);
};
...

I then have my logic in a separate file

//accordion.js

const elements = document.querySelectorAll('.element');

elements.forEach((element) => {
  let btn = element.querySelector('.question button');
  let icon = element.querySelector('.question button i');
  var answer = element.lastElementChild;
  var answers = document.querySelectorAll('.element .answer');

  btn.addEventListener('click', () => {
    console.log('btn clicked');
    answers.forEach((ans) => {
      let ansIcon = ans.parentElement.querySelector('button i');
      if (answer !== ans) {
        ans.classList.add('hideText');
        ansIcon.className = 'fas fa-plus-circle';
      }
    });

    answer.classList.toggle('hideText');
    icon.className === 'fas fa-plus-circle'
      ? (icon.className = 'fas fa-minus-circle')
      : (icon.className = 'fas fa-plus-circle');
  });
});

I have also tried to place the same logic in popup.js which didn’t work either. I am loading my scrips in like so…

popup.html

<!-- Scripts -->
    <script src="popup.js"></script>
    <script src="../background.js"></script>
    <!-- Accordion -->
    <script src="../fa.js"></script>
    <script src="../accordion.js"></script> 

If anyone can guide me in where I am going wrong here that would be great. I have also tried replicating the tutorial outside of a chrome ext and it works perfectly

I follow this tutorial : https://youtu.be/V8GnInBUMLo but… when I finish I got this error

TypeError: Cannot read properties of null (reading ‘addEventListener’)

I try to had if(element) inside my addeventlisters function but I got a new error:

TypeError: Cannot read properties of null (reading ‘appendChild’)

I think this error comes from my importation of ImageDistortion.js in Hero.js

ImageDistortion.js

import * as THREE from 'three';
import imageOne from '../img/1.jpg';
import imageTwo from '../img/3.jpg';
import vertex from './shaders/vertex.glsl';
import fragment from './shaders/fragment.glsl';


function lerp(start, end, t){
    return start * ( 1 - t ) + end * t;
}


let targetX = 0;
let targetY = 0;

const textureOne = new THREE.TextureLoader().load(imageOne);
const textureTwo = new THREE.TextureLoader().load(imageTwo);


class WebGL{
    constructor(){
        this.container = document.querySelector('.hero');
        this.links = [...document.querySelectorAll('.three--anim')];
        this.scene = new THREE.Scene();
        this.perspective = 1000;
        this.sizes = new THREE.Vector2(0,0);
        this.offset = new THREE.Vector2(0,0); // Positions of mesh on screen. Will be updated below.
        this.uniforms = {
            uTexture: {value: new THREE.TextureLoader().load(imageTwo)},
            uAlpha: {value: 0.0},
            uOffset: {value: new THREE.Vector2(0.0, 0.0)}
        }
        this.links.forEach((link, idx) => {
            link.addEventListener('mouseenter', () => {
                
                switch(idx){
                    case 0:
                        
                        this.uniforms.uTexture.value = textureOne;
                        break;
                    case 1:
                        this.uniforms.uTexture.value = textureTwo;
                        break;
                }
            })

            link.addEventListener('mouseleave', () => {
                this.uniforms.uAlpha.value = lerp(this.uniforms.uAlpha.value, 0.0, 0.1);
            });
        })
        this.addEventListeners(document.querySelector('h1'));
        this.setUpCamera();
        this.onMouseMove();
        this.createMesh();
        this.render()
        
    }

    get viewport(){
        let width = window.innerWidth;
        let height = window.innerHeight;
        let aspectRatio = width / height;

        return{
            width, 
            height, 
            aspectRatio
        }
    }

    addEventListeners(element){
        element.addEventListener('mouseenter', () => {
            this.linkHovered = true;
        })
        element.addEventListener('mouseleave', () => {
            this.linkHovered = false;
        })
    }

    setUpCamera(){
        window.addEventListener('resize', this.onWindowResize.bind(this))
        
        let fov = (180 * (2 * Math.atan(this.viewport.height / 2 / this.perspective))) / Math.PI;
        this.camera = new THREE.PerspectiveCamera(fov, this.viewport.aspectRatio, 0.1, 1000);
        this.camera.position.set(0, 0 , this.perspective);

        this.renderer = new THREE.WebGL1Renderer({antialias: true,alpha: true });
        this.renderer.setSize(this.viewport.width, this.viewport.height);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.container.appendChild(this.renderer.domElement)
    }

    createMesh(){
        this.geometry = new THREE.PlaneGeometry(1,1,20,20);
        this.material = new THREE.ShaderMaterial({
            uniforms: this.uniforms,
            vertexShader: vertex,
            fragmentShader: fragment,
            transparent: true,
            // wireframe: true,
            // side: THREE.DoubleSide
        })
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        this.sizes.set(250, 350, 1);
        this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);

        this.mesh.position.set(this.offset.x, this.offset.y, 0);
        
        this.scene.add(this.mesh);
    }
    onWindowResize(){
       
        this.camera.aspect = this.viewport.aspectRatio;
        this.camera.fov = (180 * (2 * Math.atan(this.viewport.height / 2 / this.perspective))) / Math.PI;
        this.renderer.setSize(this.viewport.width, this.viewport.height);   
        this.camera.updateProjectionMatrix();
    }

    onMouseMove(){
        window.addEventListener('mousemove', (e) => {
            targetX = e.clientX;
            targetY = e.clientY;
        })
    }

    render(){
        this.offset.x = lerp(this.offset.x, targetX, 0.1);
        this.offset.y = lerp(this.offset.y, targetY, 0.1);
        this.uniforms.uOffset.value.set((targetX- this.offset.x) * 0.0005 , -(targetY- this.offset.y) * 0.0005 )
        // this.mesh.scale.set(this.sizes.x, this.sizes.y)
        this.mesh.position.set(this.offset.x - (window.innerWidth / 2)  , -this.offset.y + (window.innerHeight / 2), 0);

        // set uAlpha when list is hovered / unhovered
        this.linkHovered 
        ? this.uniforms.uAlpha.value = lerp(this.uniforms.uAlpha.value, 1.0, 0.1) 
        : this.uniforms.uAlpha.value = lerp(this.uniforms.uAlpha.value, 0.0, 0.1);
       
        
            for(let i = 0; i < this.links.length; i++){
                if(this.linkHovered){
                    this.links[i].style.opacity = 0.2
                }else{
                    this.links[i].style.opacity = 1
                }
                
            
        }

        this.renderer.render(this.scene, this.camera);
        window.requestAnimationFrame(this.render.bind(this));
        
    }
    
}

new WebGL()

Hero.js

import React from 'react'
import ImageDistortion from './utils/ImageDistortion'


const Hero = () => {
    return (
        <div className="hero">
            <p>Hello.</p>
            <h1 id="three--anim--container">
                I'm <span className="name three--anim">Joris Delorme</span>, based in <span className="location three--anim">Lyon,France</span>.<br />
                I'm minimalist designer, developer and photographer.
            </h1>
        </div>
    )
}

export default Hero

I’m new in this nice community. I am a young student in computer science and I’m trying to develope a web based app to help both sighted people and people with visual empairment to learn typing. My project was blocked by the following problem:
Given a string, I need to verify that the user has pressed the key that corresponds to the first character. If it is correct, the program should test the next character, until the end of the string.
The most natural solutions seems to be a loop, like that:

        do {
        var checkCharacter=lessons[exerciceNumber][2].substr(charNumber, 1);
        document.addEventListener('keydown', testKey);
    }
    while (charNumber<=lessons[exerciceNumber][2].length-1);

When I run the script, nothing appears and it seems it doesn’t detect the pressed keys. Can you help me please?
Inorder to understand the context, I’ll attach the entire file.

<?php
include "config.php";
//Select fields from database
$sql="SELECT lesson_number, exercice_number, text FROM lessons";
$result=$conn->query($sql);
//Pass variables to javascript
$output="<script> var lessons=new Array(); ";
while ($row=$result->fetch_assoc()) {
    $output.="lessons.push([
        ".$row["lesson_number"].",
        ".$row["exercice_number"].",
        '".$row["text"]."']);";
}
$output.="</script>";
echo $output;
?>
<html>
<head>
    <title>Impara a scrivere</title>
</head>
<body>
    <h2 id="lesson"></h2>
    <p id="instructions"></p>
    <p id="check"></p>
    <p id="keyList"></p>
</body>
<script>
    //define variables
    var keys="";
    var exerciceNumber=0;
    var charNumber=0;
    //Function to play the sounds
    function sound(name) {
        var audio=new Audio(name+'.mp3');
        audio.play();}
    document.getElementById("lesson").innerHTML="Lezione "+lessons[exerciceNumber][0];
    document.getElementById("instructions").innerHTML="Esercizio "+lezioni[exerciceNumber][1]+": scrivi <b>"+lessons[exrciceNumber][2]+"</b>.";
    //function to check pressed keys
    funtion testKey(event) {
        if (event.key==checkCharacter) {
            sound ("right");
            keys+=event.key;
            document.getElementById("keyList").innerHTML=keys;
        } else {
            sound("wrong");
        }
    }
    //loop for the exercices
    do {
        var checkCharacter=lessons[exerciceNumber][2].substr(charNumber, 1);
        document.addEventListener('keydown', testKey);
    }
    while (charNumber<=lessons[exerciceNumber][2].length-1);
</script>
</html>

I’m looking to write a Chrome Extension which records what the user speaks into their microphone on a Zoom. However, it needs to cancel out what other participants are saying (which the microphone picks up on, assuming no headphones). I know I can do this via a desktop application which separates the microphone and system audio and cancels out the system audio. But I am hitting a roadblock coming up w/ an alternative that would work via a Chrome extension. A workaround is to have the user install Krisp and select that as their microphone source (since Krisp separates system audio) but I’m looking for something not dependent on a desktop install. Am I missing anything obvious here? Thanks!

I have been trying to make a invite manager but when a user leaves it doesn’t remove a invite and add a leave, i am not sure whats the issue

  let user = db.get(`author_${member.guild.id}_${member.id}`)
  if (!user) {
    let channel = db.get(`leave_channel_${member.guild.id}`)
    if (!channel) return;
    member.guild.channels.cache.get(channel).send(`${member.username} has left, but i can't figure out who invited him.`)
    return
  }


  console.log(`user left`)
  db.add(`invites_${member.guild.id}_${user}.leaves`, 1)
  db.subtract(`invites_${member.guild.id}_${user}.invites`, 1)
  let channel = db.get(`leave_channel_${member.guild.id}`)
  if (!channel) return;
  let leave = db.get(`leave_message_${member.guild.id}`)
  if (!leave) leave = config.leave;

  let com = leave.split("[user]")
    .join(client.users.cache.get(member.id).username)
    .split("[inviter]")
    .join(client.users.cache.get(user).username)
    .split("[invites]")
    .join(db.get(`invites_${member.guild.id}_${user}.invites`))
    .split("[total]")
    .join(db.get(`invites_${member.guild.id}_${user}.regular`))
    .split("[leaves]")
    .join(db.get(`invites_${member.guild.id}_${user}.leaves`))
    .split("[jointimes]")
    .join(db.get(`invites_${member.guild.id}_${user}.joins`))



  member.guild.channels.cache.get(channel).send(com)
}
)

I am building a form where I have to login into the user by their phone number on CLICKING the send code button I got an error TypeError: Object(…) is not a function where it says that window is not a function can anybody solve my problem.
Error Image

Here is some of my code

import * as React from "react";
import { useState } from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import background from "../staticfiles/signin-background.jpg";
import "react-phone-input-2/lib/style.css";
import { auth, db, captcha } from "../config/Config";
import { RecaptchaVerifier } from "firebase/auth";
import { Link as RouterLink } from "react-router-dom";
import { useHistory } from "react-router-dom";

import socialMediaAuth from "../service/auth";

function Copyright(props) {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      {...props}
    >
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const theme = createTheme();

export default function SignInUserPhone() {
  let history = useHistory();
  const [PhoneNumber, setPhoenNumber] = useState("");
  const [VerificationCode, setVerificationCode] = useState("");

  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(PhoneNumber);

    console.log(error);
  };
  const handleSubmit2 = (e) => {
    e.preventDefault();
    console.log(VerificationCode);
  };

  const handleOnClick = async (provider) => {
    const res = await socialMediaAuth(provider);
    await db
      .collection("SignedUpUsersData")
      .doc(res.uid)
      .set({
        Email: res.email,
        Name: res.displayName,
      })
      .then(() => {
        history.push("/");
      })
      .catch((err) => setError(err.message));
  };

  const handleUserButton = (event) => {
    event.preventDefault();
    history.push("/signinuser");
  };

  const handleSellerButton = (event) => {
    event.preventDefault();
    history.push("/signinseller");
  };
  auth.languageCode = "it";
  const setUpCaptcha = () => {
    window.recaptchaVerifier = auth().RecaptchaVerifier("recaptcha-container", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        console.log(response);
        console.log("Ok recapthca sloved");
        onSignInSubmit();
      },
    });
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    setUpCaptcha();
    const phoneNumber = PhoneNumber;
    const appVerifier = window.recaptchaVerifier;

    auth()
      .signInWithPhoneNumber(PhoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
        console.log(confirmationResult);
        // ...
      })
      .catch((error) => {
        // Error; SMS not sent
        // ...

        console.log(error.message);

        //( Or, if you haven't stored the widget ID:
      });
  };

  return (
    <ThemeProvider theme={theme}>
      <Grid container component="main" sx={{ height: "100vh" }}>
        <CssBaseline />
        <Grid
          item
          xs={false}
          sm={4}
          md={7}
          sx={{
            backgroundImage: `url(${background})`,
            backgroundRepeat: "no-repeat",
            backgroundColor: (t) =>
              t.palette.mode === "light"
                ? t.palette.grey[50]
                : t.palette.grey[900],
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          <Box
            sx={{
              my: 8,
              mx: 4,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in With Phone Number
            </Typography>

            <Box
              sx={{
                my: 4,
                mx: 4,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <ButtonGroup size="large" disableElevation variant="contained">
                <Button onClick={handleSellerButton}>SELLER</Button>
                <Button onClick={handleUserButton}>USER</Button>
              </ButtonGroup>
            </Box>

            <Box
              component="form"
              noValidate
              onSubmit={onSignInSubmit}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Phone Number"
                name="Phone"
                autoComplete="phoenumber"
                value={PhoneNumber}
                onChange={(phone) => setPhoenNumber(phone.target.value)}
              />
              <div id="recaptcha-container"></div>

              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
                onSubmit={onSignInSubmit}
                id="sign-in-button"
              >
                Send Code
              </Button>

              <Grid container>
                <Grid item xs></Grid>
                <Grid item>
                  <Link
                    component={RouterLink}
                    to="/signup"
                    href="#"
                    variant="body2"
                  >
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </Box>
            {error && <div>{error}</div>}
            <Box
              component="form"
              noValidate
              onSubmit={handleSubmit2}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Verification Code"
                name="Verification"
                autoComplete="Verification"
                value={VerificationCode}
                onChange={(verification) =>
                  setVerificationCode(verification.target.value)
                }
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Submit
              </Button>

              <Copyright sx={{ mt: 5 }} />
            </Box>
          </Box>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

All the files are correctly exported from config js cause sign in with email and password and sign in with social media are working