update puesto with mutation

src/App.js

 import { ReactQueryDevtools } from 'react-query/devtools'
 
 import Routes from './Components/Routes'
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+})
 
 const GATEWAY = {
     dev: {

src/Components/Modal/EditPlaza.js

-import React, { useEffect, memo } from 'react';
+import React, { memo, useCallback, useMemo, useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 import { Modal } from 'react-bootstrap'
 
 import DateFnsUtils from '@date-io/date-fns';
-import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
-import {  
-    Button, Stack, TextField, MenuItem,FormControl, InputLabel, Select,
+import {
+    Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
     Backdrop, CircularProgress
 } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
-import  useAuth from '../../Auth/useAuth';
+import useAuth from '../../Auth/useAuth';
+import { useQuery, useMutation, useQueryClient } from 'react-query'
+
+const NewPlazaSchema = Yup.object().shape({
+    id: Yup.number(),
+    nombrepuesto:
+        Yup.string().required('El nombre es requerido')
+            .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
+            .max(100),
+    puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
+    aredepto: Yup.number().required('Escoge alguna área'),
+    fecha: Yup.date("Ingresa una fecha válida"),
+    notas: Yup.string("Ingresa una nota válida").min(5).max(150),
+})
+
+
 
 function Edit(props) {
 
-    const NewPlazaSchema = Yup.object().shape({
-        id: Yup.number(),
-        nombrepuesto : 
-        Yup.string().required('El nombre es requerido')
-        .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
-        .max(100),
-        puestosuperior : Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
-        aredepto : Yup.number().required('Escoge alguna área'),
-        fecha : Yup.date("Ingresa una fecha válida"),
-        notas : Yup.string("Ingresa una nota válida").min(5).max(150),
-    })
-    
+    const now = useMemo(() => new Date(), [])
+    const auth = useAuth();
+    const token = auth.getToken();
+    const queryClient = useQueryClient()
+    let { visible, toggle, puesto } = props
+
     const [departamento, setDepartamento] = React.useState('');
-    const [open, setOpen] = React.useState(false);
-    const handleClose = () => false
+    // const [open, setOpen] = React.useState(false);
 
-    const changeDepartamento = (event) => {
+    const changeDepartamento = useCallback((event) => {
         setDepartamento(event.target.value);
-    };
+    }, []);
 
+    const [date, setDate] = React.useState(now);
+
+    const getCategories = async () => {
+        let rest = new Service("/categoria/getAll")
+        return await rest.getQuery(token)
+    }
+
+    const updatePuesto = async (fields) => {
+        let rest = new Service('/plaza/edit');
+        return rest.putQuery(fields, token)
+    }
+
+    const puestoMutation = useMutation(updatePuesto)
+
+    const close = () => toggle("EDIT");
+
+    const { data } = useQuery('categories', getCategories);
 
-    const [date, setDate] = React.useState(new Date());
-    const auth = useAuth();
-    const token = auth.getToken();
 
-    let {onClose, puesto : { data }, Complete, visible, categorias  } = props
-    
     const formik = useFormik({
         initialValues: {
-            id: data ? data.id :"",
-            nombrepuesto: data ? data.nombrepuesto :"",
-            puestosuperior:data ?data.puestosuperior :"",
+            id: 1,
+            nombrepuesto: "",
+            puestosuperior: 1,
             aredepto: 1,
-            fecha: date,
-            notas:data? data.notas :"",
+            fecha: now,
+            notas: ""
         },
-        onSubmit: ( fields, { resetForm } ) => {
-            setOpen(true)
-            fields['fecha'] =  new Date(fields.fecha).toISOString();
-
-            let Rest = new Service('/plaza/edit');
-            Rest
-            .put( fields, token )
-            .then( _ => {
-                resetForm();
-                Complete(true,"Puesto actualizado exitosamente");
-                onClose();
-                setOpen(false)
-            })
-            .catch(err => {
-                console.error(err)
-                Complete(false,"Ocurrio un error, intentalo nuevamente");
-                setOpen(false)
+        onSubmit: (fields, { resetForm }) => {
+            fields['fecha'] = new Date(fields.fecha).toISOString();
+
+            puestoMutation.mutate(fields, {
+                onSuccess: () => {
+                    close();
+                    queryClient.invalidateQueries('puestos')
+                }
             })
 
+            resetForm();
         },
         validationSchema: NewPlazaSchema,
     });
 
-    const { errors, touched, handleSubmit, getFieldProps, setValues} = formik;
-    
-    useEffect(() => {
-        setValues({
-            id: data? data.id:"",
-            nombrepuesto: data? data.nombrepuesto:"",
-            notas:data?data.notas:"",
-            puestosuperior:data ?data.puestosuperior :"",
-            aredepto: 1,
-            fecha:data?new Date(data.create_day): new Date(),
-        })
-
-    },[data,setValues])
+    const { errors, touched, handleSubmit, getFieldProps, setValues } = formik;
 
+    useEffect(() => {
+        console.log("PUESTO :: ", puesto)
+        if (puesto) {
+            setValues({
+                id: puesto.id,
+                nombrepuesto: puesto.nombrepuesto,
+                puestosuperior: puesto.puestosuperior,
+                aredepto: puesto.areadeptoplz_id,
+                fecha: new Date(puesto.create_day),
+                notas: puesto.notas
+            })
+        }
+    }, [puesto, now, setValues])
 
     return (
 
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
             <Modal.Header>
-                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
-                <h4 className="modal-title" style={{color : '#252525'}}>Agregar plaza</h4>
+                <button onClick={close} type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title" style={{ color: '#252525' }}>Editar puesto</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
 
-                <FormikProvider style={{ padding : 25 }} value={formik}>
+                <FormikProvider style={{ padding: 25 }} value={formik}>
                     <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                         <Stack spacing={3}>
 
                                         {...getFieldProps('aredepto')}
                                         error={Boolean(touched.aredepto && errors.aredepto)} >
                                         {
-                                        categorias ?
-                                            categorias.map( cate => {
-                                                return (
-                                                    <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                                                )
-                                            })
-                                            : <MenuItem>Null</MenuItem>
+                                            data ?
+                                                data.data.map(cate => {
+                                                    return (
+                                                        <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                                                    )
+                                                })
+                                                : <MenuItem>Null</MenuItem>
                                         }
                                     </Select>
                                 </FormControl>
 
 
-                                <LocalizationProvider 
+                                <LocalizationProvider
                                     dateAdapter={DateFnsUtils}>
                                     <DesktopDatePicker
                                         label="Fecha Creación"
                                         fullWidth
                                         inputFormat="dd/MM/yyyy"
                                         {...getFieldProps('fecha')}
+                                        xd
                                         value={date}
                                         onChange={setDate}
-                                        renderInput={(params) => 
-                                            <TextField 
+                                        renderInput={(params) =>
+                                            <TextField
                                                 disabled={true}
                                                 label="Fecha Creación"
                                                 fullWidth
-                                                {...params} 
+                                                {...params}
                                             />}
                                     />
                                 </LocalizationProvider>
                                     id="filled-multiline-static"
                                     multiline
                                     rows={4}
-                                    defaultValue="Default Value"
                                     variant="filled"
                                     label="Notas"
                                     fullWidth
                                     {...getFieldProps('notas')}
                                     error={Boolean(touched.notas && errors.notas)}
                                     helperText={touched.notas && errors.notas}
-                                    />
+                                />
                             </Stack>
                         </Stack>
 
                         <Modal.Footer>
                             <Button
                                 type="submit"
-                                className="registerBtn" 
+                                className="registerBtn"
                                 variant="contained"
                                 sx={{ mt: 1, mr: 1 }} >
                                 {'Actualizar'}
                 </FormikProvider>
             </Modal.Body>
             <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={open}
-                onClick={handleClose} >
-            <CircularProgress color="inherit" />
+            // sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+            // open={open}
+            // onClick={() => console.log('backdrop')} >
+            >
+                <CircularProgress color="inherit" />
             </Backdrop>
 
         </Modal>

src/Components/Modal/MostrarPlaza.js

-import React, {memo} from 'react';
+import React, { memo } from 'react';
 import { Modal, Col, Row } from 'react-bootstrap'
 import QA from '../../Images/puesto.jpg'
 
 function Mostrar(props) {
 
-    let { visible, onClose, puesto } = props
-
+    let { visible, puesto } = props
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
+    const close = () => props.toggle("VER");
 
-    console.log(puesto)
-
-    return(
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
             <Modal.Header>
-                <button  onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
+                <button onClick={close} type="button" className="close" data-dismiss="modal">&times;</button>
                 <h4 className="modal-title">Mostrar plaza</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
                     <Row >
                         <Col md="4">
                             <div className="img-container">
-                                <img alt='not found cooo' src={QA}/>
+                                <img alt='not found cooo' src={QA} />
                             </div>
                         </Col>
                         <Col md="8">
-                            <input value={puesto.nombre} type="text" name="nombre" placeholder="..." readOnly/>
-                            <input value={puesto.description} type="text" name="descript" placeholder="..." readOnly/>
-                            <input 
-                                value={ new Date( puesto.created ).toLocaleDateString('es-GT',opciones) } 
-                                type="text" 
-                                placeholder="...." 
-                                name="sku" readOnly/>
+                            <input value={puesto ? puesto.nombrepuesto : "..."} type="text" name="nombre" placeholder="..." readOnly />
+                            <input value={puesto ? puesto.notas : '...'} type="text" name="descript" placeholder="..." readOnly />
+                            <input
+                                value={new Date(puesto ? puesto.createday : new Date()).toLocaleDateString('es-GT', opciones)}
+                                type="text"
+                                placeholder="...."
+                                name="sku" readOnly />
                         </Col>
                     </Row>
                 </div>

src/Components/Navigation/MainListItems.jsx

-import React from 'react';
-
-import { 
-    Home, Fingerprint, History, MiscellaneousServices , 
-    Work, VisibilityOff, PeopleAlt, Equalizer,
-    ExpandLess, ExpandMore
-} from '@mui/icons-material/'
-
-
-import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
-import { NavItem } from './NavItem'
-
-
-export function MainListItems(props){
-
-    const [open, setOpen] = React.useState(false);
-
-    const showPruebas = () => {
-        if(!props.AppBarVisible){
-            props.setAppBarVisible(true);
-        }
-        setOpen(!open);
-    };
-
-    return(
-        <List>
-
-            <ListSubheader inset>MENÚ</ListSubheader>
-
-            <NavItem icon={<Home/>} title="Inicio" route="home" />
-            <NavItem icon={<Work/>} title="Puestos" route="puestos" />
-            <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
-            <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
-            <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-
-            <ListItem selected={open} onClick={showPruebas}>
-                <ListItemIcon>
-                    <Fingerprint />
-                </ListItemIcon>
-
-
-                <ListItemText 
-                    sx={{
-                        fontSize: 12,
-                        ' .css-10hburv-MuiTypography-root' : {
-                            fontSize : '.875rem'
-                        },
-                    }}
-                    primary="Pruebas" 
-                />
-                {open ? <ExpandLess /> : <ExpandMore />}
-            </ListItem>
-
-
-            <Collapse in={open} timeout="auto" unmountOnExit>
-                <List component="div" disablePadding>
-
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/crear" title="Crear Prueba" />
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/listar"  title="Listado de pruebas" />
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/aplicar"  title="Aplicar" />
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/respuestas" title="Respuestas" />
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/calificaciones" title="Calificaciones" />
-
-                </List>
-            </Collapse>
-
-            <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
-            <NavItem icon={<History/>} title="Historial" route="historial" />
-        </List>
-    )
-}

src/Components/Puestos/Card.jsx

 
 export function PuestoCard(props) {
 
-    let { nombrepuesto, notas} = props.plaza
-    let {edit, suprime, show, set} = props.operations
+    let { plaza } = props
+    let { nombrepuesto, notas } = plaza
 
     return (
         <Card sx={{ maxWidth: 345 }}>
                 alt="green iguana"
                 height="140"
                 image={QA}
-                />
+            />
             <CardContent>
                 <Typography gutterBottom variant="h5" component="div">
                     {nombrepuesto}
                 </Typography>
             </CardContent>
             <CardActions>
-                <Button size="small" 
-                    onClick={() => [set,show].map(fnc => fnc(props.plaza)) }>
+                <Button size="small"
+                    onClick={() => props.toggle("VER", plaza)}>
                     Ver
                 </Button>
-                <Button size="small" 
-                    onClick={() => [set,edit].map(fnc => fnc(props.plaza))}>
+                <Button size="small"
+                    onClick={() => props.toggle("EDIT",plaza)}>
                     Editar
                 </Button>
                 <Button size="small"
-                    onClick={() =>[set,suprime].map(fnc => fnc(props.plaza))} >
+                    onClick={() => props.toggle("DEL", plaza)} >
                     Eliminar
                 </Button>
             </CardActions>

src/Components/Puestos/GridMode.jsx

 
 export function GridMode(props) {
 
-    let { setPuesto, setEdit, setDelete, setShow, data, index, showing } = props;
-
-    const op = {
-        set: setPuesto,
-        edit: setEdit,
-        suprime: setDelete,
-        show: setShow,
-    }
+    let { data, index, showing, toggle } = props;
 
     return (
         <React.Fragment>
                             <Grow in={true} style={{ transformOrigin: '0 0 0' }} timeout={500} key={plaza.id} >
                                 <Col lg="4" md="6" sm="6" xs="12" >
                                     <div style={{ padding: 15 }}>
-                                        <PuestoCard
-                                            plaza={plaza}
-                                            operations={op} />
+                                        <PuestoCard toggle={toggle} plaza={plaza} />
                                     </div>
                                 </Col>
                             </Grow>

src/Pages/Puestos.jsx

-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback} from 'react';
 import { Row, Col } from 'react-bootstrap'
 
 import { Toaster } from 'react-hot-toast';
 import { useQuery } from 'react-query';
 
 export function Puestos() {
+    console.log("render puestos")
 
     const auth = useAuth();
     const token = auth.getToken();
         exclusive: true,
     };
 
-    let [puesto, setPuesto] = React.useState(false);
     let [manual, setManual] = React.useState(false);
     let [expres, setExpress] = React.useState(false);
+
+    let [puesto, setPuesto] = React.useState(false);
     let [edit, setEdit] = React.useState(false);
     let [del, setDelete] = React.useState(false);
     let [show, setShow] = React.useState(false);
 
+    const toggle = useCallback((type,puesto) => {
+        setPuesto(puesto)
+        switch(type){
+            case "VER": {
+                setShow(!show);
+                break;
+            }
+            case "EDIT": {
+                setEdit(!edit)
+                break;
+            }
+            default: break;
+        }
+        console.table(edit,del,show)
+    },[edit,del,show])
+
     if (isLoading){
         return(
             <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
                             <div className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
                                 <Row>
                                     <GridMode
+                                        toggle={toggle}
                                         showing={alignment}
                                         data={Divide( result.data )}
                                         index={page - 1}
-                                        setPuesto={setPuesto}
-                                        setEdit={setEdit}
-                                        setDelete={setDelete}
-                                        setShow={setShow}
                                     />
                                 </Row>
                             </div>
                                         showing={alignment}
                                         data={Divide( result.data )}
                                         index={page - 1}
-                                        setPuesto={setPuesto}
-                                        setEdit={setEdit}
-                                        setDelete={setDelete}
-                                        setShow={setShow}
                                     />
                                 </Row>
                             </div>
             <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false)} />
             <Manual visible={manual} onClose={() => setManual(false)} />
 
-            <Editar puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
-            <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
-            <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
+            <Mostrar puesto={puesto} visible={show} toggle={toggle} />
+            <Editar  puesto={puesto} visible={edit} toggle={toggle} />
+            <Eliminar visible={del} onClose={() => setDelete(false)} />
 
             <Toaster position="bottom-right" reverseOrder={false} />
 

src/Utils/HTTP.js

 
 export class Service {
 
-    constructor(path){
+    constructor(path) {
         this.base_url = 'http://204.48.25.93:8081'
-        this.url =  this.base_url + path
+        this.url = this.base_url + path
         // this.base_url = 'http://psicoadmin.ditca.org:8081'
         // this.api =  'http://204.48.25.93:8081/user?user=patrik&password=12345'
         // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
     }
 
 
-    async getQuery(token){
+    async getQuery(token) {
         return await axios.get(this.url, {
             headers: {
                 'Authorization': `Bearer ${token}`
         })
     }
 
-    async get(token){
+    async get(token) {
         return axios.get(this.url, {
             headers: {
                 'Authorization': `Bearer ${token}`
             }
         })
-        .then((res) => {
-            return res;
-        })
-        .catch((error) => {
-            console.log("ERROR :: ", error)
-            return new Error("GG");
-        })
+            .then((res) => {
+                return res;
+            })
+            .catch((error) => {
+                console.log("ERROR :: ", error)
+                return new Error("GG");
+            })
     }
 
-    async post(body, token){
+    async post(body, token) {
 
-        if(!token){
+        if (!token) {
             let response = await axios({
                 method: "POST",
                 url: this.url,
-                headers:{
+                headers: {
                     'Content-Type': 'application/json',
                 },
-                data :body
+                data: body
             })
-            return await response.data; 
+            return await response.data;
         }
 
 
-        const MyHeaders ={
-            'Authorization': 'Bearer '+ token,
+        const MyHeaders = {
+            'Authorization': 'Bearer ' + token,
         }
-        
+
         let response = await axios({
             method: "POST",
-            url : this.url,
+            url: this.url,
             headers: MyHeaders,
             data: body
         })
         console.log('response', response)
 
-        return await response.data; 
+        return await response.data;
 
     }
-    
-    async postQuery(body, token){
 
-        if(!token){
+    async postQuery(body, token) {
+
+        if (!token) {
             return await axios({
                 method: "POST",
                 url: this.url,
-                headers:{
+                headers: {
                     'Content-Type': 'application/json',
                 },
-                data :body
+                data: body
             })
         }
 
 
-        const MyHeaders ={
-            'Authorization': 'Bearer '+ token,
+        const MyHeaders = {
+            'Authorization': 'Bearer ' + token,
         }
-        
+
         return await axios({
             method: "POST",
-            url : this.url,
+            url: this.url,
             headers: MyHeaders,
             data: body
         })
 
 
     }
-    
-    async put(body, token){
 
-        if(!token){
+    async put(body, token) {
+
+        if (!token) {
             let response = await axios({
                 method: "PUT",
                 url: this.url,
-                headers:{
+                headers: {
                     'Content-Type': 'application/json',
                 },
-                data :body
+                data: body
             })
-            return await response.data; 
+            return await response.data;
         }
 
 
-        const MyHeaders ={
-            'Authorization': 'Bearer '+ token,
+        const MyHeaders = {
+            'Authorization': 'Bearer ' + token,
         }
-        
+
         let response = await axios({
             method: "PUT",
-            url : this.url,
+            url: this.url,
             headers: MyHeaders,
             data: body
         })
         console.log('response', response)
 
-        return await response.data; 
+        return await response.data;
 
     }
 
-s 
+
+    async putQuery(body, token) {
+        if (!token) {
+            return await axios({
+                method: "PUT",
+                url: this.url,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                data: body
+            })
+        }
+
+        const MyHeaders = {
+            'Authorization': 'Bearer ' + token,
+        }
+
+        return await axios({
+            method: "PUT",
+            url: this.url,
+            headers: MyHeaders,
+            data: body
+        })
+    }
+
+
+
 }