create sideBar false

src/App.js

@@ -1,44 +1,62 @@
-import React, { useRef, createElement, Component } from 'react';
-import { Router, Route, Redirect, Switch, useParams } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Router, Route, Switch, useParams } from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import { createStore, combineReducers, applyMiddleware } from 'redux';
-import { Provider, connect } from 'react-redux';
+import { Provider, connect, useSelector } from 'react-redux';
 import thunk from 'redux-thunk';
 import './App.css';
-import { authReducer, promiseReducer } from './reducers';
-import { actionFullLogin, actionRootCats } from './jql_actions'
+import { authReducer, promiseReducer, actionAuthLogin } from './reducers';
 import { CLoginForm, GoodExample, GoodsList, goodsExample, Category, exampleCategory, OrderGood, exampleOrderGood, Order, exampleOrder, OrderList, exampleOrderList, exampleOrderGoodsList, OrderGoodsList } from "./Components";
-import { MyLink } from './Components';
 import { MainAppBar } from './Components';
+import { CLogout } from './Components';
+import { Sidebar } from './Components/Sidebar';
 
 
 export const history = createHistory()
 console.log(useParams)
-const store = createStore(combineReducers({ promise: promiseReducer, auth: authReducer }), applyMiddleware(thunk))
+const store = createStore(combineReducers({ promise: promiseReducer, auth: authReducer }), applyMiddleware(thunk));
 store.subscribe(() => console.log(store.getState()))
 
-store.dispatch(actionRootCats())
+//store.dispatch(actionRootCats())
+//store.dispatch(actionAuthLogin(localStorage.authToken));
 
 
 /*const CCatMenu = connect(state => ({ cats: state.promise?.rootCats?.payload || [] }), { onLogin: actionFullLogin })(CatMenu)
 
 const CLoginForm = connect(null, { onLogin: actionFullLogin })(LoginForm)*/
+store.dispatch(actionAuthLogin(localStorage.authToken));
+
 const NotFound = () =>
