add services and public,private routes

src/App.js

@@ -1,20 +1,19 @@
-import React from 'react';
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';import React from 'react';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import {Route, BrowserRouter as Router,Routes} from 'react-router-dom'
 import Directorio from './pages/Directorio';
 import Directorio2 from './pages/Directorio2';
 import Login from './pages/Login'
-import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
 import CrearUsuario from './components/CrearUsuario';
 import MDUser from './components/MDUser';
-import CardEditProfesorPage from './pages/CardEditProfesorPage';
 import FormEditProfesorPage from './pages/FormEditProfesorPage'; 
 import PerfilProfesor from "./components/PerfilProfesor";
 import InterAdmin from './components/InterAdmin';
 import Pagina404 from './pages/Pagina404';
+import { PrivateRoutes, PublicRoutes } from './models/routes';
 
 const App = () => {
   return (
@@ -22,17 +21,16 @@ const App = () => {
       <Router>
         <Header />
           <Routes>
-            <Route path='' element={<Directorio/>}></Route>
+            <Route path={PublicRoutes.FILTER} element={<Directorio/>}></Route>
             <Route path="/profesor/perfil/:id" element={<PerfilProfesor />} />
-            <Route path='/Acceso' element={<Login/>}></Route>
-            <Route path="/Interfaz" element={<InterAdmin />} />
-            <Route path='/Crear/Profesor' element={<Directorio2/>}></Route>
-            <Route path='/Creacion/Usuario' element={<CrearUsuario/>}></Route>
+            <Route path={PublicRoutes.LOGIN} element={<Login/>}></Route>
+            <Route path={PrivateRoutes.INTERFACE} element={<InterAdmin/>} />
+            <Route path={PrivateRoutes.CREARPROFESOR} element={<Directorio2/>}></Route>
+            <Route path={PrivateRoutes.CREARUSUARIO} element={<CrearUsuario/>}></Route>
 
             <Route path='/Usuario/editar/:id' element={<MDUser/>}></Route>
-            <Route path="/Editor/Profesor" element={<CardEditProfesorPage/>} />
-            <Route path="/Profesor/editar/:id" element={<FormEditProfesorPage/>} />
-            <Route path="*" element={<Pagina404/>} />
+            <Route path={PrivateRoutes.EDITARPROFESOR} element={<FormEditProfesorPage/>} />
+            <Route path={PublicRoutes.NOTFOUND} element={<Pagina404/>} />
             </Routes>
         <Footer />
       </Router>

src/components/CardProfesor.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-
 import '../App.css';
+import {PrivateRoutes} from '../models/routes'
 
 const CardProfesor = ({ profesor, edificioNombre,permissions,jwt }) => {
   const [showDialog, setShowDialog] = useState(false);

src/components/Formulario.js

@@ -65,7 +65,7 @@ const Formulario = () => {
     };
 
     fetch('http://localhost:3000/profesor', {
-      method: 'POST', // Cambiar a 'POST' para crear un nuevo registro
+      method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },

src/components/LoginForm.js

@@ -51,8 +51,9 @@ const LoginForm = () => {
 
   return (
     <div className="main-content">
-      <h2 className="text-warning">Bienvenido al directorio de profesores</h2>
-      <form onSubmit={handleSubmit} className="login-form" style={{ backgroundColor: '#b3b1b1', borderRadius: '1em' }}>
+      <h1 className="text-warning">Bienvenido al directorio de profesores</h1>
+      <h2 className='m-3'>Inicio de sesión</h2>
+      <form onSubmit={handleSubmit} className="login-form" style={{ borderRadius: '1em' }}>
         <div className="input-group">
           <label htmlFor="username">Nombre de Usuario:</label>
           <input

src/guards/route.guard.js

@@ -0,0 +1,11 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { PublicRoutes } from "../models/routes";
+import { useSelector } from "react-redux";
+import { AppStore } from '../redux/store';
+
+export Guard = () =>{
+    const userState = useSelector((store:Appstore)=> store.user);
+    return userState.id ? <Outlet/>:</Navigate replace to ={PublicRoutes.LOGIN}/>;
+};
+
+export default Guard;

src/models/routes.js

@@ -0,0 +1,12 @@
+export const PublicRoutes={
+    NOTFOUND:'*',
+    LOGIN:'/login',
+    FILTER:'/'
+}
+
+export const PrivateRoutes={
+    CREARPROFESOR:'/Crear/Profesor',
+    EDITARPROFESOR:'/Profesor/editar/',
+    CREARUSUARIO:'/Creacion/Usuario',
+    INTERFACE:'/Interface'
+}

src/models/user.model.ts

@@ -0,0 +1,4 @@
+export interface UserInfo{
+    id:number;
+
+}

src/redux/states/user.ts

@@ -0,0 +1,7 @@
+import {createSlice} from '@reduxjs/toolkit'
+import {UserInfo} from '../../models/user.model'
+
+export const userSlice = createSlice({
+    name:'user',
+    initialState:
+})

src/redux/store.ts

@@ -0,0 +1,11 @@
+import { UserInfo } from "../models/user.model"
+
+export interface  AppStore{
+    user:UserInfo;
+}
+
+export default configureStore<AppStore>({
+    reducer:{
+        user:
+    }
+})

src/services/auth.services.js

@@ -0,0 +1,91 @@
+export const getProfesores = (query) => {
+  return fetch(`http://localhost:3000/profesor/page?${query}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        setProfesores(data.profesores);
+        setTotalPages(data.totalPages);
+      })
+      .catch(error => {
+        console.error('Error fetching the data: ', error);
+      });
+} 
+
+export const deleteProfesores = (id_profesor,token) => {
+  return fetch(`http://localhost:3000/profesor/${id_profesor}`, {
+    method: 'DELETE',
+    headers: {
+      'Authorization': `Bearer ${token}`
+    },
+  });
+}
+
+export const putProfesor = (token,profesorData) => {
+  return fetch('http://localhost:3000/profesor', {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`
+    },
+    body: JSON.stringify(profesorData),
+  });
+}
+
+export const postProfesor = () => {
+  return fetch('http://localhost:3000/profesor', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(profesorData),
+  })
+  .then(response => {
+    if (response.ok) {
+      return response.json(),
+      setShowDialogRegister(true),
+      window.location.href = '';
+    } else {
+      return response.json().then(data => {
+        if (response.status === 403 && data.message === "rfc already exist") {
+          setShowDialogErrorRfc(true);
+        } else if(response.status === 403 && data.message === "number of worker already exist"){
+          setShowDialogErrorNumber(true);
+        } else{
+          throw new Error(`Error ${response.status}: ${data.message}`);
+        }
+      });
+    }
+  })
+  .then(data => {
+    console.log(profesorData);
+    console.log('Success:', data);
+  })
+  .catch((error) => {
+    console.error('Error:', error);
+  });
+}
+
+export const getAdscripcion = () => {
+    return fetch('http://localhost:3000/adscripcion')
+      .then(response => response.json())
+      .then(data => setAdscripciones(data))
+      .catch(error => console.error('Error fetching adscripciones:', error));
+}
+
+export const getEdificio = () => {
+    return fetch('http://localhost:3000/edificio')
+      .then(response => response.json())
+      .then(data => setEdificios(data))
+      .catch(error => console.error('Error fetching edificios:', error));
+}
+
+export const getCategoria = () => {
+    return fetch('http://localhost:3000/categoria')
+      .then(response => response.json())
+      .then(data => setCategorias(data))
+      .catch(error => console.error('Error fetching categorias:', error));
+}