sort feedbacks by feature type

client/ecommerce/src/App.tsx

@@ -23,6 +23,7 @@ import { ChatNotificationsProvider } from "./contexts/ChatNotificationsContext";
 import { ProductNotificationProvider } from "./contexts/ProductNotificationContext";
 import { Layout } from "./components/Layout";
 import { AdminDashboard } from "./components/pages/AdminDashboard";
+import { FeedbackNotifications } from "./components/AdminDashboard/FeedbackNotifications";
 
 const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_KEY);
 
@@ -148,6 +149,7 @@ function App() {
                     <Route path="/dashboard">
                       <AdminDashboard />
                     </Route>
+
                     <Route path="/members/:userId/followings">
                       <Followings />
                     </Route>

client/ecommerce/src/components/AdminDashboard/DisplayFeedbackNotifications.tsx

@@ -2,6 +2,7 @@ import { Box, Divider, Typography } from "@mui/material";
 import { Feedback } from "../../types/types";
 import { useState } from "react";
 import { DisplayFeedbackDialog } from "./DisplayFeedbackDialog";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 
 export const DisplayFeedbackNotifications = ({
   feedbackNotifications,
@@ -11,10 +12,9 @@ export const DisplayFeedbackNotifications = ({
   const [selectedFeedback, setSelectedFeedback] = useState<Feedback | null>(
     null
   );
-
+  const below700 = useMediaQuery(700);
   const handleCloseDialog = () => {
     setSelectedFeedback(null);
-    console.log("zamykanie okna");
   };
   return (
     <Box sx={{ display: "flex", flexDirection: "column", marginTop: "10px" }}>
@@ -33,16 +33,18 @@ export const DisplayFeedbackNotifications = ({
             <Typography sx={{ color: "#007782" }}>
               {notification.contactName}
             </Typography>
-            <Typography sx={{ ml: "10px" }}>
-              added a feedback {notification.createdAt}
-            </Typography>
+            {below700 ? null : (
+              <Typography sx={{ ml: "10px" }}>
+                added a feedback {notification.createdAt}
+              </Typography>
+            )}
 
             <DisplayFeedbackDialog
               key={index}
               contactName={notification.contactName}
               description={notification.description}
               email={notification.email}
-              featureTypeValue="other"
+              featureTypeValue={notification.featureType}
               handleClose={handleCloseDialog}
               open={selectedFeedback === notification}
             />

client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx

@@ -1,12 +1,42 @@
 import { compareAsc, compareDesc, formatDistanceToNowStrict } from "date-fns";
 import { useFetchFeedbacks } from "../../hooks/useFetchFeedbacks";
 import { AdminDashboardSkeleton } from "./AdminDashboardSkeleton";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Feedback } from "../../types/types";
 import { DisplayFeedbackNotifications } from "./DisplayFeedbackNotifications";
+import { featureType } from "../FeedbackDialog";
+import { SortByFeatureButton } from "./FeedbackNotificationsComponents/SortByFeatureButton";
+import { Box, Button, Divider, styled } from "@mui/material";
+import { useLocation } from "wouter";
+
+const FeatureButton = styled(Button)({
+  cursor: "auto",
+  padding: "8px 12px",
+  backgroundColor: "#F2F2F2",
+  fontSize: "14px",
+  color: "#171717",
+  borderRadius: "3996px",
+  border: "1px solid #0000",
+  textTransform: "none",
+  "&:hover": {
+    backgroundColor: "#F2F2F2",
+  },
+});
 
 export const FeedbackNotifications = () => {
   const { data, isLoading } = useFetchFeedbacks();
+  const [featureType, setFeatureType] = useState<featureType>();
+  const [location, setLocation] = useLocation();
+
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (featureType !== undefined) {
+      params.set("featureType", featureType);
+      setLocation(`${location}?${params.toString()}`);
+    } else {
+      setLocation(location);
+    }
+  }, [featureType, setLocation, location]);
 
   if (isLoading) {
     return <AdminDashboardSkeleton />;
@@ -15,6 +45,14 @@ export const FeedbackNotifications = () => {
     compareDesc(a.createdAt, b.createdAt)
   );
 
+  const onFeatureSelected = (feature: featureType) => {
+    setFeatureType(feature);
+  };
+
+  const clearFilters = () => {
+    setFeatureType(undefined);
+  };
+
   const timeFormattedFeedbacks = sortFeedbacksByCreationTime?.map((f) => {
     const formattedTime = formatDistanceToNowStrict(f.createdAt, {
       addSuffix: true,
@@ -23,11 +61,50 @@ export const FeedbackNotifications = () => {
     return { ...f, createdAt: formattedTime };
   });
 
+  const feedbacksSortByFeatureType = timeFormattedFeedbacks?.filter((f) => {
+    if (featureType === undefined) {
+      return f;
+    } else {
+      return f.featureType === featureType;
+    }
+  });
+
   return (
     <>
-      {timeFormattedFeedbacks && (
+      <Box
+        sx={{
+          margin: "20px 0px",
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <SortByFeatureButton onFeatureSelected={onFeatureSelected} />
+        {featureType && <FeatureButton>{featureType}</FeatureButton>}
+        {featureType ? (
+          <Box sx={{ marginLeft: "auto" }}>
+            <Button
+              onClick={clearFilters}
+              sx={{
+                color: "#007782",
+                textTransform: "none",
+                alignItems: "flex-end",
+                fontSize: "12px",
+                border: "none",
+                maxWidth: "83px",
+                maxHeight: "21px",
+                padding: "0px 5px",
+              }}
+            >
+              Clear filters
+            </Button>
+          </Box>
+        ) : null}
+      </Box>
+      <Divider></Divider>
+      {feedbacksSortByFeatureType && (
         <DisplayFeedbackNotifications
-          feedbackNotifications={timeFormattedFeedbacks}
+          feedbackNotifications={feedbacksSortByFeatureType}
         />
       )}
     </>

client/ecommerce/src/components/AdminDashboard/FeedbackNotificationsComponents/SortByFeatureButton.tsx

@@ -0,0 +1,63 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { featureType } from "../../FeedbackDialog";
+export const SortByFeatureButton = ({
+  onFeatureSelected,
+}: {
+  onFeatureSelected: (feature: featureType) => void;
+}) => {
+  const [isActive, setIsActive] = useState<boolean>(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setIsMenuOpen(false);
+    setIsActive(!isActive);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setIsActive(true);
+    setAnchorEl(event.currentTarget);
+    setIsMenuOpen(true);
+  };
+
+  const handleFeatureType = (feature: featureType) => {
+    onFeatureSelected(feature);
+    handleClose();
+  };
+  return (
+    <>
+      <Button
+        disableRipple
+        disableElevation
+        sx={{
+          margin: "0px 8px",
+          paddingRight: "12px",
+          textTransform: "none",
+          cursor: "pointer",
+          backgroundColor: isActive ? "#88D4D7" : "initial",
+          color: "black",
+          border: "1px solid lightgrey",
+        }}
+        endIcon={isMenuOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        variant="outlined"
+        onClick={handleClick}
+      >
+        Feature type
+      </Button>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        {["other", "enhancement", "bug", "new feature"].map((type) => (
+          <MenuItem
+            key={type}
+            onClick={() => handleFeatureType(type as featureType)}
+          >
+            {type}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};

client/ecommerce/src/components/Navbar.tsx

@@ -426,7 +426,7 @@ export const Navbar = () => {
               </Button>
 
               <Box sx={{ display: { xs: "none", md: "flex", gap: "5px" } }}>
-                <IconButton
+                <IconButton size="large"
                   disableFocusRipple
                   onClick={handleClickOpen}
                 >

client/ecommerce/src/components/filter-buttons/SortByPriceButton.tsx

@@ -13,7 +13,6 @@ export const SortByPriceButton = ({
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setIsActive(true);
     setAnchorEl(event.currentTarget);
-    console.log(event.currentTarget);
     setIsMenuOpen(true);
   };
   const handleClose = () => {

client/ecommerce/src/components/pages/AdminDashboard.tsx

@@ -9,9 +9,11 @@ import {
 } from "@mui/material";
 import { useFetchAdminNotifications } from "../../hooks/useFetchAdminNotifications";
 import DisplayAdminNotifications from "../DisplayAdminNotifications";
-import { SyntheticEvent, useState } from "react";
+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";
 const Container = styled(Box)({
   backgroundColor: "rgba(37,44,51,0.05)",
   display: "flex",
@@ -28,6 +30,7 @@ const Sidebar = styled(Box)({
 export const AdminDashboard = () => {
   const { data: adminNotifications, isLoading } = useFetchAdminNotifications();
   const [tabValue, setTabValue] = useState("notifications");
+
   const handleTabChange = (e: SyntheticEvent, newValue: string) => {
     setTabValue(newValue);
   };
@@ -68,15 +71,12 @@ export const AdminDashboard = () => {
                   sx={{ textTransform: "none" }}
                   label="Notifications"
                   value="notifications"
-                >
-
-                </Tab>
+                ></Tab>
                 <Tab
                   sx={{ textTransform: "none" }}
                   label="Feedbacks"
                   value="feedbacks"
-                >
-                </Tab>
+                ></Tab>
               </Tabs>
             </Box>
             {tabValue === "notifications" ? (