Category: javascript

I’m new with react-native development, and I do not really understand what happens under the hood when using navigation.navigate.

So I have a basic component that displays a list of items using FlatList, and when clicking on an ListCard I want to go to the detail view of that item. I noticed if the list had many items the navigation was a bit slow due to all cards where re-rendered when navigating.

The renderItem handled navigation to another screen, so I thought maybe it changed state “under the hood” and that’s why the parent re-rendered and that causes all children to re-render.

So I created a separate file <Child {…props }/> and then inside of this file I handle the navigation (outside of the parent). But each time I navigate from the child I get “Parent rerender” and then all children “I rerender”)

export const Parent = () => {
   const [alotofItems, setAlotOfItems] = useState<AlotOfItems[]>([])
   console.log("Parent rerender")
   return <FlatList renderItems={({item}) => <Child item={item} />} 
 
}

export const Child = (props) => {
   const navigation = useNavigation()
   console.log("I rerender")
   return <ListCard onPress={() => navigation.navigate(DETAIL_CARD)} />
}

If I change so I don’t use navigation.navigate and instead go like this, everything works as expected. Only one console.log from the child I actually clicked. What is going wrong, or is this how react-navigation works? How can I overcome this issue?

export const Child = (props) => {
   const [openDetail, setOpenDetail] = useState(false)

    console.log("I rerender")

    return ( 
      <>
        {openDetail && <DetailCard /> }
         <ListCard onPress={() => setOpenDetail(true} />
      </>
 )
}

In my Ionic app I’m using Leaflet. On click on a marker a popup is showing:

let content = `<h3>Test Heading</h3>`;
L.marker([48.74494079278616, 9.32190382917665]).addTo(this.map).bindPopup(content);

This works as expected. Now I don’t want to have my HTML Code inside my TS Component code, because in the popup I want to have Buttons and Input Fields with functionality. My idea is, to access here a new component I created. I created the Component with ionic generate component markerPopup. Inside another page in HTML code I can use this component, so this part is working. I just don’t know, how to get it inside the TS running.
What I tried:

L.marker([.., ..]).addTo(this.map).bindPopup(`<app-marker-popup></app-marker-popup>`);

I´m trying to send data to my component table when i clicked a button. My another component should fill a table with data received. i´m using composition API. To try this i´m building this code:

in my table component:

export default {
        name: 'nAsignedCalls',    
        props: { registers: Object },

        setup() {
            return {
            }
        }
}

and in my template i have a v-for that i check it´s ok, sending static data:

<template v-for="item of registers">
                <tr>
                    <td><input type="checkbox" name="assign_register" style="width: 20px; height: 20px;"></td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }} </td>
                    <td>{{ item.address }}</td>
                    <td>{{ item.province }} </td>
                    <td>{{ item.phone }} </td>

i said that i check it with statics data:

in my parent component i did:

var data = {
                    "address":"CALLE CALLEJAS, 8",
                    "city":"PURULLENA",
                    "cp":"18519",
                    "created_at": "null",
                    "id":"895",
                    "mobile_phone":"null",
                    "name":"Aguilera Muriel Fatimas",
                    "phone":"958.690.236",
                    "province":"GRANADA",
                    "source":"",
                    "updated_at":"2021-11-05T07:35:30.000000Z",
                  }
const registers = reactive({})
return {
   registers
}

result, my table it´s filled.

