Fixed Eslint Error and added precommit to husky

Author: lovoj-app

.husky/pre-commit

@@ -1 +1,2 @@
+bun run lint
 bun run prettier

app/(dashboard)/admin/products/[id]/page.tsx

@@ -1,8 +1,8 @@
 'use client';
-import { CustomButton, DashboardSidebar, SectionTitle } from '@/components';
+import { DashboardSidebar } from '@/components';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import {
   convertCategoryNameToURLFriendly as convertSlugToURLFriendly,
@@ -102,7 +102,7 @@ const DashboardProductDetails = ({
   };
 
   // fetching main product data including other product images
-  const fetchProductData = async () => {
+  const fetchProductData = useCallback(async () => {
     fetch(`http://localhost:3001/api/products/${id}`)
       .then((res) => {
         return res.json();
@@ -116,7 +116,8 @@ const DashboardProductDetails = ({
     });
     const images = await imagesData.json();
     setOtherImages((currentImages) => images);
-  };
+
+  }, [id])
 
   // fetching all product categories. It will be used for displaying categories in select category input
   const fetchCategories = async () => {
@@ -132,7 +133,7 @@ const DashboardProductDetails = ({
   useEffect(() => {
     fetchCategories();
     fetchProductData();
-  }, [id]);
+  }, [fetchProductData]);
 
   return (
     <div className="bg-white flex justify-start max-w-screen-2xl mx-auto xl:h-full max-xl:flex-col max-xl:gap-y-5">
@@ -265,7 +266,7 @@ const DashboardProductDetails = ({
             type="file"
             className="file-input file-input-bordered file-input-lg w-full max-w-sm"
             onChange={(e) => {
-              const selectedFile = e.target.files[0];
+              const selectedFile = e?.target?.files[0];
 
               if (selectedFile) {
                 uploadFile(selectedFile);

app/checkout/page.tsx

@@ -171,7 +171,7 @@ const CheckoutPage = () => {
       toast.error("You don't have items in your cart");
       router.push('/cart');
     }
-  }, []);
+  }, [products.length, router]);
 
   return (
     <div className="bg-white">

components/AddToWishlistBtn.tsx

@@ -12,7 +12,7 @@
 
 import { useWishlistStore } from '@/app/_zustand/wishlistStore';
 import { useSession } from 'next-auth/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaHeartCrack } from 'react-icons/fa6';
 import { FaHeart } from 'react-icons/fa6';
@@ -84,7 +84,7 @@ const AddToWishlistBtn = ({ product, slug }: AddToWishlistBtnProps) => {
     }
   };
 
-  const isInWishlist = async () => {
+  const isInWishlist = useCallback(() => {
     // sending fetch request to get user id because we will need it for cheching whether the product is in wishlist
     if (session?.user?.email) {
       fetch(`http://localhost:3001/api/users/email/${session?.user?.email}`, {
@@ -106,11 +106,12 @@ const AddToWishlistBtn = ({ product, slug }: AddToWishlistBtnProps) => {
           }
         });
     }
-  };
+
+  }, [session?.user?.email, product?.id])
 
   useEffect(() => {
     isInWishlist();
-  }, [session?.user?.email, wishlist]);
+  }, [isInWishlist]);
 
   return (
     <>

components/Filters.tsx

@@ -47,7 +47,7 @@ const Filters = () => {
     params.set('sort', sortBy);
     params.set('page', page.toString());
     replace(`${pathname}?${params}`);
-  }, [inputCategory, sortBy, page]);
+  }, [inputCategory, sortBy, page, pathname, replace]);
 
   return (
     <div>

components/Header.tsx

@@ -10,7 +10,7 @@
 
 'use client';
 import { usePathname } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import HeaderTop from './HeaderTop';
 import Image from 'next/image';
 import SearchInput from './SearchInput';
@@ -34,7 +34,8 @@ const Header = () => {
   };
 
   // getting all wishlist items by user id
-  const getWishlistByUserId = async (id: string) => {
+  const getWishlistByUserId = useCallback(async (id: string) => {
+
     const response = await fetch(`http://localhost:3001/api/wishlist/${id}`, {
       cache: 'no-store',
     });
@@ -60,10 +61,11 @@ const Header = () => {
     );
 
     setWishlist(productArray);
-  };
+
+  }, [setWishlist])
 
   // getting user by email so I can get his user id
-  const getUserByEmail = async () => {
+  const getUserByEmail = useCallback(() => {
     if (session?.user?.email) {
       fetch(`http://localhost:3001/api/users/email/${session?.user?.email}`, {
         cache: 'no-store',
@@ -73,19 +75,20 @@ const Header = () => {
           getWishlistByUserId(data?.id);
         });
     }
-  };
+
+  }, [session?.user?.email, getWishlistByUserId])
 
   useEffect(() => {
     getUserByEmail();
-  }, [session?.user?.email, wishlist.length]);
+  }, [getUserByEmail, getWishlistByUserId]);
 
   return (
     <header className="bg-white">
       <HeaderTop />
       {pathname.startsWith('/admin') === false && (
         <div className="h-32 bg-white flex items-center justify-between px-16 max-[1320px]:px-16 max-md:px-6 max-lg:flex-col max-lg:gap-y-7 max-lg:justify-center max-lg:h-60 max-w-screen-2xl mx-auto">
           <Link href="/">
-            <img
+            <Image
               src="/logo v1 svg.svg"
               width={300}
               height={300}

components/SimpleSlider.tsx

@@ -14,6 +14,7 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import Link from 'next/link';
+import Image from "next/image"
 
 function SimpleSlider() {
   const settings = {
@@ -45,7 +46,10 @@ function SimpleSlider() {
               Shop now
             </Link>
           </div>
-          <img src="/slider image 1.webp" alt="slider 1" className="h-full" />
+          <Image
+            width={300}
+            height={300}
+            src="/slider image 1.webp" alt="slider 1" className="h-full" />
         </div>
         <div className="h-[500px] max-lg:h-[400px] max-md:h-[250px] max-[500px]:h-[200px] max-[400px]:h-[150px] relative">
           <div className="absolute left-[50%] translate-x-[-50%] translate-y-[30%] h-full text-center max-lg:translate-y-[25%] max-md:translate-y-[20%] max-sm:hidden">
@@ -66,7 +70,10 @@ function SimpleSlider() {
               Shop now
             </Link>
           </div>
-          <img src="/slider image 2.webp" alt="slider 1" className="h-full" />
+          <Image
+            width={400}
+            height={300}
+            src="/slider image 2.webp" alt="slider 1" className="h-full" />
         </div>
       </Slider>
     </div>

components/WishItem.tsx

@@ -13,7 +13,7 @@ import { useWishlistStore } from '@/app/_zustand/wishlistStore';
 import { revalidatePath } from 'next/cache';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaHeartCrack } from 'react-icons/fa6';
 import { deleteWishItem } from '@/app/actions';
@@ -41,17 +41,7 @@ const WishItem = ({
     router.push(`/product/${slug}`);
   };
 
-  const getUserByEmail = async () => {
-    if (session?.user?.email) {
-      fetch(`http://localhost:3001/api/users/email/${session?.user?.email}`, {
-        cache: 'no-store',
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setUserId(data?.id);
-        });
-    }
-  };
+
 
   const deleteItemFromWishlist = async (productId: string) => {
     if (userId) {
@@ -66,9 +56,21 @@ const WishItem = ({
     }
   };
 
+  const getUserByEmail = useCallback(() => {
+    if (session?.user?.email) {
+      fetch(`http://localhost:3001/api/users/email/${session?.user?.email}`, {
+        cache: 'no-store',
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          setUserId(data?.id);
+        });
+    }
+  }, [session?.user?.email])
+
   useEffect(() => {
     getUserByEmail();
-  }, [session?.user?.email]);
+  }, [getUserByEmail]);
 
   return (
     <tr className="hover:bg-gray-100 cursor-pointer">

components/modules/cart/index.tsx

@@ -4,7 +4,8 @@ import { useProductStore } from '@/app/_zustand/store';
 import toast from 'react-hot-toast';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FaCircleQuestion } from 'react-icons/fa6';
+import { FaCheck, FaCircleQuestion, FaClock, FaXmark } from 'react-icons/fa6';
+import QuantityInputCart from '@/components/QuantityInputCart';
 
 export const CartModule = () => {
   const { products, removeFromCart, calculateTotals, total } =

components/modules/wishlist/index.tsx

@@ -1,58 +1,52 @@
 'use client';
 import { useWishlistStore } from '@/app/_zustand/wishlistStore';
 import WishItem from '@/components/WishItem';
-import { nanoid } from 'nanoid';
 import { useSession } from 'next-auth/react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 export const WishlistModule = () => {
-  const { data: session, status } = useSession();
+  const { data: session } = useSession();
   const { wishlist, setWishlist } = useWishlistStore();
 
-  const getWishlistByUserId = async (id: string) => {
-    const response = await fetch(`http://localhost:3001/api/wishlist/${id}`, {
-      cache: 'no-store',
-    });
-    const wishlist = await response.json();
-
-    const productArray: {
-      id: string;
-      title: string;
-      price: number;
-      image: string;
-      slug: string;
-      stockAvailabillity: number;
-    }[] = [];
+  const getWishlistByUserId = useCallback(
+    async (id: string) => {
+      const response = await fetch(`http://localhost:3001/api/wishlist/${id}`, {
+        cache: 'no-store',
+      });
+      const wishlistData = await response.json();
 
-    wishlist.map((item: any) =>
-      productArray.push({
+      const productArray = wishlistData.map((item: any) => ({
         id: item?.product?.id,
         title: item?.product?.title,
         price: item?.product?.price,
         image: item?.product?.mainImage,
         slug: item?.product?.slug,
         stockAvailabillity: item?.product?.inStock,
-      }),
-    );
+      }));
 
-    setWishlist(productArray);
-  };
+      setWishlist(productArray);
+    },
+    [setWishlist],
+  );
 
-  const getUserByEmail = async () => {
+  const getUserByEmail = useCallback(() => {
     if (session?.user?.email) {
-      fetch(`http://localhost:3001/api/users/email/${session?.user?.email}`, {
+      fetch(`http://localhost:3001/api/users/email/${session.user.email}`, {
         cache: 'no-store',
       })
         .then((response) => response.json())
         .then((data) => {
-          getWishlistByUserId(data?.id);
+          if (data?.id) {
+            getWishlistByUserId(data.id);
+          }
         });
     }
-  };
+  }, [session?.user?.email, getWishlistByUserId]);
 
   useEffect(() => {
     getUserByEmail();
-  }, [session?.user?.email, wishlist.length]);
+  }, [getUserByEmail]);
+
   return (
     <>
       {wishlist && wishlist.length === 0 ? (
@@ -73,18 +67,17 @@ export const WishlistModule = () => {
                 </tr>
               </thead>
               <tbody>
-                {wishlist &&
-                  wishlist?.map((item) => (
-                    <WishItem
-                      id={item?.id}
-                      title={item?.title}
-                      price={item?.price}
-                      image={item?.image}
-                      slug={item?.slug}
-                      stockAvailabillity={item?.stockAvailabillity}
-                      key={nanoid()}
-                    />
-                  ))}
+                {wishlist?.map((item) => (
+                  <WishItem
+                    key={item.id} // ✅ stable key
+                    id={item.id}
+                    title={item.title}
+                    price={item.price}
+                    image={item.image}
+                    slug={item.slug}
+                    stockAvailabillity={item.stockAvailabillity}
+                  />
+                ))}
               </tbody>
             </table>
           </div>