Commit 37bf7db6 authored by Ermolaev Timur's avatar Ermolaev Timur

#92 Оптимизировал код в хедере, уменьшил количество кода

parent 341f950a
import {Button, Menu, MenuItem} from "@mui/material"; import {Button} from "@mui/material";
import { useState } from "react"; import {NavLink} from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"; import { superuserMenuButtons } from "../../../constants";
import {NavLink, useNavigate} from "react-router-dom"; import ProfileBlock from "../ProfileBlock/ProfileBlock";
import { logoutUser } from "../../../store/actions/usersActions";
const AdminMenu = () => { 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 <> return <>
{superuserMenuButtons.map((button, i)=>{
return(
<Button <Button
key={i}
component={NavLink} component={NavLink}
to="/projects" to={button.path}
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"
color="inherit" color="inherit"
size="large" size="large"
> >
Мои задачи {button.text}
</Button> </Button>
<Button )
component={NavLink} })}
to="/workers-tasks" <ProfileBlock/>
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>
</> </>
}; };
......
import {Button} from "@mui/material"; import {Button} from "@mui/material";
import {NavLink} from "react-router-dom"; import {NavLink} from "react-router-dom";
import { anonymoysMenuButtons } from "../../../constants";
const AnonymousMenu = () => { const AnonymousMenu = () => {
return <> return <>
{anonymoysMenuButtons.map((button, i)=>{
return(
<Button <Button
key={i}
component={NavLink} component={NavLink}
to={button.path}
color="inherit" color="inherit"
to="/sign-in" size="large"
> >
Вход {button.text}
</Button> </Button>
)
})}
</> </>
}; };
......
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 = async () => {
await 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
import {Button, Menu, MenuItem} from "@mui/material"; import {Button} from "@mui/material";
import { useState } from "react"; import {NavLink} from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"; import { workerMenuButtons } from "../../../constants";
import {NavLink, useNavigate} from "react-router-dom"; import ProfileBlock from "../ProfileBlock/ProfileBlock";
import { logoutUser } from "../../../store/actions/usersActions";
const WorkerMenu = () => { 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 <> return <>
{workerMenuButtons.map((button, i)=>{
return(
<Button <Button
key={i}
component={NavLink} component={NavLink}
to="/projects" to={button.path}
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"
color="inherit" color="inherit"
size="large" size="large"
> >
Мои задачи {button.text}
</Button>
<Button
color="inherit"
onClick={handleClick}
id='test_greetings'
>
Hello, {user?.displayName}
</Button> </Button>
<Menu )
anchorEl={anchorEl} })}
open={open}
onClose={handleClose}
> <ProfileBlock/>
<MenuItem component={NavLink} to="/profile/test" color="inherit" onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</> </>
}; };
......
export const apiUrl = "http://localhost:8000"; export const apiUrl = "http://localhost:8000";
export const uploadsUrl = `${apiUrl}/uploads`; 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment