Category: javascript

Category Added in a WPeMatico Campaign

How to Filter my objects base in a property ? React

For example,

I have an array of objects which are movies with multiple genres and I just wanna render the ones that match the genre of the object I took using Find. I already have one object filtered which is the one I took the information to render to the component, but I Have another component below that is a row of the movies, and I want the object movies to match the actual object genre. Like in Netflix “you might also like” and pass that as a Prop and render only the movie pictures in the other component. and how to avoid rendering the same object that I am using as a reference to render the new row?

import { useParams } from "react-router-dom";
import movies from '../data/dataAll'import SubRow from "./SubRow";
import './MovieDetails.css'

const MovieDetails = () => {const { id } = useParams();

const movies = [

{ title: 'Movie 1', genre: 'horror, suspense' },{ title: 'Movie 2', genre: 'drama, futuristic' },{ title: 'Movie 3', genre: 'horror, gore' },{ title: 'Movie 4', genre: 'action, gore' },];

// Get the Object info using id
const movie = movies.find(movie => movie.id === parseInt(id))


return (
    <div className=" bg-wrapper moviedetails">
        <div className="moviedetails-content bg-wrapper-content">
            <div className="moviedetails-content-info ">
                <h2 className="movie-title">{movie.title}</h2>

                <div className="movie-tags">
                <span>{movie.rating}</span>
                <span>{movie.type}</span>
                <span>{movie.duration}</span>
                </div>

                <p className="movie-base">{movie.sinopsis}</p>
                <hr className="line"/>
                <p><strong>Genrer: </strong>{movie.genrer}</p>
            </div>
        </div>

        <div className="banner-background bg-wrapper-image" style={{ backgroundImage: `url(${movie.cover})` }} >

        </div>

        <SubRow recomended={ }></SubRow>

    </div>
);

}

export default MovieDetails;

I used:

 const recomendedMovies = movies.filter(recomended => recomended.genrer.textContent === movie.genrer.textContent);

but is also rendering the actual object where I took the genre reference from and I want to avoid that , to look like a real movie recomendations

Could it be because I created the objects in a wron way ?

appendChild works with “g” but not with “rect”

I was trying to create SVG elements in JS and append them to a “rect” element. That doesn’t work, but I can append to a “g” element. I get the feeling I’m violating some rule, but I can’t find anything that says it shouldn’t work.

if you look at my code sample, you’ll see that r2 is shown, but r1 is missing.

<html>

<body>
  <div>
    <svg height=100vh width=100%>
    <g id='g'>
      <rect id='r' width=100 height=100 fill='green'/>
    </g>
      </svg>
  </div>
  <script>
    function setAttribs(elem, attrs) {
      Object.entries(attrs).forEach(([key, value]) => {
        elem.setAttribute(key, value);
      });
      return elem;
    };

    const g = document.getElementById('g');
    const r = document.getElementById('r');

    const r1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    const r2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

    setAttribs(r1, {
      x: 0,
      y: 100,
      height: 50,
      width: 40,
      fill: 'blue'
    });
    setAttribs(r2, {
      x: 0,
      y: 150,
      height: 50,
      width: 40,
      fill: 'red'
    });

    r.appendChild(r1);
    g.appendChild(r2);
  </script>
</body>

</html>

How to check if unused Recoil atom consumes memory

I want to check if unused Recoil atom consumes memory.

Since recoil value is maintained until we exit the app, it would mean that the value is stored somewhere.
It’s just my assumption so I would like to prove it.

I tried to use Memory tab in Chrome Developer Tool but there were too many objects to check so it was impossible to find Recoil atoms. How can I do this? I’m using Next JS.

appendChild recursive javascript

<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
<div>

const div = document.createElement('div');
const div1 = document.createElement('div');
const div2 = document.createElement('div');
const div3 = document.createElement('div');

div1.appendChild(div2);
div2.appendChild(div3);
div.appendChild(div);

I need a recursive function where I can create multiple divs inside another div

Where I don’t have to do it manually

How to fill an input element that is in a popup using puppeteer?

I’m using puppeteer to automate access to a specific newspaper. The problem is that to enter the email and password it is necessary to click on the sign in button and wait for a popup to open.

However, when waiting for a selector that is in the login popup, the following error is reported: UnhandledPromiseRejectionWarning: TimeoutError: Waiting for selector input[fieldloginemail] failed: Waiting failed: 30000ms exceeded.

Could anyone help me in this case? I’m using puppeteer 19.8.5.

My code:

const puppeteer = require("puppeteer");

puppeteer
  .launch({ headless: false, defaultViewport: null })
  .then(async (browser) => {
    const page = await browser.newPage();
    await page.goto("https://pressreader.df.cl/diario-financiero");
    await page.waitForSelector(".btn-login, .toolbar-button-signin", {
      visible: true,
    });
    await page.click(".btn-login, .toolbar-button-signin");

    const emailSelector = 'input[fieldloginemail]'
    const passwordSelector = 'input[fieldloginpassword]'

    await page.waitForSelector(emailSelector)
    await page.waitForSelector(passwordSelector)

    await page.type(emailSelector, '[email protected]')
    await page.type(passwordSelector, 'myPassword')
    await page.click('button[actionlogin]')

    await browser.close();
  });