but when i´m using axios… it´s always empty. I created a composable with function to get my data sending from my parent component, parameter to create query in my API with laravel. From my API i receive my data how my data object but with 160 element

Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, 14: {…}, 15: {…}, 16: {…}, 17: {…}, 18: {…}, 19: {…}, 20: {…}, 21: {…}, 22: {…}, 23: {…}, 24: {…}, 25: {…}, 26: {…}, 27: {…}, 28: {…}, 29: {…}, 30: {…}, 31: {…}, 32: {…}, 33: {…}, 34: {…}, 35: {…}, 36: {…}, 37: {…}, 38: {…}, 39: {…}, 40: {…}, 41: {…}, 42: {…}, 43: {…}, 44: {…}, 45: {…}, 46: {…}, 47: {…}, 48: {…}, 49: {…}, 50: {…}, 51: {…}, 52: {…}, 53: {…}, 54: {…}, 55: {…}, 56: {…}, 57: {…}, 58: {…}, 59: {…}, 60: {…}, 61: {…}, 62: {…}, 63: {…}, 64: {…}, 65: {…}, 66: {…}, 67: {…}, 68: {…}, 69: {…}, 70: {…}, 71: {…}, 72: {…}, 73: {…}, 74: {…}, 75: {…}, 76: {…}, 77: {…}, 78: {…}, 79: {…}, 80: {…}, 81: {…}, 82: {…}, 83: {…}, 84: {…}, 85: {…}, 86: {…}, 87: {…}, 88: {…}, 89: {…}, 90: {…}, 91: {…}, 92: {…}, 93: {…}, 94: {…}, 95: {…}, 96: {…}, 97: {…}, 98: {…}, 99: {…}, …}

if i don´t use static data, how i said, i´m using this function to send data to my composable and assign data to my reactive variable.

const fetchData = async (param_search) => {
                address = document.getElementById("address").value
                if( address != "" ) {
                    param_search["parameter"] = "address";
                    param_search["value"] = address;
                }

                city = document.getElementById("city").value
                if( city != "" ) {
                    param_search["parameter"] = "city";
                    param_search["value"] = city;
                }

                cp = document.getElementById("postal_code").value
                if( cp != "" ) {
                    param_search["parameter"] = "cp";
                    param_search["value"] = cp
                }

            registers.value = await getRegisters(toRef(param_search,'param_search'))
            console.log(registers.value)
            //emit('submit',registers.value);
        }

and in return i have:

return {
      //message,
      //showMessage,
      //count,
      fetchData,
      registers,
      //submit
      //increment,
}

i´m thinking that i need a personaliced event to send this data to my component table, but when i send static data, it´s not necessary… I don´t know

to add my data to my component table i´m doing this:

<div id="app5">
    <nAsignedCalls :registers="registers"></nAsignedCalls>
</div>

but never arrive my data, this it´s my problem. When it´s statics yes, but if i want this data to be send when i click my button, never arrive to my table component… What i´m doing wrong?

Considering I have 2 components on my route, this is code for problem demonstration purpose:

const List = () => {
    const fetcher = useFetcher();

    useEffect(() => {
        if (fetcher.type === 'init') {
            fetcher.load('/exercises/some-list-id'); // This is outside our route tree
        }
    }, [fetcher.type])
}

const RemoveFromList = () => {
    const fetcher = useFetcher();
    const removeFetcher = useFetcher();

    const handleClick = useCallback(() => {
        removeFetcher.submit({
            subaction: 'removeListItem',
            id: 'some-item-id'
        }, { method: 'post' });
    }, []);

    useEffect(() => {
        if (removeFetcher.type === 'done') {
            // That code do not update data in <List/> component
            fetcher.load('/exercises/some-list-id');
        }
    }, [removeFetcher.type]);
}

Given <List/> and <RemoveFromList/>, these 2 components do not have data from fetcher.load in sync when I am used to have such functionality in RTK Query or Apollo Client.

I know that Remix is refetching all loaders going from root and going down on route tree:

But my fetcher loader /exercises/some-list-id is not refetched. I assume that because that loader is outside my loader’s route tree.

Do I understand correctly that kind of fetcher will not be refetched and I have to think of some kind of reducer or passing functions which will reload the data?

I am trying to keep data from API in 2 separate components in sync.

Just started practicing TS yesterday and I gotta admit it is more confusing than I thought, especially on for the functions/custom hooks. This is Inputs Components of a login form and 2 small basic functions.

