Agrega estado de autenticación para el front

frontend/package.json

@@ -5,6 +5,7 @@
   "proxy": "http://localhost:4000",
   "dependencies": {
     "axios": "^0.19.2",
+    "js-cookie": "^2.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
 
 import './App.scss';
@@ -9,25 +9,51 @@ import ListadoUsuarios from './componentes/listadoUsuarios';
 import RegistrarUsuario from './componentes/registrarUsuario';
 import ListadoSolicitudes from './componentes/listadoSolicitudes';
 import AgregarSolicitud from './componentes/agregarSolicitud';
+import RutaAutenticada from './componentes/RutaAutenticada';
+
+import UsuarioContext from './componentes/UsuarioContext';
+import { guardarSession, obtenerSession } from './sesion';
 
 class App extends React.Component {
-    render() {
-        return (
-            <BrowserRouter>
-                <Switch>
-                    <Route exact path="/" component={Login}/>
-
-                    <Route exact path="/usuarios" component={ListadoUsuarios}/>
-                    <Route exact path="/usuarios/registrar" component={RegistrarUsuario}/>
-
-                    <Route exact path="/solicitudes" component={ListadoSolicitudes}/>
-                    <Route exact path="/solicitudes/agregar" component={AgregarSolicitud}/>
-
-                    <Redirect to="/"/>
-                </Switch>
-            </BrowserRouter>
-        )
-    }
+  constructor(props) {
+    super(props);
+    this.state = { logueado: false, usuario: {} };
+  }
+
+  componentDidMount() {
+    let usuario = obtenerSession();
+    this.setState({ logueado: !!usuario, usuario });
+  }
+
+  ingresarUsuario = (usuario) => {
+    guardarSession(usuario);
+    this.setState({ usuario, logueado: !!usuario });
+  };
+
+  render() {
+    return (
+      <UsuarioContext.Provider
+        value={{ ingresarUsuario: this.ingresarUsuario, ...this.state }}>
+        <BrowserRouter>
+          <Switch>
+            <Route exact path="/" component={Login}/>
+
+            <RutaAutenticada exact path="/usuarios"
+                             component={ListadoUsuarios}/>
+            <RutaAutenticada exact path="/usuarios/registrar"
+                             component={RegistrarUsuario}/>
+
+            <RutaAutenticada exact path="/solicitudes"
+                             component={ListadoSolicitudes}/>
+            <RutaAutenticada exact path="/solicitudes/agregar"
+                             component={AgregarSolicitud}/>
+
+            <Redirect to="/"/>
+          </Switch>
+        </BrowserRouter>
+      </UsuarioContext.Provider>
+    );
+  }
 }
 
-export default App
+export default App;

frontend/src/api/backendApi.js

@@ -1,15 +1,38 @@
 import axios from 'axios';
+import { obtenerSession } from '../sesion';
 
 export default class Backend {
-    static login(email) {
-        return axios.post(`/login`, { email });
-    }
+  static login(email) {
+    return axios.post(`/login`, { email });
+  }
 
-    static cancelarSolicitud({ _id }) {
-        return axios.patch(`/solicitudes/${_id}/cancelar`, {email: 'pepito@gmail.com'}).then(res => res.data);
-    }
+  static _tokenUsuario() {
+    const usuario = obtenerSession();
+    const headers = { headers: { 'token-usuario': usuario.token } };
+    return { usuario, headers };
+  }
 
-    static guardarSolicitud({ email, area, insumo }) {
-        return axios.post(`/solicitudes`, { email, area, insumo });
-    }
+  static usuarios() {
+    return axios.get('/usuarios', this._tokenUsuario().headers);
+  }
+
+  static crearUsuario(nuevoUsuario) {
+    return axios.post(`/usuarios`,nuevoUsuario , this._tokenUsuario().headers);
+  }
+
+  static solicitudes() {
+    return axios.get('/solicitudes', this._tokenUsuario().headers);
+  }
+
+  static cancelarSolicitud({ _id }) {
+    let { usuario, headers } = this._tokenUsuario();
+
+    return axios.patch(`/solicitudes/${_id}/cancelar`,
+      { email: usuario.email }, headers).then(res => res.data);
+  }
+
+  static guardarSolicitud({ email, area, insumo }) {
+    return axios.post(`/solicitudes`, { email, area, insumo },
+      this._tokenUsuario().headers);
+  }
 }

frontend/src/componentes/RutaAutenticada.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import UsuarioContext from './UsuarioContext';
+
+class RutaAutenticada extends React.Component {
+  render() {
+    return <UsuarioContext.Consumer>
+      {contexto => {
+        return !contexto.logueado ?
+          <Redirect to="/"/> :
+          <Route {...this.props}/>;
+      }}
+    </UsuarioContext.Consumer>;
+  }
+}
+
+UsuarioContext.contextType = RutaAutenticada;
+
+export default RutaAutenticada;

frontend/src/componentes/UsuarioContext.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const UsuarioContext = React.createContext({ // valores defaults
+    logueado: false,
+    usuario: { token: '', email: '' },
+    guardarUsuario: (usuario) => ({ usuario }),
+  },
+);
+
+UsuarioContext.displayName = 'UsuarioContext';
+
+export default UsuarioContext;

frontend/src/componentes/listadoSolicitudes.js

@@ -3,21 +3,22 @@ import axios from 'axios';
 
 import backendApi from '../api/backendApi';
 import '../estilos/componentes.scss';
+import Backend from '../api/backendApi';
 
 export default class ListadoSolicitudes extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {solicitudes: []};
+    this.state = { solicitudes: [] };
   }
 
   pasarAUsuarios = () => this.props.history.push('/usuarios', {});
 
   pasarAAgregar = () => this.props.history.push('/solicitudes/agregar', {});
 
   componentDidMount() {
-    axios.get('/solicitudes').then(({data}) => {
-      this.setState({solicitudes: data})
-    })
+    Backend.solicitudes().then(({ data }) => {
+      this.setState({ solicitudes: data });
+    });
   }
 
   mostrarSolicitudes() {
@@ -36,15 +37,15 @@ export default class ListadoSolicitudes extends React.Component {
           <td>
             {solicitud.estado}
           </td>
-            <td>
-                {solicitud.estado === 'CANCELADA' ? null :
-                    <button className="boton inverted"
-                    onClick={(e) => this.cancelar(e,
+          <td>
+            {solicitud.estado === 'CANCELADA' ? null :
+              <button className="boton inverted"
+                      onClick={(e) => this.cancelar(e,
                         solicitud)}>Cancelar</button>}
-            </td>
+          </td>
         </tr>
-      )
-    })
+      );
+    });
   }
 
   render() {
@@ -53,8 +54,12 @@ export default class ListadoSolicitudes extends React.Component {
         <div className="titulo">
           <h2>SOLICITUDES</h2>
           <div className="botones">
-            <button className="boton secondary" onClick={this.pasarAUsuarios}> Usuarios </button>
-            <button className="boton primary" onClick={this.pasarAAgregar}> Agregar </button>
+            <button className="boton secondary"
+                    onClick={this.pasarAUsuarios}> Usuarios
+            </button>
+            <button className="boton primary"
+                    onClick={this.pasarAAgregar}> Agregar
+            </button>
           </div>
         </div>
         <div>
@@ -76,17 +81,18 @@ export default class ListadoSolicitudes extends React.Component {
       </div>
     );
   }
-    cancelar = (e, solicitud) => {
-        e.preventDefault();
-        backendApi.cancelarSolicitud(solicitud).then(this.actualizarSolicitud);
-    };
 
-    actualizarSolicitud = solicitudActualizada => {
-        this.setState({
-            solicitudes: this.state.solicitudes.map(
-                solicitud => solicitud._id === solicitudActualizada._id
-                    ? solicitudActualizada
-                    : solicitud),
-        });
-    };
+  cancelar = (e, solicitud) => {
+    e.preventDefault();
+    backendApi.cancelarSolicitud({ solicitud }).then(this.actualizarSolicitud);
+  };
+
+  actualizarSolicitud = solicitudActualizada => {
+    this.setState({
+      solicitudes: this.state.solicitudes.map(
+        solicitud => solicitud._id === solicitudActualizada._id
+          ? solicitudActualizada
+          : solicitud),
+    });
+  };
 }

