useQuery start config

src/App.css

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

src/App.js

@@ -6,16 +6,17 @@ import { BrowserRouter as Router } from "react-router-dom";
 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: '',
     }
 }
 
@@ -28,11 +29,12 @@ function App() {
                 <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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -7,7 +7,7 @@ const ExpressSchema = Yup.object().shape({
     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
 
@@ -52,3 +52,5 @@ export  default function Express (props) {
         </Modal>
     )
 }
+
+export default React.memo(Express)

src/Components/Modal/AgregarManual.js

@@ -1,30 +1,30 @@
-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
@@ -38,7 +38,7 @@ export default function Manual ( props ) {
     const auth = useAuth();
     const token = auth.getToken();
 
-    let { visible, onClose, Complete, categorias  } = props
+    let { visible, onClose, Complete, categorias } = props
 
     const formik = useFormik({
         initialValues: {
@@ -48,45 +48,45 @@ export default function Manual ( props ) {
             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}>
 
@@ -120,19 +120,19 @@ export default function Manual ( props ) {
                                         {...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"
@@ -141,12 +141,12 @@ export default function Manual ( props ) {
                                         {...getFieldProps('fecha')}
                                         value={date}
                                         onChange={setDate}
-                                        renderInput={(params) => 
-                                            <TextField 
+                                        renderInput={(params) =>
+                                            <TextField
                                                 disabled={true}
                                                 label="Fecha Creación"
                                                 fullWidth
-                                                {...params} 
+                                                {...params}
                                             />}
                                     />
                                 </LocalizationProvider>
@@ -165,7 +165,7 @@ export default function Manual ( props ) {
                                     {...getFieldProps('notas')}
                                     error={Boolean(touched.notas && errors.notas)}
                                     helperText={touched.notas && errors.notas}
-                                    />
+                                />
                             </Stack>
                         </Stack>
 
@@ -173,7 +173,7 @@ export default function Manual ( props ) {
                         <Modal.Footer>
                             <Button
                                 type="submit"
-                                className="registerBtn" 
+                                className="registerBtn"
                                 variant="contained"
                                 sx={{ mt: 1, mr: 1 }} >
                                 {'Guardar'}
@@ -187,9 +187,10 @@ export default function Manual ( props ) {
                 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

@@ -1,4 +1,4 @@
-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'
@@ -14,7 +14,7 @@ import {
 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(),
@@ -207,3 +207,6 @@ export default function Edit(props) {
         </Modal>
     )
 }
+
+
+export default memo(Edit);

src/Components/Modal/EliminarPlaza.js

@@ -1,7 +1,7 @@
-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
 
@@ -35,3 +35,6 @@ export default function Eliminar(props) {
         </Modal>
     )
 }
+
+
+export default memo(Eliminar);

src/Components/Modal/MostrarPlaza.js

@@ -1,8 +1,8 @@
-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
 
@@ -41,3 +41,5 @@ export default function Mostrar(props) {
         </Modal>
     )
 }
+
+export default memo(Mostrar);

src/Css/loading.css

@@ -0,0 +1,1178 @@
+.dot-elastic {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotElastic 1s infinite linear;
+}
+
+.dot-elastic::before, .dot-elastic::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-elastic::before {
+  left: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotElasticBefore 1s infinite linear;
+}
+
+.dot-elastic::after {
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotElasticAfter 1s infinite linear;
+}
+
+@keyframes dotElasticBefore {
+  0% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1, 1.5);
+  }
+  50% {
+    transform: scale(1, 0.67);
+  }
+  75% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes dotElastic {
+  0% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1, 1.5);
+  }
+  75% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes dotElasticAfter {
+  0% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1, 0.67);
+  }
+  75% {
+    transform: scale(1, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Pulse
+ * ==============================================
+ */
+.dot-pulse {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--main);
+  color: var(--main);
+  box-shadow: 9999px 0 0 -5px var(--main);
+  animation: dotPulse 1.5s infinite linear;
+  animation-delay: .25s;
+}
+
+.dot-pulse::before, .dot-pulse::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--main);
+  color: var(--main);
+}
+
+.dot-pulse::before {
+  box-shadow: 9984px 0 0 -5px var(--main);
+  animation: dotPulseBefore 1.5s infinite linear;
+  animation-delay: 0s;
+}
+
+.dot-pulse::after {
+  box-shadow: 10014px 0 0 -5px var(--main);
+  animation: dotPulseAfter 1.5s infinite linear;
+  animation-delay: .5s;
+}
+
+@keyframes dotPulseBefore {
+  0% {
+    box-shadow: 9984px 0 0 -5px var(--main);
+  }
+  30% {
+    box-shadow: 9984px 0 0 2px var(--main);
+  }
+  60%,
+  100% {
+    box-shadow: 9984px 0 0 -5px var(--main);
+  }
+}
+
+@keyframes dotPulse {
+  0% {
+    box-shadow: 9999px 0 0 -5px var(--main);
+  }
+  30% {
+    box-shadow: 9999px 0 0 2px var(--main);
+  }
+  60%,
+  100% {
+    box-shadow: 9999px 0 0 -5px var(--main);
+  }
+}
+
+@keyframes dotPulseAfter {
+  0% {
+    box-shadow: 10014px 0 0 -5px var(--main);
+  }
+  30% {
+    box-shadow: 10014px 0 0 2px var(--main);
+  }
+  60%,
+  100% {
+    box-shadow: 10014px 0 0 -5px var(--main);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Flashing
+ * ==============================================
+ */
+.dot-flashing {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFlashing 1s infinite linear alternate;
+  animation-delay: .5s;
+}
+
+.dot-flashing::before, .dot-flashing::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-flashing::before {
+  left: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.dot-flashing::after {
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFlashing 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes dotFlashing {
+  0% {
+    background-color: #9880ff;
+  }
+  50%,
+  100% {
+    background-color: #ebe6ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Collision
+ * ==============================================
+ */
+.dot-collision {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+
+.dot-collision::before, .dot-collision::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-collision::before {
+  left: -10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotCollisionBefore 2s infinite ease-in;
+}
+
+.dot-collision::after {
+  left: 10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotCollisionAfter 2s infinite ease-in;
+  animation-delay: 1s;
+}
+
+@keyframes dotCollisionBefore {
+  0%,
+  50%,
+  75%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-15px);
+  }
+}
+
+@keyframes dotCollisionAfter {
+  0%,
+  50%,
+  75%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(15px);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Revolution
+ * ==============================================
+ */
+.dot-revolution {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+
+.dot-revolution::before, .dot-revolution::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+}
+
+.dot-revolution::before {
+  left: 0;
+  top: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  transform-origin: 5px 20px;
+  animation: dotRevolution 1.4s linear infinite;
+}
+
+.dot-revolution::after {
+  left: 0;
+  top: -30px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  transform-origin: 5px 35px;
+  animation: dotRevolution 1s linear infinite;
+}
+
+@keyframes dotRevolution {
+  0% {
+    transform: rotateZ(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    transform: rotateZ(360deg) translate3d(0, 0, 0);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Carousel
+ * ==============================================
+ */
+.dot-carousel {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  animation: dotCarousel 1.5s infinite linear;
+}
+
+@keyframes dotCarousel {
+  0% {
+    box-shadow: 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff;
+  }
+  50% {
+    box-shadow: 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff, 9999px 0 0 1px #9880ff;
+  }
+  100% {
+    box-shadow: 9999px 0 0 1px #9880ff, 10014px 0 0 -1px #9880ff, 9984px 0 0 -1px #9880ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Typing
+ * ==============================================
+ */
+.dot-typing {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  animation: dotTyping 1.5s infinite linear;
+}
+
+@keyframes dotTyping {
+  0% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+  16.667% {
+    box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+  33.333% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+  50% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+  66.667% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+  83.333% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;
+  }
+  100% {
+    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Windmill
+ * ==============================================
+ */
+.dot-windmill {
+  position: relative;
+  top: -10px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  transform-origin: 5px 15px;
+  animation: dotWindmill 2s infinite linear;
+}
+
+.dot-windmill::before, .dot-windmill::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+}
+
+.dot-windmill::before {
+  left: -8.66px;
+  top: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+
+.dot-windmill::after {
+  left: 8.66px;
+  top: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+
+@keyframes dotWindmill {
+  0% {
+    transform: rotateZ(0deg) translate3d(0, 0, 0);
+  }
+  100% {
+    transform: rotateZ(720deg) translate3d(0, 0, 0);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Bricks
+ * ==============================================
+ */
+.dot-bricks {
+  position: relative;
+  top: 8px;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+  animation: dotBricks 2s infinite ease;
+}
+
+@keyframes dotBricks {
+  0% {
+    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+  }
+  8.333% {
+    box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+  }
+  16.667% {
+    box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+  }
+  25% {
+    box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+  }
+  33.333% {
+    box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+  }
+  41.667% {
+    box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
+  }
+  50% {
+    box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+  }
+  58.333% {
+    box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+  }
+  66.666% {
+    box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
+  }
+  75% {
+    box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+  }
+  83.333% {
+    box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+  }
+  91.667% {
+    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
+  }
+  100% {
+    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Floating
+ * ==============================================
+ */
+.dot-floating {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
+}
+
+.dot-floating::before, .dot-floating::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-floating::before {
+  left: -12px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFloatingBefore 3s infinite ease-in-out;
+}
+
+.dot-floating::after {
+  left: -24px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes dotFloating {
+  0% {
+    left: calc(-50% - 5px);
+  }
+  75% {
+    left: calc(50% + 105px);
+  }
+  100% {
+    left: calc(50% + 105px);
+  }
+}
+
+@keyframes dotFloatingBefore {
+  0% {
+    left: -50px;
+  }
+  50% {
+    left: -12px;
+  }
+  75% {
+    left: -50px;
+  }
+  100% {
+    left: -50px;
+  }
+}
+
+@keyframes dotFloatingAfter {
+  0% {
+    left: -100px;
+  }
+  50% {
+    left: -24px;
+  }
+  75% {
+    left: -100px;
+  }
+  100% {
+    left: -100px;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Fire
+ * ==============================================
+ */
+.dot-fire {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9999px 22.5px 0 -5px #9880ff;
+  animation: dotFire 1.5s infinite linear;
+  animation-delay: -.85s;
+}
+
+.dot-fire::before, .dot-fire::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+}
+
+.dot-fire::before {
+  box-shadow: 9999px 22.5px 0 -5px #9880ff;
+  animation: dotFire 1.5s infinite linear;
+  animation-delay: -1.85s;
+}
+
+.dot-fire::after {
+  box-shadow: 9999px 22.5px 0 -5px #9880ff;
+  animation: dotFire 1.5s infinite linear;
+  animation-delay: -2.85s;
+}
+
+@keyframes dotFire {
+  1% {
+    box-shadow: 9999px 22.5px 0 -5px #9880ff;
+  }
+  50% {
+    box-shadow: 9999px -5.625px 0 2px #9880ff;
+  }
+  100% {
+    box-shadow: 9999px -22.5px 0 -5px #9880ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Spin
+ * ==============================================
+ */
+.dot-spin {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: transparent;
+  color: transparent;
+  box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
+  animation: dotSpin 1.5s infinite linear;
+}
+
+@keyframes dotSpin {
+  0%,
+  100% {
+    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
+  }
+  12.5% {
+    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
+  }
+  25% {
+    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
+  }
+  37.5% {
+    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
+  }
+  50% {
+    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
+  }
+  62.5% {
+    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
+  }
+  75% {
+    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
+  }
+  87.5% {
+    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Falling
+ * ==============================================
+ */
+.dot-falling {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  box-shadow: 9999px 0 0 0 #9880ff;
+  animation: dotFalling 1s infinite linear;
+  animation-delay: .1s;
+}
+
+.dot-falling::before, .dot-falling::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-falling::before {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFallingBefore 1s infinite linear;
+  animation-delay: 0s;
+}
+
+.dot-falling::after {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotFallingAfter 1s infinite linear;
+  animation-delay: .2s;
+}
+
+@keyframes dotFalling {
+  0% {
+    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
+  }
+  25%,
+  50%,
+  75% {
+    box-shadow: 9999px 0 0 0 #9880ff;
+  }
+  100% {
+    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
+  }
+}
+
+@keyframes dotFallingBefore {
+  0% {
+    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
+  }
+  25%,
+  50%,
+  75% {
+    box-shadow: 9984px 0 0 0 #9880ff;
+  }
+  100% {
+    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
+  }
+}
+
+@keyframes dotFallingAfter {
+  0% {
+    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
+  }
+  25%,
+  50%,
+  75% {
+    box-shadow: 10014px 0 0 0 #9880ff;
+  }
+  100% {
+    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
+  }
+}
+
+/**
+ * ==============================================
+ * Dot Stretching
+ * ==============================================
+ */
+.dot-stretching {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  transform: scale(1.25, 1.25);
+  animation: dotStretching 2s infinite ease-in;
+}
+
+.dot-stretching::before, .dot-stretching::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-stretching::before {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotStretchingBefore 2s infinite ease-in;
+}
+
+.dot-stretching::after {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #9880ff;
+  color: #9880ff;
+  animation: dotStretchingAfter 2s infinite ease-in;
+}
+
+@keyframes dotStretching {
+  0% {
+    transform: scale(1.25, 1.25);
+  }
+  50%,
+  60% {
+    transform: scale(0.8, 0.8);
+  }
+  100% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes dotStretchingBefore {
+  0% {
+    transform: translate(0) scale(0.7, 0.7);
+  }
+  50%,
+  60% {
+    transform: translate(-20px) scale(1, 1);
+  }
+  100% {
+    transform: translate(0) scale(0.7, 0.7);
+  }
+}
+
+@keyframes dotStretchingAfter {
+  0% {
+    transform: translate(0) scale(0.7, 0.7);
+  }
+  50%,
+  60% {
+    transform: translate(20px) scale(1, 1);
+  }
+  100% {
+    transform: translate(0) scale(0.7, 0.7);
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Gooey Effect
+ * Dot Gathering
+ * ==============================================
+ */
+.dot-gathering {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  margin: -1px 0;
+  filter: blur(2px);
+}
+
+.dot-gathering::before, .dot-gathering::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: -50px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  opacity: 0;
+  filter: blur(2px);
+  animation: dotGathering 2s infinite ease-in;
+}
+
+.dot-gathering::after {
+  animation-delay: .5s;
+}
+
+@keyframes dotGathering {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  35%,
+  60% {
+    opacity: 1;
+    transform: translateX(50px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Gooey Effect
+ * Dot Hourglass
+ * ==============================================
+ */
+.dot-hourglass {
+  position: relative;
+  top: -15px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  margin: -1px 0;
+  filter: blur(2px);
+  transform-origin: 5px 20px;
+  animation: dotHourglass 2.4s infinite ease-in-out;
+  animation-delay: .6s;
+}
+
+.dot-hourglass::before, .dot-hourglass::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  filter: blur(2px);
+}
+
+.dot-hourglass::before {
+  top: 30px;
+}
+
+.dot-hourglass::after {
+  animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+@keyframes dotHourglass {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  25% {
+    transform: rotateZ(180deg);
+  }
+  50% {
+    transform: rotateZ(180deg);
+  }
+  75% {
+    transform: rotateZ(360deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes dotHourglassAfter {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(30px);
+  }
+  50% {
+    transform: translateY(30px);
+  }
+  75% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Gooey Effect
+ * Dot Overtaking
+ * ==============================================
+ */
+.dot-overtaking {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: transparent;
+  color: black;
+  margin: -1px 0;
+  box-shadow: 0 -20px 0 0;
+  filter: blur(2px);
+  animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
+}
+
+.dot-overtaking::before, .dot-overtaking::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: transparent;
+  color: black;
+  box-shadow: 0 -20px 0 0;
+  filter: blur(2px);
+}
+
+.dot-overtaking::before {
+  animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
+  animation-delay: .3s;
+}
+
+.dot-overtaking::after {
+  animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
+  animation-delay: .6s;
+}
+
+@keyframes dotOvertaking {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Gooey Effect
+ * Dot Shuttle
+ * ==============================================
+ */
+.dot-shuttle {
+  position: relative;
+  left: -15px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  margin: -1px 0;
+  filter: blur(2px);
+}
+
+.dot-shuttle::before, .dot-shuttle::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: black;
+  color: transparent;
+  filter: blur(2px);
+}
+
+.dot-shuttle::before {
+  left: 15px;
+  animation: dotShuttle 2s infinite ease-out;
+}
+
+.dot-shuttle::after {
+  left: 30px;
+}
+
+@keyframes dotShuttle {
+  0%,
+  50%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-45px);
+  }
+  75% {
+    transform: translateX(45px);
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Emoji
+ * Dot Bouncing
+ * ==============================================
+ */
+.dot-bouncing {
+  position: relative;
+  height: 10px;
+  font-size: 10px;
+}
+
+.dot-bouncing::before {
+  content: '⚽🏀🏐';
+  display: inline-block;
+  position: relative;
+  animation: dotBouncing 1s infinite;
+}
+
+@keyframes dotBouncing {
+  0% {
+    top: -20px;
+    animation-timing-function: ease-in;
+  }
+  34% {
+    transform: scale(1, 1);
+  }
+  35% {
+    top: 20px;
+    animation-timing-function: ease-out;
+    transform: scale(1.5, 0.5);
+  }
+  45% {
+    transform: scale(1, 1);
+  }
+  90% {
+    top: -20px;
+  }
+  100% {
+    top: -20px;
+  }
+}
+
+/**
+ * ==============================================
+ * Experiment-Emoji
+ * Dot Rolling
+ * ==============================================
+ */
+.dot-rolling {
+  position: relative;
+  height: 10px;
+  font-size: 10px;
+}
+
+.dot-rolling::before {
+  content: '⚽';
+  display: inline-block;
+  position: relative;
+  transform: translateX(-25px);
+  animation: dotRolling 3s infinite;
+}

src/Pages/Puestos.jsx

@@ -1,9 +1,9 @@
-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';
@@ -12,7 +12,7 @@ import { ViewList as ViewListIcon, ViewModule as ViewModuleIcon, } from '@mui/ic
 
 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';
@@ -25,93 +25,98 @@ import { ListMode } from '../Components/Puestos/ListMode'
 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>,
     ];
 
@@ -130,16 +135,28 @@ export function Puestos() {
     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>
@@ -148,72 +165,81 @@ export function Puestos() {
                             </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

@@ -10,6 +10,15 @@ export class Service {
         // 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: {
@@ -20,7 +29,8 @@ export class Service {
             return res;
         })
         .catch((error) => {
-            return error;
+            console.log("ERROR :: ", error)
+            return new Error("GG");
         })
     }