Merge pull request #14 from DNO-inc/feature#13

Created function to login + create ticket

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tres",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.2",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0"
   },
   "devDependencies": {

public/locales/en/translation.json

@@ -1,6 +1,7 @@
 {
   "common": {
     "login": "Log in",
+    "signup": "Sign Up",
     "profile": "Profile",
     "error": "Error"
   },

public/locales/ua/translation.json

@@ -1,6 +1,7 @@
 {
   "common": {
     "login": "Авторизація",
+    "signup": "Реєстрація",
     "profile": "Профіль",
     "error": "Помилка"
   },

src/Router/Router.jsx

@@ -13,17 +13,19 @@ import { Notifications } from "../components/Pages/Notifications";
 import { Settings } from "../components/Pages/Settings";
 import { Profile } from "../components/Pages/Profile/Profile";
 import { ErrorPage } from "../components/Pages/ErrorPage/ErrorPage";
+import { useJwtDecode } from "../shared/hooks";
 
 const Router = () => {
-  const [isAuth, setIsAuth] = useState(false);
+  const jwt = useJwtDecode();
+  const [isAuth, setIsAuth] = useState(!!jwt);
 
   return (
     <Routes>
       <Route
         path={endpoints.base}
         element={<Layout isAuth={isAuth} setIsAuth={setIsAuth} />}
       >
-        <Route index element={<GeneralTickets isAuth={isAuth} />}></Route>
+        <Route index element={<GeneralTickets />}></Route>
         <Route path={endpoints.dashboard} element={<Dashboard />} />
         <Route path={endpoints.sent} element={<Sent />} />
         <Route path={endpoints.received} element={<Received />} />

src/components/ComingSoon/ComingSoon.jsx

@@ -0,0 +1,26 @@
+import { Grid, Typography } from "@mui/material";
+
+const ComingSoon = () => {
+  return (
+    <Grid
+      container
+      sx={{ height: "70vh", justifyContent: "center", alignItems: "center" }}
+    >
+      <Typography
+        sx={{
+          textTransform: "capitalize",
+          fontSize: "90px",
+          fontWeight: "bold",
+        }}
+      >
+        <span>Coming</span>
+        <br />
+        <span>Soon...</span>
+      </Typography>
+    </Grid>
+  );
+};
+
+ComingSoon.propTypes = {};
+
+export { ComingSoon };

src/components/ComingSoon/index.js

@@ -0,0 +1 @@
+export { ComingSoon } from "./ComingSoon";

src/components/Layout/Layout.jsx

@@ -24,9 +24,8 @@ const Layout = ({ isAuth, setIsAuth }) => {
         drawerWidth={drawerWidth}
         handleDrawerToggle={handleDrawerToggle}
       />
+
       <Sidebar
-        isAuth={isAuth}
-        setIsAuth={setIsAuth}
         mobileOpen={mobileOpen}
         drawerWidth={drawerWidth}
         handleDrawerToggle={handleDrawerToggle}
@@ -40,9 +39,12 @@ const Layout = ({ isAuth, setIsAuth }) => {
           width: { sm: `calc(100% - ${drawerWidth}px)` },
           bgcolor: palette.grey.background,
           color: palette.common.white,
+          "& > div > h4": {
+            mb: 4,
+          },
         }}
       >
-        <Outlet isAuth={isAuth} setIsAuth={setIsAuth} />
+        <Outlet />
       </Box>
     </Grid>
   );

src/components/Layout/components/Header/Header.jsx

@@ -1,7 +1,7 @@
 import { AppBar, IconButton, Toolbar } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import PropTypes from "prop-types";
-import { AuthZone } from "../AuthZone";
+import { AuthZone } from "./components/AuthZone";
 import { useTheme } from "@emotion/react";
 
 const Header = ({ isAuth, setIsAuth, drawerWidth, handleDrawerToggle }) => {

src/components/Layout/components/Header/components/AuthZone/AuthZone.jsx

@@ -0,0 +1,26 @@
+import List from "@mui/material/List";
+import PropTypes from "prop-types";
+import { AuthActions } from "./components/AuthActions";
+import { NoAuthActions } from "./components/NoAuthActions";
+
+const AuthZone = ({ isAuth, setIsAuth }) => {
+  return (
+    <List
+      sx={{
+        "& > li": {
+          padding: { xs: 0, md: "8px 16px" },
+        },
+      }}
+    >
+      {isAuth ? (
+        <AuthActions setIsAuth={setIsAuth} />
+      ) : (
+        <NoAuthActions setIsAuth={setIsAuth} />
+      )}
+    </List>
+  );
+};
+
+AuthZone.propTypes = {};
+
+export { AuthZone };

src/components/Layout/components/Header/components/AuthZone/components/AuthActions/AuthActions.jsx

@@ -0,0 +1,43 @@
+import {
+  Avatar,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  Typography,
+} from "@mui/material";
+import { NavLink } from "react-router-dom";
+import { VerticalDivider } from "../../../../../../../VerticalDivider";
+import LogoutIcon from "@mui/icons-material/Logout";
+import Logo from "../../../../../../../../assets/Logomark.svg";
+import { endpoints } from "../../../../../../../../constants";
+
+const AuthActions = ({ setIsAuth }) => {
+  const handleLogOut = () => {
+    localStorage.removeItem("jwt-token");
+    setIsAuth(false);
+  };
+
+  return (
+    <ListItem key={"Log out"} sx={{ display: "flex", gap: 2 }}>
+      <Typography sx={{ display: { xs: "none", md: "inline-block" } }}>
+        User name
+      </Typography>
+      <NavLink to={endpoints.profile}>
+        <Avatar alt="Avatar" src={Logo} sizes="40" sx={{ mr: 1 }} />
+      </NavLink>
+      <VerticalDivider />
+      <NavLink to={endpoints.base}>
+        <IconButton onClick={handleLogOut} sx={{ minWidth: 2 }}>
+          <ListItemIcon sx={{ minWidth: 2 }}>
+            <LogoutIcon />
+          </ListItemIcon>
+        </IconButton>
+      </NavLink>
+      <VerticalDivider />
+    </ListItem>
+  );
+};
+
+AuthActions.propTypes = {};
+
+export { AuthActions };

src/components/Layout/components/Header/components/AuthZone/components/AuthActions/index.js

@@ -0,0 +1 @@
+export { AuthActions } from "./AuthActions";

src/components/Layout/components/Header/components/AuthZone/components/NoAuthActions/NoAuthActions.jsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { Box, Button, ListItem } from "@mui/material";
+import { LogInModal } from "../../../../../../../LogInModal";
+import { SignUpModal } from "../../../../../../../SignUpModal";
+import { useTranslation } from "react-i18next";
+
+const NoAuthActions = ({ setIsAuth }) => {
+  const { t } = useTranslation();
+  const [showSignUp, setShowSignUp] = useState(false);
+  const [showLogIn, setShowLogIn] = useState(false);
+
+  const handleSignUp = () => {
+    setShowSignUp(true);
+  };
+
+  const handleLogIn = () => {
+    setShowLogIn(true);
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      {/* <ListItem key={"Sign Up"}>
+        <Button
+          variant="contained"
+          onClick={handleSignUp}
+          sx={{ minWidth: "110%" }}
+        >
+          {t("common.signup")}
+        </Button>
+      </ListItem>
+      {showSignUp && <SignUpModal open={showSignUp} setOpen={setShowSignUp} />} */}
+      <ListItem key={"Log In"}>
+        <Button
+          variant="contained"
+          onClick={handleLogIn}
+          sx={{ minWidth: "100%" }}
+        >
+          {t("common.login")}
+        </Button>
+      </ListItem>
+      {showLogIn && (
+        <LogInModal
+          open={showLogIn}
+          setOpen={setShowLogIn}
+          setIsAuth={setIsAuth}
+        />
+      )}
+    </Box>
+  );
+};
+
+NoAuthActions.propTypes = {};
+
+export { NoAuthActions };

src/components/Layout/components/Header/components/AuthZone/components/NoAuthActions/index.js

@@ -0,0 +1 @@
+export { NoAuthActions } from "./NoAuthActions";

src/components/Layout/components/Sidebar/Sidebar.jsx

@@ -2,13 +2,7 @@ import Box from "@mui/material/Box";
 import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
 import { CommonDrawer } from "./components/CommonDrawer/CommonDrawer";
 
-const Sidebar = ({
-  isAuth,
-  setIsAuth,
-  mobileOpen,
-  drawerWidth,
-  handleDrawerToggle,
-}) => {
+const Sidebar = ({ mobileOpen, drawerWidth, handleDrawerToggle }) => {
   const container =
     window !== undefined ? () => window.document.body : undefined;
 
@@ -23,14 +17,12 @@ const Sidebar = ({
       aria-label="mailbox folders"
     >
       <MobileDrawer
-        isAuth={isAuth}
-        setIsAuth={setIsAuth}
         container={container}
         mobileOpen={mobileOpen}
         handleDrawerToggle={handleDrawerToggle}
         drawerWidth={drawerWidth}
       />
-      <CommonDrawer isAuth={isAuth} drawerWidth={drawerWidth} />
+      <CommonDrawer drawerWidth={drawerWidth} />
     </Box>
   );
 };

src/components/Layout/components/Sidebar/components/CommonDrawer/CommonDrawer.jsx

@@ -5,7 +5,7 @@ import { Avatar, Grid, Toolbar, Typography } from "@mui/material";
 import Logo from "../../../../../../assets/Logomark.svg";
 import { EllipsisMenu } from "../EllipsisMenu";
 
-const CommonDrawer = ({ isAuth, drawerWidth }) => {
+const CommonDrawer = ({ drawerWidth }) => {
   const { palette } = useTheme();
 
   return (
@@ -63,7 +63,7 @@ const CommonDrawer = ({ isAuth, drawerWidth }) => {
           <EllipsisMenu />
         </Grid>
       </Toolbar>
-      <SidebarActions isAuth={isAuth} />
+      <SidebarActions />
     </Drawer>
   );
 };

src/components/Layout/components/Sidebar/components/MobileDrawer/MobileDrawer.jsx

@@ -6,7 +6,6 @@ import Logo from "../../../../../../assets/Logomark.svg";
 import { EllipsisMenu } from "../EllipsisMenu";
 
 const MobileDrawer = ({
-  isAuth,
   container,
   mobileOpen,
   handleDrawerToggle,
@@ -68,7 +67,7 @@ const MobileDrawer = ({
           <EllipsisMenu />
         </Grid>
       </Toolbar>
-      <SidebarActions isAuth={isAuth} />
+      <SidebarActions />
     </Drawer>
   );
 };