Category: javascript

I only have Day 1, 3, 9 and 14 on my database. All i want is to display is day 1 – 31 on the month of march

I have a form that sends data to a google sheet:

<form id="form1" name="form" method="post" 
action="https://script.google.com/macros/s/blablabla/exec">
<div class="forma2">
<input type="email" required name="Email" id="email" placeholder="Email" 
class="forma3 email3">
<input type="submit" name="submiti" value="Send" class="margin-r5 btn2 forma">
</div>
</form>

The below code intercepts the event, gives an alert, and keeps the user to the page:

window.addEventListener("load", function() {
const form = document.getElementById('form1');
form.addEventListener("submit", function(e) {
e.preventDefault();
const data = new FormData(form);
const action = e.target.action;
fetch(action, {
method: 'POST',
body: data,
})
.then(() => {
alert("Success!");
})
});
});

How can I:

(1) display a simple modal window, instead of the above console alert, and

(2) keep the user in the same page?

Heading ##i want to make the navbar rensponsive, changing between desktop nav and mobilenav depanding the scaling of the screen.

Also make the sidepanel open and close with the same button .

<script setup>
import { onMounted, ref,  } from "@vue/runtime-core";


const windWidth = ref(null);
const desktopNav = ref(null);
const mobileNav = ref(null);
const mySidepanel = ref(null);

const openNav = () => {
  mySidepanel.value = {
    width: "250px",
  };
};

const closeNav = () => {
  mySidepanel.value = {
    width: "0",
  };
};

onMounted(() => {
  windWidth.value = window.innerWidth;
  if (windWidth.value >= 750) {
    desktopNav.value = {
      display: "block",
    };

    mobileNav.value = {
      display: "none",
    };
  } else if (750 >= windWidth.value) {
    desktopNav.value = {
      display: "none",
    };
    mobileNav.value = {
      display: "block",
    };
  }
  window.addEventListener('resize', this.onMounted);
  this.onMounted();
  console.log(windWidth.value);
});
</script>

Hello guys im a beginner in javascript and i need your help, recently i started a project and in authentification im using json web token and im stuck with the logout code and i need help.
i want the session to stay on untill the user logout from it and thansk in advance.
here is my code :

Hello guys im a beginner in javascript and i need your help, recently i started a project and in authentification im using json web token and im stuck with the logout code and i need help.
i want the session to stay on untill the user logout from it and thansk in advance.
here is my code :

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Button, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom"
import Loading from '../component/loading/loading'
import Error from '../component/errormsg/errormsg'
import MainScreen from '../component/mainscreen/mainscreen'
import './login.css'

function App() {
    const navigate = useNavigate()

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState(false)
    const [loading, setLoading] = useState(false)

    async function loginUser(event) {


  

        event.preventDefault()
        setLoading(true)

        // eslint-disable-next-line no-unused-vars
        const response = await fetch('http://localhost:2090/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email,
                password,
            }),
        })

        const data = await response.json()
        
        if(data.user) {
            localStorage.setItem('token', data.user)
            
            if(data.status === 'ok') {
                navigate('/dashboard')
              }
        } else {
            setError(true)
            setLoading(false)
        }

    }

    return (
       

        <MainScreen title="LOGIN">
      <div className="loginContainer">
        {error && <Error variant="danger">{error}</Error>}
        {loading && <Loading />}
        <Form onSubmit={loginUser}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control
              type="email"
              value={email}
              placeholder="Enter email"
              onChange={(e) => setEmail(e.target.value)}
            />
          </Form.Group>

          <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              value={password}
              placeholder="Password"
              onChange={(e) => setPassword(e.target.value)}
            />
          </Form.Group>

          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
        <Row className="py-3">
            <Col>
            <Link to="/login">Forgot Password or Email ?</Link>
           
            </Col>
        </Row>
        <Row className="py-3">
          <Col>
            You dont have an account ? <Link to="/register">Register Here</Link>
          </Col>
        </Row>
      </div>
    </MainScreen>

    );
}

export default App;

This is how my html looks like

<table id="emails-list">
        <tbody>
            
        </tbody>
    </table>

Then using Javascript I want to add rows and columns but I first want to clear anything that is in the tbody so as to not append/stack the same rows and columns everytime the function is called.

function DisplayEmails(item){
  
  //searching for table
  var table = document.querySelector('tbody');

  // somehow clear the tbody of the table here ?????
  
  // adding a row
  var row = table.insertRow(0);
  // adding 3 cells to the row
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = item.sender;
  cell2.innerHTML = item.subject;
  cell3.innerHTML = item.timestamp;

I’m using Ag-Grid with infinite row model. I have the same issue as How can I set the initial start page in the infinite row model?. Basically my problem is that I want to set the initial page for the first load, to avoid always loading page 0 and having to make two or more API calls. Is there any way or workaround to achieve this?

I am trying to create checklist that ensures the completion process of a registration process.

I am trying to work through a problem with my array state in React Native and correctly updating the array of objects when I click a button on one of the components.

Here is a video of the problem occurring, which is probably a better way to explain the issue: https://cdn.discordapp.com/attachments/935693286566416417/953045147397001276/RPReplay_Final1647294055.MP4

Here’s the relevant code that might offer some insight:

MealPlanner.Js

const MealPlannerScreen = props => {
const minDate = new Date();
const [mealPlannerData, setMealPlannerData] = useState([]);
const [loading, setLoading] = useState(true)
const [selectedDate, setSelectedDate] = useState("03/13/2022")
const [breakfast, setBreakfast] = useState([])

 const getMealPlannerData = async(date = '03/13/2022') => {
  
     const isDataAvailable = await AsyncStorage.getItem("meal_planner")

    if (isDataAvailable) {
        const parsedData = JSON.parse(isDataAvailable)
       
        let breakfastData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Breakfast'));
        });
        let lunchData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Lunch'));
        });
        let dinnerData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Dinner'));
        });
        let snacksData = parsedData.filter(function (e) {

            return ((e.date = date) && (e.meal == 'Snacks'));
        });
    
        setMealPlannerData(JSON.parse(isDataAvailable))
        setBreakfast(breakfastData)
        setLunch(breakfastData)
        setDinner(dinnerData)
        setSnacks(snacksData)
        
    } else {
        setMealPlannerData([])
    }

} 




const childToParent = async(unique_id, meal, date) => {

    const mealFiltered = mealPlannerData.filter(function (e) {
        return e.unique_id != unique_id;
    });
    console.log(unique_id)
    console.log(date)

    if (meal === 'Breakfast') {
        let breakfastData = mealFiltered.filter(function (e) {
            return ((e.date = date) && (e.meal == 'Breakfast'));
        });
        console.log(breakfastData);
        setBreakfast(breakfastData)
    }
   
    
return (

    <Container style={styles.background_general}>
        <View>
                            {breakfast.map((p, i) => {
                                console.log(breakfast)
                            return (<>
                                <FoodItem meal={"Breakfast"} date={p.date} food={p.recipe_name} calories={p.calories} servings={p.servings} unique_id={p.unique_id} mealData={mealPlannerData} childToParent={childToParent}/>
                                <View style={{
                                    borderBottomColor: 'rgba(0,0,0,0.1)',
                                    borderBottomWidth: 1,
                                }}>

                                </View>
                            </>
                            )
                        })} 
                   
                    </View>
    </Container>
  
   
}

}

And the FoodItem.js

const FoodItem = props => {

removeMeal = (unique_id, meal) => {
    props.childToParent(unique_id, meal, props.date)
    
}
    
const renderRightActions = useCallback((progress, dragX) => {
    const trans = dragX.interpolate({
        inputRange: [-300, -160, 0],
        outputRange: [0, 0, 160],
    });
    return (
        <Animated.View
            style={{
                transform: [{ translateX: trans }],
            }}
        >

            <LinearGradient
                colors={["#6e269b", "#35184e"]}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={{
                    flexDirection: "row",
                    width: 160,
                    height: "100%",
                    borderRadius: 20
                }}
            >
                <RectButton style={{
                    justifyContent: "center",
                    alignItems: "center",
                    paddingHorizontal: 16,
                    flex: 1
                }} onPress={() => {removeMeal(props.unique_id, props.meal) }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Icon type="FontAwesome" name="trash" style={{ fontSize: 18, color: 'white', paddingRight: 10, marginTop: 2 }} />
                        <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 18 }}>
                            Remove
                        </Text>
                    </View>
                </RectButton>
            </LinearGradient>

        </Animated.View>);
}, []);


return (
    <View style={{
        padding: 20
    }}>
        <Swipeable renderRightActions={renderRightActions}>

            <View padding-6 row>
                <View style={{ alignItems: "center" }}>
                </View>
                <View >
                    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
                        {props.food}
                    </Text>
                    <View row marginT-8>
                        <View row>
                            <Text R14 color6D marginL-4>
                                {props.calories} cal
                            </Text>
                        </View>
                        <View row marginL-24>
                            <Text R14 color6D marginL-4>
                               {props.servings} servings
                            </Text>
                        </View>
                    </View>
                </View>
            </View>

        </Swipeable>
    </View>
)

}

