Add admin portal books page (#144)

src/components/NavBar/AccountAvatar/AccountAvatar.test.tsx → src/components/AccountAvatar/AccountAvatar.test.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { act } from "react-dom/test-utils";
-import App from "../../../App";
-import * as AuthContext from "../../../store/auth/AuthContext";
+import App from "../../App";
+import * as AuthContext from "../../store/auth/AuthContext";
 
 describe("AccountAvatar component", () => {
   test("should render account avatar and check for dropdown menu button", () => {

src/components/NavBar/AccountAvatar/index.tsx → src/components/AccountAvatar/index.tsx

@@ -9,8 +9,8 @@ import Logout from "@mui/icons-material/Logout";
 import { Typography } from "@mui/material";
 import "./AccountAvatar.css";
 import { useNavigate } from "react-router";
-import { useAuthContext } from "../../../store/auth/AuthContext";
-import { routes } from "../../../constants/routes";
+import { useAuthContext } from "../../store/auth/AuthContext";
+import { routes } from "../../constants/routes";
 
 const AccountAvatar = () => {
   const [anchorEl, setAnchorEl] = React.useState(null);

src/components/AdminNavBar/AdminNavBar.css

@@ -0,0 +1,25 @@
+.navbar {
+    height: 64px;
+  }
+
+  .MuiPaper-root.MuiAppBar-root {
+    position: sticky;
+    background-color: white;
+    z-index: 1299;
+    box-shadow: 0px 1px 4px rgba(59, 59, 59, 0.1);
+  }
+
+  .navbar-div {
+    height: 64px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0px 5.56%;
+  }
+
+  .right-side {
+    display: flex;
+    align-self: center;
+  }
+

src/components/AdminNavBar/index.tsx

@@ -0,0 +1,19 @@
+import { AppBar } from "@mui/material";
+import AccountAvatar from "../AccountAvatar";
+import NavBarLogo from "../NavBarLogo";
+import { routes } from "../../constants/routes";
+
+const AdminNavBar = () => {
+  return (
+    <AppBar className="navbar">
+      <div className="navbar-div">
+        <NavBarLogo homeRoute={routes.ADMIN_HOME} />
+
+        <div className="right-side">
+          <AccountAvatar />
+        </div>
+      </div>
+    </AppBar>
+  );
+};
+export default AdminNavBar;

src/components/NavBar/NavBar.css

@@ -18,43 +18,6 @@
   padding: 0px 5.56%;
 }
 
-.navbar-info {
-  user-select: none;
-  text-decoration: none;
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-}
-
-.logo {
-  height: 32px;
-  margin: 16px 32px 16px 0;
-}
-
-.navbar-text {
-  height: 64px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: #000000;
-}
-
-.navbar-company p {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0;
-}
-
-.navbar-title p {
-  font-style: normal;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
-  margin: 0;
-}
-
 .navbar-search {
   min-width: 30%;
   max-height: 40px;

src/components/NavBar/index.tsx

@@ -3,58 +3,36 @@
 /* eslint-disable react/jsx-curly-newline */
 import { AppBar, Typography, useMediaQuery } from "@mui/material";
 import { useState } from "react";
-import {
-  useNavigate,
-  useLocation,
-  useSearchParams,
-  Link,
-} from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import SearchIcon from "@mui/icons-material/Search";
 import { MediaQueries } from "../../constants/mediaQueries";
 import { routes } from "../../constants/routes";
-import logo from "../../img/pd-logo.svg";
-import AccountAvatar from "./AccountAvatar";
+import AccountAvatar from "../AccountAvatar";
 
 import "./NavBar.css";
 import Search from "./Search";
-import NewBookButton from "./NewBookButton";
 import { useAuthContext } from "../../store/auth/AuthContext";
 import AdminPanelButton from "./AdminPanelButton";
+import NavBarLogo from "../NavBarLogo";
 
-type Props = {
-  showSearchBar?: boolean;
-};
-
-const NavBar = ({ showSearchBar = true }: Props) => {
-  const location = useLocation();
-  const navigate = useNavigate();
+const NavBar = () => {
+  const { isUserAdmin } = useAuthContext();
   const [searchScreenShowed, setSearchScreenShowed] = useState<boolean>(false);
   const isLargeScreen = useMediaQuery(MediaQueries.X_MEDIUM);
-  const isSearchbarShowed = isLargeScreen && showSearchBar;
+  const isSearchbarShowed = isLargeScreen;
   const isSearchIconShowedOnMobile = !isLargeScreen && !searchScreenShowed;
   const isSearchScreenShowedOnMobile = !isLargeScreen && searchScreenShowed;
 
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const reloadHomePage = () => {
+  const resetParams = () => {
     setSearchParams("");
-    if (location.pathname === routes.HOME) navigate(0);
   };
 
   return (
     <AppBar className="navbar">
       <div className="navbar-div">
-        <Link to={routes.HOME} className="navbar-info" onClick={reloadHomePage}>
-          <img src={logo} alt="logo" className="logo" />
-          <div className="navbar-text">
-            <span className="navbar-company">
-              <Typography>ProductDock</Typography>
-            </span>
-            <span className="navbar-title">
-              <Typography>Library</Typography>
-            </span>
-          </div>
-        </Link>
+        <NavBarLogo homeRoute={routes.HOME} handleClickCallback={resetParams} />
         {isSearchbarShowed && (
           <div className="navbar-search">
             <Search icon="search" />
@@ -79,7 +57,7 @@ const NavBar = ({ showSearchBar = true }: Props) => {
           </div>
         )}
         <div className="right-side">
-          {showSearchBar && (
+          {isUserAdmin?.() && (
             <div className="add-book-button-wrapper">
               <AdminPanelButton />
             </div>

src/components/NavBarLogo/NavBarLogo.css

@@ -0,0 +1,36 @@
+.navbar-info {
+    user-select: none;
+    text-decoration: none;
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+  }
+
+  .logo {
+    height: 32px;
+    margin: 16px 32px 16px 0;
+  }
+
+  .navbar-text {
+    height: 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #000000;
+  }
+
+  .navbar-company p {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+  }
+
+  .navbar-title p {
+    font-style: normal;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 18px;
+    margin: 0;
+  }

src/components/NavBarLogo/index.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable no-restricted-globals */
+import "./NavBarLogo.css";
+import { Typography } from "@mui/material";
+import { Link, useNavigate } from "react-router-dom";
+import logo from "../../img/pd-logo.svg";
+
+type Props = {
+  handleClickCallback?: () => void;
+  homeRoute: string;
+};
+
+const NavBarLogo = ({ homeRoute, handleClickCallback }: Props) => {
+  const navigate = useNavigate();
+
+  const forceReloadHome = () => {
+    if (location.pathname === homeRoute) navigate(0);
+  };
+  const handleClickLogo = () => {
+    handleClickCallback?.();
+    forceReloadHome();
+  };
+
+  return (
+    <Link to={homeRoute} className="navbar-info" onClick={handleClickLogo}>
+      <img src={logo} alt="logo" className="logo" />
+      <div className="navbar-text">
+        <span className="navbar-company">
+          <Typography>ProductDock</Typography>
+        </span>
+        <span className="navbar-title">
+          <Typography>Library</Typography>
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+export default NavBarLogo;

src/components/SideMenu/SideMenu.css

@@ -10,6 +10,18 @@
     box-shadow: 0px 1px 4px rgba(59, 59, 59, 0.1);
 }
 
+.side-bar-mobile {
+    height: 100%;
+    width: 70px;
+    padding-top: 64px;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    overflow-x: hidden;
+    background-color: white;
+    box-shadow: 0px 1px 4px rgba(59, 59, 59, 0.1);
+}
+
 .menu-list .menu-btn {
     border-left: 4px solid transparent;
 }

src/components/SideMenu/SideMenu.test.tsx

@@ -1,20 +1,21 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import AdminHomePage from "../../pages/AdminHomePage/AdminHomePage";
 import { MemoryRouter } from "react-router";
 import { routes } from "../../constants/routes";
 import userEvent from "@testing-library/user-event";
+import SideMenu from ".";
 
 describe("Test side-menu", () => {
   test("should render side menu on admin page", async () => {
     render(
       <MemoryRouter
         initialEntries={[
           {
-            pathname: routes.HOME,
+            pathname: routes.ADMIN_HOME,
           },
         ]}
       >
-        <AdminHomePage />
+        <SideMenu />
       </MemoryRouter>
     );
 
@@ -23,36 +24,30 @@ describe("Test side-menu", () => {
     expect(menuComponent).toBeInTheDocument();
   });
 
-  test("should change selected item on click", () => {
+  test("should change selected item on click", async () => {
     render(
-      <MemoryRouter
-        initialEntries={[
-          {
-            pathname: routes.HOME,
-          },
-        ]}
-      >
-        <AdminHomePage />
+      <MemoryRouter>
+        <SideMenu />
       </MemoryRouter>
     );
 
-    const readerButton = screen.getByTestId("reader-button");
+    const booksbutton = screen.getByTestId("books-button");
 
-    userEvent.click(readerButton);
+    userEvent.click(booksbutton);
 
-    expect(readerButton).toHaveClass("Mui-selected");
+    expect(booksbutton).toHaveClass("Mui-selected");
   });
 
   test("should dashboard be selected on default", () => {
     render(
       <MemoryRouter
         initialEntries={[
           {
-            pathname: routes.HOME,
+            pathname: routes.ADMIN_HOME,
           },
         ]}
       >
-        <AdminHomePage />
+        <SideMenu />
       </MemoryRouter>
     );