From a7eef2e1dc51be712f21016761d2cae4ac2827ca Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sat, 31 May 2025 20:56:53 +0700
Subject: [PATCH] fix:news all filter, pagination collapse

---
 components/main/detail/list-news.tsx | 201 ++++++++++++++++-----------
 1 file changed, 118 insertions(+), 83 deletions(-)

diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index d2a7411..9e6fd28 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -48,6 +48,7 @@ import {
 } from "next/navigation";
 import { close, loading } from "@/config/swal";
 import { format } from "date-fns";
+import { getCategoryById } from "@/services/master-categories";
 
 const months = [
   "Jan",
@@ -76,11 +77,16 @@ export default function ListNews() {
   const searchParams = useSearchParams();
   const categoryIds = searchParams.get("category_id");
   const [categories, setCategories] = useState<any>([]);
-  const [search, setSearch] = useState(searchParams.get("search") || "");
-  const [searchValue, setSearchValue] = useState(search || "");
+  const [searchValue, setSearchValue] = useState(
+    searchParams.get("search") || ""
+  );
   const [categorySearch, setCategorySearch] = useState("");
   const [debouncedValue, setDebouncedValue] = useState("");
-  const [selectedCategoryId, setSelectedCategoryId] = useState<any>();
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
+    categoryIds ? categoryIds : ""
+  );
+
+  const [count, setCount] = useState(0);
 
   const today = new Date();
   const [year, setYear] = useState(today.getFullYear());
@@ -95,26 +101,26 @@ export default function ListNews() {
     setSelectedDate(new Date(year, monthIndex, 1));
   };
 
-  useEffect(() => {
-    setSearch(searchParams.get("search") || "");
-    setSearchValue(searchParams.get("search") || "");
-    console.log(
-      "ini",
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
-    );
-    setSelectedMonth(
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
-    );
-  }, [searchParams]);
-
-  useEffect(() => {
-    getArticle();
-  }, [page, category, search, searchParams]);
+  const getCategoryId = async () => {
+    if (categoryIds) {
+      const res = await getCategoryById(Number(selectedCategoryId));
+      setCategorySearch(res?.data?.data.title);
+      setCategories([res?.data?.data]);
+      setCount(1);
+    }
+  };
 
   useEffect(() => {
     getCategory();
+    if (categoryIds && count == 0) {
+      getCategoryId();
+    }
   }, [debouncedValue]);
 
+  useEffect(() => {
+    getArticle();
+  }, [page]);
+
   const getCategory = async () => {
     const res = await getArticleByCategoryLanding({
       limit: debouncedValue === "" ? "5" : "",
@@ -128,7 +134,6 @@ export default function ListNews() {
   async function getArticle() {
     loading();
     // topRef.current?.scrollIntoView({ behavior: "smooth" });
-
     const req = {
       page: page,
       search: searchValue || "",
@@ -139,13 +144,17 @@ export default function ListNews() {
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
-      categoryIds: categoryIds ? categoryIds : "",
-      startDate: selectedMonth
-        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
-        : "",
-      endDate: selectedMonth
-        ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
-        : "",
+      categoryIds: selectedCategoryId,
+      // categoryIds:
+      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
+      startDate:
+        selectedDate && selectedMonth !== null
+          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
+          : "",
+      endDate:
+        selectedDate && selectedMonth !== null
+          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
+          : "",
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
@@ -163,6 +172,9 @@ export default function ListNews() {
 
   const onInputChange = (value: string) => {
     setCategorySearch(value);
+    if (value === "") {
+      setSelectedCategoryId("");
+    }
   };
 
   return (
@@ -202,18 +214,22 @@ export default function ListNews() {
               labelPlacement="outside"
               variant="bordered"
               placeholder="Kategori"
-              classNames={{ base: "!mt-0" }}
               inputValue={categorySearch}
+              // selectedKey={selectedCategoryId}
               onInputChange={onInputChange}
               onSelectionChange={(e) => setSelectedCategoryId(e)}
               inputProps={{ classNames: { inputWrapper: "border-1" } }}
+              defaultItems={categories}
             >
-              {categories.length > 0 &&
+              {/* {categories.length > 0 &&
                 categories.map((category: any) => (
-                  <AutocompleteItem key={category.id}>
+                  <AutocompleteItem key={`${category.id}`}>
                     {category.title}
                   </AutocompleteItem>
-                ))}
+                ))} */}
+              {(item: any) => (
+                <AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
+              )}
             </Autocomplete>
           </div>
           <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2">
@@ -271,67 +287,86 @@ export default function ListNews() {
               </a>
             )}
           </div>
-          <Link
+          {/* <Link
             href={`/news/all?search=${searchValue}&category_id=${
               selectedCategoryId || ""
             }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
+          > */}
+          <Button
+            onPress={getArticle}
+            className="bg-red-600 text-white w-[80px]"
           >
-            <Button className="bg-red-600 text-white w-[80px]">Cari</Button>
-          </Link>
+            Cari
+          </Button>
+          {/* </Link> */}
         </div>
-        <section
-          id="content"
-          className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
-        >
-          {article?.map((news: any) => (
-            <Link
-              href={`/news/detail/${news?.id}-${news?.slug}`}
-              key={news?.id}
+        {article?.length < 1 || !article ? (
+          <div className="flex justify-center items-center">Tidak ada Data</div>
+        ) : (
+          <>
+            <section
+              id="content"
+              className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
             >
-              <div className="">
-                <Image
-                  src={
-                    news.thumbnailUrl == ""
-                      ? "/no-image.jpg"
-                      : news.thumbnailUrl
-                  }
-                  width={1920}
-                  alt="thumbnail"
-                  className="rounded-b-none h-[27vh] w-full object-cover"
-                />
-              </div>
-              <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
-                <div className="font-semibold text-lg">{news?.title}</div>
-                <div className="flex flex-row items-center py-1 text-[10px] gap-2">
-                  <div className="flex flex-row items-center gap-1">
-                    <CalendarIcon size={18} />
-                    <p>{formatMonthString(news?.createdAt)}</p>
+              {article?.map((news: any) => (
+                <Link
+                  href={`/news/detail/${news?.id}-${news?.slug}`}
+                  key={news?.id}
+                >
+                  <div className="">
+                    <Image
+                      src={
+                        news.thumbnailUrl == ""
+                          ? "/no-image.jpg"
+                          : news.thumbnailUrl
+                      }
+                      width={1920}
+                      alt="thumbnail"
+                      className="rounded-b-none h-[27vh] w-full object-cover"
+                    />
                   </div>
-                  <div className="flex flex-row items-center">
-                    <ClockIcon size={18} />
-                    <p>{`${new Date(news?.createdAt)
-                      .getHours()
-                      .toString()
-                      .padStart(2, "0")}:${new Date(news?.createdAt)
-                      .getMinutes()
-                      .toString()
-                      .padStart(2, "0")}`}</p>
+                  <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
+                    <div className="font-semibold text-lg">{news?.title}</div>
+                    <div className="flex flex-row items-center py-1 text-[10px] gap-2">
+                      <div className="flex flex-row items-center gap-1">
+                        <CalendarIcon size={18} />
+                        <p>{formatMonthString(news?.createdAt)}</p>
+                      </div>
+                      <div className="flex flex-row items-center">
+                        <ClockIcon size={18} />
+                        <p>{`${new Date(news?.createdAt)
+                          .getHours()
+                          .toString()
+                          .padStart(2, "0")}:${new Date(news?.createdAt)
+                          .getMinutes()
+                          .toString()
+                          .padStart(2, "0")}`}</p>
+                      </div>
+                      <div className="flex flex-row items-center gap-1">
+                        <UserIcon size={14} />
+                        <p>{news?.createdByName}</p>
+                      </div>
+                    </div>
+                    <div className="text-sm">
+                      {textEllipsis(htmlToString(news?.description), 165)}
+                    </div>
                   </div>
-                  <div className="flex flex-row items-center gap-1">
-                    <UserIcon size={14} />
-                    <p>{news?.createdByName}</p>
-                  </div>
-                </div>
-                <div className="text-sm">
-                  {textEllipsis(htmlToString(news?.description), 165)}
-                </div>
-              </div>
-            </Link>
-          ))}
-        </section>
-        <div className="flex justify-center mt-5">
-          <Pagination page={page} total={totalPage} onChange={setPage} />
-        </div>
+                </Link>
+              ))}
+            </section>
+            <div className="flex justify-center mt-5">
+              <Pagination
+                page={page}
+                total={totalPage}
+                onChange={setPage}
+                classNames={{
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3 text-center",
+                }}
+              />
+            </div>
+          </>
+        )}
       </div>
     </div>
   );