add query login

package.json

@@ -22,6 +22,7 @@
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",
+    "react-query": "^3.34.12",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
     "react-scripts": "^5.0.0",

src/App.js

@@ -5,8 +5,10 @@ import { createContext } from 'react'
 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 Routes from './Components/Routes'
+const queryClient = new QueryClient()
 
 const GATEWAY =  {
     dev : {
@@ -21,15 +23,17 @@ export const API_GATEWAY = createContext(GATEWAY)
 
 function App() {
     return (
-        <Router>
-            <AuthProvider>
-                <API_GATEWAY.Provider value={GATEWAY.dev}>
-                    <Container fluid>
-                        <Routes/>
-                    </Container>
-                </API_GATEWAY.Provider>
-            </AuthProvider>
-        </Router>
+        <QueryClientProvider client={queryClient}>
+            <Router>
+                <AuthProvider>
+                    <API_GATEWAY.Provider value={GATEWAY.dev}>
+                        <Container fluid>
+                            <Routes/>
+                        </Container>
+                    </API_GATEWAY.Provider>
+                </AuthProvider>
+            </Router>
+        </QueryClientProvider>
     );
 }
 

src/Pages/Contras.jsx

@@ -1,6 +1,5 @@
 import $ from 'jquery'  
 import { Button, Col , Row } from 'react-bootstrap'
-import { HTTP_ } from '../Utils/HTTP'
 
 export function Contras() {
 
@@ -13,12 +12,6 @@ export function Contras() {
         await fetch('http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345', { method : 'POST' });
     }
 
-    const HTTPV3  =  async () => {
-        let htp = new HTTP_()
-        await htp.get_()
-    }
-
-
 
     return (
         <div className="content-section">
@@ -41,7 +34,7 @@ export function Contras() {
                     
                     <Row>
                         <Col>
-                            <Button onClick={HTTPV3}>Request tipo 3</Button>
+                            <Button >Request tipo 3</Button>
                         </Col>
                     </Row>
 

src/Pages/Login.jsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-// import toast, { Toaster } from 'react-hot-toast';
-import { Toaster } from 'react-hot-toast';
+import toast, { Toaster } from 'react-hot-toast';
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
-    TextField, CssBaseline, Button, Avatar
+    TextField, CssBaseline, Button, Avatar,
+    Backdrop, CircularProgress
 } from '@mui/material'
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -18,18 +18,18 @@ import useAuth from '../Auth/useAuth';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
-import { HTTP_ } from '../Utils/HTTP.js'
+import { Service } from '../Utils/HTTP.js'
 
 const LoginSchema = Yup.object().shape({
     email : Yup
     .string()
-    .email('El correo debe ser válido')
-    .required('El correo es requerido'),
+    // .email('El correo debe ser válido')
+    .required('El correo o usuario es requerido'),
 
     password : Yup
     .string()
     .required('El campo contraseña es requerido')
-    .min(6, 'La contraseña debe contener mínimo 6 caracteres')
+    .min(5, 'La contraseña debe contener mínimo 5 caracteres')
 })
 
 const theme = createTheme();
@@ -39,22 +39,40 @@ export function Login() {
     let auth = useAuth();
     let navigate = useNavigate()
 
+    const [open, setOpen] = React.useState(false);
+    const handleClose = () => {
+        setOpen(false);
+    };
+
     const formik = useFormik({
         initialValues: {
             email: '',
             password: '',
         },
         validationSchema: LoginSchema,
-        onSubmit: (values) => {
+        onSubmit: async (values) => {
             let { email, password } = values
-            console.log(email,password);
-            // let request = new HTTP('/user?' + `user=${email}&password=${password}`)
-            let request = new HTTP_()
-            request.get_()
+            setOpen(true)
+
+            let request = new Service(`/user?user=${email}&password=${password}`)
+            request
+                .post({})
+                .then( () => {
+                    toast.success('Bienvenido!!')
+
+                    setTimeout( () => {
+                        setOpen(false)
+                        auth.login(values)
+                    }, 2000)
+                }) 
+                .catch( err => {
+                        setOpen(false)
+                    toast.error("Ups! usuario o contraseña incorrectos")
+                    console.log("ERROR ", err)
+                })
+
             // toast.success('Bienvenido!!')
-            // toast.error("This didn't work.")
             // return navigate('/dashboard/home')
-            auth.login(values)
         },
     });
 
@@ -84,6 +102,7 @@ export function Login() {
                     }}
                 />
                 <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+
                     <Box
                         sx={{
                             my: 8,
@@ -168,6 +187,15 @@ export function Login() {
                 position="top-left"
                 reverseOrder={false}
             />
+            <Backdrop
+                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={open}
+                onClick={handleClose}
+            >
+                <CircularProgress color="inherit" />
+            </Backdrop>
+
         </ThemeProvider>
+
     );
 }

src/Utils/HTTP.js

@@ -1,78 +1,19 @@
-// import axios from 'axios';
-import $ from "jquery" 
+export class Service {
 
-export class HTTP_ {
-
-    constructor(url){
-        this.base_url = 'http://204.48.25.93:8081/users'; 
-        this.url =  this.base_url + url
+    constructor(path){
+        this.base_url = 'http://psicoadmin.ditca.org:8081'
+        this.url =  this.base_url + path
         // this.api =  'http://204.48.25.93:8081/user?user=patrik&password=12345'
-        this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
+        // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
     }
 
-    async post(){
-        try{ 
-
-            let request = fetch(this.api, {
-                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': '*',
-                'Access-Control-Request-Method' : 'POST',
-            } ),
-            // body: JSON.stringify({ title: 'React POST Request Example' })
-        }
-
-        let response = await fetch(this.api, requestOptions);
-        // const data = 
-        console.log(response)
-        // this.setState({ postId: data.id });
-    }
-
-
-    async get(){
-        $.ajax(this.url, {
-            contentType : 'application/json',
-            type : 'POST',
-            onSucces :  (res) => console.log(res),
-            onError :  (err) => console.log(err),
+    async post(body){
+        let response = await fetch(this.url, {
+            method: "POST",
+            data : body
         })
+        return await response.json(); 
     }
 
-
-
 }