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

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

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Edit user details using NEXT JS and mongo

import { Button, useDisclosure } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
  } from '@chakra-ui/react'

  import {
    FormControl,
    FormLabel,
    FormErrorMessage,
    FormHelperText,
    Input,
    Container
  } from '@chakra-ui/react'
import { useMutation, useQuery, useQueryClient } from "react-query";
import { editUser, getSingleUserById } from "../../controllers/users";

export default function EditUser({user_id}){
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef =React.useRef()
  const queryClient= useQueryClient();
  const [form, setForm]=useState({
    name:"",
    email:"",
    password:"",
    cpassword:""
});

 const {isLoading, data, isError, isSuccess}= useQuery(["user", user_id],()=>getSingleUserById(user_id),{
  onSuccess:(data)=>{
    setForm({
      ...form,
      name:data?.user?.name,
      email:data?.user?.email,
      password:data?.user?.password,
    })        
  }
 })



  const mutation = useMutation(editUser,{
    onSuccess:()=>{
      queryClient.invalidateQueries("users");      
      onClose();
    }
  })



const submitForm=async()=>{  
  await mutation.mutate({
      user_id: user_id,
      name: form.name,
      email: form.email,
      password: form.password
    });
}


if(isLoading){
  return "";
}
if(isError){
  return "Something wrong";
}

    return(
        <>
          <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            
          <FormControl>
                    <FormLabel>Name</FormLabel>
                    <Input type='text' defaultValue={form.name}  onChange={e=>setForm({...form, name:e.target.value})} />                    
                </FormControl>
                <FormControl>
                    <FormLabel>Email address</FormLabel>
                    <Input type='email' defaultValue={form.email} onChange={e=>setForm({...form, email:e.target.value})} />
                    <FormHelperText>We'll never share your email.</FormHelperText>
                </FormControl>

                <FormControl>
                    <FormLabel>Password</FormLabel>
                    <Input type='password' defaultValue={form.password} onChange={e=>setForm({...form, password:e.target.value})} />                    
                </FormControl>

                <FormControl>
                    <FormLabel>Confirm password</FormLabel>
                    <Input type='password' defaultValue={form.password} onChange={e=>setForm({...form, cpassword:e.target.value})} />                    
                </FormControl>

                <Button 
                onClick={submitForm}
                colorScheme='blue' my={3}>Update</Button>

          </ModalBody>

          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              Close
            </Button>            
          </ModalFooter>
        </ModalContent>
      </Modal>

      <Button colorScheme='blue' size="xs" onClick={onOpen}>Edit</Button>
        </>
    )
}
© 2016 - 2023, All Rights are Reserved.