546 lines
18 KiB
TypeScript
546 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
import { Card } from "../ui/card";
|
|
import Link from "next/link";
|
|
import { listData, listArticles } from "@/service/landing/landing";
|
|
import { toggleBookmark, getBookmarkSummaryForUser } from "@/service/content";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import { Navigation } from "swiper/modules";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
|
|
// Format tanggal
|
|
function formatTanggal(dateString: string) {
|
|
if (!dateString) return "";
|
|
return (
|
|
new Date(dateString)
|
|
.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace(/\./g, ":") + " WIB"
|
|
);
|
|
}
|
|
|
|
export default function MediaUpdate() {
|
|
const [tab, setTab] = useState<"latest" | "popular">("latest");
|
|
const [dataToRender, setDataToRender] = useState<any[]>([]);
|
|
const [bookmarkedIds, setBookmarkedIds] = useState<Set<number>>(new Set());
|
|
const [loading, setLoading] = useState(true);
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
useEffect(() => {
|
|
fetchData(tab);
|
|
}, [tab]);
|
|
|
|
async function fetchData(section: "latest" | "popular") {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// 🔹 Ambil data artikel
|
|
const response = await listArticles(
|
|
1,
|
|
20,
|
|
1, // typeId = image
|
|
undefined,
|
|
undefined,
|
|
section === "latest" ? "createdAt" : "viewCount"
|
|
);
|
|
|
|
let articlesData: any[] = [];
|
|
|
|
if (response?.error) {
|
|
console.error("Articles API failed, fallback ke old API");
|
|
const fallbackRes = await listData(
|
|
"1",
|
|
"",
|
|
"",
|
|
20,
|
|
0,
|
|
section === "latest" ? "createdAt" : "clickCount",
|
|
"",
|
|
"",
|
|
""
|
|
);
|
|
articlesData = fallbackRes?.data?.data?.content || [];
|
|
} else {
|
|
articlesData = response?.data?.data || [];
|
|
}
|
|
|
|
// 🔹 Normalisasi struktur data
|
|
const transformedData = articlesData.map((article: any) => ({
|
|
id: article.id,
|
|
title: article.title,
|
|
category:
|
|
article.categoryName ||
|
|
(article.categories && article.categories[0]?.title) ||
|
|
"Tanpa Kategori",
|
|
createdAt: article.createdAt,
|
|
smallThumbnailLink: article.thumbnailUrl,
|
|
label:
|
|
article.typeId === 1
|
|
? "Image"
|
|
: article.typeId === 2
|
|
? "Video"
|
|
: article.typeId === 3
|
|
? "Text"
|
|
: article.typeId === 4
|
|
? "Audio"
|
|
: "",
|
|
...article,
|
|
}));
|
|
|
|
setDataToRender(transformedData);
|
|
|
|
// 🔹 Sinkronisasi bookmark
|
|
const roleId = Number(getCookiesDecrypt("urie"));
|
|
if (roleId && !isNaN(roleId)) {
|
|
const savedLocal = localStorage.getItem("bookmarkedIds");
|
|
let localSet = new Set<number>();
|
|
if (savedLocal) {
|
|
localSet = new Set(JSON.parse(savedLocal));
|
|
setBookmarkedIds(localSet);
|
|
}
|
|
|
|
const res = await getBookmarkSummaryForUser();
|
|
const bookmarks =
|
|
res?.data?.data?.recentBookmarks ||
|
|
res?.data?.data?.bookmarks ||
|
|
res?.data?.data ||
|
|
[];
|
|
|
|
const ids = new Set<number>(
|
|
(Array.isArray(bookmarks) ? bookmarks : [])
|
|
.map((b: any) => Number(b.articleId ?? b.id ?? b.article?.id))
|
|
.filter((x) => !isNaN(x))
|
|
);
|
|
|
|
const merged = new Set([...localSet, ...ids]);
|
|
setBookmarkedIds(merged);
|
|
localStorage.setItem(
|
|
"bookmarkedIds",
|
|
JSON.stringify(Array.from(merged))
|
|
);
|
|
}
|
|
} catch (err) {
|
|
console.error("Gagal memuat data:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
// 🔹 Simpan perubahan bookmark ke localStorage
|
|
useEffect(() => {
|
|
if (bookmarkedIds.size > 0) {
|
|
localStorage.setItem(
|
|
"bookmarkedIds",
|
|
JSON.stringify(Array.from(bookmarkedIds))
|
|
);
|
|
}
|
|
}, [bookmarkedIds]);
|
|
|
|
const handleSave = async (id: number) => {
|
|
const roleId = Number(getCookiesDecrypt("urie"));
|
|
if (!roleId || isNaN(roleId)) {
|
|
MySwal.fire({
|
|
icon: "warning",
|
|
title: "Login diperlukan",
|
|
text: "Silakan login terlebih dahulu untuk menyimpan artikel.",
|
|
confirmButtonText: "Login Sekarang",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await toggleBookmark(id);
|
|
if (res?.error) {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: "Gagal menyimpan artikel.",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
} else {
|
|
const updated = new Set(bookmarkedIds);
|
|
updated.add(Number(id));
|
|
setBookmarkedIds(updated);
|
|
localStorage.setItem(
|
|
"bookmarkedIds",
|
|
JSON.stringify(Array.from(updated))
|
|
);
|
|
|
|
MySwal.fire({
|
|
icon: "success",
|
|
title: "Berhasil",
|
|
text: "Artikel berhasil disimpan ke bookmark.",
|
|
timer: 1500,
|
|
showConfirmButton: false,
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Error saving bookmark:", err);
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Kesalahan",
|
|
text: "Terjadi kesalahan saat menyimpan artikel.",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="bg-white px-4 py-10 border max-w-[1350px] mx-auto rounded-md border-[#CDD5DF] my-10">
|
|
<div className="max-w-screen-xl mx-auto">
|
|
<h2 className="text-2xl font-semibold text-center mb-6">
|
|
Media Update
|
|
</h2>
|
|
|
|
{/* Tab */}
|
|
<div className="flex justify-center mb-8 bg-white">
|
|
<Card className="bg-[#FFFFFF] rounded-xl flex flex-row p-3 gap-2">
|
|
<button
|
|
onClick={() => setTab("latest")}
|
|
className={`px-5 py-2 rounded-lg text-sm font-medium ${
|
|
tab === "latest" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
|
|
}`}
|
|
>
|
|
Konten Terbaru
|
|
</button>
|
|
<button
|
|
onClick={() => setTab("popular")}
|
|
className={`px-5 py-2 rounded-lg text-sm font-medium ${
|
|
tab === "popular" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
|
|
}`}
|
|
>
|
|
Konten Terpopuler
|
|
</button>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Slider */}
|
|
{loading ? (
|
|
<p className="text-center">Loading...</p>
|
|
) : (
|
|
<Swiper
|
|
modules={[Navigation]}
|
|
navigation
|
|
spaceBetween={20}
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
640: { slidesPerView: 2 },
|
|
1024: { slidesPerView: 4 },
|
|
}}
|
|
>
|
|
{dataToRender.map((item) => (
|
|
<SwiperSlide key={item.id}>
|
|
<div className="rounded-xl shadow-md overflow-hidden bg-white">
|
|
<div className="w-full h-[204px] relative">
|
|
<Image
|
|
src={item.smallThumbnailLink || "/placeholder.png"}
|
|
alt={item.title || "No Title"}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-3">
|
|
<div className="flex gap-2 mb-1">
|
|
<span className="text-xs text-white px-2 py-0.5 rounded bg-blue-600">
|
|
{item.category || "Tanpa Kategori"}
|
|
</span>
|
|
<span className="text-xs font-medium text-[#b3882e]">
|
|
{item.label || ""}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mb-1">
|
|
{formatTanggal(item.createdAt)}
|
|
</p>
|
|
<p className="text-sm font-semibold mb-3 line-clamp-2">
|
|
{item.title}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex gap-2 text-gray-600">
|
|
<ThumbsUp className="w-4 h-4 cursor-pointer" />
|
|
<ThumbsDown className="w-4 h-4 cursor-pointer" />
|
|
</div>
|
|
<Button
|
|
onClick={() => handleSave(item.id)}
|
|
disabled={bookmarkedIds.has(Number(item.id))}
|
|
variant="default"
|
|
size="sm"
|
|
className={`rounded px-4 ${
|
|
bookmarkedIds.has(Number(item.id))
|
|
? "bg-gray-400 cursor-not-allowed text-white"
|
|
: "bg-blue-600 text-white hover:bg-blue-700"
|
|
}`}
|
|
>
|
|
{bookmarkedIds.has(Number(item.id)) ? "Saved" : "Save"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
)}
|
|
|
|
{/* Lihat lebih banyak */}
|
|
<div className="text-center mt-10">
|
|
<Link
|
|
href={
|
|
tab === "latest"
|
|
? "https://mediahub.polri.go.id/"
|
|
: "https://tribratanews.polri.go.id/"
|
|
}
|
|
>
|
|
<Button
|
|
size={"lg"}
|
|
className="text-[#b3882e] bg-transparent border border-[#b3882e] px-6 py-2 rounded-s-sm text-sm font-medium hover:bg-[#b3882e]/10 transition"
|
|
>
|
|
Lihat Lebih Banyak
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
|
|
// import { useState, useEffect } from "react";
|
|
// import Image from "next/image";
|
|
// import { Button } from "@/components/ui/button";
|
|
// import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
// import { Card } from "../ui/card";
|
|
// import Link from "next/link";
|
|
// import { listData, listArticles } from "@/service/landing/landing";
|
|
// import { Swiper, SwiperSlide } from "swiper/react";
|
|
// import "swiper/css";
|
|
// import "swiper/css/navigation";
|
|
// import { Navigation } from "swiper/modules";
|
|
|
|
// // Format tanggal
|
|
// function formatTanggal(dateString: string) {
|
|
// if (!dateString) return "";
|
|
// return (
|
|
// new Date(dateString)
|
|
// .toLocaleString("id-ID", {
|
|
// day: "2-digit",
|
|
// month: "short",
|
|
// year: "numeric",
|
|
// hour: "2-digit",
|
|
// minute: "2-digit",
|
|
// hour12: false,
|
|
// timeZone: "Asia/Jakarta",
|
|
// })
|
|
// .replace(/\./g, ":") + " WIB"
|
|
// );
|
|
// }
|
|
|
|
// export default function MediaUpdate() {
|
|
// const [tab, setTab] = useState<"latest" | "popular">("latest");
|
|
// const [dataToRender, setDataToRender] = useState<any[]>([]);
|
|
// const [loading, setLoading] = useState(true);
|
|
|
|
// useEffect(() => {
|
|
// fetchData(tab);
|
|
// }, [tab]);
|
|
|
|
// async function fetchData(section: "latest" | "popular") {
|
|
// try {
|
|
// setLoading(true);
|
|
|
|
// // Use new Articles API
|
|
// const response = await listArticles(
|
|
// 1,
|
|
// 20,
|
|
// 1, // typeId for images
|
|
// undefined,
|
|
// undefined,
|
|
// section === "latest" ? "createdAt" : "viewCount"
|
|
// );
|
|
|
|
// console.log("Media Update Articles API response:", response);
|
|
|
|
// if (response?.error) {
|
|
// console.error("Articles API failed, falling back to old API");
|
|
// // Fallback to old API
|
|
// const fallbackRes = await listData(
|
|
// "1",
|
|
// "",
|
|
// "",
|
|
// 20,
|
|
// 0,
|
|
// section === "latest" ? "createdAt" : "clickCount",
|
|
// "",
|
|
// "",
|
|
// ""
|
|
// );
|
|
// setDataToRender(fallbackRes?.data?.data?.content || []);
|
|
// return;
|
|
// }
|
|
|
|
// // Handle new API response structure
|
|
// const articlesData = response?.data?.data || [];
|
|
|
|
// // Transform articles data to match old structure for backward compatibility
|
|
// const transformedData = articlesData.map((article: any) => ({
|
|
// id: article.id,
|
|
// title: article.title,
|
|
// category: article.categoryName || (article.categories && article.categories[0]?.title) || "Tanpa Kategori",
|
|
// createdAt: article.createdAt,
|
|
// smallThumbnailLink: article.thumbnailUrl,
|
|
// label: article.typeId === 1 ? "Image" : article.typeId === 2 ? "Video" : article.typeId === 3 ? "Text" : article.typeId === 4 ? "Audio" : "",
|
|
// ...article
|
|
// }));
|
|
|
|
// setDataToRender(transformedData);
|
|
// } catch (err) {
|
|
// console.error("Gagal memuat data:", err);
|
|
// // Try fallback to old API if new API fails
|
|
// try {
|
|
// const fallbackRes = await listData(
|
|
// "1",
|
|
// "",
|
|
// "",
|
|
// 20,
|
|
// 0,
|
|
// section === "latest" ? "createdAt" : "clickCount",
|
|
// "",
|
|
// "",
|
|
// ""
|
|
// );
|
|
// setDataToRender(fallbackRes?.data?.data?.content || []);
|
|
// } catch (fallbackError) {
|
|
// console.error("Fallback API also failed:", fallbackError);
|
|
// }
|
|
// } finally {
|
|
// setLoading(false);
|
|
// }
|
|
// }
|
|
|
|
// return (
|
|
// <section className="bg-white px-4 py-10 border max-w-[1350px] mx-auto rounded-md border-[#CDD5DF] my-10">
|
|
// <div className="max-w-screen-xl mx-auto">
|
|
// <h2 className="text-2xl font-semibold text-center mb-6">
|
|
// Media Update
|
|
// </h2>
|
|
|
|
// {/* Tab */}
|
|
// <div className="flex justify-center mb-8 bg-white">
|
|
// <Card className="bg-[#FFFFFF] rounded-xl flex flex-row p-3 gap-2">
|
|
// <button
|
|
// onClick={() => setTab("latest")}
|
|
// className={`px-5 py-2 rounded-lg text-sm font-medium ${
|
|
// tab === "latest" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
|
|
// }`}
|
|
// >
|
|
// Konten Terbaru
|
|
// </button>
|
|
// <button
|
|
// onClick={() => setTab("popular")}
|
|
// className={`px-5 py-2 rounded-lg text-sm font-medium ${
|
|
// tab === "popular" ? "bg-[#C6A455] text-white" : "text-[#C6A455]"
|
|
// }`}
|
|
// >
|
|
// Konten Terpopuler
|
|
// </button>
|
|
// </Card>
|
|
// </div>
|
|
|
|
// {/* Slider */}
|
|
// {loading ? (
|
|
// <p className="text-center">Loading...</p>
|
|
// ) : (
|
|
// <Swiper
|
|
// modules={[Navigation]}
|
|
// navigation
|
|
// spaceBetween={20}
|
|
// slidesPerView={1}
|
|
// breakpoints={{
|
|
// 640: { slidesPerView: 2 },
|
|
// 1024: { slidesPerView: 4 },
|
|
// }}
|
|
// >
|
|
// {dataToRender.map((item) => (
|
|
// <SwiperSlide key={item.id}>
|
|
// <div className="rounded-xl shadow-md overflow-hidden bg-white">
|
|
// <div className="w-full h-[204px] relative">
|
|
// <Image
|
|
// src={item.smallThumbnailLink || "/placeholder.png"}
|
|
// alt={item.title || "No Title"}
|
|
// fill
|
|
// className="object-cover"
|
|
// />
|
|
// </div>
|
|
// <div className="p-3">
|
|
// <div className="flex gap-2 mb-1">
|
|
// <span className="text-xs text-white px-2 py-0.5 rounded bg-blue-600">
|
|
// {item.category || "Tanpa Kategori"}
|
|
// </span>
|
|
// <span className="text-xs font-medium text-[#b3882e]">
|
|
// {item.label || ""}
|
|
// </span>
|
|
// </div>
|
|
// <p className="text-xs text-gray-500 mb-1">
|
|
// {formatTanggal(item.createdAt)}
|
|
// </p>
|
|
// <p className="text-sm font-semibold mb-3 line-clamp-2">
|
|
// {item.title}
|
|
// </p>
|
|
|
|
// <div className="flex items-center justify-between">
|
|
// <div className="flex gap-2 text-gray-600">
|
|
// <ThumbsUp className="w-4 h-4 cursor-pointer" />
|
|
// <ThumbsDown className="w-4 h-4 cursor-pointer" />
|
|
// </div>
|
|
// <Button
|
|
// variant="default"
|
|
// size="sm"
|
|
// className="text-white bg-blue-600 rounded px-4"
|
|
// >
|
|
// Save
|
|
// </Button>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </SwiperSlide>
|
|
// ))}
|
|
// </Swiper>
|
|
// )}
|
|
|
|
// {/* Lihat lebih banyak */}
|
|
// <div className="text-center mt-10">
|
|
// <Link
|
|
// href={
|
|
// tab === "latest"
|
|
// ? "https://mediahub.polri.go.id/"
|
|
// : "https://tribratanews.polri.go.id/"
|
|
// }
|
|
// >
|
|
// <Button
|
|
// size={"lg"}
|
|
// className="text-[#b3882e] bg-transparent border border-[#b3882e] px-6 py-2 rounded-s-sm text-sm font-medium hover:bg-[#b3882e]/10 transition"
|
|
// >
|
|
// Lihat Lebih Banyak
|
|
// </Button>
|
|
// </Link>
|
|
// </div>
|
|
// </div>
|
|
// </section>
|
|
// );
|
|
// }
|