Inputs Component:

    import React, {FC, useState} from "react";
    import {LoginInputPropTypes} from "../../../../Interfaces/LoginInputPropTypes";
    import {StyledInputs} from "./styledInputs";
    import {handleFieldIcons} from "./helpers";
    import {handlePasswordInputType} from "./helpers";
    
    import ShowPassword from "../../../../Assets/images/fields/passwordShow.svg"
    import HidePassword from "../../../../Assets/images/fields/passwordNotShow.svg"
    
    
    
    const Inputs: FC<LoginInputPropTypes> = (props) => {
        const [showPassword, setShowPassword] = useState<boolean>(false)
    
    
        return (
            <StyledInputs className="Styled_Component-Inputs">
                <div className="inputs_inputs-wrapper">
                    {props?.inputsData?.map((el) => {
                        const {id, placeholder, validation, value} = el
                        return (
                            <div key={id} className="inputs_input-container">
                                <input className="inputs_input" placeholder={placeholder} type={() => handlePasswordInputType(showPassword, value)}/>
                                <div className="inputs_field-icon-container">
                                    {handleFieldIcons(value)}
                                </div>
                                {value === "password" ? (
                                    <div className="inputs_password-icon-container" onClick={() => setShowPassword(!showPassword)}>
                                        {showPassword ? <ShowPassword/> : <HidePassword/>}
                                    </div>
                                ) : null}
                            </div>
                        )
                    })}
                </div>
            </StyledInputs>
        )
    }
    
    export default Inputs

Functions JS:

export function handleFieldIcons(value: string) {
    if (value === "email") return <Email/>
    else if (value === "password") return <Password/>
    else return null
}

export function handlePasswordInputType(showPassword: boolean, value: string) {
    if (value === "password") {
        if (showPassword) return "text"
        else if (!showPassword) return "password"
        else return null
    } else return null
}

Issues:

Interface for the input props:

Questions:

1. How to fix the TS error
2. Why the value if it is string has to be string | undefined
3. Proper way of using functions in TS
4. Can I check for the types of the return elements of a function
5. How would i pass for example the setState function of the example above to the function as a param, what would be its type?

I have a block printer that can be printed by sending POST data.
My problem is that I have PHP running on the server, so I can’t call 127.0.0.1 from there.
It is not possible with JavaScript because of the CROS rule.

What is the solution?
I’m interested in all solutions!

Thanks!

I created “Web Services/API” in Nodejs(Expressjs framework) on localhost and now i want to put this code into server so i want to know that What type of server supports Node.JS applications?

Does it need to be a dedicated server or something else ?

Thank you in advance.

We have implemented popover in button click event. When user resize the browser window. popover position is not match with button. Can anyone suggest here

Thanks

I’m working on a project for the University, that uses the three.js library. I am new to everything related to Computer Graphics, and have started learning this specifically for my course.

I thought that following their own tutorial (Creating a scene) might be pretty helpful in building my own perspective on what three.js and WebGL actually do.

I successfully managed to create a scene with a green cube that rotates itself, based on the code mentioned on the link above.

Basically, I have an index.html file that has a <script> tag which points to my main.js file, that looks like this:

import * as THREE from 'three';


const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube     = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}

// Initiate function or other initializations here
animate();

I am using vite to start my static server. This is my output:

The problem comes in the next section of the tutorial, the one related to the WebGL compatibility check. The link attached will redirect you to a tutorial section that features a portion of code containing a check.

I tried updating my main.js with one more import (WebGL) and a check, before calling the animate() function:

import * as THREE from 'three';

// First Change: importing WebGL
import { WebGL } from 'three/addons/capabilities/WebGL.js';


const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube     = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}

// Here comes the second change: if statement before calling animate()
if ( WebGL.isWebGLAvailable() ) {
    animate();
} else {
    const warning = WebGL.getWebGLErrorMessage();
    document.getElementById( 'container' ).appendChild( warning );
}

