password api migration

src/Components/Modal/AgregarManual.js

@@ -15,283 +15,282 @@ import {
 
 import { Service } from '../../Utils/HTTP';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
-import useAuth from '../../Auth/useAuth';
 import { TabPanel } from './TabPanel'
+import { useSelector } from 'react-redux';
 
 function Manual(props) {
 
-    const auth = useAuth();
-    const token = auth.getToken();
-
-    const getCategories = async () => {
-        let rest = new Service("/categoria/getAll")
-        return await rest.getQuery(token)
-    }
+  const auth = useSelector((state) => state.token)
+
+  const getCategories = async () => {
+    let rest = new Service("/categoria/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const getTest = async () => {
+    let rest = new Service("/tests/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const { data } = useQuery('categories', getCategories);
+  const { data: testsCatalog } = useQuery('tests', getTest);
+  const queryClient = useQueryClient();
+
+  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, "Ingresa una nota válida").max(150),
+    tests: Yup.array()
+  })
+
+  const [departamento, setDepartamento] = React.useState('');
+  const [puestoSup, setPuestoSup] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState(new Date());
+  const [tab, setTab] = React.useState(0);
+  const [checklist, setChecklist] = React.useState([]);
+
+  const handleClose = () => false
+
+  const changeDepartamento = (event) => {
+    setDepartamento(event.target.value);
+  };
+
+  const changePuestoSup = (event) => {
+    setPuestoSup(event.target.value);
+  };
+
+  const agregarPuesto = async (puesto) => {
+    let rest = new Service('/plaza/save');
+    return await rest.postQuery(puesto, auth.token);
+  }
+
+  const puestoMutation = useMutation(agregarPuesto)
+
+  let { visible, onClose } = props
+
+  const formik = useFormik({
+    initialValues: {
+      nombrepuesto: "",
+      puestosuperior: "",
+      aredepto: 1,
+      fecha: date,
+      notas: "",
+      tests:[]
+    },
+    onSubmit: (fields, { resetForm }) => {
+
+      setOpen(true)
+      fields['fecha'] = new Date(fields.fecha).toISOString();
+      fields['areadeptoplz_id'] = 1;
+      fields['id'] = -1;
+
+      puestoMutation.mutate(fields, {
+        onSuccess: () => {
+          setOpen(false)
+          resetForm();
+          onClose();
+          queryClient.invalidateQueries('puestos')
+          toast.success("Puesto Agregado")
+        },
+        onError: () => {
+          setOpen(false)
+          toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
+        }
+      })
+    },
+    validationSchema: NewPlazaSchema,
+  });
 
-    const getTest = async () => {
-        let rest = new Service("/tests/getAll")
-        return await rest.getQuery(token)
-    }
+  const changeTab = (_event, newValue) => {
+    setTab(newValue);
+  };
 
-    const { data } = useQuery('categories', getCategories);
-    const { data: testsCatalog } = useQuery('tests', getTest);
-    const queryClient = useQueryClient();
-
-    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, "Ingresa una nota válida").max(150),
-        tests: Yup.array()
-    })
-
-    const [departamento, setDepartamento] = React.useState('');
-    const [puestoSup, setPuestoSup] = React.useState('');
-    const [open, setOpen] = React.useState(false);
-    const [date, setDate] = React.useState(new Date());
-    const [tab, setTab] = React.useState(0);
-    const [checklist, setChecklist] = React.useState([]);
-
-    const handleClose = () => false
-
-    const changeDepartamento = (event) => {
-        setDepartamento(event.target.value);
-    };
-    
-    const changePuestoSup = (event) => {
-        setPuestoSup(event.target.value);
-    };
-
-    const agregarPuesto = async (puesto) => {
-        let rest = new Service('/plaza/save');
-        return await rest.postQuery(puesto, token);
-    }
 
