Changeset bc20307 for sources/client/src/screens

Timestamp:

02/14/22 01:41:41 (2 years ago)

Author:

Tasevski2 <39170279+Tasevski2@…>

Branches:

master

Children:

747e0ab

Parents:

e8b1076

Message:

Push before video

Location:

sources/client/src/screens

Files:

• AdminHomeScreen/index.js (modified) (4 diffs)
• AdminHomeScreen/styles.js (modified) (6 diffs)
• LoginScreen/index.js (deleted)
• LoginScreen/styles.js (deleted)
• UserAndNotAuthScreen/index.js (added)
• UserAndNotAuthScreen/styles.js (added)

sources/client/src/screens/AdminHomeScreen/index.js

@@ +1 @@
+import { useContext, useState } from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
@@ -19 +20 @@
   DividerUnderHeader,
   UserIcon,
+  MenuBurgerIcon,
 } from './styles';
 
 import IconButton from '@mui/material/IconButton';
 
-import logo from '../../resources/logo_2_transparent_bg.jpg';
+import logo from '../../resources/logo_2_transparent_bg.png';
 import { roles } from '../../config/enums';
 import DestinationComponent from '../../utils/DestinationComponent';
 import onClickRouting from '../../utils/onClickRouting';
+import AbsoluteLoader from '../../components/Loaders/AbsoluteLoader';
 
 import ParkingZones from '../../components/admin/ParkingZones';
@@ -33 +36 @@
 import EmployeeCreate from '../../components/admin/EmployeeCreate';
 import ParkingZone from '../../components/admin/ParkingZone';
+
+import { UserContext } from '../../context/UserContext';
+import { AccessoriesContext } from '../../context/AccessoriesContext';
+import useLogoutUser from '../../hooks/useLogoutUser';
 
 const ToParkingZones = new DestinationComponent('/', ParkingZones, true);
