session state managment

psicoadmin/public/index.html

@@ -13,11 +13,6 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
-    
-    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
-
-
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!--

psicoadmin/src/App.js

@@ -4,9 +4,9 @@ import './Css/all.css'
 import { createContext } from 'react'
 import { BrowserRouter as Router } from "react-router-dom";
 import { Container } from 'react-bootstrap'
-import Dashboard from './Components/Dashboard';
-
+import { AuthProvider } from './Auth/AuthProvider'
 
+import Routes from './Components/Routes'
 // import { Header } from './Components/Header';
 // import { SideBar } from './Components/Sidebar';
 
@@ -26,11 +26,13 @@ export const API_GATEWAY = createContext(GATEWAY)
 function App() {
     return (
         <Router>
-            <API_GATEWAY.Provider value={GATEWAY.dev}>
-                <Container fluid>
-                    <Dashboard/>
-                </Container>
-            </API_GATEWAY.Provider>
+            <AuthProvider>
+                <API_GATEWAY.Provider value={GATEWAY.dev}>
+                    <Container fluid>
+                        <Routes/>
+                    </Container>
+                </API_GATEWAY.Provider>
+            </AuthProvider>
         </Router>
     );
 }

psicoadmin/src/Auth/AuthProvider.js

@@ -0,0 +1,35 @@
+import React from 'react'
+export const AuthContext = React.createContext();
+
+export function AuthProvider ({ children }){
+
+    let [user, setUser] = React.useState( localStorage.getItem("user") )
+
+    const context = {
+        user,
+        login: () => {
+            let user = JSON.stringify({ name : 'edgar' , id : 1})
+            localStorage.setItem('user', user)
+            setUser(user)
+        },
+        logout : () =>{
+            setUser(null)
+            localStorage.setItem('user', JSON.stringify({ }) )
+        },
+        isLogged : () => {
+            if(!user) return false
+            let current = JSON.parse(user)
+            let keys = Object.keys(current)
+            console.log("CURRENT -> ",current, 'KEY LEN -> ', keys.length)
+            return  keys.length > 0
+        }
+    }
+
+    return (
+        <AuthContext.Provider value={context}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+

psicoadmin/src/Auth/useAuth.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { AuthContext } from './AuthProvider'
+
+
+export default function useAuth() {
+    return React.useContext(AuthContext)
+}
+

psicoadmin/src/Components/Dashboard.js

@@ -18,12 +18,17 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import { mainListItems, secondaryListItems } from './listItems';
 
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
 
 import MailIcon from '@mui/icons-material/Mail';
 
 import Logo from '../Images/logo.png';
 import ProfilePicture from '../Images/man.png';
 
+import useAuth from '../Auth/useAuth';
+
 const drawerWidth = 240;
 
 const AppBar = styled(MuiAppBar, {
@@ -78,6 +83,21 @@ function DashboardContent() {
         setOpen(!open);
     };
 
+
+    let auth = useAuth();
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open_profile = Boolean(anchorEl);
+    const handleClick = (event) => {
+        console.log('show? ')
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const CerrarSession = () => auth.logout();
+
     return (
         <ThemeProvider theme={mdTheme}>
             <Box sx={{ display: 'flex' }}>
@@ -113,17 +133,35 @@ function DashboardContent() {
                                     <NotificationsIcon style={{ color : '#212529' }}/>
                                 </Badge>
                             </IconButton>
+
+
                             <IconButton
                                 size="small"
                                 edge="end"
                                 aria-label="account of current user"
                                 aria-haspopup="true"
-                                onClick={ () => console.log('show menu') }
+                                aria-expanded={open_profile ? 'true' : undefined}
+                                onClick={handleClick}
                                 color="inherit"
                             >
                                 <Avatar alt="Cindy Baker" src={ProfilePicture} />
 
                             </IconButton>
+                            <Menu
+                                id="basic-menu"
+                                anchorEl={anchorEl}
+                                open={open_profile}
+                                onClose={handleClose}
+                                MenuListProps={{
+                                    'aria-labelledby': 'basic-button',
+                                }}
+                            >
+                                <MenuItem onClick={ () => console.log('opcion 1') }>Profile</MenuItem>
+                                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
+                                <MenuItem onClick={CerrarSession}>Logout</MenuItem>
+                            </Menu>
+
+
                         </Box>
 
 

psicoadmin/src/Components/PrivateRoute.js

@@ -0,0 +1,16 @@
+import { Route, Redirect } from 'react-router-dom';
+import useAuth from '../Auth/useAuth';
+import React from 'react'
+
+export const PrivateRoute = ({ component, ...rest }) => {
+    let auth = useAuth();
+    
+    return(
+        <React.Fragment>
+            { auth.isLogged() ? <Route {...rest} component={component} /> : <Redirect to='/privada' /> }
+        </React.Fragment>
+    )
+
+}
+
+

psicoadmin/src/Components/Routes.js

@@ -0,0 +1,58 @@
+import { Button } from "react-bootstrap";
+import { BrowserRouter as Routes, Route, Switch, useHistory} from "react-router-dom";
+import useAuth from '../Auth/useAuth';
+import {PrivateRoute} from "./PrivateRoute";
+import Dashboard from "./Dashboard";
+
+
+
+function Privada () {
+    return (
+        <div>
+            <h1>Ruta Privada</h1>
+        </div>
+    )
+}
+
+function Login () {
+    
+    let auth = useAuth();
+    let history = useHistory()
+
+
+    function In () {
+        auth.login({ name : 'edgar', id : 1 })
+        console.log('is logged ? ',auth.isLogged())
+        history.push('/dashboard')
+        //{/* return <Redirect to="/dashboard"/> */}
+    }
+
+    return(
+        <>
+            <h1>Bienvenido</h1>
+            <Button onClick={In}>
+                Iniciar Session
+            </Button>
+            {/* <Button style={{ marginLeft : 10 }} variant="danger" onClick={ () => auth.logout() }> */}
+            {/*     Cerrar Session */}
+            {/* </Button> */}
+        </>
+    )
+}
+
+
+export default function MyRoutes () {
+    return(
+        <Routes>
+            <Switch>
+
+                <Route exact path="/" component={Login}/>
+                <Route exact path="/privada" component={Privada}/>
+                <PrivateRoute exact component={Dashboard} path="/dashboard" />
+                <Route path="*"> <h1>404 Not Found</h1> </Route>
+            </Switch>
+
+        </Routes>
+    )
+}
+