Spline 3D Scene isn’t rendering properly in React SPA, throwing bunch of repeated errors

I’m building a React application using Three.js and React Three Fiber. I’m trying to implement OrbitControls for my 3D scene, but I keep encountering the following error: “Cannot access ‘OrbitControls’ before initialization”. I’ve tried changing the way i import some modules, how i declare the canvas + contained elements and several solutions from online resources but nothing seems to work.
I’ve installed the three-stdlib package and imported the OrbitControls from it, and created a custom OrbitControls component using useThree and useEffect hooks to instantiate the OrbitControls class. However, when I try to render the OrbitControls component in the Canvas component, I get the following error: “target is not a constructor”.

Here’s my current code

import React, { useEffect, useRef, Suspense } from 'react';
import * as THREE from 'three';
import { OrbitControls as StdlibOrbitControls } from 'three-stdlib';
import { Canvas, useThree } from '@react-three/fiber';
import { Application } from '@splinetool/runtime';
import { ReactComponent as LogoC } from './images/logo-c.svg';
import { ReactComponent as MenuButton } from './images/menu-button.svg';
import { ReactComponent as RArrow } from './images/right-arrow-desktop.svg';

const SplineScene = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const app = new Application(canvas);
    app.load('https://prod.spline.design/dulgIWpUS02bwIc2/scene.splinecode');

    return () => {
      app.destroy();
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

const Loading = () => {
  return <div>Loading...</div>;
};

function OrbitControls() {
    const { camera, gl } = useThree();
    const controls = useRef();
  
    useEffect(() => {
      controls.current = new StdlibOrbitControls(camera, gl.domElement);
      return () => controls.current.dispose();
    }, [camera, gl.domElement]);
  
    return null;
  };

const Home = () => {
  return (
    <section className='fullPage'>
        <nav className='navigation'>
            <div className='logo'>
            <LogoC />
            </div>
            <div className='menu-button'>
            <MenuButton />
            </div>
        </nav>
        <div className='home'>
            <div className='heading-1'>
            <span>Curious huh?</span>
            <span>Us too.</span>
            </div>
        <div className='3d-image'>
            <Canvas concurrent shadowMap>
            <ambientLight />
            <pointLight position={[10, 10, 10]} />
            <Suspense fallback={<Loading />}>
                <SplineScene />
            </Suspense>
            <OrbitControls />
            </Canvas>
        </div>
        <div className='heading-2'>
                <span>We're launching</span>
                <div>
                    <span className='soon'>soon</span>
                    <div className='newsletter'>
                        <input className='newsletter-email-input' placeholder='your email goes here'></input>
                        <button className='newsletter-submit-button'>Let me know</button>
                    </div>
                </div>
            </div>
        </div>
        <footer className='contact'>
            <div className='section-title'>
                <span>Get in touch</span>
                <span>
                <RArrow />
                </span>
            </div>
            <div className='social-links'>
                <a href="https://www.twitter.com/xxxxxxx" target="_blank" rel="noopener noreferrer">Twitter</a>
                <a href="https://www.instagram.com/xxxxxxx" target="_blank" rel="noopener noreferrer">Instagram</a>
                <a href="https://www.linkedin.com/company/xxxxxxxxx" target="_blank" rel="noopener noreferrer">LinkedIn</a>
                <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email</a>
            </div>
        </footer>
    </section>
  );
};

export default Home;

–Errors–

target is not a constructor
TypeError: target is not a constructor

R3F: Canvas is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

nuxt 3 retrieve data that was sent from another server

I’m attempting to write a program to retrieve data in Nuxt3, with the data being sent from another server. Currently, my code is saved in pages/endpoint.ts. However, I am unable to access mydomain/endpoint.ts. If I need to change the file to endpoint.vue, how should I modify the code? Also, how can I verify the data sent by the other server?

import { IncomingRequest, ServerResponse } from 'nuxt'

export async function myEndpoint(req: IncomingRequest, res: ServerResponse) {
 if (req.method === 'POST') {
   // Retrieve the data from the request body
   const requestData = await req.json()

   // Log the incoming request data and timestamp
   console.log('Request received at:', new Date().toISOString())
   console.log('Request data:', requestData)

   // Process the data and send a response
   res.status(200).json({ message: 'Data received', data: requestData })
 } else {
   // Handle non-POST requests
   res.status(405).json({ error: 'Method not allowed' })
 }
}

JavaScript Error: caught (in promise) TypeError: ‘set’ on proxy: trap returned falsish for property

I’m attempting to add an “eventlistener” of sorts to trigger when all of the application resources have completed loading. If I understand correctly, Proxies are “the way” to monitor object property changes. The following code works in my jsfiddle by itself, but when put into use with the actual code that loads actual resources I get the error: “caught (in promise) TypeError: ‘set’ on proxy: trap returned falsish for property”. I’m new to JavaScript Proxies in general, so even any pointers in the right direction would be appreciated.

const log = console.log.bind(console);

let gameState = {
  live: false,
  loading: {
    images: false,
    sounds: false,
    controls: false,
  },
};

const loadingListener = {
  set(obj, prop, value) {
    Reflect.set(...arguments);
        if (gameState.loading.images &&
        gameState.loading.sounds &&
        gameState.loading.controls) {
      log(true);
    } else {
      log(false);
    }
  },
};

// Create the proxy object with the original object and the handler
const proxyObject = new Proxy(gameState.loading, loadingListener);

// Test the proxy object
proxyObject.images = true;
proxyObject.sounds = true;
proxyObject.controls = true;

SweetAlert Variables

I want to be able to include a SweetAlert variable in both the title and the text of a SweetAlert.

I have the following code:

swal({
        title: "Log In",
        text: "Log In to your account.",
        icon: logInImage,
        content: "input",
        button: {
          text: "Log In",
          closeModal: false,
        },
        closeOnClickOutside: false,
        closeOnEsc: false
})
.then(unm => {
        if (!unm) throw null;
        swal({
          title: `Welcome, ${unm}!`
          text: `Your username is ${unm}.`
          buttons: false,
          icon: logInImage,
          closeOnClickOutside: false,
          closeOnEsc: false,
        })
});

But it does not work. I want the end result to be something like the following:

  1. Page opens and SweetAlert asks for the username.
  2. SweetAlert displays the second alert telling the user in both the title and the text what their username is

(If you don’t know what SweetAlert is, go to text.)
Version of SweetAlert: text

Why does a Nuxt 2 server open multiple multi-threaded node processes?

This may be a rookie question, but I’m dealing with a Nuxt 2 server that I’m just currently running in localhost. It’s for a large project that also runs in production. I’m encountering an unusual number of node processes being created on running the project. The app is being run in SSR mode with multiple pages/components. node processes

Above is a picture of the processes. These are all being generated from a single Nuxt 2 server. Can someone tell me why I have six multithreaded processes on this one server? Is this normal or something I should look into to optimize performance on my site?

I was expecting maybe one or two node processes. I’ve tried to dig into the codebase and figure out what is causing this and I’ve come up with a blank.

Как Исправить эту ошибку? javascript [closed]

document.querySelector("#timepicker_button_2").addEventListener("touchstart", function () {


    Socket1TimeHourOn = localStorage.setItem('Hour1On', Socket1TimeHourOn);
    Socket1TimeMinutesOn = localStorage.setItem('Minute1On', Socket1TimeMinutesOn);
    Socket1TimeHourOff = localStorage.setItem('Hour1Off', Socket1TimeHourOff);
    Socket1TimeMinutesOff = localStorage.setItem('Minute1Off', Socket1TimeMinutesOff);



    Socket1Name = document.querySelector('.timepicker_name').value;
    Socket1Name = localStorage.setItem('Name1', Socket1Name);
    if (Socket1Name) {
        localStorage.setItem('Name1', Socket1Name)
        document.querySelector('.first-name').textContent = localStorage.getItem('Name1');
        if (Socket1Name.value == "") {
            Socket1Name.value = "РОЗЕТКА 1"
        }
    }
    if (Socket1TimeHourOn) {
        Socket1TimeHourOn = localStorage.getItem('Hour1On');
        document.querySelector(".timepicker_hours_1_on").textContent = localStorage.getItem('Hour1On');
    }
    if (Socket1TimeMinutesOn) {
        Socket1TimeMinutesOn = localStorage.getItem('Minute1On');
        document.querySelector(".timepicker_minutes_1_on").textContent = localStorage.getItem('Minute1On');
    }
    if (Socket1TimeHourOff) {
        Socket1TimeHourOff = localStorage.getItem('Hour1Off');
        document.querySelector(".timepicker_minutes_1_off").textContent = localStorage.getItem('Hour1Off');
    }
    if (Socket1TimeMinutesOff) {
        Socket1TimeMinutesOff = localStorage.getItem('Minute1Off');
        document.querySelector(".timepicker_minutes_1_off").textContent = localStorage.getItem('Minute1Off');
    }

});
document.querySelector(".first-name").textContent = localStorage.getItem('Name1'); //пометка
Socket1Name = localStorage.getItem('Name1');

document.querySelector(".timepicker_hours_1_on").textContent = localStorage.getItem('Hour1On');
Socket1TimeHourOn = localStorage.getItem('Hour1On');

document.querySelector(".timepicker_minutes_1_on").textContent = localStorage.getItem('Minute1On');
Socket1TimeMinutesOn = localStorage.getItem('Minute1On');

document.querySelector(".timepicker_hours_1_off").textContent = localStorage.getItem('Hour1Off');
Socket1TimeHourOff = localStorage.getItem('Hour1Off');

document.querySelector(".timepicker_minutes_1_off").textContent = localStorage.getItem('Minute1Off');
Socket1TimeMinutesOn = localStorage.getItem('Minute1Off');

Все переменные были объявлены ранее. Ошибка Саnnot set properties of null (setting ‘textContent’) находится на строке с пометкой

Не знаю в чем дело, пытался по разному.