@@ -67 +74 @@
 
 const AdminHomeScreen = (props) => {
+  const { user, isLoadingUser } = useContext(UserContext);
+  const { isMobile, setIsOpenDrawer } = useContext(AccessoriesContext);
   let history = useHistory();
-  const user = {
-    role: 'ROLE_ADMIN',
-  };
-
+  const { logoutUser } = useLogoutUser();
   let routes = user.role === roles.admin ? adminRoutes : employeeRoutes;
 
   return (
     <Container>
-      <SideMenu>
-        <IconButton onClick={() => onClickRouting('/', history)}>
-          <DashboardIcon />
-        </IconButton>
-        {user.role === roles.admin ? (
-          <IconButton onClick={() => onClickRouting('/employees', history)}>
-            <SupervisorAccountIcon />
-          </IconButton>
-        ) : null}
-      </SideMenu>
+      {isLoadingUser ? (
+        <AbsoluteLoader
+          containerStyle={{
+            width: isMobile ? '150px' : '300px',
+            height: isMobile ? '150px' : '300px',
+            margin: 'auto',
+          }}
+        />
+      ) : (
+        <>
+          {!isMobile ? (
+            <SideMenu>
+              <IconButton onClick={() => onClickRouting('/', history)}>
+                <DashboardIcon />
+              </IconButton>
+              {user.role === roles.admin ? (
+                <IconButton
+                  onClick={() => onClickRouting('/employees', history)}
+                >
+                  <SupervisorAccountIcon />
+                </IconButton>
+              ) : null}
+            </SideMenu>
+          ) : null}
 
-      <HeaderAndMainSectionWrapper>
-        <Header>
-          <TitleAndLogoWrapper>
-            <LogoWrapper>
-              <Logo src={logo} />
-            </LogoWrapper>
-            <HeaderTitle>Park Up</HeaderTitle>
-          </TitleAndLogoWrapper>
+          <HeaderAndMainSectionWrapper>
+            <Header>
+              {isMobile ? (
+                <IconButton
+                  onClick={() => setIsOpenDrawer(true)}
+                  style={{ padding: 0 }}
+                >
+                  <MenuBurgerIcon />
+                </IconButton>
+              ) : null}
+              <TitleAndLogoWrapper>
+                <LogoWrapper>
+                  <Logo src={logo} />
+                </LogoWrapper>
+                <HeaderTitle>Park Up</HeaderTitle>
+              </TitleAndLogoWrapper>
 
-          <UserNameAndLogoutWrapper>
-            <UserIcon />
-            <UserName>Viktor Tasevski</UserName>
-            <IconButton>
-              <LogoutIcon />
-            </IconButton>
-          </UserNameAndLogoutWrapper>
-        </Header>
-        <DividerUnderHeader />
-        <MainSection>
-          <Switch>
-            {routes?.map((route, index) => (
-              <Route
-                key={index}
-                path={route.path}
-                component={route.component}
-                exact={route.exact}
-              />
-            ))}
-            <Redirect to='/' />
-          </Switch>
-        </MainSection>
-      </HeaderAndMainSectionWrapper>
+              {isMobile ? null : (
+                <UserNameAndLogoutWrapper>
+                  <UserIcon />
+                  <UserName>
+                    {user.firstName} {user.lastName}
+                  </UserName>
+                  <IconButton onClick={logoutUser}>
+                    <LogoutIcon />
+                  </IconButton>
+                </UserNameAndLogoutWrapper>
+              )}
+            </Header>
+            <DividerUnderHeader />
+            <MainSection>
+              <Switch>
+                {routes?.map((route, index) => (
+                  <Route
+                    key={index}
+                    path={route.path}
+                    component={route.component}
+                    exact={route.exact}
+                  />
+                ))}
+                <Redirect to='/' />
+              </Switch>
+            </MainSection>
+          </HeaderAndMainSectionWrapper>
+        </>
+      )}
     </Container>
   );

sources/client/src/screens/AdminHomeScreen/styles.js

@@ -7 +7 @@
 import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Box from '@mui/material/Box';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseI from '@mui/icons-material/Close';
+import { mobile_max_width } from '../../config/utilities';
+import backgroundImage from '../../resources/login_background.jpg';
 
 export const Container = styled.div`
   display: flex;
   flex-direction: row;
-  height: 100%;
+  min-height: 100vh;
   flex: 1;
 `;
@@ -20 +25 @@
   flex-direction: row;
   justify-content: space-between;
-  padding: 10px 30px;
+  padding: 10px 7%;
+  position: fixed;
+  z-index: 100;
+  background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 15px;
+  }
 `;
 
@@ -26 +37 @@
   variant: 'middle',
   sx: {
-    margin: '0 25px',
+    margin: '0 5%',
+    marginTop: '75px',
     borderWidth: '2px',
     borderBottomWidth: 'thin',
@@ -75 +87 @@
   sx: {
     fontSize: 30,
-    color: `${props.theme.palette.error.light}`,
+    color: `${props.theme.palette.error.main}`,
   },
 }))``;
@@ -82 +94 @@
   display: flex;
   flex-direction: column;
-  height: 100%;
   width: 100%;
+  padding-left: 70px;
   background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 0;
+  }
 `;
 
 export const SideMenu = styled.div`
   flex-direction: column;
-  height: 100%;
   width: 70px;
   padding: 20px 10px 0 10px;
   border-right: 1px solid grey;
+  position: fixed;
+  height: 100%;
   background-color: ${(props) => props.theme.palette.primary.main};
 `;
@@ -124 +141 @@
   width: 100%;
   height: 100%;
-  padding: 20px 0px;
+  padding-top: 20px;
   display: flex;
   flex-direction: column;
 `;
+
+export const MenuBurgerIcon = styled(MenuIcon).attrs((props) => ({
+  sx: {
+    fontSize: 50,
+    color: `${props.theme.palette.primary.main}`,
+  },
+}))``;