classify web

components/PagesComponent/Home/AllItems.jsx

@@ -0,0 +1,165 @@
+import ProductCard from "@/components/Common/ProductCard";
+import NoData from "@/components/EmptyStates/NoData";
+import AllItemsSkeleton from "@/components/PagesComponent/Home/AllItemsSkeleton";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { resetBreadcrumb } from "@/redux/reducer/breadCrumbSlice";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { t } from "@/utils";
+import { allItemApi } from "@/utils/api";
+import { Info, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+const AllItems = ({ cityData, KmRange }) => {
+  const dispatch = useDispatch();
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const [AllItem, setAllItem] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadMore, setIsLoadMore] = useState(false);
+
+  // State to track if we should show location alert
+  const [locationAlertMessage, setLocationAlertMessage] = useState("");
+
+  const getAllItemData = async (page) => {
+    if (page === 1) {
+      setIsLoading(true);
+    }
+    try {
+      const params = {
+        page,
+        current_page: "home",
+      };
+      if (Number(KmRange) > 0 && (cityData?.areaId || cityData?.city)) {
+        // Add location-based parameters for non-demo mode
+        params.radius = KmRange;
+        params.latitude = cityData.lat;
+        params.longitude = cityData.long;
+      } else {
+        // Add location hierarchy parameters for non-demo mode
+        if (cityData?.areaId) {
+          params.area_id = cityData.areaId;
+        } else if (cityData?.city) {
+          params.city = cityData.city;
+        } else if (cityData?.state) {
+          params.state = cityData.state;
+        } else if (cityData?.country) {
+          params.country = cityData.country;
+        }
+      }
+
+      const response = await allItemApi.getItems(params);
+      if (response.data?.error === true) {
+        throw new Error(response.data?.message);
+      }
+
+      const apiMessage = response.data.message;
+      // Check if message indicates no items in selected location
+      const isNoItemsInLocation = apiMessage
+        ?.toLowerCase()
+        .includes("no ads found");
+
+      // Show alert only if there are items but from different location
+      if (isNoItemsInLocation && response?.data?.data?.data?.length > 0) {
+        setLocationAlertMessage(apiMessage);
+      } else {
+        setLocationAlertMessage("");
+      }
+
+      if (response?.data?.data?.data?.length > 0) {
+        const data = response?.data?.data?.data;
+        if (page === 1) {
+          setAllItem(data);
+        } else {
+          setAllItem((prevData) => [...prevData, ...data]);
+        }
+        const currentPage = response?.data?.data?.current_page;
+        const lastPage = response?.data?.data?.last_page;
+        setHasMore(currentPage < lastPage);
+        setCurrentPage(currentPage);
+      } else {
+        setAllItem([]);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+    } finally {
+      setIsLoading(false);
+      setIsLoadMore(false);
+    }
+  };
+
+  useEffect(() => {
+    getAllItemData(1);
+  }, [cityData.lat, cityData.long, KmRange, CurrentLanguage?.id]);
+
+  const handleLoadMore = () => {
+    setIsLoadMore(true);
+    getAllItemData(currentPage + 1);
+  };
+
+  useEffect(() => {
+    // reset breadcrumb path when in home page
+    dispatch(resetBreadcrumb());
+  }, []);
+
+  const handleLikeAllData = (id) => {
+    const updatedItems = AllItem.map((item) => {
+      if (item.id === id) {
+        return { ...item, is_liked: !item.is_liked };
+      }
+      return item;
+    });
+    setAllItem(updatedItems);
+  };
+
+  return (
+    <section className="container mt-12">
+      <h5 className="text-xl sm:text-2xl font-medium">
+        {t("allAdvertisements")}
+      </h5>
+
+      {/* Location Alert - shows when items are from different location */}
+      {locationAlertMessage && AllItem.length > 0 && (
+        <Alert variant="warning" className="mt-3">
+          <Info className="size-4" />
+          <AlertTitle>{locationAlertMessage}</AlertTitle>
+          <AlertDescription className="sr-only"></AlertDescription>
+        </Alert>
+      )}
+
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mt-6">
+        {isLoading ? (
+          <AllItemsSkeleton />
+        ) : AllItem && AllItem.length > 0 ? (
+          AllItem?.map((item) => (
+            <ProductCard
+              key={item?.id}
+              item={item}
+              handleLike={handleLikeAllData}
+            />
+          ))
+        ) : (
+          <div className="col-span-full">
+            <NoData name={t("advertisement")} />
+          </div>
+        )}
+      </div>
+
+      {AllItem && AllItem.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>
+      )}
+    </section>
+  );
+};
+
+export default AllItems;