From b49a78509c4ac60121548c61fff6ab2b6edb7be7 Mon Sep 17 00:00:00 2001
From: Radek <104318242+radekm2000@users.noreply.github.com>
Date: Sat, 6 Apr 2024 19:47:47 +0200
Subject: [PATCH] add dynamic urls in admin dashboard based on tabs

---
 client/ecommerce/src/App.tsx                       |  2 +-
 .../AdminDashboard/FeedbackNotifications.tsx       |  6 +++---
 client/ecommerce/src/components/Navbar.tsx         |  5 +++--
 .../src/components/pages/AdminDashboard.tsx        | 14 ++++++++++++--
 server/ecommerce/src/auth/auth.service.ts          |  2 +-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/client/ecommerce/src/App.tsx b/client/ecommerce/src/App.tsx
index 9022592..e13cc8f 100644
--- a/client/ecommerce/src/App.tsx
+++ b/client/ecommerce/src/App.tsx
@@ -146,7 +146,7 @@ function App() {
                     <Route path="/inbox/:userId*">
                       <Inbox />
                     </Route>
-                    <Route path="/dashboard">
+                    <Route path="/dashboard/:tab">
                       <AdminDashboard />
                     </Route>
 
diff --git a/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx b/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx
index fa159a9..298e0f8 100644
--- a/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx
+++ b/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx
@@ -27,16 +27,16 @@ export const FeedbackNotifications = () => {
   const { data, isLoading } = useFetchFeedbacks();
   const [featureType, setFeatureType] = useState<featureType>();
   const [location, setLocation] = useLocation();
-
+  console.log(location);
   useEffect(() => {
     const params = new URLSearchParams();
     if (featureType !== undefined) {
       params.set("featureType", featureType);
-      setLocation(`${location}?${params.toString()}`);
+      setLocation(`/dashboard/feedbacks?${params.toString()}`);
     } else {
       setLocation(location);
     }
-  }, [featureType, setLocation, location]);
+  }, [featureType]);
 
   if (isLoading) {
     return <AdminDashboardSkeleton />;
diff --git a/client/ecommerce/src/components/Navbar.tsx b/client/ecommerce/src/components/Navbar.tsx
index 92d444b..24b7fbd 100644
--- a/client/ecommerce/src/components/Navbar.tsx
+++ b/client/ecommerce/src/components/Navbar.tsx
@@ -390,7 +390,7 @@ export const Navbar = () => {
                       display: below800 ? "none" : null,
                     }}
                   >
-                    <Link href="/dashboard">
+                    <Link href="/dashboard/notifications">
                       <Typography
                         color="white"
                         fontFamily="Maison Neue"
@@ -426,7 +426,8 @@ export const Navbar = () => {
               </Button>
 
               <Box sx={{ display: { xs: "none", md: "flex", gap: "5px" } }}>
-                <IconButton size="large"
+                <IconButton
+                  size="large"
                   disableFocusRipple
                   onClick={handleClickOpen}
                 >
diff --git a/client/ecommerce/src/components/pages/AdminDashboard.tsx b/client/ecommerce/src/components/pages/AdminDashboard.tsx
index 5ebbcc4..5eb3e34 100644
--- a/client/ecommerce/src/components/pages/AdminDashboard.tsx
+++ b/client/ecommerce/src/components/pages/AdminDashboard.tsx
@@ -12,8 +12,7 @@ import DisplayAdminNotifications from "../DisplayAdminNotifications";
 import { SyntheticEvent, useEffect, useState } from "react";
 import { FeedbackNotifications } from "../AdminDashboard/FeedbackNotifications";
 import { AdminDashboardSkeleton } from "../AdminDashboard/AdminDashboardSkeleton";
-import { useLocation } from "wouter";
-import { CatchingPokemonSharp } from "@mui/icons-material";
+import { useLocation, useRoute } from "wouter";
 const Container = styled(Box)({
   backgroundColor: "rgba(37,44,51,0.05)",
   display: "flex",
@@ -30,9 +29,20 @@ const Sidebar = styled(Box)({
 export const AdminDashboard = () => {
   const { data: adminNotifications, isLoading } = useFetchAdminNotifications();
   const [tabValue, setTabValue] = useState("notifications");
+  const [, setLocation] = useLocation();
+  const [, params] = useRoute("/dashboard/:tab");
+
+  useEffect(() => {
+    if (!params || !params.tab) {
+      setLocation(`/dashboard/${tabValue}`);
+    } else {
+      setTabValue(params.tab);
+    }
+  }, [params, setLocation, tabValue]);
 
   const handleTabChange = (e: SyntheticEvent, newValue: string) => {
     setTabValue(newValue);
+    setLocation(`/dashboard/${newValue}`);
   };
 
   if (isLoading) {
diff --git a/server/ecommerce/src/auth/auth.service.ts b/server/ecommerce/src/auth/auth.service.ts
index 9c09a24..db82f55 100644
--- a/server/ecommerce/src/auth/auth.service.ts
+++ b/server/ecommerce/src/auth/auth.service.ts
@@ -27,7 +27,7 @@ export class AuthService {
     }
     const payload = { sub: user.id, username: user.username };
     const accessToken = await this.jwtService.signAsync(payload, {
-      expiresIn: '10s',
+      expiresIn: '24h',
     });
     const refreshToken = await this.jwtService.signAsync(payload, {
       expiresIn: '24h',