fix:news all filter, pagination collapse

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(
-  const [searchValue, setSearchValue] = useState(search || "");
+    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(() => {
+  const getCategoryId = async () => {
-    setSearch(searchParams.get("search") || "");
+    if (categoryIds) {
-    setSearchValue(searchParams.get("search") || "");
+      const res = await getCategoryById(Number(selectedCategoryId));
-    console.log(
+      setCategorySearch(res?.data?.data.title);
-      "ini",
+      setCategories([res?.data?.data]);
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
+      setCount(1);
-    );
+    }
-    setSelectedMonth(
+  };
-      searchParams.get("month") ? Number(searchParams.get("month")) : null
-    );
-  }, [searchParams]);
-
-  useEffect(() => {
-    getArticle();
-  }, [page, category, search, searchParams]);
 
   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,11 +144,15 @@ export default function ListNews() {
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
-      categoryIds: categoryIds ? categoryIds : "",
+      categoryIds: selectedCategoryId,
-      startDate: selectedMonth
+      // categoryIds:
+      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
+      startDate:
+        selectedDate && selectedMonth !== null
           ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
           : "",
-      endDate: selectedMonth
+      endDate:
+        selectedDate && selectedMonth !== null
           ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
           : "",
     };
@@ -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,14 +287,23 @@ 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>
+            Cari
-          </Link>
+          </Button>
+          {/* </Link> */}
         </div>
+        {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"
@@ -330,8 +355,18 @@ export default function ListNews() {
               ))}
             </section>
             <div className="flex justify-center mt-5">
-          <Pagination page={page} total={totalPage} onChange={setPage} />
+              <Pagination
+                page={page}
+                total={totalPage}
+                onChange={setPage}
+                classNames={{
+                  item: "w-fit px-3",
+                  cursor: "w-fit px-3 text-center",
+                }}
+              />
             </div>
+          </>
+        )}
       </div>
     </div>
   );