list puestos creados

src/Components/Puestos/GridMode.jsx

+import React from "react";
+import NotFound from '../../Images/not_found.png';
+import { 
+    RemoveRedEye as RemoveRedEyeIcon,
+    Edit as EditIcon,
+    HighlightOff as HighlightOffIcon,
+} from '@mui/icons-material';
+
+
+import { Row, Col } from 'react-bootstrap'
+
+export function GridMode(props){
+
+    let { setEdit, setDelete, setShow, setPuesto,data } = props;
+
+    return(
+        <React.Fragment> 
+            {
+                data.length ? 
+                data.slice(23).map( plaza => {
+                    return(
+                        <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
+                            <div className="panel">
+                                <Row>
+                                    <Col md="4">
+                                        <div className="img-container">
+                                            <img alt="not found" src={NotFound}/>
+                                        </div>
+                                    </Col>
+                                    <Col md="8">
+                                        <div className="info_details">
+                                            <p>{ plaza.nombre }</p>
+                                            <p>{ plaza.description }</p>
+                                            <p>{ plaza.salario }</p>
+                                        </div>
+                                        <div className="btn_interactivos">
+
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={ () => {
+                                                        setPuesto(plaza)
+                                                        setShow(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Ver plaza">
+                                                    <RemoveRedEyeIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={() => {
+                                                        setPuesto(plaza)
+                                                        setEdit(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Editar plaza">
+                                                    <EditIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={() => {
+                                                        setPuesto(plaza)
+                                                        setDelete(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Eliminar plaza">
+                                                    <HighlightOffIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+
+                                        </div>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </Col>
+                    )
+                }) : undefined
+            }
+        </React.Fragment>
+    )
+}

src/Components/Puestos/ListMode.jsx

                         <tr >
                             <th className="text-center">Nombre de la plaza</th>
                             <th className="text-center">Descripción</th>
-                            <th className="text-center">Salario</th>
+                            <th className="text-center">Creacion</th>
                             <th className="text-center">Acciones</th>
                         </tr>
                     </thead>
                                 data.slice( 0,23 ).map( (plaza, i) => {
                                     return (
                                         <tr key={plaza.id}>
-                                            <td className="text-center">{  plaza.id +  " - " + plaza.nombre }</td>
+                                            <td className="text-center">{ plaza.nombre }</td>
                                             <td className="text-center">{ plaza.description }</td>
-                                            <td className="text-center">{ plaza.salario }</td>
+                                            <td className="text-center">{ plaza.created }</td>
                                             <td className="actions_butons_plaza"> 
                                                 <Button 
                                                     onClick={() => {
                     </tbody>
                     <tfoot>
                         <tr>
-                            <th>Nombre de la plaza</th>
-                            <th>Descripción</th>
-                            <th>Salario</th>
-                            <th>Acciones</th>
+                            <th className="text-center">Nombre de la plaza</th>
+                            <th className="text-center">Descripción</th>
+                            <th className="text-center">Salario</th>
+                            <th className="text-center">Acciones</th>
                         </tr>
                     </tfoot>
                 </Table>

src/Pages/Puestos.jsx

-import React, { useState }  from 'react';
+import React, { useState, useEffect }  from 'react';
 import { Row, Col } from 'react-bootstrap'
 import toast, { Toaster } from 'react-hot-toast';
 
-import { 
-    ToggleButton, 
-    ToggleButtonGroup, 
+import {
+    ToggleButton,
+    ToggleButtonGroup,
     Box, Paper
 } from '@mui/material';
 
-import { 
+import {
     ViewList as ViewListIcon,
     ViewModule as ViewModuleIcon,
-    RemoveRedEye as RemoveRedEyeIcon,
-    Edit as EditIcon,
-    HighlightOff as HighlightOffIcon,
 } from '@mui/icons-material';
 
 import { default as useAuth } from '../Auth/useAuth';
 import { Service } from '../Utils/HTTP';
 
-
-import NotFound from '../Images/not_found.png';
 import Express from '../Components/Modal/AgregarExpress';
 import Manual from '../Components/Modal/AgregarManual';
 
 import Mostrar from '../Components/Modal/MostrarPlaza';
 
 import { ListMode } from '../Components/Puestos/ListMode'
+import { GridMode } from '../Components/Puestos/GridMode'
 
-let data = [{
-    nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
-    description : '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
-    salario :  'Q 10,000',
-    id :  0,
-}]
-
-function* idMaker() {
-    var index = 1;
-    while(true)
-        yield index++;
-}
 
 const Success =  () => toast.success('Plaza Agregada!!')
 
-var ID = idMaker(); 
-
-for ( var _ of new Array(46) ){
-    data.push({ ...data[0], id : ID.next().value, d : _ })
-}
-
-function GridMode (props) {
-    
-    let { setEdit, setDelete, setShow, setPuesto } = props;
-
-    return(
-        <React.Fragment> 
-
-            {
-                data.length ? 
-                data.slice(23).map( plaza => {
-                    return(
-                        <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
-                            <div className="panel">
-                                <Row>
-                                    <Col md="4">
-                                        <div className="img-container">
-                                            <img alt="not found" src={NotFound}/>
-                                        </div>
-                                    </Col>
-                                    <Col md="8">
-                                        <div className="info_details">
-                                            <p>{ plaza.nombre }</p>
-                                            <p>{ plaza.description }</p>
-                                            <p>{ plaza.salario }</p>
-                                        </div>
-                                        <div className="btn_interactivos">
-
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={ () => {
-                                                        setPuesto(plaza)
-                                                        setShow(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Ver plaza">
-                                                    <RemoveRedEyeIcon className="grid_btn"/>
-                                                </span>
-                                            </div>
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={() => {
-                                                        setPuesto(plaza)
-                                                        setEdit(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Editar plaza">
-                                                    <EditIcon className="grid_btn"/>
-                                                </span>
-                                            </div>
-                                            <div className="botones_interactivos">
-                                                <span 
-                                                    onClick={() => {
-                                                        setPuesto(plaza)
-                                                        setDelete(true)
-                                                    }} 
-                                                    tooltip-location="top" 
-                                                    tooltip="Eliminar plaza">
-                                                    <HighlightOffIcon className="grid_btn"/>
-                                                </span>
-                                            </div>
-
-                                        </div>
-                                    </Col>
-                                </Row>
-                            </div>
-                        </Col>
-                    )
-                }) : undefined
-            }
-        </React.Fragment>
-    )
-}
-
 export function Puestos() {
+
     const auth = useAuth();
-    
-    useState(() => {
+    const [data, setData] = useState({});
+    const token = auth.getToken();
+
+    useEffect(() => {
         let rest = new Service("/plaza/getall")
-        let token = auth.getToken();
 
         rest
         .get(token)
         .then(({data}) => {
-            console.log('data > ', data)
+            let entries = data.map( e => {
+                return {
+                    nombre : e.nombrepuesto,
+                    description : e.notas,
+                    id : e.id,
+                    created: e.create_day,
+                    data: e
+                };
+            })
+            setData(entries)
         })
         .catch((error) => {
             console.log('error fetching data  ', error );
         })
-    },[])
+
+    },[token])
 
     const [alignment, setAlignment] = React.useState('list');
 
         <div className="content-section">
             <div className="main">
                 <Box sx={{ width: '100%' }}>
-                <Paper sx={{ width: '100%', mb: 2, padding : 2 }}>
-
-                <Row>
-                    <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 }, }} >
-                                <ToggleButtonGroup size="small" {...control}>
-                                    {children}
-                                </ToggleButtonGroup>
-                            </Box>
-                        </div>
-                    </Col>
-                    <Col md="10" sm='10' xs="10">
-                        <div className="add_producto">
-                            <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
+                    <Paper sx={{ width: '100%', mb: 2, padding : 2 }}>
+
+                        <Row>
+                            <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 }, }} >
+                                        <ToggleButtonGroup size="small" {...control}>
+                                            {children}
+                                        </ToggleButtonGroup>
+                                    </Box>
+                                </div>
+                            </Col>
+                            <Col md="10" sm='10' xs="10">
+                                <div className="add_producto">
+                                    <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
+                                </div>
+                                <div onClick={() => setExpress(true) } className="add_producto">
+                                    <div className="btn_add_producto"> <span >Agregar express</span> </div>
+                                </div>
+                            </Col>
+                        </Row>
+                        <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
+                            <Row>
+                                <GridMode
+                                    data={data}
+                                    setPuesto={setPuesto}
+                                    setEdit={setEdit}
+                                    setDelete={setDelete}
+                                    setShow={setShow}
+                                />
+                            </Row>
                         </div>
-                        <div onClick={() => setExpress(true) } className="add_producto">
-                            <div className="btn_add_producto"> <span >Agregar express</span> </div>
+                        <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
+                            <Row>
+                                <ListMode 
+                                    data={data}
+                                    setPuesto={setPuesto}
+                                    setEdit={setEdit}
+                                    setDelete={setDelete}
+                                    setShow={setShow}
+                                />
+                            </Row>
                         </div>
-                    </Col>
-                </Row>
-                <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
-                    <Row>
-                        <GridMode
-                            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 
-                            data={data}
-                            setPuesto={setPuesto}
-                            setEdit={setEdit}
-                            setDelete={setDelete}
-                            setShow={setShow}
-                        />
-                    </Row>
-                </div>
-
-                </Paper>
+
+                    </Paper>
                 </Box>
 
             </div>