Merge branch 'development' of…

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-10-feature/login-registration-front

planner-front/src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

planner-front/src/App.js

-import {Routes, Route, Outlet, Navigate} from "react-router-dom";
-import AppToolbar from "./components/UI/AppToolbar/AppToolbar";
+import {Routes, Route, Outlet, Navigate, BrowserRouter} from "react-router-dom";
 import {Container} from "@mui/material";
-import { useSelector } from "react-redux";
-import Register from "./containers/Register/Register";
-import Login from "./containers/Login/Login";
-
+import {useSelector} from "react-redux";
+import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
 
 const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
   const user = useSelector(state => state.users?.user);
   if (!isAllowed && !roles?.includes(user?.role)) {
-    return <Navigate to={redirectUrl}/>
+      return <Navigate to={redirectUrl} />
   }
-  return children || <Outlet/>
-}
-
+  return children || <Outlet />;
+};
 
 const App = () => {
-  const user = useSelector(state => state.users.user);
+    const user = useSelector(state => state.users?.user);
     return (
-  <>
+    <BrowserRouter>
       <Routes>
-          <Route element={<>
-              <AppToolbar />
+          <Route element={
+            <>
+              <AppToolbar/>
               <main>
                   <Container>
-                    <Outlet />
+                      <Outlet/>
                   </Container>
               </main>
-          </>}>
-          {/* <Route path={"/admin"} element={
-            <ProtectedRoute roles={["admin"]} redirectUrl={"/"}>
-              <AdminPanel/>
+            </>
+          }>
+
+            <Route path={"/"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>week page</h1>
               </ProtectedRoute>
-           } /> */}
-            <Route path={"/"} element={<div>Задачи на неделю</div>} />
-            <Route path={"/sign-up"} element={
-             <ProtectedRoute isAllowed={!user} redirectUrl={"/"}>
-            <Register/>
+            }/>
+
+            <Route path={"/week"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>week page</h1>
               </ProtectedRoute>
             }/>
-            <Route path={"/sign-in"} element={
-             <ProtectedRoute isAllowed={!user} redirectUrl={"/"}>
-            <Login/>
+
+            <Route path={"/month"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>month page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/my-tasks"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>my tasks page</h1>
               </ProtectedRoute>
             }/>
+
+            <Route path={"/profile/:id"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/log-in"}
+              >
+                  <h1>profile page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/workers-tasks"} element={
+              <ProtectedRoute
+                  roles={["superuser"]}
+                  redirectUrl={"/"}
+              >
+                  <h1>workers tasks page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/sign-up"} element={
+              <ProtectedRoute
+                  roles={["superuser"]}
+                  redirectUrl={"/"}
+              >
+                  <h1>sign-up page</h1>
+              </ProtectedRoute>
+            }/>
+
+            <Route path={"/log-in"} element={<h1>log-in page</h1>}/>
+            <Route path='*' element={<h1>404</h1>}/>
           </Route>
       </Routes>
-
-  </>
-)};
+    </BrowserRouter>
+    )
+};
 
 export default App;
 

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

+import {Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
+
+const AdminMenu = () => {
+    return <>
+        <Button
+            component={NavLink}
+            to="/week"
+            color="inherit"
+            size="large"
+        >
+            Неделя
+        </Button>
+        <Button
+            component={NavLink}
+            to="/month"
+            color="inherit"
+            size="large"
+        >
+            Месяц
+        </Button>
+        <Button
+            component={NavLink}
+            to="/my-tasks"
+            color="inherit"
+            size="large"
+        >
+            Мои задачи
+        </Button>
+        <Button
+            component={NavLink}
+            to="/workers-tasks"
+            color="inherit"
+            size="large"
+        >
+            Задачи сотрудников
+        </Button>
+        <Button
+            component={NavLink}
+            to="/sign-up"
+            color="inherit"
+            size="large"
+        >
+            Создать сотрудника
+        </Button>
+        <Button
+            component={NavLink}
+            to="/profile/test"
+            color="inherit"
+            size="large"
+        >
+            Профиль
+        </Button>
+    </>
+};
+
+export default AdminMenu;
\ No newline at end of file

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

-import { Button } from "@mui/material";
-import { NavLink } from "react-router-dom";
+import {Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
 
 const AnonymousMenu = () => {
     return <>
         <Button
             component={NavLink}
-                    to="/sign-up"
             color="inherit"
+            to="/log-in"
         >
-                    Sign Up
-                </Button>
-                <Button
-                    component={NavLink}
-                    to="/sign-in"
-                    color="inherit"
-                >
-                    Sign In
+            Вход
         </Button>
     </>
 };

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

+import {Button} from "@mui/material";
+import {NavLink} from "react-router-dom";
+
+const WorkerMenu = ({user}) => {
+    return <>
+        <Button
+            component={NavLink}
+            to="/week"
+            color="inherit"
+            size="large"
+        >
+            Неделя
+        </Button>
+        <Button
+            component={NavLink}
+            to="/month"
+            color="inherit"
+            size="large"
+        >
+            Месяц
+        </Button>
+        <Button
+            component={NavLink}
+            to="/my-tasks"
+            color="inherit"
+            size="large"
+        >
+            Мои задачи
+        </Button>
+        <Button
+            component={NavLink}
+            to="/profile/test"
+            color="inherit"
+            size="large"
+        >
+            Профиль
+        </Button>
+    </>
+};
+
+export default WorkerMenu;

planner-front/src/components/UI/AppToolBar/AppToolBar.js

+import {AppBar, Box, Toolbar, Typography} from "@mui/material";
+import {NavLink} from "react-router-dom";
+import {useSelector} from "react-redux";
+import HasAccess from "../HasAccess/HasAccess";
+import AnonymousMenu from "../../Menus/AnonymousMenu/AnonymousMenu";
+import WorkerMenu from "../../Menus/WorkerMenu/WorkerMenu";
+import AdminMenu from "../../Menus/AdminMenu/AdminMenu";
+
+const AppToolbar = () => {
+    const user = useSelector(state => state.users.user);
+
+    return <Box sx={{ flexGrow: 1, mb: "40px" }}>
+        <AppBar position="static"> 
+            <Toolbar>
+                <Typography 
+                    variant="h4" 
+                    component="div" 
+                    sx={{ flexGrow: 1 }}>
+
+                    <NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink>
+                </Typography>   
+
+                <HasAccess allowed={!user}>
+                    <AnonymousMenu/>
+                </HasAccess>
+                <HasAccess roles={['user']}>
+                    <WorkerMenu/>
+                </HasAccess>
+                <HasAccess roles={['superuser']}>
+                    <AdminMenu/>
+                </HasAccess>
+            </Toolbar>
+        </AppBar>
+    </Box>
+};
+
+export default AppToolbar;

planner-front/src/components/UI/HasAccess/HasAccess.js

-import { useSelector } from "react-redux";
+import {useSelector} from "react-redux";
 
 const HasAccess = ({allowed, roles, children}) => {
     const user = useSelector(state => state.users?.user);
-    return allowed || roles?.includes(user?.role) ? children : null
-}
+    return allowed || roles?.includes(user?.role) ? children : null;
+};
 
 export default HasAccess;
\ No newline at end of file

planner-front/src/reportWebVitals.js

-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

planner-front/src/setupTests.js

-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';