Any help would be greatly appreciated!

I want the script command below to have something like where it should run tests in that folder name

"scripts": {
    "test": "jest --testPathPattern==tests/<folder-name> --maxWorkers=2"
  },

to run tests in a particular folder.

This command is executed in a bash file run-tests.sh as shown below

#!/bin/bash
npm run test

is it possible to have something like

#!/bin/bash
npm run test <folder-name>  

I have a pwa app that basically is a simple form. If the network is offline, it was saved to local storage(indexedDB) and send afterwards when the conexion is online. Up to here all is ok, but I would like to show a message to the user ‘the form was sent to the server’ and I couldn’t get it ok. I use the property ‘SYNC’ for doing this feature. In my service worker the part of the code relative to this feature is:

…..

self.addEventListener(‘sync’, e => {

console.log('SW: Sync');

if ( e.tag === 'new-form' ) {

    // send to DB when onLine
    const resp = sendForm(); //up to here all is OK.

    self.registration.showNotification(' Succesfully send to MongoDB');// this line is not working
   
    
    e.waitUntil( resp);


    
   
}

});

…….

What could be wrong?, in javascript side, It is verified that Notification.permission === ‘granted’.

How do companies handle authentication in their multi-tenant web apps?

Essentially I have a single PostgreSQL database instance with many tables. Each table has a workspace_id column which I will use to use to grant/deny access. You can think of a workspace as a client and a single user can be associated with multiple workspaces.

My initial thought was to:

1. Use the frontend app and let the user send the email and password to
   the backend.
2. Backend validates details and returns all the workspaces the user belongs to.
3. The frontend app displays the workspaces.
4. User selects the workspace they want to login into. The id of the workspace and the user details that were passed in step 1 is again to the backend.
5. The backend validates again all the details and issues a jwt token containing the user details and the workspace id.
6. Later when the user tries to access any resource I will extract the workspace id from the token to check if the user has access to a resource or not.

I am halfway through implementing what I’ve described above but I am not sure if that’s the best approach. What do you think?

I’m trying to add a different style.css file for a specific block in html, so basically using two style.css in the same html and this specific block will only get its rules from the style.css that be gonna be assigned to?

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Askbootstrap">
    <meta name="author" content="Askbootstrap">
    <link rel="icon" type="image/png" href=" {% static 'img/fav.png' %} ">
    <title>Swiggiweb - Online Food Ordering Website Template</title>
    <!-- Slick Slider -->
    <link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick.min.css' %} " />
    <link rel="stylesheet" type="text/css" href=" {% static 'vendor/slick/slick-theme.min.css' %} " />
    <!-- Feather Icon-->
    <link href=" {% static 'vendor/icons/feather.css' %} " rel="stylesheet" type="text/css">
    <!-- Bootstrap core CSS -->
    <link href=" {% static 'vendor/bootstrap/css/bootstrap.min.css' %} " rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href=" {% static 'css/style.css' %} " rel="stylesheet">
    <!-- Sidebar CSS -->
    <link href=" {% static 'vendor/sidebar/demo.css' %} " rel="stylesheet">
     <!-- Stylesheet -->
    <link rel="stylesheet" href=" {% static 'assets/css/animate.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/magnific.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/jquery-ui.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/nice-select.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/owl.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/slick-slide.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/fontawesome.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/remixicon/remixicon.css' %} ">
    <link rel="stylesheet" href=" {% static 'assets/css/responsive.css' %} ">
          <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap" rel="stylesheet">

</head>

this the head, as you can see there is already a style css file there, thisis the html block that need a diffrenet style.css file

 <section class="product-area pd-bottom-90">

    <div class="container"> ............


        
</section>

when i try to add this line to refer to the other style.css

<link rel="stylesheet" href=" {% static 'assets/css/style.css' %} ">

the page break and the layout change

the code works fine, but I need help to make some improvements or just optimize JS code.

1. if I am in #item1 and press to go to #item6 add .active class to #item6 instead of add .active and remove from #item1 … #item2 … #item3 … until I get to #item6

2. when i am in #item6 and I use scroll not click to go to #item5(or #item4) remove .active class from #item6 and use default scroll to .active

Hope you understand me. Sorry for my English. Thanks.

        <header id="header">
            <div id="header-menu">
                <ul class="menu">
                    <li><a class="menu-item-1" href="#item1">Item1</a></li>
                    <li><a class="menu-item-2" href="#item2">Item2</a></li>
                    <li><a class="menu-item-3" href="#item3">Item3</a></li>
                    
                    <li class="centered-logo no-padding">
                        <a href="#home">
                            <img class="logo" src="images/logo.png" />
                        </a>
                    </li>
                    
                    <li><a class="menu-item-4" href="#item4">Item4</a></li>
                    <li><a class="menu-item-5" href="#item5">Item5</a></li>
                    <li><a class="menu-item-6" href="#item6">Item6</a></li>
                </ul>
            </div>
        </header>