-    <div>
-        <h1>404 not found</h1>
-    </div>
+  <div>
+    <h1>404 not found</h1>
+  </div>
+
+const Test = () => {
+  let state = useSelector(state => state);
+  let stateAuth = state.auth;
+  let [auth, setAuth] = useState('');
+  if (stateAuth != auth) {
+    auth = auth;
+  }
+  return <div />
+}
+
+
 
 function App() {
+
   return (
     <>
-
       <Router history={history}>
         <Provider store={store}>
+          <Test />
           <div className="App">
             <MainAppBar />
+            <Sidebar menuComponent={() => <div>TEST!!!!!!</div>} />
             <Switch>
               {/*<Route path="/" component={Main} exact />*/}
               <Route path="/login" component={CLoginForm} />
+              <Route path="/logout" component={CLogout} />
               <Route path="*" component={NotFound} />
             </Switch>
             {/*<CCatMenu />

src/Components/Logout.js

@@ -0,0 +1,15 @@
+import { actionAuthLogout } from '../reducers';
+import { useEffect } from 'react';
+import { connect } from 'react-redux';
+
+
+const Logout = ({onLogout}) => {
+    useEffect(() => {
+        onLogout();
+        window.location = '/';
+    }, []);
+
+    return <div></div>;
+};
+
+export const CLogout = connect(null, { onLogout: actionAuthLogout })(Logout)

src/Components/MainAppBar.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -8,10 +7,20 @@ import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import { MyLink } from './MyLink';
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useTheme } from '@emotion/react';
 
 export function MainAppBar() {
-    const [auth, setAuth] = useState({});
-    let isLoggedIn = auth.token && true;
+    const token = useSelector(state => state.auth?.token)
+
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+  
+    const handleDrawerOpen = () => {
+      setOpen(true);
+    };
+
+    let isLoggedIn = token && true;
     return (
         <Box sx={{ flexGrow: 1 }}>
             <AppBar position="static">
@@ -21,6 +30,7 @@ export function MainAppBar() {
                         edge="start"
                         color="inherit"
                         aria-label="menu"
+                        onClick={handleDrawerOpen}
                         sx={{ mr: 2 }}
                     >
                         <MenuIcon />
@@ -45,4 +55,6 @@ export function MainAppBar() {
             </AppBar>
         </Box>
     );
-}
+}
+
+export const CLogout = connect(null, { onLogout: actionAuthLogout })(Logout)

src/Components/Sidebar.js

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import CssBaseline from '@mui/material/CssBaseline';
+import MuiAppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+/*
+                <List>
+                    {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+                        <ListItem key={text} disablePadding>
+                            <ListItemButton>
+                                <ListItemIcon>
+                                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                                </ListItemIcon>
+                                <ListItemText primary={text} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
+                </List>
+                <List>
+                    {['All mail', 'Trash', 'Spam'].map((text, index) => (
+                        <ListItem key={text} disablePadding>
+                            <ListItemButton>
+                                <ListItemIcon>
+                                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                                </ListItemIcon>
+                                <ListItemText primary={text} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
+                </List>
+*/
+export function Sidebar(props) {
+    let MenuComponent = props.menuComponent;
+    let drawerWidth = props.drawerWidth || 100;
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+    const DrawerHeader = styled('div')(({ theme }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+        justifyContent: 'flex-end',
+    }));
+    return (
+        <>
+            <Drawer
+                sx={{
+                    width: drawerWidth,
+                    flexShrink: 0,
+                    '& .MuiDrawer-paper': {
+                        width: drawerWidth,
+                        boxSizing: 'border-box',
+                    },
+                }}
+                variant="persistent"
+                anchor="left"
+                open={open}
+            >
+                <DrawerHeader>
+                    <IconButton onClick={handleDrawerClose}>
+                        {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                    </IconButton>
+                </DrawerHeader>
+                <Divider />
+                <MenuComponent {...props} />
+                <Divider />
+            </Drawer>
+        </>);
+}
+

src/Components/index.js

@@ -1,10 +1,11 @@
 export { CLoginForm } from './LoginForm';
 export { Good, GoodExample } from './Good';
 export { goodsExample, GoodsList } from './GoodsList';
-export {Category, exampleCategory} from './Category';
-export {OrderGood, exampleOrderGood} from './OrderGood';
-export {OrderGoodsList, exampleOrderGoodsList} from './OrderGoodsList'
-export {Order, exampleOrder} from './Order';
-export {OrderList, exampleOrderList} from './OrderList';
-export {MyLink} from './MyLink';
-export {MainAppBar} from './MainAppBar';
+export { Category, exampleCategory } from './Category';
+export { OrderGood, exampleOrderGood } from './OrderGood';
+export { OrderGoodsList, exampleOrderGoodsList } from './OrderGoodsList'
+export { Order, exampleOrder } from './Order';
+export { OrderList, exampleOrderList } from './OrderList';
+export { MyLink } from './MyLink';
+export { CLogout } from './Logout';
+export { MainAppBar } from './MainAppBar';

src/index.js

@@ -3,17 +3,9 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App.js';
 import reportWebVitals from './reportWebVitals';
-import { 
-  JqlTests_RootCats, 
-  JqlTests_RetrieveRootCats,
-  JqlTests_AuthLogin,
-  JqlTests_Goods,
-  JqlTests_GoodFindOne,
-  JqlTests_AuthUpsert
- } from './Tests/test_jql';
 
- JqlTests_AuthUpsert();
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <App />

src/reducers/authReducer.js

@@ -1,4 +1,6 @@
-import {jwtDecode} from '../utills';
+import { jwtDecode } from '../utills';
+import { history } from "../App";
+
 
 export function authReducer(state = {}, action) {                   // диспетчер обработки login
     if (action) {
@@ -13,6 +15,9 @@ export function authReducer(state = {}, action) {                   // дисп
                 localStorage.authToken = newState.token;
             else
                 delete localStorage.authToken;
+            //let history = useHistory();
+            history.push('/');
+            //window.location = "/";
             return newState;
         }
         else if (action.type === 'AUTH_LOGOUT') {