Merge branch 'task-92-enhance/optimize-header' into 'development'

Task 92 enhance/optimize header

See merge request !68

planner-api/src/routers/users.ts

@@ -100,6 +100,7 @@ router.delete('/sessions', async(req: Request, res: Response):Promise<void | obj
     if(!user) return res.send({successMsg});
     user.token = nanoid();
     await user.save();
+    return res.send(successMsg)
    
 })
 

planner-front/src/components/Menus/AdminMenu/AdminMenu.js

-import {Button, Menu, MenuItem} from "@mui/material";
-import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import {NavLink, useNavigate} from "react-router-dom";
-import { logoutUser } from "../../../store/actions/usersActions";
+import {Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
+import { superuserMenuButtons } from "../../../constants";
+import ProfileBlock from "../ProfileBlock/ProfileBlock";
 
 const AdminMenu = () => {
-    const dispatch = useDispatch();
-    const navigate = useNavigate()
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const user = useSelector(state => state.users.user)
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const logout = () => {
-        dispatch(logoutUser(navigate));
-        handleClose()
-    }
     return <>
+        {superuserMenuButtons.map((button, i)=>{
+            return(
                 <Button
+                    key={i}
                     component={NavLink}
-            to="/projects"
-            color="inherit"
-            size="large"
-        >
-            Проекты
-        </Button>
-        <Button
-            component={NavLink}
-            to="/week"
-            color="inherit"
-            size="large"
-        >
-            Неделя
-        </Button>
-        <Button
-            component={NavLink}
-            to="/month"
-            color="inherit"
-            size="large"
-            id='test_month_header'
-        >
-            Месяц
-        </Button>
-        <Button
-            component={NavLink}
-            to="/my-tasks"
+                    to={button.path}
                     color="inherit"
                     size="large"
                 >
-            Мои задачи
+                    {button.text}
                 </Button>
-        <Button
-            component={NavLink}
-            to="/workers-tasks"
-            color="inherit"
-            size="large"
-        >
-            Задачи сотрудников
-        </Button>
-        <Button
-            component={NavLink}
-            to="/sign-up"
-            color="inherit"
-            size="large"
-        >
-            Создать сотрудника
-        </Button>
-        <Button
-            color="inherit"
-            onClick={handleClick}
-            id='test_greetings'
-        >
-            Hello, {user?.displayName}
-        </Button>
-        <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
-
-        >
-            <MenuItem component={NavLink} to="/profile/test" color="inherit" onClick={handleClose}>Profile</MenuItem>
-            <MenuItem onClick={logout}>Logout</MenuItem>
-        </Menu>
+            )
+        })}
+        <ProfileBlock/>
     </>
 };
 

planner-front/src/components/Menus/AnonymousMenu/AnonymousMenu.js

 import {Button} from "@mui/material";
 import {NavLink} from "react-router-dom";
+import { anonymoysMenuButtons } from "../../../constants";
 
 const AnonymousMenu = () => {
     return <>
+        {anonymoysMenuButtons.map((button, i)=>{
+            return(
                 <Button
+                    key={i}
                     component={NavLink}
+                    to={button.path}
                     color="inherit"
-            to="/sign-in"
+                    size="large"
                 >
-            Вход
+                    {button.text}
                 </Button>
+            )
+        })}
     </>
 };
 

planner-front/src/components/Menus/ProfileBlock/ProfileBlock.js

+import {Button, Menu, MenuItem} from "@mui/material";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {NavLink, useNavigate} from "react-router-dom";
+import { logoutUser } from "../../../store/actions/usersActions";
+
+const ProfileBlock = () => {
+  const dispatch = useDispatch();
+    const navigate = useNavigate()
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const user = useSelector(state => state.users.user)
+ 
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const logout = () => {
+        dispatch(logoutUser(navigate));
+        handleClose()
+    }
+  return <>
+      <Button
+            color="inherit"
+            onClick={handleClick}
+            id='test_greetings'
+        >
+            Hello, {user?.displayName}
+        </Button>
+        <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+
+        >
+            <MenuItem component={NavLink} to="/profile/test" color="inherit" onClick={handleClose}>Profile</MenuItem>
+            <MenuItem onClick={()=>{logout()}}>Logout</MenuItem>
+        </Menu>
+  </>
+};
+
+export default ProfileBlock;
\ No newline at end of file

planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js

-import {Button, Menu, MenuItem} from "@mui/material";
-import { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import {NavLink, useNavigate} from "react-router-dom";
-import { logoutUser } from "../../../store/actions/usersActions";
+import {Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
+import { workerMenuButtons } from "../../../constants";
+import ProfileBlock from "../ProfileBlock/ProfileBlock";
 
 const WorkerMenu = () => {
-    const dispatch = useDispatch();
-    const navigate = useNavigate()
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const user = useSelector(state => state.users.user)
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const logout = () => {
-        dispatch(logoutUser(navigate));
-        handleClose()
-    }
     return <>
+        {workerMenuButtons.map((button, i)=>{
+            return(
                 <Button
+                    key={i}
                     component={NavLink}
-            to="/projects"
-            color="inherit"
-            size="large"
-        >
-            Проекты
-        </Button>
-        <Button
-            component={NavLink}
-            to="/week"
-            color="inherit"
-            size="large"
-        >
-            Неделя
-        </Button>
-        <Button
-            component={NavLink}
-            to="/month"
-            color="inherit"
-            size="large"
-            id='test_month_header'
-        >
-            Месяц
-        </Button>
-        <Button
-            component={NavLink}
-            to="/my-tasks"
+                    to={button.path}
                     color="inherit"
                     size="large"
                 >
-            Мои задачи
-        </Button>
-        <Button
-            color="inherit"
-            onClick={handleClick}
-            id='test_greetings'
-        >
-            Hello, {user?.displayName}
+                    {button.text}
                 </Button>
-        <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
+            )
+        })}
         
-        >
-            <MenuItem component={NavLink} to="/profile/test" color="inherit" onClick={handleClose}>Profile</MenuItem>
-            <MenuItem onClick={logout}>Logout</MenuItem>
-        </Menu>
+        <ProfileBlock/>
     </>
 };
 

planner-front/src/constants.js

 export const apiUrl = "http://localhost:8000";
 export const uploadsUrl = `${apiUrl}/uploads`;
+
+
+export const workerMenuButtons = [
+  {text: 'Проекты', path: '/projects'}, 
+  {text: 'Неделя', path: '/week'}, 
+  {text: 'Месяц', path: '/month'}, 
+  {text: 'Мои задачи', path: '/my-tasks'}
+]
+
+export const superuserMenuButtons = [
+  {text: 'Проекты', path: '/projects'}, 
+  {text: 'Неделя', path: '/week'}, 
+  {text: 'Месяц', path: '/month'}, 
+  {text: 'Мои задачи', path: '/my-tasks'},
+  {text: 'Задачи Сотрудников', path: '/workers-tasks'},
+  {text: 'Создать Сотрудника', path: '/sign-up'}
+]
+
+export const anonymoysMenuButtons = [
+  {text: 'Вход', path: '/sign-in'}, 
+]
\ No newline at end of file

planner-front/src/store/actions/usersActions.js

@@ -85,13 +85,9 @@ export const forgottenPassword = (userData, navigate) => {
 }
 
 export const logoutUser = (navigate) => {
-    return async (dispatch, getState) => {
+    return async (dispatch) => {
         try {
-            await axios.delete("/users/sessions", {
-                headers: {
-                    'Authorization': getState().users.user?.token
-                }
-            });
+            await axios.delete("/users/sessions");
             dispatch(logoutUserSuccess());
             navigate("/");
             dispatch(showNotification("Вы успешно вышли"));