-    const puestoMutation = useMutation(agregarPuesto)
+  const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
-    let { visible, onClose } = props
-
-    const formik = useFormik({
-        initialValues: {
-            nombrepuesto: "",
-            puestosuperior: "",
-            aredepto: 1,
-            fecha: date,
-            notas: "",
-            tests:[]
-        },
-        onSubmit: (fields, { resetForm }) => {
-
-            setOpen(true)
-            fields['fecha'] = new Date(fields.fecha).toISOString();
-            fields['areadeptoplz_id'] = 1;
-            fields['id'] = -1;
-
-            puestoMutation.mutate(fields, {
-                onSuccess: () => {
-                    setOpen(false)
-                    resetForm();
-                    onClose();
-                    queryClient.invalidateQueries('puestos')
-                    toast.success("Puesto Agregado")
-                },
-                onError: () => {
-                    setOpen(false)
-                    toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
-                }
-            })
-        },
-        validationSchema: NewPlazaSchema,
-    });
-
-    const changeTab = (_event, newValue) => {
-        setTab(newValue);
-    };
-    
-
-    const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
-
-    const addPrueba = (check,id) => {
-        let { tests } = values
-        let temp ;
-        if(check){
-            temp = [...tests, {id}]
-        }else{
-            temp = tests.filter( test => test.id !== id);
-        }
-        setChecklist(  temp.map( test => test.id) )
-        setValues({...values, tests: temp})
-    };
-
-    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 Puesto</h4>
-            </Modal.Header>
-            <Modal.Body className="modal-body">
-
-                <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
-                    <Tab label="Información" />
-                    <Tab label="Pruebas" />
-                </Tabs>
-
-                <FormikProvider style={{ paddingTop: 25 }} value={formik}>
-                    <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-
-                        <TabPanel value={tab} index={1}>
-                            <Stack spacing={1}>
-                                <Box style={{ paddingTop :5, paddingLeft :15 }}>
-                                    <Divider/>
-                                        <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
-                                    <Divider/>
-                                    <FormGroup>
-                                        {
-                                            testsCatalog ?
-                                            testsCatalog.data.map( test => (
-                                                <FormControlLabel 
-                                                    key={test.id}
-                                                    control={
-                                                        <Checkbox 
-                                                            checked={checklist.includes((test.id))}
-                                                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
-                                                        />
-                                                    } 
-                                                    label={test.nombre} 
-                                                    />
-                                            )): null
-                                        }
-                                    </FormGroup>
-                                </Box>
-                            </Stack>
-                        </TabPanel>
-
-                        <TabPanel value={tab} index={0}>
-
-                            <Stack spacing={3}>
-
-
-                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
-                                    <TextField
-                                        label="Nombre"
-                                        fullWidth
-                                        {...getFieldProps('nombrepuesto')}
-                                        error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                                        helperText={touched.nombrepuesto && errors.nombrepuesto}
-                                    />
-
-                                    <FormControl fullWidth>
-                                        <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
-                                        <Select
-                                            labelId="demo-simple-select-label"
-                                            value={puestoSup}
-                                            label="Puesto Superior"
-                                            onChange={changePuestoSup}
-                                            {...getFieldProps('puestosuperior')}
-                                            helperText={touched.puestosuperior && errors.puestosuperior}
-                                            error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
-                                            {
-                                                data ?
-                                                    data.data.map(cate => {
-                                                        return (
-                                                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                                                        )
-                                                    })
-                                                    : <MenuItem>Null</MenuItem>
-                                            }
-                                        </Select>
-                                    </FormControl>
-
-                                </Stack>
-
-                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
-
-                                    <FormControl fullWidth>
-                                        <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
-                                        <Select
-                                            labelId="demo-simple-select-label"
-                                            value={departamento}
-                                            label="Departamento"
-                                            onChange={changeDepartamento}
-                                            {...getFieldProps('aredepto')}
-                                            error={Boolean(touched.aredepto && errors.aredepto)} >
-                                            {
-                                                data ?
-                                                    data.data.map(cate => {
-                                                        return (
-                                                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                                                        )
-                                                    })
-                                                    : <MenuItem>Null</MenuItem>
-                                            }
-                                        </Select>
-                                    </FormControl>
-
-
-                                    <LocalizationProvider
-                                        dateAdapter={DateFnsUtils}>
-                                        <DesktopDatePicker
-                                            label="Fecha Creación"
-                                            fullWidth
-                                            inputFormat="dd/MM/yyyy"
-                                            {...getFieldProps('fecha')}
-                                            value={date}
-                                            onChange={setDate}
-                                            renderInput={(params) =>
-                                                <TextField
-                                                    disabled={true}
-                                                    label="Fecha Creación"
-                                                    fullWidth
-                                                    {...params}
-                                                />}
-                                        />
-                                    </LocalizationProvider>
-
-                                </Stack>
-
-                                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
-                                    <TextField
-                                        id="filled-multiline-static"
-                                        multiline
-                                        rows={4}
-                                        variant="filled"
-                                        label="Notas"
-                                        fullWidth
-                                        type="text"
-                                        {...getFieldProps('notas')}
-                                        error={Boolean(touched.notas && errors.notas)}
-                                        helperText={touched.notas && errors.notas}
-                                    />
-                                </Stack>
-                            </Stack>
-
-                        </TabPanel>
-
-
-                        <Modal.Footer>
-                            <Button
-                                type="submit"
-                                className="registerBtn"
-                                variant="contained"
-                                sx={{ mt: 1, mr: 1 }} >
-                                {'Guardar'}
-                            </Button>
-                        </Modal.Footer>
-
-                    </Form>
-                </FormikProvider>
-            </Modal.Body>
-            <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={open}
-                onClick={handleClose} >
-                <CircularProgress color="inherit" />
-            </Backdrop>
-            <Toaster position="top-right" />
-        </Modal>
-    )
+  const addPrueba = (check,id) => {
+    let { tests } = values
+    let temp ;
+    if(check){
+      temp = [...tests, {id}]
+    }else{
+      temp = tests.filter( test => test.id !== id);
+    }
+    setChecklist(  temp.map( test => test.id) )
+    setValues({...values, tests: temp})
+  };
+
+  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 Puesto</h4>
+      </Modal.Header>
+      <Modal.Body className="modal-body">
+
+        <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
+          <Tab label="Información" />
+          <Tab label="Pruebas" />
+        </Tabs>
+
+        <FormikProvider style={{ paddingTop: 25 }} value={formik}>
+          <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+
+            <TabPanel value={tab} index={1}>
+              <Stack spacing={1}>
+                <Box style={{ paddingTop :5, paddingLeft :15 }}>
+                  <Divider/>
+                  <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
+                  <Divider/>
+                  <FormGroup>
+                    {
+                    testsCatalog ?
+                      testsCatalog.data.map( test => (
+                        <FormControlLabel 
+                          key={test.id}
+                          control={
+                          <Checkbox 
+                            checked={checklist.includes((test.id))}
+                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
+                            />
+                        } 
+                          label={test.nombre} 
+                          />
+                      )): null
+                  }
+                  </FormGroup>
+                </Box>
+              </Stack>
+            </TabPanel>
+
+            <TabPanel value={tab} index={0}>
+
+              <Stack spacing={3}>
+
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+                  <TextField
+                    label="Nombre"
+                    fullWidth
+                    {...getFieldProps('nombrepuesto')}
+                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                    helperText={touched.nombrepuesto && errors.nombrepuesto}
+                    />
+
+                  <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      value={puestoSup}
+                      label="Puesto Superior"
+                      onChange={changePuestoSup}
+                      {...getFieldProps('puestosuperior')}
+                      helperText={touched.puestosuperior && errors.puestosuperior}
+                      error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
+                      {
+                      data ?
+                        data.data.map(cate => {
+                          return (
+                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+)
+                        })
+                        : <MenuItem>Null</MenuItem>
+                    }
+                    </Select>
+                  </FormControl>
+
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+
+                  <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      value={departamento}
+                      label="Departamento"
+                      onChange={changeDepartamento}
+                      {...getFieldProps('aredepto')}
+                      error={Boolean(touched.aredepto && errors.aredepto)} >
+                      {
+                      data ?
+                        data.data.map(cate => {
+                          return (
+                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                          )
+                        })
+                        : <MenuItem>Null</MenuItem>
+                    }
+                    </Select>
+                  </FormControl>
+
+
+                  <LocalizationProvider
+                    dateAdapter={DateFnsUtils}>
+                    <DesktopDatePicker
+                      label="Fecha Creación"
+                      fullWidth
+                      inputFormat="dd/MM/yyyy"
+                      {...getFieldProps('fecha')}
+                      value={date}
+                      onChange={setDate}
+                      renderInput={(params) =>
+                        <TextField
+                          disabled={true}
+                          label="Fecha Creación"
+                          fullWidth
+                          {...params}
+                          />}
+                      />
+                  </LocalizationProvider>
+
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+                  <TextField
+                    id="filled-multiline-static"
+                    multiline
+                    rows={4}
+                    variant="filled"
+                    label="Notas"
+                    fullWidth
+                    type="text"
+                    {...getFieldProps('notas')}
+                    error={Boolean(touched.notas && errors.notas)}
+                    helperText={touched.notas && errors.notas}
+                    />
+                </Stack>
+              </Stack>
+
+            </TabPanel>
+
+
+            <Modal.Footer>
+              <Button
+                type="submit"
+                className="registerBtn"
+                variant="contained"
+                sx={{ mt: 1, mr: 1 }} >
+                {'Guardar'}
+              </Button>
+            </Modal.Footer>
+
+          </Form>
+        </FormikProvider>
+      </Modal.Body>
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={handleClose} >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <Toaster position="top-right" />
+    </Modal>
+  )
 }
 export default memo(Manual);

