classify web

components/PagesComponent/Reviews/Reviews.jsx

@@ -0,0 +1,90 @@
+"use client";
+import { t } from "@/utils";
+import RatingsSummary from "./RatingsSummary";
+import RatingsSummarySkeleton from "./RatingsSummarySkeleton";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { getMyReviewsApi } from "@/utils/api";
+import MyReviewsCard from "./MyReviewsCard.jsx";
+import MyReviewsCardSkeleton from "@/components/PagesComponent/Reviews/MyReviewsCardSkeleton";
+import { Button } from "@/components/ui/button";
+import NoData from "@/components/EmptyStates/NoData";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+
+const Reviews = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [MyReviews, setMyReviews] = useState([]);
+  const [AverageRating, setAverageRating] = useState("");
+  const [CurrentPage, setCurrentPage] = useState(1);
+  const [ReviewHasMore, setReviewHasMore] = useState(false);
+  const [IsLoading, setIsLoading] = useState(false);
+  const [IsLoadMore, setIsLoadMore] = useState(false);
+
+  const getReveiws = async (page) => {
+    try {
+      if (page === 1) {
+        setIsLoading(true);
+      }
+      const res = await getMyReviewsApi.getMyReviews({ page });
+      setAverageRating(res?.data?.data?.average_rating);
+      setMyReviews(res?.data?.data?.ratings?.data);
+      setCurrentPage(res?.data?.data?.ratings?.current_page);
+      if (
+        res?.data?.data?.ratings?.current_page <
+        res?.data?.data?.ratings?.last_page
+      ) {
+        setReviewHasMore(true);
+      }
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    getReveiws(1);
+  }, [CurrentLanguage?.id]);
+
+  const handleReviewLoadMore = () => {
+    setIsLoadMore(true);
+    getReveiws(CurrentPage + 1);
+  };
+
+  return IsLoading ? (
+    <>
+      <RatingsSummarySkeleton />
+      <MyReviewsCardSkeleton />
+    </>
+  ) : MyReviews && MyReviews.length > 0 ? (
+    <>
+      <RatingsSummary averageRating={AverageRating} reviews={MyReviews} />
+      <div className="mt-[30px] p-2 sm:p-4 bg-muted rounded-xl flex flex-col gap-[30px]">
+        {MyReviews?.map((rating) => (
+          <MyReviewsCard
+            rating={rating}
+            key={rating?.id}
+            setMyReviews={setMyReviews}
+          />
+        ))}
+      </div>
+      {ReviewHasMore && (
+        <div className="text-center mt-6">
+          <Button
+            variant="outline"
+            className="text-sm sm:text-base text-primary w-[256px]"
+            disabled={IsLoading || IsLoadMore}
+            onClick={handleReviewLoadMore}
+          >
+            {IsLoadMore ? t("loading") : t("loadMore")}
+          </Button>
+        </div>
+      )}
+    </>
+  ) : (
+    <NoData name={t("reviews")} />
+  );
+};
+
+export default Reviews;