Merge pull request #142 from crux-bphc/make-conditional-navbar

Make Navbar components conditional
crux-bphc · Jan 5, 2024 · d2ab89e · d2ab89e
2 parents 163a375 + 1e7f1c4
commit d2ab89e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 26 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,7 @@
 		"lucide": "^0.302.0",
 		"lucide-react": "^0.302.0",
 		"react": "^18.2.0",
+		"react-cookie": "^6.1.3",
 		"react-dom": "^18.2.0",
 		"tailwind-merge": "^2.2.0",
 		"tailwindcss-animate": "^1.0.7",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
@@ -14,9 +14,10 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
+import { Link, useRouter } from "@tanstack/react-router";
 import axios, { AxiosError } from "axios";
 import { BookUp, Info, LogOut, Pencil, Plus } from "lucide-react";
+import { useCookies } from "react-cookie";
 import { z } from "zod";
 import { userWithTimetablesType } from "../../../lib/src/index";
 import { router } from "../main";
@@ -42,9 +43,18 @@ const userQueryOptions = queryOptions({
 });
 
 export function NavBar() {
+  const stateRouter = useRouter();
+  const isCMSPage =
+    stateRouter.state.resolvedLocation.pathname.includes("/cms");
+  const isEditPage = stateRouter.state.resolvedLocation.pathname.includes(
+    "/edit/" || "/finalize/",
+  );
+
+  const [cookies, setCookie, removeCookie] = useCookies(["session"]);
   const userQueryResult = useQuery(userQueryOptions);
   const { toast } = useToast();
   const queryClient = useQueryClient();
+
   const createMutation = useMutation({
     mutationFn: () => {
       return axios.post<{ message: string; id: string }>(
@@ -149,17 +159,19 @@ export function NavBar() {
             </h1>
           </div>
         </Link>
-        <Button
-          className="text-green-200 w-fit text-xl p-4 ml-4 bg-green-900 hover:bg-green-800"
-          onClick={
-            userQueryResultData ? () => createMutation.mutate() : undefined
-          }
-        >
-          <div className="hidden md:flex">Create a timetable</div>
-          <div className="flex md:hidden">
-            <Plus className="h-6 w-6" />
-          </div>
-        </Button>
+        {!isEditPage && (
+          <Button
+            className="text-green-200 w-fit text-xl p-4 ml-4 bg-green-900 hover:bg-green-800"
+            onClick={
+              userQueryResultData ? () => createMutation.mutate() : undefined
+            }
+          >
+            <div className="hidden md:flex">Create a timetable</div>
+            <div className="flex md:hidden">
+              <Plus className="h-6 w-6" />
+            </div>
+          </Button>
+        )}
         <Link
           // Comment out for now because the route doesn't exist
           // to={userQueryResultData ? "/about" : undefined}
@@ -170,15 +182,17 @@ export function NavBar() {
             <Info className="h-6 w-6" />
           </div>
         </Link>
-        <Link
-          to={userQueryResultData ? "/cmsExport" : undefined}
-          className="text-primary py-2 px-2 ml-2 text-lg rounded-full hover:bg-muted transition h-fit whitespace-nowrap duration-200 ease-in-out"
-        >
-          <div className="hidden md:flex">CMS Auto-Enroll</div>
-          <div className="flex md:hidden">
-            <BookUp className="h-6 w-6" />
-          </div>
-        </Link>
+        {!isCMSPage && (
+          <Link
+            to={userQueryResultData ? "/cmsExport" : undefined}
+            className="text-primary py-2 px-2 ml-2 text-lg rounded-full hover:bg-muted transition h-fit whitespace-nowrap duration-200 ease-in-out"
+          >
+            <div className="hidden md:flex">CMS Auto-Enroll</div>
+            <div className="flex md:hidden">
+              <BookUp className="h-6 w-6" />
+            </div>
+          </Link>
+        )}
       </div>
       <div className="flex flex-row">
         <div className="pt-3">
@@ -203,11 +217,17 @@ export function NavBar() {
             <DropdownMenuItem
               asChild
               className="focus:bg-destructive/90 focus:text-destructive-foreground cursor-pointer"
+              onClick={() => {
+                removeCookie("session", { path: "/" });
+                router.navigate({
+                  to: "/login",
+                });
+              }}
             >
-              <Link to={userQueryResultData ? "/login" : undefined}>
+              <div>
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>Log out</span>
-              </Link>
+              </div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -6,6 +6,7 @@ import {
   rootRouteWithContext,
 } from "@tanstack/react-router";
 import React from "react";
+import { CookiesProvider } from "react-cookie";
 import ReactDOM from "react-dom/client";
 import authenticatedRoute from "./AuthenticatedRoute";
 import cmsOptionRoute from "./CMSOption";
@@ -66,9 +67,11 @@ if (rootElement) {
   ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
       <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-        </QueryClientProvider>
+        <CookiesProvider>
+          <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+          </QueryClientProvider>
+        </CookiesProvider>
       </ThemeProvider>
     </React.StrictMode>,
   );