From 4508f5db372826a94c8a54d847d95a976b1e17e1 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Tue, 5 Aug 2025 12:25:43 +0700
Subject: [PATCH] fix: iklan admin

---
 .../landing-page/search-section-polda.tsx     | 63 ++++++++++++++++--
 .../landing-page/search-section-satker.tsx    | 66 +++++++++++++++++--
 2 files changed, 116 insertions(+), 13 deletions(-)

diff --git a/components/landing-page/search-section-polda.tsx b/components/landing-page/search-section-polda.tsx
index 2b5cb137..cf8f2508 100644
--- a/components/landing-page/search-section-polda.tsx
+++ b/components/landing-page/search-section-polda.tsx
@@ -1,9 +1,16 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@radix-ui/react-select";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@radix-ui/react-select";
 import { Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import router from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ScrollableContent from "./search-section-new";
 import NewContent from "./new-content";
 import ContentCategory from "./content-category";
@@ -13,6 +20,14 @@ import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import AdvertisementPlacements from "./advertisement-placements";
 import { useTheme } from "next-themes";
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+
+interface Advertisement {
+  id: string;
+  placements: string;
+  imageUrl: string;
+  [key: string]: any;
+}
 
 const SearchSectionPolda = () => {
   const [contentType, setContentType] = useState("all");
@@ -20,7 +35,32 @@ const SearchSectionPolda = () => {
   const router = useRouter();
   const t = useTranslations("LandingPage");
   const { theme } = useTheme();
-  
+  const [ads, setAds] = useState<Advertisement[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const res = await listDataAdvertisements(0, "4", "");
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      setAds(contentData);
+      // if (props.placement == "left") {
+      //   setAds(contentData.slice(0, 2));
+      // } else {
+      //   setAds(contentData.slice(2));
+      // }
+    } catch (error) {
+      console.error("Error fetching advertisements:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   // Determine background image based on theme
   const getBackgroundImage = () => {
     if (theme === "dark") {
@@ -31,9 +71,16 @@ const SearchSectionPolda = () => {
   };
 
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
+    <div
+      className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
+      style={{ backgroundImage: getBackgroundImage() }}
+    >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <AdvertisementPlacements placement="left"/>
+        <AdvertisementPlacements
+          placement="left"
+          data={ads}
+          loading={loading}
+        />
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
@@ -47,7 +94,11 @@ const SearchSectionPolda = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
-         <AdvertisementPlacements placement="right"/>
+        <AdvertisementPlacements
+          placement="right"
+          data={ads}
+          loading={loading}
+        />
       </div>
     </div>
   );
diff --git a/components/landing-page/search-section-satker.tsx b/components/landing-page/search-section-satker.tsx
index 9cd1e8b7..47af15ff 100644
--- a/components/landing-page/search-section-satker.tsx
+++ b/components/landing-page/search-section-satker.tsx
@@ -1,9 +1,16 @@
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@radix-ui/react-select";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+} from "@radix-ui/react-select";
 import { Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import router from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ScrollableContent from "./search-section-new";
 import NewContent from "./new-content";
 import ContentCategory from "./content-category";
@@ -14,6 +21,14 @@ import ScrollableContentPolda from "./scrollable-content-polda";
 import ScrollableContentSatker from "./scrollable-content-satker";
 import AdvertisementPlacements from "./advertisement-placements";
 import { useTheme } from "next-themes";
+import { listDataAdvertisements } from "@/service/broadcast/broadcast";
+
+interface Advertisement {
+  id: string;
+  placements: string;
+  imageUrl: string;
+  [key: string]: any;
+}
 
 const SearchSectionSatker = () => {
   const [contentType, setContentType] = useState("all");
@@ -22,7 +37,33 @@ const SearchSectionSatker = () => {
   const t = useTranslations("LandingPage");
 
   const { theme } = useTheme();
-  
+
+  const [ads, setAds] = useState<Advertisement[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const res = await listDataAdvertisements(0, "4", "");
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      setAds(contentData);
+      // if (props.placement == "left") {
+      //   setAds(contentData.slice(0, 2));
+      // } else {
+      //   setAds(contentData.slice(2));
+      // }
+    } catch (error) {
+      console.error("Error fetching advertisements:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   // Determine background image based on theme
   const getBackgroundImage = () => {
     if (theme === "dark") {
@@ -31,11 +72,18 @@ const SearchSectionSatker = () => {
       return "url('/assets/background-white.jpg')";
     }
   };
-  
+
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
+    <div
+      className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
+      style={{ backgroundImage: getBackgroundImage() }}
+    >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <AdvertisementPlacements placement="left"/>
+        <AdvertisementPlacements
+          placement="left"
+          data={ads}
+          loading={loading}
+        />
       </div>
 
       <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
@@ -49,7 +97,11 @@ const SearchSectionSatker = () => {
       </div>
 
       <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
-        <AdvertisementPlacements placement="right"/>
+        <AdvertisementPlacements
+          placement="right"
+          data={ads}
+          loading={loading}
+        />
       </div>
     </div>
   );