$( document ).ready(function()
{
    $(window).scroll(function()
    {
        var Scroll          = $(window).scrollTop() + 1;
        SectionOneOffset    = $('#item1').offset().top;
        SectionTwoOffset    = $('#item2').offset().top;
        SectionThreeOffset  = $('#item3').offset().top;
        SectionFourOffset   = $('#item4').offset().top;
        SectionFiveOffset   = $('#item5').offset().top;
        SectionSixOffset    = $('#item6').offset().top;
        
        if (Scroll >= SectionOneOffset) { // If you have scrolled past section one do this.
            $(".menu-item-1").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-1
        } else { // If you have not scrolled section one do this.
            $(".menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
        }
        
        if (Scroll >= SectionTwoOffset) { // If you have scrolled past section two do this.You can duplicate this for as many sections as you want.
            $(".menu-item-2").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
            $(".menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
        } else { // If you have not scrolled section two do this.
            $(".menu-item-2").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-2
        }
        
        if (Scroll >= SectionThreeOffset) {
            $(".menu-item-3").addClass("active");
            $(".menu-item-2").removeClass("active");
        } else {
            $(".menu-item-3").removeClass("active");
        }
        if (Scroll >= SectionFourOffset) {
            $(".menu-item-4").addClass("active");
            $(".menu-item-3").removeClass("active");
        } else {
            $(".menu-item-4").removeClass("active");
        }
        if (Scroll >= SectionFiveOffset) {
            $(".menu-item-5").addClass("active");
            $(".menu-item-4").removeClass("active");
        } else {
            $(".menu-item-5").removeClass("active");
        }
        if (Scroll >= SectionSixOffset) {
            $(".menu-item-6").addClass("active");
            $(".menu-item-5").removeClass("active");
        } else {
            $(".menu-item-6").removeClass("active");
        }
    });
});

I got this code (the answer from Roko C. Buljan). I am transforming it into a class where each instance should be a different wheel.

The constructors receives 3 parameters, 2 of them are dom elements and the least one is an array with all the sectors of the wheel.

The problem is that js says the var wheel (the dom element I passed through the constructor) is undefined.

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>site do prof Matheus</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <!-- <script src='./src/main.js'></script> -->
</head>

<body>
    <div id="roulette">
        <canvas id="wheel" width="300" height="300"></canvas>
        <div id="spin">SPIN</div>
    </div>
    <div id="op_roulette">
        <canvas id="op_wheel" width="300" height="300"></canvas>
        <div id="op_spin">SPIN</div>
    </div>
    <script type="module" src="./src/main.js"></script>
</body>

</html>

main.js:

import { wheel } from "./wheel.js";

const sectors = [
    { color: "#f82", label: "1" },
    { color: "#0bf", label: "2" },
    { color: "#fb0", label: "3" },
    { color: "#0fb", label: "4" },
    { color: "#b0f", label: "5" },
    { color: "#f0b", label: "-1" },
    { color: "#bf0", label: "-2" },
    { color: "#f82", label: "-3" },
    { color: "#0bf", label: "-4" },
    { color: "#fb0", label: "-5" },
    { color: "#0fb", label: "0" },
    { color: "#b0f", label: "n" },
];

var mywheel = new wheel(
    document.querySelector("#spin"),
    document.querySelector("#wheel").getContext('2d'),
    sectors
)

wheel.js:

class wheel {
    static friction = 0.991; // 0.995=soft, 0.99=mid, 0.98=hard
    rad = wheel.canvas.width / 2;
    arc = 2 * Math.PI / sectors.length;

    angVel = 0; // Angular velocity
    ang = 0; // Angle in radians

    getIndex = () => Math.floor(sectors.length - ang / (2 * Math.PI) * sectors.length) % sectors.length;

    drawSector(sector, i) {
        const ang = arc * i;
        wheel.save();
        // COLOR
        wheel.beginPath();
        wheel.fillStyle = sector.color;
        wheel.moveTo(rad, rad);
        wheel.arc(rad, rad, rad, ang, ang + arc);
        wheel.lineTo(rad, rad);
        wheel.fill();
        // TEXT
        wheel.translate(rad, rad);
        wheel.rotate(ang + arc / 2);
        wheel.textAlign = "right";
        wheel.fillStyle = "#fff";
        wheel.font = "bold 30px sans-serif";
        wheel.fillText(sector.label, rad - 10, 10);
        //
        wheel.restore();
    };

    rotate() {
        const sector = sectors[getIndex()];
        wheel.canvas.style.transform = `rotate(${ang - Math.PI / 2}rad)`;
        EL_spin.textContent = !angVel ? "SPIN" : sector.label;
        EL_spin.style.background = sector.color;
    }

    frame() {
        if (!angVel) return;
        angVel *= friction; // Decrement velocity by friction
        if (angVel < 0.002) angVel = 0; // Bring to stop
        ang += angVel; // Update angle
        ang %= 2 * Math.PI; // Normalize angle
        rotate();
    }

    engine() {
        frame();
        requestAnimationFrame(engine)
    }

    // INIT
    constructor(EL_spin, wheel, sectors) {
        this.sectors = sectors;
        this.EL_spin = EL_spin;
        this.wheel = wheel;
        this.wheel.sectors.forEach(this.drawSector.bind(this));
        rotate(); // Initial rotation
        engine(); // Start engine
        this.wheel.EL_spin.addEventListener("click", () => {
            if (!angVel) angVel = Math.random() * (0.25 - 0.35) + 0.35;
        });
    };
}

export { wheel };

main.css:

#roulette {
    display: inline-block;
    position: relative;
    overflow: hidden;
  }
  
  #wheel {
    display: block;
  }
  
  #spin {
    font: 1.5em/0 sans-serif;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    margin: -15%;
    background: #fff;
    color: #fff;
    box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: 0.8s;
  }
  
  #spin::after {
    content: "";
    position: absolute;
    top: -17px;
    border: 10px solid transparent;
    border-bottom-color: currentColor;
    border-top: none;
}
#op_roulette {
    display: inline-block;
    position: relative;
    overflow: hidden;
  }
  
  #op_wheel {
    display: block;
  }
  
  #op_spin {
    font: 1.5em/0 sans-serif;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    margin: -15%;
    background: #fff;
    color: #fff;
    box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: 0.8s;
  }
  
  #op_spin::after {
    content: "";
    position: absolute;
    top: -17px;
    border: 10px solid transparent;
    border-bottom-color: currentColor;
    border-top: none;
}

