classify web

components/PagesComponent/Favorites/Favorites.jsx

@@ -0,0 +1,95 @@
+"use client";
+import ProductCard from "@/components/Common/ProductCard";
+import NoData from "@/components/EmptyStates/NoData";
+import ProductCardSkeleton from "@/components/Common/ProductCardSkeleton";
+import { Button } from "@/components/ui/button";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { getFavouriteApi } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+const Favorites = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [favoritesData, setFavoriteData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [IsLoadMore, setIsLoadMore] = useState(false);
+
+  const fetchFavoriteItems = async (page) => {
+    try {
+      if (page === 1) {
+        setIsLoading(true);
+      }
+      const response = await getFavouriteApi.getFavouriteApi({ page });
+      const data = response?.data?.data?.data;
+      if (page === 1) {
+        setFavoriteData(data);
+      } else {
+        setFavoriteData((prevData) => [...prevData, ...data]);
+      }
+
+      setCurrentPage(response?.data?.data.current_page);
+
+      if (response?.data?.data.current_page < response?.data?.data.last_page) {
+        setHasMore(true);
+      } else {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFavoriteItems(currentPage);
+  }, [currentPage, CurrentLanguage.id]);
+
+  const handleLoadMore = () => {
+    setIsLoadMore(true);
+    setCurrentPage((prevPage) => prevPage + 1);
+  };
+
+  const handleLike = (id) => {
+    fetchFavoriteItems(1);
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 lg:grid-cols-2 gap-3 sm:gap-6">
+        {isLoading ? (
+          [...Array(12)].map((_, index) => <ProductCardSkeleton key={index} />)
+        ) : favoritesData && favoritesData.length > 0 ? (
+          favoritesData?.map(
+            (fav) =>
+              fav?.is_liked && (
+                <ProductCard key={fav?.id} item={fav} handleLike={handleLike} />
+              )
+          )
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("favorites")} />
+          </div>
+        )}
+      </div>
+      {favoritesData && favoritesData.length > 0 && hasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={isLoading || IsLoadMore}
+            onClick={handleLoadMore}
+          >
+            {IsLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Favorites;