create separate objects for query keys

client/ecommerce/src/api/axios.tsx

@@ -287,9 +287,11 @@ export const addAdminNotification = async (dto: AdminNotification) => {
   return response.data;
 };
 
-export const getAdminNotifications = async () => {
-  const response = await axiosApi.get("admin-notifications");
-  return response.data as AdminNotification[];
+export const getAdminNotifications = async (): Promise<AdminNotification[]> => {
+  const response = await axiosApi.get<AdminNotification[]>(
+    "admin-notifications"
+  );
+  return response.data;
 };
 
 export const addFeedback = async (dto: FeedbackFormData) => {

client/ecommerce/src/api/requests/productNotifications.ts

@@ -0,0 +1,8 @@
+
+
+export const ProductNotificationsKeys = {
+    all: ['productNotifications'] as const,
+    list: () => [...ProductNotificationsKeys.all, 'list'] as const,
+    details: () => [...ProductNotificationsKeys.all, 'detail'] as const,
+
+}   

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

@@ -12,7 +12,7 @@ import {
 import AddIcon from "@mui/icons-material/Add";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { ChangeEvent, useState } from "react";
-import { addAdminNotification, addProduct } from "../../api/axios";
+import {  addProduct } from "../../api/axios";
 import { useMutation } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { Redirect } from "wouter";

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

@@ -1,14 +1,13 @@
-import { useLocation, useParams } from "wouter";
+import { useParams } from "wouter";
 import { useSingleProduct } from "../../hooks/useSingleProduct";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { useGivenUserProducts } from "../../hooks/useGivenUserProducts";
 import { DisplayUserProducts } from "../DisplayUserProducts";
 import { ProductWithImageAndUser } from "../../types/types";
-import { DisplayUserInfo } from "../ProductPage/DisplayUserInfo";
 import { sendProductInfoToCheckout } from "../../api/axios";
 import { useStripe } from "@stripe/react-stripe-js";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useUserContext } from "../../contexts/UserContext";
 import { useDeleteProduct } from "../../hooks/useDeleteProduct";
 import { useAddAdminNotification } from "../../hooks/useAddAdminNotification";
@@ -38,9 +37,7 @@ export const Product = () => {
   const stripe = useStripe();
   const { user } = useUserContext();
   const below960 = useMediaQuery(960);
-  const below800 = useMediaQuery(800);
   const params = useParams();
-  const [, setLocation] = useLocation();
   const productId = params?.productId;
   const {
     data: product,
@@ -152,7 +149,6 @@ export const Product = () => {
           }}
         >
           <DisplayUserProducts
-            setLocation={setLocation}
             products={productsWithoutMainOne as ProductWithImageAndUser[]}
           />
         </Box>

client/ecommerce/src/hooks/useDeleteProductNotificationsMutation.ts

@@ -1,14 +1,16 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { deleteProductNotifications } from "../api/axios";
 import toast from "react-hot-toast";
+import { ProductNotificationsKeys } from "../api/requests/productNotifications";
 
 export const useDeleteProductNotificationsMutation = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationKey: ["productNotifications", "delete"],
     mutationFn: deleteProductNotifications,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["productNotifications"] });
+      queryClient.invalidateQueries({
+        queryKey: ProductNotificationsKeys.list(),
+      });
       toast.success("Notifications cleared");
     },
     onError: () => {

client/ecommerce/src/hooks/useMarkProductNotificationAsRead.ts

@@ -1,15 +1,16 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useUserContext } from "../contexts/UserContext";
 import { markProductNotificationsAsRead } from "../api/axios";
+import { ProductNotificationsKeys } from "../api/requests/productNotifications";
 
 export const useMarkProductNotificationAsRead = () => {
-  const { user } = useUserContext();
   const queryClient = useQueryClient();
   return useMutation({
-    mutationKey: ["productNotifications", "update", user.id],
     mutationFn: markProductNotificationsAsRead,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["productNotifications"] });
+      queryClient.invalidateQueries({
+        queryKey: ProductNotificationsKeys.list(),
+      });
     },
     onError: (err) => {
       console.log(err);

client/ecommerce/src/hooks/useProductNotifications.ts

@@ -1,9 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { fetchProductNotifications } from "../api/axios";
+import { ProductNotificationsKeys } from "../api/requests/productNotifications";
 
 export const useProductNotifications = (userId: number) => {
   return useQuery({
-    queryKey: [`productNotifications`],
+    queryKey: ProductNotificationsKeys.list(),
     queryFn: fetchProductNotifications,
     enabled: !!userId,
   });

client/ecommerce/src/routes/Routes.tsx

@@ -185,7 +185,9 @@ export const Routes = () => {
           </Suspense>
         </Route>
       </Layout>
-      <Route path="/:rest*">{() => <Redirect to="/" />}</Route>
+      <Route>
+        <Redirect to="/login" />
+      </Route>
     </Switch>
   );
 };

client/ecommerce/src/utils/calculateGridWidth.ts

@@ -19,16 +19,16 @@ export const calculateGridWidth = (
   } else if (below700) {
     if (totalProducts! > 4) {
       return 6;
-    } else if(totalProducts === 1) {
-      return 12
+    } else if (totalProducts === 1) {
+      return 12;
     } else {
-        return 6
+      return 6;
     }
   } else if (below1050) {
     if (totalProducts == 2) {
       return 6;
     } else if (totalProducts == 1) {
-      return 12
+      return 12;
     } else {
       return 4;
     }