From 70ac77dba44386776239bfb08bb4c86a0a4fc1fd Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 2 Jun 2025 12:18:56 +0700
Subject: [PATCH] fix:category landing

---
 components/main/detail/list-news.tsx | 323 ++++++++++++++-------------
 components/page/detail-news.tsx      |  31 ++-
 components/page/related-news.tsx     |   4 +-
 3 files changed, 191 insertions(+), 167 deletions(-)

diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index 8fd2432..b578d0f 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -29,7 +29,7 @@ import {
   UserIcon,
 } from "../../icons";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   getArticleByCategoryLanding,
   getListArticle,
@@ -49,6 +49,7 @@ import {
 import { close, loading } from "@/config/swal";
 import { format } from "date-fns";
 import { getCategoryById } from "@/services/master-categories";
+import AsyncSelect from "react-select/async";
 
 const months = [
   "Jan",
@@ -81,12 +82,7 @@ export default function ListNews() {
     searchParams.get("search") || ""
   );
   const [categorySearch, setCategorySearch] = useState("");
-  const [debouncedValue, setDebouncedValue] = useState("");
-  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
-    categoryIds ? categoryIds : ""
-  );
-
-  const [count, setCount] = useState(0);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<any>([]);
 
   const today = new Date();
   const [year, setYear] = useState(today.getFullYear());
@@ -101,42 +97,43 @@ export default function ListNews() {
     setSelectedDate(new Date(year, monthIndex, 1));
   };
 
-  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();
+    const search = searchParams.get("search");
+    const category = searchParams.get("category_id");
+    if (searchParams.get("search")) {
+      setSearchValue(String(searchParams.get("search")));
+      getArticle({ title: String(search) });
     }
-  }, [debouncedValue]);
+
+    if (category && category !== "") {
+      getCategoryFromQueries(category.split(","));
+    }
+  }, [searchParams]);
+
+  const getCategoryFromQueries = async (category: string[]) => {
+    const temp = [];
+    for (const element of category) {
+      const res = await getCategoryById(Number(element));
+      if (res?.data?.data) {
+        temp.push(res?.data?.data);
+      }
+    }
+
+    const setup = setupCategory(temp);
+    setSelectedCategoryId(setup);
+    getArticle({ category: setup });
+  };
 
   useEffect(() => {
     getArticle();
-  }, [page]);
+  }, [page, searchParams]);
 