The problem is, I’m receiving a white screen right now. Navigating to http://localhost:5173/ doesn’t output my rotating green cube anymore. I’ve realized that deleting the if statement doesn’t fix anything, the problem being that import statement of the WebGL. When deleting the import, the canvas seems to be output properly again.

Please understand the fact that I am still new to whatever JavaScript and 3D rendering mean, but I am willing to learn.

My question is, what might be the problem that actually causes that white screen?

i was making monkeytype like typing test site. there’s an input for typing, div for cursor, and a div for words, each word is span inside that div. how move cursor through div as I type on input?

I am developing a program to traverse through various airports and output the shortest path between PHX and BKK using BFS. However, I am facing difficulty in printing the result.

The expected output (shortest path) is: PHX -> LAX -> MEX -> BKK

const airports = 'PHX BKK OKC JFK LAX MEX EZE HEL LOS LAP LIM'.split(' ');

const routes = [
    ['PHX', 'LAX'], 
    ['PHX', 'JFK'],
    ['JFK', 'OKC'],
    ['JFK', 'HEL'],
    ['JFK', 'LOS'],
    ['MEX', 'LAX'],
    ['MEX', 'BKK'],
    ['MEX', 'LIM'],
    ['MEX', 'EZE'],
    ['LIM', 'BKK'],
];


// The graph
const adjacencyList = new Map();

// Add node
function addNode(airport) {
    adjacencyList.set(airport, []);
}

// Add edge, undirected
function addEdge(origin, destination) {
    adjacencyList.get(origin).push(destination);
    adjacencyList.get(destination).push(origin);
}

// Create the Graph
airports.forEach(addNode);
// loop through each route and spread the values into addEdge function
routes.forEach(route => addEdge(...route));

Adding nodes as the origin(station), and edges as the destination, the graph is undirected

function bfs(start) {
    const visited = new Set();
    visited.add(start); // adding the starting node into the visited list
    const queue = [start];

    while (queue.length > 0) {

        const airport = queue.shift(); // mutates the queue
        const destinations = adjacencyList.get(airport);

        for (const destination of destinations) {

            if (destination === 'BKK')  {
                console.log(`BFS found Bangkok!`)
                //console.log(path);
                
            }

            if (!visited.has(destination)) {
                visited.add(destination);
                queue.push(destination);
                
            }
        }
    }
}

bfs('PHX')

I want to implement pwa in existing angular application for making complete offline capability. But I am stuck with that handling http post request. For example there is an auto complete in a module. when we type text in the input box, application will invoke post api with payload with search text. So my question is how can I handle this api when offline.

If I store master data in indexed DB then I will write all the api functionality in the frontend. And the other way if I keep api response in cache or Indexed DB then I will need to save all the different response of different payload.

I am trying to upgrade a bootstrap library from 3.37 to 4.6.2 in dojo framework but getting an error when I run the project as shown in in this image popper.js error image.

If I include popper.js file in the project I would get the error as shown here multipleDefine error

could anyone please suggest how to resolve this??

I have replaced bootstrap 4.6.2 files under JavaScript library and added popper.js file externally.

Expectation – to resolve the error I am getting at the moment not able to understand the root cause.

I need to call a function inside a dropdown on clicking on a children which is a datepicker library

<dropdownParent>
<datepicker
onChange={()=> childFunction()}
>
</datepicker>
</dropdownParent>

in dropdownParent there is a toggle function which i need to call when this child function is called and I tried callback and other method but since its a library i am confused on hoe to detect the chnage and pass it in parent to invoke parent function

I have tried using pdf-lib but could not find any unlock functionality with the library. I also tried with qpdf command using spawn child process but even it was not helpful. Can anyone please help me on this one ?

const qpdfProcess = spawn('qpdf', ['--password=401000056762', '--decrypt', '-', '-']); qpdfProcess.stdin.write(pdfBuffer) const decryptedPdf = qpdfProcess.stdout()