src/Components/Modal/EditPlaza.js

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
-import useAuth from '../../Auth/useAuth';
+import { useSelector } from 'react-redux'
 import { useQuery, useMutation, useQueryClient } from 'react-query'
 
 const NewPlazaSchema = Yup.object().shape({
@@ -35,265 +35,264 @@ const NewPlazaSchema = Yup.object().shape({
 
 function Edit(props) {
 
-    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 changeDepartamento = useCallback((event) => {
-        setDepartamento(event.target.value);
-    }, []);
-
-    const [date, setDate] = React.useState(now);
-    const [tab, setTab] = React.useState(0);
-    const [checklist, setChecklist] = React.useState([]);
-
-    const addPrueba = (check,id) => {
-        let { tests } = values
-        let temp ;
-        if(check){
-            temp = [...tests, {id}]
-        }else{
-            temp = tests.filter( test => test.id !== id);
-        }
-        setChecklist(temp.map( test => test.id) )
-        setValues({...values, tests: temp})
-    };
-
-    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 getTest = async () => {
-        let rest = new Service("/tests/getAll")
-        return await rest.getQuery(token)
+  const now = useMemo(() => new Date(), [])
+  const auth = useSelector((state) => state.token)
+  const queryClient = useQueryClient()
+  let { visible, toggle, puesto } = props
+
+  const [departamento, setDepartamento] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+
+  const changeDepartamento = useCallback((event) => {
+    setDepartamento(event.target.value);
+  }, []);
+
+  const [date, setDate] = React.useState(now);
+  const [tab, setTab] = React.useState(0);
+  const [checklist, setChecklist] = React.useState([]);
+
+  const addPrueba = (check,id) => {
+    let { tests } = values
+    let temp ;
+    if(check){
+      temp = [...tests, {id}]
+    }else{
+      temp = tests.filter( test => test.id !== id);
     }
-
-    const puestoMutation = useMutation(updatePuesto)
-
-    const close = () => toggle("EDIT");
-
-    const { data } = useQuery('categories', getCategories);
-    const { data: testsCatalog } = useQuery('tests', getTest);
-
-    const formik = useFormik({
-        initialValues: {
-            id: 1,
-            nombrepuesto: "",
-            puestosuperior: 1,
-            aredepto: 1,
-            fecha: now,
-            notas: "",
-            tests : []
+    setChecklist(temp.map( test => test.id) )
+    setValues({...values, tests: temp})
+  };
+
+  const getCategories = async () => {
+    let rest = new Service("/categoria/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const updatePuesto = async (fields) => {
+    let rest = new Service('/plaza/edit');
+    return rest.putQuery(fields, auth.token)
+  }
+
+  const getTest = async () => {
+    let rest = new Service("/tests/getAll")
+    return await rest.getQuery(auth.token)
+  }
+
+  const puestoMutation = useMutation(updatePuesto)
+
+  const close = () => toggle("EDIT");
+
+  const { data } = useQuery('categories', getCategories);
+  const { data: testsCatalog } = useQuery('tests', getTest);
+
+  const formik = useFormik({
+    initialValues: {
+      id: 1,
+      nombrepuesto: "",
+      puestosuperior: 1,
+      aredepto: 1,
+      fecha: now,
+      notas: "",
+      tests : []
+    },
+    onSubmit: (fields, { resetForm }) => {
+      setOpen(true);
+      fields['fecha'] = new Date(fields.fecha).toISOString();
+
+      puestoMutation.mutate(fields, {
+        onSuccess: () => {
+          close();
+          setOpen(false)
+          toast.success("Puesto Actualizado!!")
+          queryClient.invalidateQueries('puestos')
         },
-        onSubmit: (fields, { resetForm }) => {
-            setOpen(true);
-            fields['fecha'] = new Date(fields.fecha).toISOString();
-
-            puestoMutation.mutate(fields, {
-                onSuccess: () => {
-                    close();
-                    setOpen(false)
-                    toast.success("Puesto Actualizado!!")
-                    queryClient.invalidateQueries('puestos')
-                },
-                onError:() => {
-                    close();
-                    setOpen(false)
-                    toast.error("Lo sentimos ocurrió error inténtalo más tarde")
-                }
-            })
-
-            resetForm();
-        },
-        validationSchema: NewPlazaSchema,
-    });
-
-    const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
-
-    useEffect(() => {
-        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,
-                tests : puesto.tests
-            })
-            setChecklist(puesto.tests.map(( {id} ) => id))
+        onError:() => {
+          close();
+          setOpen(false)
+          toast.error("Lo sentimos ocurrió error inténtalo más tarde")
         }
-    }, [puesto, now, setValues])
-
-    const changeTab = (_event, newValue) => {
-        setTab(newValue);
-    };
-
-    return (
-
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
-            <Modal.Header>
-                <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">
-
-                <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
-                    <Tab label="Información" />
-                    <Tab label="Pruebas" />
-                </Tabs>
-
-                <FormikProvider style={{ padding: 25 }} value={formik}>
-                    <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
-
-
-                        <TabPanel value={tab} index={1}>
-                            <Stack spacing={1}>
-                                <Box style={{ paddingTop :5, paddingLeft :15 }}>
-                                    <Divider/>
-                                        <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
-                                    <Divider/>
-                                    <FormGroup>
-                                        {
-                                            testsCatalog ?
-                                            testsCatalog.data.map( test => (
-                                                <FormControlLabel 
-                                                    key={test.id}
-                                                    control={
-                                                        <Checkbox 
-                                                            checked={checklist.includes((test.id))}
-                                                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
-                                                        />
-                                                    } 
-                                                    label={test.nombre} 
-                                                    />
-                                            )): null
-                                        }
-                                    </FormGroup>
-                                </Box>
-                            </Stack>
-                        </TabPanel>
-
-
-                        <TabPanel value={tab} index={0} >
-                        <Stack spacing={3}>
-
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                                <TextField
-                                    label="Nombre"
-                                    fullWidth
-                                    {...getFieldProps('nombrepuesto')}
-                                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                                    helperText={touched.nombrepuesto && errors.nombrepuesto}
-                                />
-
-                                <TextField
-                                    label="Puesto Superior"
-                                    fullWidth
-                                    {...getFieldProps('puestosuperior')}
-                                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
-                                    helperText={touched.puestosuperior && errors.puestosuperior}
-                                />
-
-                            </Stack>
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                                <FormControl fullWidth>
-                                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
-                                    <Select
-                                        labelId="demo-simple-select-label"
-                                        value={departamento}
-                                        label="Departamento"
-                                        onChange={changeDepartamento}
-                                        {...getFieldProps('aredepto')}
-                                        error={Boolean(touched.aredepto && errors.aredepto)} >
-                                        {
-                                            data ?
-                                                data.data.map(cate => {
-                                                    return (
-                                                        <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                                                    )
-                                                })
-                                                : <MenuItem>Null</MenuItem>
-                                        }
-                                    </Select>
-                                </FormControl>
-
-
-                                <LocalizationProvider
-                                    dateAdapter={DateFnsUtils}>
-                                    <DesktopDatePicker
-                                        label="Fecha Creación"
-                                        fullWidth
-                                        inputFormat="dd/MM/yyyy"
-                                        {...getFieldProps('fecha')}
-                                        xd
-                                        value={date}
-                                        onChange={setDate}
-                                        renderInput={(params) =>
-                                            <TextField
-                                                disabled={true}
-                                                label="Fecha Creación"
-                                                fullWidth
-                                                {...params}
-                                            />}
-                                    />
-                                </LocalizationProvider>
-
-                            </Stack>
-
-                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-                                <TextField
-                                    id="filled-multiline-static"
-                                    multiline
-                                    rows={4}
-                                    variant="filled"
-                                    label="Notas"
-                                    fullWidth
-                                    type="text"
-                                    {...getFieldProps('notas')}
-                                    error={Boolean(touched.notas && errors.notas)}
-                                    helperText={touched.notas && errors.notas}
-                                />
-                            </Stack>
-                        </Stack>
-                        </TabPanel>
-
-
-                        <Modal.Footer>
-                            <Button
-                                type="submit"
-                                className="registerBtn"
-                                variant="contained"
-                                sx={{ mt: 1, mr: 1 }} >
-                                {'Actualizar'}
-                            </Button>
-                        </Modal.Footer>
-
-                    </Form>
-                </FormikProvider>
-            </Modal.Body>
-            <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={open}
-                onClick={() => console.log('backdrop')} >
-                <CircularProgress color="inherit" />
-            </Backdrop>
-            <Toaster position="top-right" />
-
-        </Modal>
-    )
+      })
+
+      resetForm();
+    },
+    validationSchema: NewPlazaSchema,
+  });
+
+  const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
+
+  useEffect(() => {
+    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,
+        tests : puesto.tests
+      })
+      setChecklist(puesto.tests.map(( {id} ) => id))
+    }
+  }, [puesto, now, setValues])
+
+  const changeTab = (_event, newValue) => {
+    setTab(newValue);
+  };
+
+  return (
+
+    <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
+      <Modal.Header>
+        <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">
+
+        <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
+          <Tab label="Información" />
+          <Tab label="Pruebas" />
+        </Tabs>
+
+        <FormikProvider style={{ padding: 25 }} value={formik}>
+          <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+
+
+            <TabPanel value={tab} index={1}>
+              <Stack spacing={1}>
+<Box style={{ paddingTop :5, paddingLeft :15 }}>
+                  <Divider/>
+                  <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
+                  <Divider/>
+                  <FormGroup>
+                    {
+                    testsCatalog ?
+                      testsCatalog.data.map( test => (
+                        <FormControlLabel 
+                          key={test.id}
+                          control={
+                          <Checkbox 
+                            checked={checklist.includes((test.id))}
+                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
+                            />
+                        } 
+                          label={test.nombre} 
+                          />
+                      )): null
+                  }
+                  </FormGroup>
+                </Box>
+              </Stack>
+            </TabPanel>
+
+
+            <TabPanel value={tab} index={0} >
+              <Stack spacing={3}>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                  <TextField
+                    label="Nombre"
+                    fullWidth
+                    {...getFieldProps('nombrepuesto')}
+                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                    helperText={touched.nombrepuesto && errors.nombrepuesto}
+                    />
+
+                  <TextField
+                    label="Puesto Superior"
+                    fullWidth
+                    {...getFieldProps('puestosuperior')}
+                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
+                    helperText={touched.puestosuperior && errors.puestosuperior}
+                    />
+
+                </Stack>
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                  <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
+                    <Select
+                      labelId="demo-simple-select-label"
+                      value={departamento}
+                      label="Departamento"
+                      onChange={changeDepartamento}
+                      {...getFieldProps('aredepto')}
+                      error={Boolean(touched.aredepto && errors.aredepto)} >
+                      {
+                      data ?
+                        data.data.map(cate => {
+                          return (
+                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                          )
+                        })
+                        : <MenuItem>Null</MenuItem>
+                    }
+                    </Select>
+                  </FormControl>
+
+
+                  <LocalizationProvider
+                    dateAdapter={DateFnsUtils}>
+                    <DesktopDatePicker
+                      label="Fecha Creación"
+                      fullWidth
+                      inputFormat="dd/MM/yyyy"
+                      {...getFieldProps('fecha')}
+                      xd
+                      value={date}
+                      onChange={setDate}
+                      renderInput={(params) =>
+                        <TextField
+                          disabled={true}
+                          label="Fecha Creación"
+                          fullWidth
+                          {...params}
+                          />}
+                      />
+                  </LocalizationProvider>
+
+                </Stack>
+
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                  <TextField
+                    id="filled-multiline-static"
+                    multiline
+                    rows={4}
+                    variant="filled"
+                    label="Notas"
+                    fullWidth
+                    type="text"
+                    {...getFieldProps('notas')}
+                    error={Boolean(touched.notas && errors.notas)}
+                    helperText={touched.notas && errors.notas}
+                    />
+                </Stack>
+              </Stack>
+            </TabPanel>
+
+
+            <Modal.Footer>
+              <Button
+                type="submit"
+                className="registerBtn"
+                variant="contained"
+                sx={{ mt: 1, mr: 1 }} >
+                {'Actualizar'}
+              </Button>
+            </Modal.Footer>
+
+          </Form>
+        </FormikProvider>
+      </Modal.Body>
+      <Backdrop
+        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={() => console.log('backdrop')} >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <Toaster position="top-right" />
+
+    </Modal>
+  )
 }
 
 

src/Components/Password/Rows.js

@@ -2,28 +2,22 @@ import { Operation } from './Operation'
 
 export const Encabezados = [
     {
-        name: 'pass',
-        numeric: false,
-        disablePadding: true,
-        label: 'Contraseña',
-    },
-    {
         name: 'name',
         numeric: false,
         disablePadding: true,
         label: 'Nombre',
     },
     {
-        name: 'apell',
+        name: 'activacion',
         numeric: false,
         disablePadding: true,
-        label: 'Apellido',
+        label: 'Fecha Activación',
     },
     {
-        name: 'mail',
+        name: 'dead',
         numeric: false,
         disablePadding: true,
-        label: 'Correo',
+        label: 'Fecha vencimiento',
     },
     {
         name: 'op',
@@ -52,12 +46,11 @@ export const niveles_educativos = [
 
 export function Build(pwds) {
     return pwds.map(password => {
-        let { candidato: user, plaza_id, pwd } = password
+        let {pwd , deadpwd, dateToActived, plaza_id} = password
         return {
-            pass: pwd ? atob(pwd): '',
-            name: user.nombre,
-            apell: user.apellidos,
-            mail: user.mail,
+            name:pwd, //user.nombre,
+            activacion:dateToActived, //user.apellidos,
+            daed: deadpwd,//,user.mail,
             op: <Operation plz={plaza_id} pwd={pwd} />
         }
     })

src/Pages/ContrasV2.jsx

@@ -8,49 +8,53 @@ import { TableStyle, TextLabels } from '../Components/Password/TableStyle'
 
 import { useQuery } from 'react-query';
 import { Service } from '../Utils/HTTP.js'
-import useAuth from '../Auth/useAuth'
+import { useSelector } from 'react-redux';
 
 export function Contrasv2() {
 
-    const auth = useAuth();
-    const token = React.useRef(auth.getToken())
-
-    const getAllPwd = async () => {
-        let rest = new Service('/contrasenia/getallbyidUsr');
-        return await rest.getQuery(token.current)
-    }
-
-    const { data, status  } = useQuery('passwords', getAllPwd );
-
-    const options = {
-        filterType: 'checkbox',
-        customToolbar: () => {
-            return (
-                <CustomToolbar />
-            );
-        },
-        textLabels: TextLabels
-    };
-
-
-    return (
-        <div className="content-section">
-            <div className="main">
-                <Box sx={{ width: '100%' }}>
-                    <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
-                        <ThemeProvider theme={TableStyle}>
-                            <MUIDataTable
-                                sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
-                                title={"Contraseñas"}
-                                data={Build( status ==='success' ? data.data : [])}
-                                columns={Encabezados}
-                                options={options}
-                            />
-                        </ThemeProvider>
-                    </Paper>
-                </Box>
-            </div>
-        </div>
-    );
+  const auth = useSelector((state) => state.token)
+
+  const getAllPwd = async () => {
+    let rest = new Service('/contrasenia/getallbyidUsr');
+    return await rest.getQuery(auth.token)
+  }
+
+  const { data, status  } = useQuery('passwords', getAllPwd );
+  console.log(data,status)
+
+  if(status === 'loading'){
+    return <h1>loading...</h1>
+  }
+
+  const options = {
+    filterType: 'checkbox',
+    customToolbar: () => {
+      return (
+        <CustomToolbar />
+      );
+    },
+    textLabels: TextLabels
+  };
+
+
+  return (
+    <div className="content-section">
+      <div className="main">
+        <Box sx={{ width: '100%' }}>
+          <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
+            <ThemeProvider theme={TableStyle}>
+              <MUIDataTable
+                sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
+                title={"Contraseñas"}
+                data={Build( status ==='success' ? data.data : [])}
+                columns={Encabezados}
+                options={options}
+                />
+            </ThemeProvider>
+          </Paper>
+        </Box>
+      </div>
+    </div>
+  );
 
 }