diff --git a/client/ecommerce/src/App.tsx b/client/ecommerce/src/App.tsx
index cda8f86..9022592 100644
--- a/client/ecommerce/src/App.tsx
+++ b/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() {
+
diff --git a/client/ecommerce/src/components/AdminDashboard/DisplayFeedbackNotifications.tsx b/client/ecommerce/src/components/AdminDashboard/DisplayFeedbackNotifications.tsx
index fd98ffa..9ac3d0f 100644
--- a/client/ecommerce/src/components/AdminDashboard/DisplayFeedbackNotifications.tsx
+++ b/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(
null
);
-
+ const below700 = useMediaQuery(700);
const handleCloseDialog = () => {
setSelectedFeedback(null);
- console.log("zamykanie okna");
};
return (
@@ -33,16 +33,18 @@ export const DisplayFeedbackNotifications = ({
{notification.contactName}
-
- added a feedback {notification.createdAt}
-
+ {below700 ? null : (
+
+ added a feedback {notification.createdAt}
+
+ )}
diff --git a/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx b/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx
index 849c666..fa159a9 100644
--- a/client/ecommerce/src/components/AdminDashboard/FeedbackNotifications.tsx
+++ b/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();
+ 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 ;
@@ -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 && (
+
+
+ {featureType && {featureType}}
+ {featureType ? (
+
+
+
+ ) : null}
+
+
+ {feedbacksSortByFeatureType && (
)}
>
diff --git a/client/ecommerce/src/components/AdminDashboard/FeedbackNotificationsComponents/SortByFeatureButton.tsx b/client/ecommerce/src/components/AdminDashboard/FeedbackNotificationsComponents/SortByFeatureButton.tsx
new file mode 100644
index 0000000..fa966de
--- /dev/null
+++ b/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(false);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ setIsMenuOpen(false);
+ setIsActive(!isActive);
+ };
+
+ const handleClick = (event: React.MouseEvent) => {
+ setIsActive(true);
+ setAnchorEl(event.currentTarget);
+ setIsMenuOpen(true);
+ };
+
+ const handleFeatureType = (feature: featureType) => {
+ onFeatureSelected(feature);
+ handleClose();
+ };
+ return (
+ <>
+ : }
+ variant="outlined"
+ onClick={handleClick}
+ >
+ Feature type
+
+
+ >
+ );
+};
diff --git a/client/ecommerce/src/components/Navbar.tsx b/client/ecommerce/src/components/Navbar.tsx
index b0d1b54..92d444b 100644
--- a/client/ecommerce/src/components/Navbar.tsx
+++ b/client/ecommerce/src/components/Navbar.tsx
@@ -426,7 +426,7 @@ export const Navbar = () => {
-
diff --git a/client/ecommerce/src/components/filter-buttons/SortByPriceButton.tsx b/client/ecommerce/src/components/filter-buttons/SortByPriceButton.tsx
index d694b70..adf704b 100644
--- a/client/ecommerce/src/components/filter-buttons/SortByPriceButton.tsx
+++ b/client/ecommerce/src/components/filter-buttons/SortByPriceButton.tsx
@@ -13,7 +13,6 @@ export const SortByPriceButton = ({
const handleClick = (event: React.MouseEvent) => {
setIsActive(true);
setAnchorEl(event.currentTarget);
- console.log(event.currentTarget);
setIsMenuOpen(true);
};
const handleClose = () => {
diff --git a/client/ecommerce/src/components/pages/AdminDashboard.tsx b/client/ecommerce/src/components/pages/AdminDashboard.tsx
index f8cc5a2..5ebbcc4 100644
--- a/client/ecommerce/src/components/pages/AdminDashboard.tsx
+++ b/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"
- >
-
-
+ >
-
+ >
{tabValue === "notifications" ? (