-  const getCategory = async () => {
-    const res = await getArticleByCategoryLanding({
-      limit: debouncedValue === "" ? "5" : "",
-      title: debouncedValue,
-    });
-    if (res?.data?.data) {
-      setCategories(res?.data?.data);
-    }
-  };
-
-  async function getArticle() {
+  async function getArticle(props?: { title?: string; category?: any }) {
     loading();
     // topRef.current?.scrollIntoView({ behavior: "smooth" });
     const req = {
       page: page,
-      search: searchValue || "",
+      search: props?.title || searchValue || "",
       limit: "9",
       isPublish: true,
       sort: "desc",
@@ -144,9 +141,12 @@ export default function ListNews() {
         pathname.includes("polda") || pathname.includes("satker")
           ? String(category)
           : "",
-      categoryIds: selectedCategoryId,
-      // categoryIds:
-      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
+      categoryIds: props?.category
+        ? props.category.map((val: any) => val.id).join(",")
+        : selectedCategoryId.length > 0
+        ? selectedCategoryId.map((val: any) => val.id).join(",")
+        : "",
+
       startDate:
         selectedDate && selectedMonth !== null
           ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
@@ -162,21 +162,52 @@ export default function ListNews() {
     close();
   }
 
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedValue(categorySearch);
-    }, 1500);
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
 
-    return () => clearTimeout(timeout);
-  }, [categorySearch]);
-
-  const onInputChange = (value: string) => {
-    setCategorySearch(value);
-    if (value === "") {
-      setSelectedCategoryId("");
+  const getCategory = async (search?: string) => {
+    const res = await getArticleByCategoryLanding({
+      // limit: debouncedValue === "" ? "5" : "",
+      // title: debouncedValue,
+      limit: !search || search === "" ? "5" : "",
+      title: search ? search : "",
+    });
+    if (res?.data?.data) {
+      setCategories(res?.data?.data);
+      return res?.data?.data;
     }
+    return [];
   };
 
+  const setupCategory = (data: any) => {
+    const temp = [];
+    for (const element of data) {
+      temp.push({
+        id: element.id,
+        label: element.title,
+        value: element.id,
+      });
+    }
+    return temp;
+  };
+
+  const loadOptions = useCallback(
+    (inputValue: string, callback: (options: any) => void) => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+      debounceTimeout.current = setTimeout(async () => {
+        try {
+          const data = await getCategory(inputValue);
+          callback(setupCategory(data));
+        } catch (error) {
+          callback([]);
+        }
+      }, 1500);
+    },
+    []
+  );
+
   return (
     <div className="bg-white border-b-1" ref={topRef}>
       <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
@@ -187,118 +218,104 @@ export default function ListNews() {
           <ChevronRightIcon />
           <p className="text-black">Berita</p>
         </div>
-        <div className="py-5 lg:py-10 lg:px-10 flex flex-col lg:flex-row gap-2 items-end">
-          <Input
-            aria-label="Judul"
-            className="w-full"
-            classNames={{
-              inputWrapper: "bg-white hover:!bg-gray-100 border-1",
-              input: "text-sm !text-black",
-            }}
-            // onKeyDown={(event) => {
-            //   if (event.key === "Enter") {
-            //     router.push(pathname + `?search=${searchValue}`);
-            //     getArticle();
-            //   }
-            // }}
-            labelPlacement="outside"
-            placeholder="Judul..."
-            value={searchValue}
-            onValueChange={setSearchValue}
-            type="search"
-          />
-          <div className="flex w-full lg:w-fit gap-4">
-            <Autocomplete
-              className="w-full lg:w-[240px] mt-0"
-              label=""
+        <div className="w-full flex justify-center">
+          <div className="py-5 lg:py-10 lg:mx-auto flex flex-col lg:flex-row gap-2 items-end grow-0 mx-auto">
+            <Input
+              aria-label="Judul"
+              className="w-full lg:w-[300px]"
+              classNames={{
+                inputWrapper: "bg-white hover:!bg-gray-100 border-1 rounded-md",
+                input: "text-sm !text-black",
+              }}
+              // onKeyDown={(event) => {
+              //   if (event.key === "Enter") {
+              //     router.push(pathname + `?search=${searchValue}`);
+              //     getArticle();
+              //   }
+              // }}
               labelPlacement="outside"
-              variant="bordered"
+              placeholder="Judul..."
+              value={searchValue}
+              onValueChange={setSearchValue}
+              type="search"
+            />
+            <AsyncSelect
+              isMulti
+              loadOptions={loadOptions}
+              defaultOptions
               placeholder="Kategori"
-              inputValue={categorySearch}
-              // selectedKey={selectedCategoryId}
-              onInputChange={onInputChange}
-              onSelectionChange={(e) => setSelectedCategoryId(e)}
-              inputProps={{ classNames: { inputWrapper: "border-1" } }}
-              defaultItems={categories}
-            >
-              {/* {categories.length > 0 &&
-                categories.map((category: any) => (
-                  <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">
-            <Popover placement="bottom" showArrow={true} className="w-full">
-              <PopoverTrigger>
-                <a className="px-2 py-1 text-sm w-[220px]">
-                  {" "}
-                  {selectedDate
-                    ? format(selectedDate, "MMMM yyyy")
-                    : "Pilih Bulan"}
-                </a>
-              </PopoverTrigger>
-              <PopoverContent className="p-4 w-[220px]">
-                <div className="flex items-center justify-between mb-2 px-1 w-full">
-                  <button
-                    className="text-gray-500 hover:text-black"
-                    onClick={() => setYear((prev) => prev - 1)}
-                  >
-                    <ChevronLeftIcon />
-                  </button>
-                  <span className="font-semibold text-center">{year}</span>
-                  <button
-                    className="text-gray-500 hover:text-black"
-                    onClick={() => setYear((prev) => prev + 1)}
-                  >
-                    <ChevronRightIcon />
-                  </button>
-                </div>
-
-                <div className="grid grid-cols-3 gap-2 w-full">
-                  {months.map((month, idx) => (
+              className="z-50 min-w-[300px] max-w-[600px]"
+              classNames={{
+                control: () =>
+                  "border border-gray-300 border-1 rounded-xl min-w-[300px] max-w-[600px]",
+                menu: () => "z-50",
+              }}
+              value={selectedCategoryId}
+              onChange={setSelectedCategoryId}
+            />
+            <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[200px] rounded-md px-2">
+              <Popover placement="bottom" showArrow={true} className="w-full">
+                <PopoverTrigger>
+                  <a className="px-2 py-1 text-sm w-[220px]">
+                    {" "}
+                    {selectedDate
+                      ? format(selectedDate, "MMMM yyyy")
+                      : "Pilih Bulan"}
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className="p-4 w-[200px]">
+                  <div className="flex items-center justify-between mb-2 px-1 w-full">
                     <button
-                      key={idx}
-                      onClick={() => handleMonthClick(idx)}
-                      className={`py-1 rounded-md text-sm transition-colors ${
-                        selectedDate &&
-                        selectedDate.getMonth() === idx &&
-                        selectedDate.getFullYear() === year
-                          ? "bg-blue-500 text-white"
-                          : "hover:bg-gray-200 text-gray-700"
-                      }`}
+                      className="text-gray-500 hover:text-black"
+                      onClick={() => setYear((prev) => prev - 1)}
                     >
-                      {month}
+                      <ChevronLeftIcon />
                     </button>
-                  ))}
-                </div>
-              </PopoverContent>
-            </Popover>{" "}
-            {selectedDate && (
-              <a
-                className="cursor-pointer w-[20px]"
-                onClick={() => setSelectedDate(null)}
-              >
-                <TimesIcon size={20} />
-              </a>
-            )}
+                    <span className="font-semibold text-center">{year}</span>
+                    <button
+                      className="text-gray-500 hover:text-black"
+                      onClick={() => setYear((prev) => prev + 1)}
+                    >
+                      <ChevronRightIcon />
+                    </button>
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-2 w-full">
+                    {months.map((month, idx) => (
+                      <button
+                        key={idx}
+                        onClick={() => handleMonthClick(idx)}
+                        className={`py-1 rounded-md text-sm transition-colors ${
+                          selectedDate &&
+                          selectedDate.getMonth() === idx &&
+                          selectedDate.getFullYear() === year
+                            ? "bg-blue-500 text-white"
+                            : "hover:bg-gray-200 text-gray-700"
+                        }`}
+                      >
+                        {month}
+                      </button>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>{" "}
+              {selectedDate && (
+                <a
+                  className="cursor-pointer w-[20px]"
+                  onClick={() => setSelectedDate(null)}
+                >
+                  <TimesIcon size={20} />
+                </a>
+              )}
+            </div>
+            <Button
+              onPress={() => getArticle()}
+              className="bg-red-600 text-white w-[80px] rounded-md"
+            >
+              Cari
+            </Button>
+            {/* </Link> */}
           </div>
-          {/* <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]"
-          >
-            Cari
-          </Button>
-          {/* </Link> */}
         </div>
         {article?.length < 1 || !article ? (
           <div className="flex justify-center items-center">Tidak ada Data</div>
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index b07365e..303b7bb 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -260,7 +260,11 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         <p className="text-lg border-b-3 border-red-600 font-semibold">TAGS</p>
         <div className="flex flex-wrap gap-2">
           {data?.categories?.map((category: any) => (
-            <Link href={""} key={category?.id} className="text-sm ">
+            <Link
+              href={`/news/all?category_id=${category?.id}`}
+              key={category?.id}
+              className="text-sm "
+            >
               <Button className="bg-[#BE0106] text-white px-2 py-2 rounded-md ">
                 {category?.title}
               </Button>
@@ -268,17 +272,20 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ))}
         </div>
         <div className="flex flex-wrap gap-2">
-          {data?.tags?.split(",").map((tag: any) => (
-            <Link href={""} key={tag} className="text-xs">
-              <Button
-                className="border-[#BE0106] px-2 py-2 rounded-md "
-                variant="bordered"
-                size="sm"
-              >
-                {tag}
-              </Button>
-            </Link>
-          ))}
+          {data?.tags?.split(",").map(
+            (tag: any) =>
+              tag !== "" && (
+                <Link href={``} key={tag} className="text-xs">
+                  <Button
+                    className="border-[#BE0106] px-2 py-2 rounded-md "
+                    variant="bordered"
+                    size="sm"
+                  >
+                    {tag}
+                  </Button>
+                </Link>
+              )
+          )}
         </div>
       </div>
       <div className="grid grid-cols-2  md:flex lg:justify-between gap-2 lg:gap-10 my-8">
diff --git a/components/page/related-news.tsx b/components/page/related-news.tsx
index 62c8a62..976485d 100644
--- a/components/page/related-news.tsx
+++ b/components/page/related-news.tsx
@@ -72,8 +72,8 @@ export default function RelatedNews(props: { categories: any }) {
               );
             }}
           >
-            {article?.map((newsItem: any) => (
-              <SwiperSlide key={newsItem.id}>
+            {article?.map((newsItem: any, index: number) => (
+              <SwiperSlide key={`${newsItem.id}-${index}`}>
                 <Card isFooterBlurred radius="lg" className="border-none">
                   <Image
                     width={480}