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 ( + <> + + + {["other", "enhancement", "bug", "new feature"].map((type) => ( + handleFeatureType(type as featureType)} + > + {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" ? (