From d5c09548fab7208689b044df4aca0692528392a0 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Fri, 14 Feb 2025 23:11:51 +0700
Subject: [PATCH] catergory

---
 app/news/[polda-name]/layout.tsx              |  9 --
 app/news/[polda-name]/page.tsx                |  6 --
 app/news/polda/[name]/layout.tsx              |  7 ++
 app/news/polda/[name]/page.tsx                | 12 +++
 app/news/satker/[name]/layout.tsx             |  7 ++
 app/news/satker/[name]/page.tsx               | 12 +++
 components/landing/CategorySatker.tsx         |  6 +-
 components/landing/Footer.tsx                 |  2 +
 components/landing/RegionalNews.tsx           | 93 +++++++++----------
 components/layout/humas-layout.tsx            | 16 +++-
 components/main/detail/list-news.tsx          | 14 ++-
 components/table/article-table.tsx            |  6 +-
 .../master-categories/categories-table.tsx    |  6 ++
 service/article.ts                            |  7 +-
 types/globals.tsx                             |  1 +
 15 files changed, 127 insertions(+), 77 deletions(-)
 delete mode 100644 app/news/[polda-name]/layout.tsx
 delete mode 100644 app/news/[polda-name]/page.tsx
 create mode 100644 app/news/polda/[name]/layout.tsx
 create mode 100644 app/news/polda/[name]/page.tsx
 create mode 100644 app/news/satker/[name]/layout.tsx
 create mode 100644 app/news/satker/[name]/page.tsx

