refactor admin dashboard component

radekm2000 · Apr 21, 2024 · d280494 · d280494
1 parent ff46dbf
commit d280494
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/client/ecommerce/src/api/axios.tsx b/client/ecommerce/src/api/axios.tsx
@@ -294,8 +294,8 @@ export const getAdminNotifications = async (): Promise<AdminNotification[]> => {
   return response.data;
 };
 
-export const addFeedback = async (dto: FeedbackFormData) => {
-  const response = await axiosApi.post("feedbacks", dto);
+export const addFeedback = async (dto: FeedbackFormData): Promise<Feedback> => {
+  const response = await axiosApi.post<Feedback>("feedbacks", dto);
   return response.data;
 };
 

diff --git a/client/ecommerce/src/components/pages/AdminDashboard.tsx b/client/ecommerce/src/components/pages/AdminDashboard.tsx
@@ -26,25 +26,45 @@ const Sidebar = styled(Box)({
   display: "flex",
 });
 
+enum TabValues {
+  Notifications = "notifications",
+  Feedbacks = "feedbacks",
+}
+
 export const AdminDashboard = () => {
   const { data: adminNotifications, isLoading } = useFetchAdminNotifications();
-  const [tabValue, setTabValue] = useState("notifications");
+  const [tabValue, setTabValue] = useState<TabValues>(TabValues.Notifications);
   const [, setLocation] = useLocation();
   const [, params] = useRoute("/dashboard/:tab");
 
   useEffect(() => {
-    if (!params || !params.tab) {
-      setLocation(`/dashboard/${tabValue}`);
+    if (params && params.tab) {
+      setTabValue(params.tab as TabValues);
     } else {
-      setTabValue(params.tab);
+      setLocation(`/dashboard/${TabValues.Notifications}`);
     }
-  }, [params, setLocation, tabValue]);
+  }, [params, setLocation]);
 
-  const handleTabChange = (e: SyntheticEvent, newValue: string) => {
+  const handleTabChange = (newValue: TabValues) => {
     setTabValue(newValue);
     setLocation(`/dashboard/${newValue}`);
   };
-
+
+  const renderTabContent = () => {
+    switch (tabValue) {
+      case TabValues.Notifications:
+        return adminNotifications && adminNotifications.length > 0 ? (
+          <DisplayAdminNotifications adminNotifications={adminNotifications} />
+        ) : (
+          <Typography>No notifications</Typography>
+        );
+      case TabValues.Feedbacks:
+        return <FeedbackNotifications />;
+      default:
+        return null;
+    }
+  };
+
   if (isLoading) {
     return <AdminDashboardSkeleton />;
   }
@@ -59,47 +79,31 @@ export const AdminDashboard = () => {
             height: "90%",
             position: "relative",
             overflowY: "scroll",
-            "&::-webkit-scrollbar": {
-              display: "none",
-            },
+            "&::-webkit-scrollbar": { display: "none" },
           }}
         >
           <CardContent sx={{ width: "100%", orientation: "vertical" }}>
             <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
               <Tabs
                 value={tabValue}
-                onChange={handleTabChange}
+                onChange={(e, newValue) => handleTabChange(newValue)}
                 aria-label="tabs"
-                sx={{
-                  "&& .Mui-selected": {
-                    color: "black",
-                  },
-                }}
+                sx={{ "&& .Mui-selected": { color: "black" } }}
                 TabIndicatorProps={{ style: { background: "#007782" } }}
               >
                 <Tab
                   sx={{ textTransform: "none" }}
                   label="Notifications"
-                  value="notifications"
+                  value={TabValues.Notifications}
                 ></Tab>
                 <Tab
                   sx={{ textTransform: "none" }}
                   label="Feedbacks"
-                  value="feedbacks"
+                  value={TabValues.Feedbacks}
                 ></Tab>
               </Tabs>
             </Box>
-            {tabValue === "notifications" ? (
-              adminNotifications && adminNotifications.length > 0 ? (
-                <DisplayAdminNotifications
-                  adminNotifications={adminNotifications}
-                />
-              ) : (
-                <Typography>No notifications</Typography>
-              )
-            ) : (
-              <FeedbackNotifications />
-            )}
+            {renderTabContent()}
           </CardContent>
         </Card>
         <Sidebar></Sidebar>