useQuery start config

src/App.css

     z-index : 999;
 }
 
+#loading_or_content{
+    display: grid;
+    min-height:100vh;
+    place-content:center;
+}
+
+

src/App.js

 import { Container } from 'react-bootstrap'
 import { AuthProvider } from './Auth/AuthProvider'
 import { QueryClient, QueryClientProvider } from 'react-query'
+import { ReactQueryDevtools } from 'react-query/devtools'
 
 import Routes from './Components/Routes'
 const queryClient = new QueryClient()
 
-const GATEWAY =  {
-    dev : {
-        API : 'http://localhost:8000',
+const GATEWAY = {
+    dev: {
+        API: 'http://localhost:8000',
     },
-    pro : {
-        API : '',
+    pro: {
+        API: '',
     }
 }
 
                 <AuthProvider>
                     <API_GATEWAY.Provider value={GATEWAY.dev}>
                         <Container fluid>
-                            <Routes/>
+                            <Routes />
                         </Container>
                     </API_GATEWAY.Provider>
                 </AuthProvider>
             </Router>
+            <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
     );
 }

src/Components/Generics/Error.jsx

+import { Col, Row } from 'react-bootstrap'
+
+import RoboError from '../../Images/robo_error.png'
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+
+export function ErrorMessage() {
+    return (
+        <div>
+            <Row className="row" style={{flexDirection:'row'}}>
+                <Col md="6">
+                    <img src={RoboError} alt="robo error" />
+                </Col>
+                <Col md="6">
+                    <h1>Upss... <PriorityHighIcon fontSize="large" style={{ fontSize:95 }} /></h1>
+                    <h3>Algo salió mal..</h3>
+                    <p>Lo sentimos porfavor intentalo  nuevamente</p>
+                </Col>
+            </Row>
+        </div>
+    )
+}

src/Components/Generics/loading.jsx

+import React from "react";
+import '../../Css/loading.css'
+
+export function Loading( props ) {
+
+    let { type } = props
+
+    let types = [
+        "dot-elastic","dot-flashing", "dot-collision", "dot-revolution", "dot-carousel", "dot-fire",
+        "dot-spin","dot-falling", "dot-stretching"
+    ];
+
+    console.log(type, types)
+
+    return(
+        <div className="loading_or_content">
+            <div className="snippet" data-title=".dot-pulse">
+                <div className="stage">
+                    <div className="dot-pulse"></div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/Components/Modal/AgregarExpress.js

     link : Yup.string().required('El enlace es requerido').url("Debes agregar un enlace válido, recurda iniciar con http o https ").min(5).max(190),
 })
 
-export  default function Express (props) {
+function Express (props) {
 
     let { visible, onClose, success } = props
 
         </Modal>
     )
 }
+
+export default React.memo(Express)

src/Components/Modal/AgregarManual.js

-import React from 'react';
+import React, { memo } 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';
 
 
-export default function Manual ( props ) {
+function Manual(props) {
 
     const NewPlazaSchema = Yup.object().shape({
-        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),
+        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 [departamento, setDepartamento] = React.useState('');
     const [open, setOpen] = React.useState(false);
     const handleClose = () => false
     const auth = useAuth();
     const token = auth.getToken();
 
-    let { visible, onClose, Complete, categorias  } = props
+    let { visible, onClose, Complete, categorias } = props
 
     const formik = useFormik({
         initialValues: {
             fecha: date,
             notas: "",
         },
-        onSubmit: ( fields, { resetForm } ) => {
+        onSubmit: (fields, { resetForm }) => {
 
             setOpen(true)
-            fields['fecha'] =  new Date(fields.fecha).toISOString();
+            fields['fecha'] = new Date(fields.fecha).toISOString();
             fields['areadeptoplz_id'] = 1;
             fields['id'] = -1;
 
             let Rest = new Service('/plaza/save');
 
             Rest
-            .post( fields, token )
-            .then( _ => {
-                resetForm();
-                Complete(true, "Puesto agregado exitosamente");
-                onClose();
-                setOpen(false)
-            })
-            .catch(err => {
-                console.error(err)
-                Complete(false,"Ocurrio un error intentalo nuevamente");
-                setOpen(false)
-            })
+                .post(fields, token)
+                .then(_ => {
+                    resetForm();
+                    Complete(true, "Puesto agregado exitosamente");
+                    onClose();
+                    setOpen(false)
+                })
+                .catch(err => {
+                    console.error(err)
+                    Complete(false, "Ocurrio un error intentalo nuevamente");
+                    setOpen(false)
+                })
 
         },
         validationSchema: NewPlazaSchema,
     });
 
-    const { errors, touched, handleSubmit, getFieldProps} = formik;
+    const { errors, touched, handleSubmit, getFieldProps } = formik;
 
     return (
 
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
             <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={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title" style={{ color: '#252525' }}>Agregar plaza</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>
-                                    }
+                                            categorias ?
+                                                categorias.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"
                                         {...getFieldProps('fecha')}
                                         value={date}
                                         onChange={setDate}
-                                        renderInput={(params) => 
-                                            <TextField 
+                                        renderInput={(params) =>
+                                            <TextField
                                                 disabled={true}
                                                 label="Fecha Creación"
                                                 fullWidth
-                                                {...params} 
+                                                {...params}
                                             />}
                                     />
                                 </LocalizationProvider>
                                     {...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 }} >
                                 {'Guardar'}
                 sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
                 open={open}
                 onClick={handleClose} >
-            <CircularProgress color="inherit" />
+                <CircularProgress color="inherit" />
             </Backdrop>
 
         </Modal>
     )
 }
+export default memo(Manual);

src/Components/Modal/EditPlaza.js

-import React, { useEffect } from 'react';
+import React, { useEffect, memo } from 'react';
 import * as Yup from 'yup';
 import { useFormik, Form, FormikProvider } from 'formik';
 import { Modal } from 'react-bootstrap'
 import { Service } from '../../Utils/HTTP';
 import  useAuth from '../../Auth/useAuth';
 
-export default function Edit(props) {
+function Edit(props) {
 
     const NewPlazaSchema = Yup.object().shape({
         id: Yup.number(),
         </Modal>
     )
 }
+
+
+export default memo(Edit);

src/Components/Modal/EliminarPlaza.js

-import React from 'react';
+import React, { memo } from 'react';
 import { Modal, Row, Col } from 'react-bootstrap'
 
-export default function Eliminar(props) {
+export function Eliminar(props) {
 
     let { visible, onClose, puesto } = props
 
         </Modal>
     )
 }
+
+
+export default memo(Eliminar);

src/Components/Modal/MostrarPlaza.js

-import React from 'react';
+import React, {memo} from 'react';
 import { Modal, Col, Row } from 'react-bootstrap'
 import QA from '../../Images/puesto.jpg'
 
-export default function Mostrar(props) {
+function Mostrar(props) {
 
     let { visible, onClose, puesto } = props
 
         </Modal>
     )
 }
+
+export default memo(Mostrar);

src/Pages/Puestos.jsx

-import React, { useState, useEffect }  from 'react';
+import React, { useState, useCallback } from 'react';
 import { Row, Col } from 'react-bootstrap'
 
 import toast, { Toaster } from 'react-hot-toast';
 
-import { 
+import {
     ToggleButton, ToggleButtonGroup, Box,
     Paper, Pagination,
 } from '@mui/material';
 
 import { default as useAuth } from '../Auth/useAuth';
 import { Service } from '../Utils/HTTP';
-import { Divide } from '../Utils/Paginate';
+// import { Divide } from '../Utils/Paginate';
 
 import Express from '../Components/Modal/AgregarExpress';
 import Manual from '../Components/Modal/AgregarManual';
 import { GridMode } from '../Components/Puestos/GridMode'
 import { Add as AddIcon, } from '@mui/icons-material/'
 
+import { Loading } from '../Components/Generics/loading'
+import { ErrorMessage } from '../Components/Generics/Error'
+
+import { useQuery } from 'react-query';
 
 export function Puestos() {
 
-    const Complete =  (status, message) => {
-        console.log(status, message);
+    const auth = useAuth();
+    const token = auth.getToken();
 
-        if(!status){
+    const Complete = useCallback((status, message) => {
+
+        if (!status) {
             return toast.error(message)
         }
 
         let rest = new Service("/plaza/getall")
         rest
             .get(token)
-            .then(({data}) => {
-                let entries = data.map( e => {
-                    return {
-                        nombre : e.nombrepuesto,
-                        description : e.notas,
-                        id : e.id,
-                        created: e.create_day,
-                        data: e
-                    };
-                })
-                setData(Divide(entries))
+            .then(({ data }) => {
+                return data;
+                // let entries = data.map(e => {
+                //     return {
+                //         nombre: e.nombrepuesto,
+                //         description: e.notas,
+                //         id: e.id,
+                //         created: e.create_day,
+                //         data: e
+                //     };
+                // })
+                //setData(Divide(entries))
             })
             .catch((error) => {
-                console.log('error fetching data  ', error );
+                console.log('error fetching data  ', error);
             })
 
         toast.success(message)
-    } 
-
-    const auth = useAuth();
-
-    const [data, setData] = useState([]);
-    const [page, setPage] = useState(1);
-    const [categorias, setCategorias] = useState([]);
-
-    const token = auth.getToken();
-
-    const changePage = ( _ , value) => setPage(value);
-
-    useEffect(() => {
+    },[token])
 
+    const getAll = useCallback(async () => {
         let rest = new Service("/plaza/getall")
+        let response =  await rest.getQuery(token); 
+        return response;
+    },[token])
+
+    useCallback(() => {
+        let rest = new Service("/categoria/getAll")
         rest
             .get(token)
-            .then(({data}) => {
-                let entries = data.map( e => {
-                    return {
-                        nombre : e.nombrepuesto,
-                        description : e.notas,
-                        id : e.id,
-                        created: e.create_day,
-                        data: e
-                    };
-                })
-                setData(Divide(entries))
-            })
-            .catch((error) => {
-                console.log('error fetching data  ', error );
-            })
-    
-        rest = new Service("/categoria/getAll")
-        rest
-            .get(token)
-            .then(({data}) => {
-                setCategorias(data)
+            .then(({ data }) => {
+                console.log(data)
+                setCategorias(data);
             })
             .catch((error) => {
-                console.log('error fetching data  ', error );
+                console.log('error fetching data  ', error);
+                return error;
             })
 
-
     },[token])
 
+    const { isLoading, error, data } = useQuery('puestos', getAll);
+    console.log( isLoading, error, data )
+
+    const [page, setPage] = useState(1);
+    const [categorias, setCategorias] = useState([]);
+
+    const changePage = useCallback((_, value) => setPage(value),[]);
+
+    // useEffect(() => {
+    //     // let entries = data.map( e => {
+    //     //     return {
+    //     //         nombre : e.nombrepuesto,
+    //     //         description : e.notas,
+    //     //         id : e.id,
+    //     //         created: e.create_day,
+    //     //         data: e
+    //     //     };
+    //     // })
+    //     // setData(Divide(entries))
+    // }, [])
+
     // const [alignment, setAlignment] = React.useState('list');
     const [alignment, setAlignment] = React.useState('grid');
 
-    const handleChange = (_event, newAlignment) => setAlignment(newAlignment)
+    const handleChange = useCallback((_event, newAlignment) => setAlignment(newAlignment),[])
 
     const children = [
         <ToggleButton value="list" key="list">
             <ViewListIcon />
         </ToggleButton>,
         <ToggleButton value="grid" key="grid">
-            <ViewModuleIcon/>
+            <ViewModuleIcon />
         </ToggleButton>,
     ];
 
     let [del, setDelete] = React.useState(false);
     let [show, setShow] = React.useState(false);
 
+    if (isLoading) return <Loading />
+
+    if (error) {
+        return (
+            <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
+                <main id="loading_or_content">
+                    <ErrorMessage/>
+                </main>
+            </Paper>
+        )
+    }
+
     return (
         <div className="content-section">
             <div className="main">
                 <Box sx={{}}>
-                    <Paper sx={{ mb: 2, padding : 2, height: '100%', minHeight:'95vh' }}>
+                    <Paper sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh' }}>
 
-                        <Row style={{paddingBottom : 15}}>
+                        <Row style={{ paddingBottom: 15 }}>
                             <Col md="2" sm="2" xs="2">
                                 <div className="breadcrumb-header">
-                                    <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
+                                    <Box sx={{ float: 'left', display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
                                         <ToggleButtonGroup size="small" {...control}>
                                             {children}
                                         </ToggleButtonGroup>
                             </Col>
                             <Col md="10" sm='10' xs="10">
                                 <div className="add_producto">
-                                    <div onClick={() => setManual(true) } className="btn_add_producto"> 
-                                        <span className="btn_plaza_common" >Agregar manual <AddIcon fontSize="small"/></span> 
+                                    <div onClick={() => setManual(true)} className="btn_add_producto">
+                                        <span className="btn_plaza_common" >Agregar manual <AddIcon fontSize="small" /></span>
                                     </div>
                                 </div>
-                                <div onClick={() => setExpress(true) } className="add_producto">
-                                    <div className="btn_add_producto"> 
-                                        <span className="btn_plaza_common">Agregar express <AddIcon fontSize="small"/></span> 
+                                <div onClick={() => setExpress(true)} className="add_producto">
+                                    <div className="btn_add_producto">
+                                        <span className="btn_plaza_common">Agregar express <AddIcon fontSize="small" /></span>
                                     </div>
                                 </div>
                             </Col>
                         </Row>
-                        <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
-                            <Row>
-                                <GridMode
-                                    showing={alignment}
-                                    data={data}
-                                    index={page - 1}
-                                    setPuesto={setPuesto}
-                                    setEdit={setEdit}
-                                    setDelete={setDelete}
-                                    setShow={setShow}
+
+                        <div >
+                            <div className={`main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
+                                <Row>
+                                    <GridMode
+                                        showing={alignment}
+                                        data={[]}
+                                        // data={data}
+                                        index={0}
+                                        // index={page - 1}
+                                        setPuesto={setPuesto}
+                                        setEdit={setEdit}
+                                        setDelete={setDelete}
+                                        setShow={setShow}
                                     />
-                            </Row>
-                        </div>
-                        <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
-                            <Row>
-                                <ListMode 
-                                    showing={alignment}
-                                    data={data}
-                                    index={page - 1}
-                                    setPuesto={setPuesto}
-                                    setEdit={setEdit}
-                                    setDelete={setDelete}
-                                    setShow={setShow}
+                                </Row>
+                            </div>
+                            <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
+                                <Row>
+                                    <ListMode
+                                        showing={alignment}
+                                        data={[]}
+                                        // data={data}
+                                        // index={page - 1}
+                                        index={0}
+                                        setPuesto={setPuesto}
+                                        setEdit={setEdit}
+                                        setDelete={setDelete}
+                                        setShow={setShow}
                                     />
-                            </Row>
-                        </div>
-
-                        <Pagination 
-                            sx={{
-                                "& ul" :{
-                                    paddingTop: "20px",
-                                    justifyContent: "center"
-                                }
-                            }}
-                            siblingCount={2} 
-                            boundaryCount={2}
-                            shape='rounded' 
-                            count={data.length} 
-                            page={page} 
-                            onChange={changePage} 
+                                </Row>
+                            </div>
+
+                            <Pagination
+                                sx={{
+                                    "& ul": {
+                                        paddingTop: "20px",
+                                        justifyContent: "center"
+                                    }
+                                }}
+                                siblingCount={2}
+                                boundaryCount={2}
+                                shape='rounded'
+                                // count={data.length}
+                                count={0}
+                                page={page}
+                                onChange={changePage}
                             />
 
+
+                        </div>
+
                     </Paper>
                 </Box>
-
             </div>
 
-            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
-            <Manual categorias={categorias} Complete={Complete} visible={manual} onClose={() => setManual(false)}/>
+            <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false)} />
+            <Manual categorias={categorias} Complete={Complete} visible={manual} onClose={() => setManual(false)} />
 
             <Editar categorias={categorias} Complete={Complete} 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} onClose={() => setShow(false)} />
 
-            <Toaster  position="bottom-right" reverseOrder={false} />
+            <Toaster position="bottom-right" reverseOrder={false} />
 
         </div>
     )

src/Utils/HTTP.js

         // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
     }
 
+
+    async getQuery(token){
+        return await axios.get(this.url, {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        })
+    }
+
     async get(token){
         return axios.get(this.url, {
             headers: {
             return res;
         })
         .catch((error) => {
-            return error;
+            console.log("ERROR :: ", error)
+            return new Error("GG");
         })
     }