fix react query defaults

src/App.css

@@ -470,3 +470,10 @@
   justify-content: space-between;
   align-items: flex-end;
 }
+
+.loadingBase{
+  display: grid;
+}
+.lodingSpinner{
+  place-self: center;
+}

src/App.js

@@ -12,7 +12,10 @@ import Routes from './Components/Routes'
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      refetchOnWindowFocus: true,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      retry:false,
+      cacheTime: 0,
     },
   },
 })

src/Components/Dashboard.js

@@ -114,7 +114,7 @@ function DashboardContent() {
     const { exp } = jwt_decode(token);
     let timestamp = exp * 1000;
     let exp_in = timestamp - Date.now();
-    console.log("EXP IN : ", exp_in)
+    // console.log("EXP IN : ", exp_in)
     if(exp_in <= 0 ){
       alert("TOKEN EXPIRADO, PORFAVOR INICIA SESSION")
       dispatch(removeToken())

src/Components/Generics/loading.jsx

@@ -43,3 +43,16 @@ export function Simple() {
   )
 }
 
+export function Centred() {
+  return (
+    <div className="loadingBase" data-title=".dot-pulse">
+      <div className="lodingSpinner">
+        <div className={types[0]}></div>
+      </div>
+    </div>
+
+  )
+}
+
+
+

src/Components/Modal/AgregarManual.js

@@ -160,7 +160,6 @@ function Manual(props) {
 
   const AutoCompleteChange = (event, newValue) => {
     console.log('newValue', newValue)
-    // TODO : formik logic to validate autocomplete
     setValues({ ...values, puestosuperior: newValue?.id })
 
     if (typeof newValue === 'string') {

src/Components/Navigation/MenuMovil.jsx

@@ -14,7 +14,6 @@ import { useNavigate } from 'react-router';
 import { removeToken } from '../../Slices/tokenSlice';
 
 export function MenuMovil(props) {
-
   let { anchor, control } = props;
   const dispatch = useDispatch();
   const navigate = useNavigate()
@@ -38,7 +37,7 @@ export function MenuMovil(props) {
           }
         }}>
         <List style={{ paddingTop : 64 }}>
-          <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
+          <MainListItems AppBarVisible={anchor} control={control}/>
         </List>
         <Divider />
         <List>

src/Components/Navigation/listItems.js

@@ -21,7 +21,7 @@ function NavItem(props) {
   let resolved = useResolvedPath(props.route);
   let match = useMatch({ path: resolved.pathname, end: false });
 
-  let { title, route, icon, open, AppBarVisible, setOpen } = props
+  let { title, route, icon, open, AppBarVisible, setOpen, control } = props
 
   if (route.startsWith('prueba') && match && open && !AppBarVisible) {
     setOpen(false);
@@ -31,7 +31,12 @@ function NavItem(props) {
     <ListItem
       sx={{ color: '#25344f' }}
       selected={match && typeof (match) === "object"}
-      onClick={() => navigate(route)}
+      onClick={() => {
+        navigate(route) 
+        if(control){
+          control(false)
+        }
+      }}
       button >
       <ListItemIcon>
         {icon && icon}
@@ -47,21 +52,13 @@ function NavItem(props) {
 
 export const MainListItems = (props) => {
 
-  // const [open, setOpen] = React.useState(false);
-
-  // const showPruebas = () => {
-  //   if (!props.AppBarVisible) {
-  //     props.setAppBarVisible(true);
-  //   }
-  //   setOpen(!open);
-  // };
 
   return (
     <List>
       <ListSubheader inset>MENÚ</ListSubheader>
       {
         MainItems.map(({ icon, title, route }, i) => (
-          <NavItem key={i} icon={icon} title={title} route={route} />
+          <NavItem control={props.control} key={i} icon={icon} title={title} route={route} />
         ))
       }
 

src/Pages/Puestos.jsx

@@ -26,8 +26,7 @@ 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 { Centred as Loading } from '../Components/Generics/loading'
 import { useSelector } from 'react-redux';
 
 import { useQuery } from 'react-query';
@@ -43,7 +42,14 @@ export function Puestos() {
     return response;
   }
 
-  const { isLoading, error, data: result } = useQuery('puestos', getAll);
+  const { isLoading, error, data: result } = useQuery('puestos', getAll,{
+    retry:false,
+    cacheTime: 0,
+  });
+
+
+console.log(isLoading,result, error)
+
   const changePage = useCallback((_, value) => setPage(value), []);
   const [alignment, setAlignment] = React.useState('grid');
   const handleChange = useCallback((_event, newAlignment) => setAlignment(newAlignment), [])
@@ -91,23 +97,7 @@ export function Puestos() {
     }
   }, [del, show])
 
-
-  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>
-    )
-  }
-  const total_items = Divide(filter ? filter : result.data).length
+  const total_items = Divide(filter ? filter : ( result ? result.data: []  )).length
 
   return (
     <div className="content-section">
@@ -140,22 +130,30 @@ export function Puestos() {
             <div style={{ padding: 7 }}>
               <div className={` main_grid_plazas main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
                 <Row style={{ minHeight: '57vh' }}>
-                  <GridMode
-                    toggle={toggle}
-                    showing={alignment}
-                    data={filter ? Divide(filter) : Divide(result.data)}
-                    index={page - 1}
-                  />
+                  {isLoading && <Loading />}
+                  { !error ?
+                    <GridMode
+                      toggle={toggle}
+                      showing={alignment}
+                      data={filter ? Divide(filter) : Divide(result ? result.data  : [])}
+                      index={page - 1}
+                    /> : undefined
+                  }
+                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
                 </Row>
               </div>
               <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                 <Row style={{ minHeight: '57vh' }}>
-                  <ListMode
-                    toggle={toggle}
-                    showing={alignment}
-                    data={filter ? Divide(filter) : Divide(result.data)}
-                    index={page - 1}
-                  />
+                  {isLoading && <Loading />}
+                  { !error ?
+                    <ListMode
+                      toggle={toggle}
+                      showing={alignment}
+                      data={filter ? Divide(filter) : Divide(result ? result.data : [])}
+                      index={page - 1}
+                    /> : undefined
+                  }
+                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
                 </Row>
               </div>
 

src/Slices/tokenSlice.js

@@ -9,13 +9,13 @@ export const tokenSlice = createSlice({
       let { payload } = action
       if (payload.candi) {
         state.candi = action.payload
-      }else{
+      } else {
         state.token = action.payload;
       }
     },
-    removeToken: (state,action) => {
-      let {payload}=action
-      if(payload?.candi){
+    removeToken: (state, action) => {
+      let { payload } = action
+      if (payload?.candi) {
         state.candi = null
       }
       state.token = null;