home pagination fixes

.gitignore

@@ -21,4 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
 

package.json

@@ -24,7 +24,7 @@
     "react-hot-toast": "^2.2.0",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.0",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.11"
   },

src/Components/Home/Candidato.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
 export function Candidato (props) {
-    let { password,puesto,DPI, index , aplicacion,pendientes } = props.user
+    let { password,puesto,DPI, aplicacion,pendientes } = props.user
 
     return(
         <div className="data_candidato">
             <div className="row">
                 <div className="col20">
-                    <p>{index + " - " + password }</p>
+                    <p>{ password }</p>
                 </div>
                 <div className="col20">
                     <p>{ puesto }</p>

src/Components/Home/Candidatos.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import UpdateIcon from '@mui/icons-material/Update';
 import Typography from '@mui/material/Typography';
@@ -7,30 +7,65 @@ import Stack from '@mui/material/Stack';
 import { Row, Col } from 'react-bootstrap';
 
 import { Candidato } from './Candidato'
+const USER_LENGTH = 14
 
-export default function Candidatos () {
 
-    let list =  [{
-        password :'repartidor',
-        puesto : "Piloto Repartidor",
-        DPI : 1583266600501,
-        aplicacion : "27/12/2018 12:02 PM",
-        pendientes : "No"
-    }]
-
-    for( let _ of new Array(8)  ){
-        if(_) break
-        list.push( list[0] )
+function Divide(arregloOriginal){
+    const LONGITUD_PEDAZOS = 5;
+	let arregloDeArreglos = [];
+    for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
+        let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
+        arregloDeArreglos.push(pedazo);
     }
+    console.log(arregloDeArreglos)
+    return arregloDeArreglos
+}
+
+export default function Candidatos () {
 
     const [page, setPage] = useState(1);
-    // const [users, setUser] = useState(list);
-    // const [curret, setCurrent] = useState([]);
+    const [users, setUser] = useState([]);
 
-    const changePage = ( _ , value) => { if(_)
-        setPage(value);
+    const changePage = ( _ , value) => {
+
+        let page_numer = value;
+
+        Divide(users)
+        setPage(page_numer);
     };
 
+    useEffect(() => {
+
+        let list =  [{
+            password :'repartidor',
+            puesto : "Piloto Repartidor",
+            DPI : 0,
+            // aplicacion : "27/12/2018 12:02 PM",
+            aplicacion : new Date().toUTCString(),
+            pendientes : "No"
+        }]
+
+        let a = 1;
+        for( let _ of new Array(USER_LENGTH)  ){
+            if(_) break
+
+            let temp = {
+                ...list[0],
+                DPI : a * 1000
+            }
+
+            a=a+1;
+            list.push(temp)
+        }
+
+        let divided = Divide(list);
+        console.log('DIVDED 0 >> ',JSON.stringify( divided[0] ))
+
+        setUser(divided)
+
+    }, [])
+
+
 
     return (
         <div className="body_historial">
@@ -50,8 +85,9 @@ export default function Candidatos () {
                     </Row>
                 </div>
                 {
-                    list ?
-                    list.map( (user, index) => (<Candidato key={user.DPI + index} user={{ ...user, index }}/>)) 
+                    users.length ?
+                    users[page - 1]
+                    .map( user => (<Candidato key={user.DPI} user={user}/>)) 
                     : undefined
                 }
                 <Row style={{ padding : 5 }}>
@@ -61,7 +97,7 @@ export default function Candidatos () {
                             <Pagination 
                                 siblingCount={5} 
                                 shape='rounded' 
-                                count={list.length} 
+                                count={users.length} 
                                 page={page} 
                                 onChange={changePage} />
                         </Stack>

src/Pages/Login.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import toast, { Toaster } from 'react-hot-toast';
+// import toast, { Toaster } from 'react-hot-toast';
+import { Toaster } from 'react-hot-toast';
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
@@ -17,6 +18,8 @@ import useAuth from '../Auth/useAuth';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
+// import { HTTP } from '../Utils/HTTP.js'
+
 const LoginSchema = Yup.object().shape({
     email : Yup
     .string()
@@ -43,7 +46,10 @@ export function Login() {
         },
         validationSchema: LoginSchema,
         onSubmit: (values) => {
-            toast.success('Bienvenido!!')
+            // let { email, password } = values
+            // let request = new HTTP('/user?' + `user=${email}&password=${password}`)
+            // request.get()
+            // toast.success('Bienvenido!!')
             // toast.error("This didn't work.")
             // return navigate('/dashboard/home')
             auth.login(values)
@@ -90,7 +96,7 @@ export function Login() {
                             <PersonIcon />
                         </Avatar>
                         <Typography component="h1" variant="h5">
-                            Ingresar
+                            Ingresar 
                         </Typography>
 
                         <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>

src/Utils/HTTP.js

@@ -0,0 +1,60 @@
+export class HTTP {
+
+    constructor(url){
+        this.base_url = 'http://204.48.25.93:8081'; 
+        this.url =  this.base_url + url
+    }
+
+    async post(body){
+        try{ 
+
+            let request = fetch(this.url , {
+                method: 'POST', 
+                mode: 'cors',
+                cache: 'no-cache',
+                headers: {
+                    "Cache-Control": "no-cache, no-store, max-age=0, must-revalidate",
+                    "Connection": "keep-alive",
+                    "Content-Type": "application/json",
+                    "Date": new Date().toUTCString(),
+                    "Expires": 0,
+                    "Keep-Alive": "timeout=60",
+                    "Pragma": "no-cache",
+                    "Transfer-Encoding": "chunked",
+                    "Vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers",
+                    "X-Content-Type-Options": "nosniff",
+                    "X-Frame-Options": "DENY",
+                    "X-XSS-Protection": 1
+                },
+                // body: body
+            });
+
+            // let response = await request.json();
+            console.log(await request)
+
+        }catch(error)    {
+            console.log(error)
+            return {  status : 0, message  :  error.message }
+        }
+    }
+
+    async get() {
+
+        // POST request using fetch with async/await
+        const requestOptions = {
+            method: 'POST',
+            headers : new Headers({
+                'Content-Type': 'application/json', 
+                'Access-Control-Allow-Origin': '*',
+            }),
+            // body: JSON.stringify({ title: 'React POST Request Example' })
+        };
+        const response = await fetch(this.url, requestOptions);
+        // const data = 
+        console.log(response)
+        // this.setState({ postId: data.id });
+    }
+
+
+}
+