and here is the error im getting:

Uncaught TypeError: Cannot read properties of undefined (reading 'width')

    at wheel.<instance_members_initializer> (wheel.js:3:24)

    at new wheel (wheel.js:54:16)

    at main.js:18:15

I have a JSON

let users = {
    activeUsers: [
        {
            userId: '1',
            email: '[email protected]',
            givenName: 'Marc',
            familyName: 'S-t',
        },
        {
            userId: '2',
            email: '[email protected]',
            givenName: 'Marc',
            familyName: 'S-t',
        },
        {
            userId: '3',
            email: '[email protected]',
            givenName: '',
            familyName: 'B-n',
        },
        {
            userId: '4',
            email: '[email protected]',
            givenName: 'Jeroen',
            familyName: 'V-k',
           
        },
        {
            userId: '5',
            email: '[email protected]',
            givenName: 'Dastan',
            familyName: 'H-d',
           
        },
        {
            userId: '6',
            email: '[email protected]',
            givenName: 'Emin',
            familyName: 'D-v',
         
        },
        {
            userId: '7',
            email: '[email protected]',
            givenName: 'Douwe',
            familyName: 'H-a',
           
        },
    ],
};

need to make a dropdown with the above fields i have done this

    const renderlists = () => {
        return (
            <div>
                            <div>
                             <CheckboxDefault
                                    label={'select all'}  // this button to select and unselect all
                                    onChange={(event) => handleselectAll(event.target.checked)}
                             />
                            </div>
                            <div>
                                <p> Selected Contacts({userCount}) </p>
                            </div>
                  

                <div>
                    <div>
                        <InputSearch
                            placeholder={'search user'} // for searching user form list
                            onChange={(event) => handleSearch(event.target.value)}
                        />
                    </div>
                </div>
                <div>
                    {renderUsers(usersToShow, true)} //method to show user after search
                </div>
            </div>
        );
    };

i am not able to achieve the select all functionality when the user search and when the user do not search and uses the select and unselect all

when a user check select all, all the seven user should be selected and on unselecting any one of then the select all checkbox should be unchecked,
second when a user search the user the search result should come if all of them are selected the select all should be checked otherwise will work same that on selecting select all on the search result item it should select and unselect them but not the others which are not there in the search list, on selection the userid should be pushed into an array for hose users which are selected.