diff --git a/app/news/[polda-name]/layout.tsx b/app/news/[polda-name]/layout.tsx
deleted file mode 100644
index 78853da..0000000
--- a/app/news/[polda-name]/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { HumasLayout } from "@/components/layout/humas-layout";
-
-export default function PoldaNewsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <HumasLayout>{children}</HumasLayout>;
-}
diff --git a/app/news/[polda-name]/page.tsx b/app/news/[polda-name]/page.tsx
deleted file mode 100644
index 78fc48a..0000000
--- a/app/news/[polda-name]/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import ListNews from "@/components/main/detail/list-news";
-import React from "react";
-
-export default function PoldaNewsPage() {
-  return <ListNews />;
-}
diff --git a/app/news/polda/[name]/layout.tsx b/app/news/polda/[name]/layout.tsx
new file mode 100644
index 0000000..51df808
--- /dev/null
+++ b/app/news/polda/[name]/layout.tsx
@@ -0,0 +1,7 @@
+export default function PoldaNewsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
diff --git a/app/news/polda/[name]/page.tsx b/app/news/polda/[name]/page.tsx
new file mode 100644
index 0000000..52de9f9
--- /dev/null
+++ b/app/news/polda/[name]/page.tsx
@@ -0,0 +1,12 @@
+import ListNews from "@/components/main/detail/list-news";
+import React from "react";
+import { HumasLayout } from "@/components/layout/humas-layout";
+
+export default function PoldaNewsPage() {
+  // return <ListNews />;
+  return (
+    <HumasLayout>
+      <ListNews />
+    </HumasLayout>
+  );
+}
diff --git a/app/news/satker/[name]/layout.tsx b/app/news/satker/[name]/layout.tsx
new file mode 100644
index 0000000..51df808
--- /dev/null
+++ b/app/news/satker/[name]/layout.tsx
@@ -0,0 +1,7 @@
+export default function PoldaNewsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
diff --git a/app/news/satker/[name]/page.tsx b/app/news/satker/[name]/page.tsx
new file mode 100644
index 0000000..52de9f9
--- /dev/null
+++ b/app/news/satker/[name]/page.tsx
@@ -0,0 +1,12 @@
+import ListNews from "@/components/main/detail/list-news";
+import React from "react";
+import { HumasLayout } from "@/components/layout/humas-layout";
+
+export default function PoldaNewsPage() {
+  // return <ListNews />;
+  return (
+    <HumasLayout>
+      <ListNews />
+    </HumasLayout>
+  );
+}
diff --git a/components/landing/CategorySatker.tsx b/components/landing/CategorySatker.tsx
index 64a2766..6d53e79 100644
--- a/components/landing/CategorySatker.tsx
+++ b/components/landing/CategorySatker.tsx
@@ -333,7 +333,7 @@ export default function CategorySatker() {
         <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
           {list.map((item: any, index: any) => (
             <Link
-              href={`/news/all?satker=${changeNameToSlug(item.title)}`}
+              href={`/news/satker/${changeNameToSlug(item.title)}`}
               key={item.path}
             >
               <div
@@ -384,9 +384,7 @@ export default function CategorySatker() {
                       className="w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm"
                     >
                       <Link
-                        href={`/news/all?satker=${changeNameToSlug(
-                          item.title
-                        )}`}
+                        href={`/news/satker/${changeNameToSlug(item.title)}`}
                       >
                         {" "}
                         <Image
diff --git a/components/landing/Footer.tsx b/components/landing/Footer.tsx
index 5426fae..6425f89 100644
--- a/components/landing/Footer.tsx
+++ b/components/landing/Footer.tsx
@@ -3,10 +3,12 @@ import { Input } from "@heroui/input";
 import { MailIcon, SendIcon } from "../icons";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
 
 export default function Footer() {
   const t2 = useTranslations("Navbar");
   const t3 = useTranslations("LandingInformasiPublik");
+
   return (
     <div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
       <div className="h-[500px] md:h-[720px] lg:h-auto  bg-black">
diff --git a/components/landing/RegionalNews.tsx b/components/landing/RegionalNews.tsx
index 8a4ba2b..489aeb8 100644
--- a/components/landing/RegionalNews.tsx
+++ b/components/landing/RegionalNews.tsx
@@ -27,37 +27,37 @@ export default function RegionalNews() {
       id: 1,
       img: "/temp/poldametro.svg",
       title: "Polda Metro Jaya",
-      path: "/news/polda-metro-jaya",
+      path: "polda-metro-jaya",
     },
     {
       id: 2,
       img: "/temp/polda-sumut.svg",
       title: "Polda Sumatra Utara",
-      path: "/news/polda-sumatra-utara",
+      path: "polda-sumut",
     },
     {
       id: 3,
       img: "/temp/polda-banten.svg",
       title: "Polda Banten",
-      path: "/news/polda-banten",
+      path: "polda-banten",
     },
     {
       id: 4,
       img: "/temp/polda-jateng.svg",
       title: "Polda Jawa Tengah",
-      path: "/news/polda-jateng",
+      path: "polda-jateng",
     },
     {
       id: 5,
       img: "/temp/polda-jatim.svg",
       title: "Polda Jawa Timur",
-      path: "news/polda-jatim",
+      path: "polda-jatim",
     },
     {
       id: 6,
       img: "/assets/polda/polda-jawa-barat.svg",
       title: "Polda Jawa Barat",
-      path: "/news/polda-jawa-barat",
+      path: "polda-jabar",
     },
   ];
 
@@ -66,217 +66,217 @@ export default function RegionalNews() {
       id: 1,
       img: "/assets/polda/polda-metro-jaya.svg",
       title: "Polda Metro Jaya",
-      path: "/news/polda-metro-jaya",
+      path: "polda-metro-jaya",
     },
     {
       id: 2,
       img: "/assets/polda/polda-jawa-barat.svg",
       title: "Polda Jawa Barat",
-      path: "/news/polda-jawa-barat",
+      path: "polda-jabar",
     },
     {
       id: 3,
       img: "/assets/polda/polda-banten.svg",
       title: "Polda Banten",
-      path: "/news/polda-banten",
+      path: "polda-banten",
     },
     {
       id: 4,
       img: "/assets/polda/polda-jateng.svg",
       title: "Polda Jawa Tengah",
-      path: "/news/polda-jateng",
+      path: "polda-jateng",
     },
     {
       id: 5,
       img: "/assets/polda/polda-diy.svg",
       title: "Polda D.I Yogyakarta",
-      path: "/news/polda-daerah-istimewa-yogyakarta",
+      path: "polda-diy",
     },
     {
       id: 6,
       img: "/assets/polda/polda-jatim.svg",
       title: "Polda Jawa Timur",
-      path: "/news/polda-jawa-timur",
+      path: "polda-jatim",
     },
     {
       id: 7,
       img: "/assets/polda/polda-aceh.svg",
       title: "Polda Aceh",
-      path: "/news/polda-aceh",
+      path: "polda-aceh",
     },
     {
       id: 8,
       img: "/assets/polda/polda-sumut.svg",
       title: "Polda Sumatra Utara",
-      path: "/news/polda-sumatra-utara",
+      path: "polda-sumut",
     },
     {
       id: 9,
       img: "/assets/polda/polda-sumbar.svg",
       title: "Polda Sumatra Barat",
-      path: "/news/polda-sumatra-barat",
+      path: "polda-sumbar",
     },
     {
       id: 10,
       img: "/assets/polda/polda-riau.svg",
       title: "Polda Riau",
-      path: "/news/polda-riau",
+      path: "polda-riau",
     },
     {
       id: 11,
       img: "/assets/polda/polda-kepri.svg",
       title: "Polda Kep.Riau",
-      path: "/news/polda-kepulauan-riau",
+      path: "polda-kepri",
     },
     {
       id: 12,
       img: "/assets/polda/polda-jambi.svg",
       title: "Polda Jambi",
-      path: "/news/polda-jambi",
+      path: "polda-jambi",
     },
     {
       id: 13,
       img: "/assets/polda/polda-jambi.svg",
       title: "Polda Jambi",
-      path: "/news/polda-jambi",
+      path: "polda-jambi",
     },
     {
       id: 14,
       img: "/assets/polda/polda-sumsel.svg",
       title: "Polda Sumatra Selatan",
-      path: "/news/polda-sumatra-selatan",
+      path: "polda-sumsel",
     },
     {
       id: 15,
       img: "/assets/polda/polda-sumsel.svg",
       title: "Polda Kep.Bangka Belitung",
-      path: "/news/polda-bangka-belitung",
+      path: "polda-babel",
     },
     {
       id: 16,
       img: "/assets/polda/polda-bengkulu.svg",
       title: "Polda Bengkulu",
-      path: "/news/polda-bengkulu",
+      path: "polda-bengkulu",
     },
     {
       id: 17,
       img: "/assets/polda/polda-lampung.svg",
       title: "Polda Lampung",
-      path: "/news/polda-lampung",
+      path: "polda-lampung",
     },
     {
       id: 18,
       img: "/assets/polda/polda-ntb.svg",
       title: "Polda Nusa Tenggara Barat",
-      path: "/news/polda-ntb",
+      path: "polda-ntb",
     },
     {
       id: 19,
       img: "/assets/polda/polda-ntb.svg",
       title: "Polda Nusa Tenggara Barat",
-      path: "/news/polda-ntb",
+      path: "polda-ntb",
     },
     {
       id: 20,
       img: "/assets/polda/polda-ntt.svg",
       title: "Polda Nusa Tenggara Timur",
-      path: "/news/polda-ntt",
+      path: "polda-ntt",
     },
     {
       id: 21,
       img: "/assets/polda/polda-bali.svg",
       title: "Polda Bali",
-      path: "/news/polda-bali",
+      path: "polda-bali",
     },
     {
       id: 22,
       img: "/assets/polda/polda-kalbar.svg",
       title: "Polda Kalimantan Barat",
-      path: "/news/polda-kalimantan-barat",
+      path: "polda-kalbar",
     },
     {
       id: 23,
       img: "/assets/polda/polda-kalteng.svg",
       title: "Polda Kalimantan Tengah",
-      path: "/news/polda-kalimantan-tengah",
+      path: "polda-kalteng",
     },
     {
       id: 24,
       img: "/assets/polda/polda-kalsel.svg",
       title: "Polda Kalimantan Selatan",
-      path: "/news/polda-kalimantan-selatan",
+      path: "polda-kalsel",
     },
     {
       id: 25,
       img: "/assets/polda/polda-kaltim.svg",
       title: "Polda Kalimantan Timur",
-      path: "/news/polda-kalimantan-timur",
+      path: "polda-kaltim",
     },
     {
       id: 26,
       img: "/assets/polda/polda-kalut.svg",
       title: "Polda Kalimantan Utara",
-      path: "/news/polda-kalimantan-utara",
+      path: "polda-kaltara",
     },
     {
       id: 27,
       img: "/assets/polda/polda-sulteng.svg",
       title: "Polda Sulawesi Tengah",
-      path: "/news/polda-sulawesi-tengah",
+      path: "polda-sulteng",
     },
     {
       id: 28,
       img: "/assets/polda/polda-sulawesi-utara.svg",
       title: "Polda Sulawesi Utara",
-      path: "/news/polda-sulawesi-utara",
+      path: "polda-sulut",
     },
     {
       id: 29,
       img: "/assets/polda/polda-gorontalo.svg",
       title: "Polda Gorontalo",
-      path: "/news/polda-gorontalo",
+      path: "polda-gorontalo",
     },
     {
       id: 30,
       img: "/assets/polda/polda-sulbar.svg",
       title: "Polda Sulawesi Barat",
-      path: "/news/polda-sulawesi-barat",
+      path: "polda-sulbar",
     },
     {
       id: 31,
       img: "/assets/polda/polda-sulsel.svg",
       title: "Polda Sulawesi Selatan",
-      path: "/news/polda-sulawesi-selatan",
+      path: "polda-sulsel",
     },
     {
       id: 32,
       img: "/assets/polda/polda-sultenggara.svg",
       title: "Polda Sulawesi Tenggara",
-      path: "/news/polda-sulawesi-tenggara",
+      path: "polda-sultra",
     },
     {
       id: 33,
       img: "/assets/polda/polda-malut.svg",
       title: "Polda Maluku Utara",
-      path: "/news/polda-maluku-utara",
+      path: "polda-maluku-utara",
     },
     {
       id: 34,
       img: "/assets/polda/polda-maluku.svg",
       title: "Polda Maluku",
-      path: "/news/polda-maluku",
+      path: "polda-maluku",
     },
     {
       id: 35,
       img: "/assets/polda/polda-papuabarat.svg",
       title: "Polda Papua Barat",
-      path: "/news/polda-papua-barat",
+      path: "polda-papua-barat",
     },
     {
       id: 36,
       img: "/assets/polda/polda-papua.svg",
       title: "Polda Papua",
-      path: "/news/polda-papua",
+      path: "polda-papua",
     },
   ];
 
@@ -318,10 +318,7 @@ export default function RegionalNews() {
         </div> */}
         <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
           {listPolda.map((item: any, index: any) => (
-            <Link
-              href={`/news/all?polda=${changeNameToSlug(item.title)}`}
-              key={item.path}
-            >
+            <Link href={`/news/polda/${item.path}`} key={item.path}>
               <div
                 key={item.id}
                 className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
@@ -376,9 +373,7 @@ export default function RegionalNews() {
                     key={index.id}
                     className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
                   >
-                    <Link
-                      href={`/news/all?polda=${changeNameToSlug(item.title)}`}
-                    >
+                    <Link href={`/news/polda/${item.path}`}>
                       <div className="flex flex-col items-center ">
                         <Image
                           radius="lg"
diff --git a/components/layout/humas-layout.tsx b/components/layout/humas-layout.tsx
index bf79e01..26991db 100644
--- a/components/layout/humas-layout.tsx
+++ b/components/layout/humas-layout.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { Suspense, useEffect, useState } from "react";
 import NavbarHumas from "./navbar/NavbarHumas";
 import Footer from "../landing/Footer";
 import NewsTicker from "../landing/NewsTicker";
@@ -8,6 +10,14 @@ interface Props {
 }
 
 export const HumasLayout = ({ children }: Props) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
   return (
     <section className="flex flex-col">
       <NavbarHumas size="sm" />
@@ -15,7 +25,9 @@ export const HumasLayout = ({ children }: Props) => {
       <NewsTicker />
 
       {children}
-      <Footer />
+      <Suspense>
+        <Footer />
+      </Suspense>
     </section>
   );
 };
diff --git a/components/main/detail/list-news.tsx b/components/main/detail/list-news.tsx
index c4ee979..b0c95f5 100644
--- a/components/main/detail/list-news.tsx
+++ b/components/main/detail/list-news.tsx
@@ -20,6 +20,7 @@ import { useEffect, useRef, useState } from "react";
 import { getListArticle } from "@/service/article";
 import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
 import Image from "next/image";
+import { useParams } from "next/navigation";
 
 export default function ListNews() {
   const [article, setArticle] = useState<any>([]);
@@ -27,16 +28,23 @@ export default function ListNews() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const topRef = useRef<HTMLDivElement>(null);
+  const params = useParams();
+  const category = params?.name;
 
   useEffect(() => {
     getArticle();
-  }, [page]);
+  }, [page, category]);
 
   async function getArticle() {
     // loading();
     topRef.current?.scrollIntoView({ behavior: "smooth" });
 
-    const req = { page: page, search: search, limit: "9" };
+    const req = {
+      page: page,
+      search: search,
+      limit: "9",
+      category: String(category),
+    };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
     setTotalPage(response?.data?.meta?.totalPage);
@@ -116,7 +124,7 @@ export default function ListNews() {
                   </div>
                   <div className="flex flex-row items-center gap-1">
                     <UserIcon size={14} />
-                    <p>DIVISI HUMAS POLRI</p>
+                    <p>{news?.createdByName}</p>
                   </div>
                 </div>
                 <div className="text-sm">
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index 4453bc2..107ab0d 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -84,6 +84,7 @@ export default function ArticleTable() {
   }
 
   async function initState() {
+    console.log("seeecle", Array.from(selectedCategories));
     const req = {
       limit: showData,
       page: page,
@@ -91,6 +92,7 @@ export default function ArticleTable() {
       startDate:
         startDateValue.startDate === null ? "" : startDateValue.startDate,
       endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
+      category: Array.from(selectedCategories).join(","),
     };
     const res = await getListArticle(req);
     getTableNumber(parseInt(showData), res.data?.data);
@@ -287,7 +289,7 @@ export default function ArticleTable() {
                   return items.map((item) => (
                     <span
                       key={item.props?.value}
-                      className="text-black text-xs"
+                      className="text-black dark:text-white text-xs"
                     >
                       {item.textValue},
                     </span>
@@ -295,7 +297,7 @@ export default function ArticleTable() {
                 }}
               >
                 {categories?.map((category: any) => (
-                  <SelectItem key={category?.id} value={category?.id}>
+                  <SelectItem key={category?.slug} value={category?.id}>
                     {category?.title}
                   </SelectItem>
                 ))}
diff --git a/components/table/master-categories/categories-table.tsx b/components/table/master-categories/categories-table.tsx
index 460c602..31147c9 100644
--- a/components/table/master-categories/categories-table.tsx
+++ b/components/table/master-categories/categories-table.tsx
@@ -391,6 +391,12 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
                 <SelectItem key="10" value="10">
                   10
                 </SelectItem>
+                <SelectItem key="25" value="25">
+                  25
+                </SelectItem>
+                <SelectItem key="50" value="50">
+                  50
+                </SelectItem>
               </Select>
             </div>
           </div>
diff --git a/service/article.ts b/service/article.ts
index 14286b7..fa8a8be 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -9,14 +9,17 @@ import Cookies from "js-cookie";
 
 const token = Cookies.get("access_token");
 export async function getListArticle(props: PaginationRequest) {
-  const { page, limit, search, startDate, endDate, isPublish } = props;
+  const { page, limit, search, startDate, endDate, isPublish, category } =
+    props;
   const headers = {
     "content-type": "application/json",
   };
   return await httpGet(
     `/articles?limit=${limit}&page=${page}&isPublish=${
       isPublish === undefined ? "" : isPublish
-    }&title=${search}&startDate=${startDate || ""}&endDate=${endDate || ""}`,
+    }&title=${search}&startDate=${startDate || ""}&endDate=${
+      endDate || ""
+    }&category=${category || ""}`,
     headers
   );
 }
diff --git a/types/globals.tsx b/types/globals.tsx
index a744786..f42c55c 100644
--- a/types/globals.tsx
+++ b/types/globals.tsx
@@ -62,4 +62,5 @@ export type PaginationRequest = {
   startDate?: string;
   endDate?: string;
   isPublish?: boolean;
+  category?: string;
 };