frontend/src/componentes/listadoUsuarios.js

@@ -2,22 +2,22 @@ import React from 'react';
 import axios from 'axios';
 
 import '../estilos/componentes.scss';
+import Backend from '../api/backendApi';
 
 class ListadoUsuarios extends React.Component {
-  constructor(props){
+  constructor(props) {
     super(props);
-
-    this.state = {usuarios: []};
+    this.state = { usuarios: [] };
   }
 
   pasarASolicitudes = () => this.props.history.push('/solicitudes', {});
 
   pasarARegistrar = () => this.props.history.push('/usuarios/registrar', {});
 
   componentDidMount() {
-    axios.get('/usuarios').then(({ data }) => {
-      this.setState({ usuarios: data })
-    })
+    Backend.usuarios().then(({ data }) => {
+      this.setState({ usuarios: data });
+    });
   }
 
   mostrarUsuarios() {
@@ -43,8 +43,8 @@ class ListadoUsuarios extends React.Component {
             {usuario.localidad}
           </td>
         </tr>
-      )
-    })
+      );
+    });
   }
 
   render() {
@@ -53,25 +53,29 @@ class ListadoUsuarios extends React.Component {
         <div className="titulo">
           <h2>USUARIOS</h2>
           <div className="botones">
-            <button className="boton secondary" onClick={this.pasarASolicitudes}> Solicitudes </button>
-            <button className="boton primary" onClick={this.pasarARegistrar}> Registrar </button>
+            <button className="boton secondary"
+                    onClick={this.pasarASolicitudes}> Solicitudes
+            </button>
+            <button className="boton primary"
+                    onClick={this.pasarARegistrar}> Registrar
+            </button>
           </div>
         </div>
 
         <div>
           <table>
             <thead>
-              <tr>
-                <th> Nombre </th>
-                <th> Email </th>
-                <th> Telefono </th>
-                <th> Entidad </th>
-                <th> Cargo </th>
-                <th> Localidad </th>
-              </tr>
+            <tr>
+              <th> Nombre</th>
+              <th> Email</th>
+              <th> Telefono</th>
+              <th> Entidad</th>
+              <th> Cargo</th>
+              <th> Localidad</th>
+            </tr>
             </thead>
             <tbody>
-              { this.mostrarUsuarios() }
+            {this.mostrarUsuarios()}
             </tbody>
           </table>
         </div>