96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
"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;
|