डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Show all the users using NEXT JS mongodb

import React, { useState } from "react";

import Layout from "./public/layout";
import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,  
  TableContainer,
  Button,
  useDisclosure,
} from '@chakra-ui/react'


import DeleteUser from "../parts/Users/DeleteUser";
import EditUser from "../parts/Users/EditUser";

import {QueryClient, dehydrate, useQuery} from 'react-query';
import {getUsers} from "../controllers/users";

const Home=()=>{

    const { isLoading, data } = useQuery("users", getUsers);
 
  return(
    <>
    <Layout>         
      
      <TableContainer>
  <Table variant='simple'>    
    <Thead>
      <Tr>
        <Th>Name</Th>
        <Th>Email id</Th>
        <Th>Password</Th>
        <Th>User Type</Th>
        <Th>Action</Th>
      </Tr>
    </Thead>
    <Tbody>
      {data.map((user, index)=>{
        return(
          <Tr key={user._id}>
            <Td>{user.name}</Td>
            <Td>{user.email}</Td>
            <Td>{user.password}</Td>
            <Td>{user.role}</Td>
            <Td>
              <DeleteUser user_id={user._id} />
              <EditUser user_id={user._id}/>
            </Td>
          </Tr>
        )
      })}
    </Tbody>
  </Table>
</TableContainer>
    </Layout>
    </>
  )
}
export async function getServerSideProps(context){
  const queryClient=new QueryClient();
  await queryClient.prefetchQuery('users', getUsers);

  return{
    props:{
      dehydratedState: dehydrate(queryClient)
    }
  };
}
export default Home;
© 2016 - 2023, All Rights are Reserved.