503 lines
15 KiB
TypeScript
503 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { listData, listArticles } from "@/service/landing/landing";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { toggleBookmark } from "@/service/content";
|
|
|
|
export default function Header() {
|
|
const [data, setData] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
// 🔹 Gunakan API artikel baru
|
|
const response = await listArticles(
|
|
1,
|
|
5,
|
|
undefined,
|
|
undefined,
|
|
undefined,
|
|
"createdAt"
|
|
);
|
|
|
|
if (response?.error) {
|
|
// fallback ke API lama
|
|
const fallbackResponse = await listData(
|
|
"",
|
|
"",
|
|
"",
|
|
5,
|
|
0,
|
|
"createdAt",
|
|
"",
|
|
"",
|
|
""
|
|
);
|
|
const content = fallbackResponse?.data?.data?.content || [];
|
|
setData(content);
|
|
return;
|
|
}
|
|
|
|
const articlesData = response?.data?.data || [];
|
|
const transformedData = articlesData.map((article: any) => ({
|
|
id: article.id,
|
|
title: article.title,
|
|
categoryName:
|
|
article.categoryName ||
|
|
(article.categories && article.categories[0]?.title) ||
|
|
"",
|
|
createdAt: article.createdAt,
|
|
smallThumbnailLink: article.thumbnailUrl,
|
|
fileTypeId: article.typeId,
|
|
tenantName: article.tenantName,
|
|
categories: article.categories,
|
|
label:
|
|
article.typeId === 1
|
|
? "Image"
|
|
: article.typeId === 2
|
|
? "Video"
|
|
: article.typeId === 3
|
|
? "Text"
|
|
: article.typeId === 4
|
|
? "Audio"
|
|
: "",
|
|
}));
|
|
|
|
setData(transformedData);
|
|
} catch (error) {
|
|
console.error("Gagal memuat data:", error);
|
|
try {
|
|
const fallbackResponse = await listData(
|
|
"",
|
|
"",
|
|
"",
|
|
5,
|
|
0,
|
|
"createdAt",
|
|
"",
|
|
"",
|
|
""
|
|
);
|
|
const content = fallbackResponse?.data?.data?.content || [];
|
|
setData(content);
|
|
} catch (fallbackError) {
|
|
console.error("Fallback API juga gagal:", fallbackError);
|
|
}
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<section className="max-w-[1350px] mx-auto px-4">
|
|
<div className="flex flex-col lg:flex-row gap-6 py-6">
|
|
{data.length > 0 && <Card item={data[0]} isBig />}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
|
|
{data.slice(1, 5).map((item) => (
|
|
<Card key={item.id} item={item} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-48 sm:h-64 md:h-80 lg:h-[460px] mt-4 rounded-xl">
|
|
<Image
|
|
src={"/PPS.png"}
|
|
alt={"pps"}
|
|
fill
|
|
className="object-cover rounded-xl"
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ========================
|
|
// 🔹 CARD COMPONENT
|
|
// ========================
|
|
function Card({ item, isBig = false }: { item: any; isBig?: boolean }) {
|
|
const router = useRouter();
|
|
const MySwal = withReactContent(Swal);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isBookmarked, setIsBookmarked] = useState(false);
|
|
|
|
const getLink = () => {
|
|
switch (item?.fileTypeId) {
|
|
case 1:
|
|
return `/content/image/detail/${item?.id}`;
|
|
case 2:
|
|
return `/content/video/detail/${item?.id}`;
|
|
case 3:
|
|
return `/content/text/detail/${item?.id}`;
|
|
case 4:
|
|
return `/content/audio/detail/${item?.id}`;
|
|
default:
|
|
return "#";
|
|
}
|
|
};
|
|
|
|
// ✅ Fungsi simpan bookmark
|
|
const handleSave = async () => {
|
|
const roleId = Number(getCookiesDecrypt("urie"));
|
|
|
|
// 🔸 Cek apakah user login (roleId ada & valid)
|
|
if (!roleId || roleId === 0 || isNaN(roleId)) {
|
|
MySwal.fire({
|
|
icon: "warning",
|
|
title: "Login diperlukan",
|
|
text: "Silakan login terlebih dahulu untuk menyimpan artikel.",
|
|
confirmButtonText: "Login Sekarang",
|
|
confirmButtonColor: "#d33",
|
|
}).then(() => {
|
|
router.push("/auth");
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSaving(true);
|
|
const res = await toggleBookmark(item.id);
|
|
console.log("Toggle Bookmark Response:", res);
|
|
|
|
if (res?.error) {
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Gagal",
|
|
text: "Gagal menyimpan artikel.",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
} else {
|
|
setIsBookmarked(true);
|
|
MySwal.fire({
|
|
icon: "success",
|
|
title: "Berhasil",
|
|
text: "Artikel berhasil disimpan ke bookmark.",
|
|
confirmButtonColor: "#3085d6",
|
|
timer: 1500,
|
|
showConfirmButton: false,
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Toggle bookmark error:", err);
|
|
MySwal.fire({
|
|
icon: "error",
|
|
title: "Kesalahan",
|
|
text: "Terjadi kesalahan saat menyimpan artikel.",
|
|
confirmButtonColor: "#d33",
|
|
});
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
className={`rounded-xl overflow-hidden shadow hover:shadow-lg transition-all bg-white ${
|
|
isBig
|
|
? "w-full lg:max-w-[670px] lg:min-h-[680px]"
|
|
: "w-full h-[350px] md:h-[330px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`relative ${
|
|
isBig ? "aspect-[3/2] lg:h-[525px]" : "aspect-video"
|
|
} w-full`}
|
|
>
|
|
<Link href={getLink()}>
|
|
<Image
|
|
src={item.smallThumbnailLink || "/contributor.png"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-2">
|
|
<div className="flex items-center gap-2 text-xs font-semibold flex-wrap">
|
|
<span className="bg-emerald-600 text-white px-2 py-0.5 rounded">
|
|
{item.tenantName}
|
|
</span>
|
|
<span className="text-orange-600">
|
|
{item.categories?.map((cat: any) => cat.title).join(", ")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-500">
|
|
{new Date(item.createdAt)
|
|
.toLocaleString("id-ID", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
timeZone: "Asia/Jakarta",
|
|
})
|
|
.replace(".", ":")}{" "}
|
|
WIB
|
|
</div>
|
|
|
|
<Link href={getLink()}>
|
|
<h3 className="text-sm font-semibold leading-snug line-clamp-2">
|
|
{item.title}
|
|
</h3>
|
|
</Link>
|
|
|
|
<div className="flex justify-between items-center pt-2">
|
|
<div className="flex gap-2 text-gray-500">
|
|
<ThumbsUp
|
|
size={18}
|
|
className="cursor-pointer hover:text-[#F60100]"
|
|
/>
|
|
<ThumbsDown
|
|
size={18}
|
|
className="cursor-pointer hover:text-red-600"
|
|
/>
|
|
</div>
|
|
|
|
{/* ✅ Tombol Save/Disable */}
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving || isBookmarked}
|
|
className={`text-sm px-3 py-1 rounded-md transition-all duration-200 cursor-pointer ${
|
|
isBookmarked
|
|
? "bg-gray-400 text-white cursor-not-allowed"
|
|
: "bg-[#F60100] text-white hover:bg-[#c90000]"
|
|
}`}
|
|
>
|
|
{isSaving ? "Saving..." : isBookmarked ? "Saved" : "Save"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
// import Image from "next/image";
|
|
// import Link from "next/link";
|
|
// import { ThumbsUp, ThumbsDown } from "lucide-react";
|
|
// import { useEffect, useState } from "react";
|
|
// import {
|
|
// listData,
|
|
// listArticles,
|
|
// } from "@/service/landing/landing";
|
|
|
|
// export default function Header() {
|
|
// const [data, setData] = useState<any[]>([]);
|
|
|
|
// useEffect(() => {
|
|
// const fetchData = async () => {
|
|
// try {
|
|
// // Use new Articles API
|
|
// const response = await listArticles(
|
|
// 1,
|
|
// 5,
|
|
// undefined,
|
|
// undefined,
|
|
// undefined,
|
|
// "createdAt"
|
|
// );
|
|
// console.log("Articles API response:", response);
|
|
|
|
// if (response?.error) {
|
|
// console.error("Articles API failed, falling back to old API");
|
|
// // Fallback to old API
|
|
// const fallbackResponse = await listData(
|
|
// "",
|
|
// "",
|
|
// "",
|
|
// 5,
|
|
// 0,
|
|
// "createdAt",
|
|
// "",
|
|
// "",
|
|
// ""
|
|
// );
|
|
// const content = fallbackResponse?.data?.data?.content || [];
|
|
// setData(content);
|
|
// return;
|
|
// }
|
|
|
|
// // Handle new API response structure
|
|
// const articlesData = response?.data?.data || [];
|
|
// console.log("Articles data:", articlesData);
|
|
|
|
// // Transform articles data to match old structure for backward compatibility
|
|
// const transformedData = articlesData.map((article: any) => ({
|
|
// id: article.id,
|
|
// title: article.title,
|
|
// categoryName:
|
|
// article.categoryName ||
|
|
// (article.categories && article.categories[0]?.title) ||
|
|
// "",
|
|
// createdAt: article.createdAt,
|
|
// smallThumbnailLink: article.thumbnailUrl,
|
|
// fileTypeId: article.typeId,
|
|
// label:
|
|
// article.typeId === 1
|
|
// ? "Image"
|
|
// : article.typeId === 2
|
|
// ? "Video"
|
|
// : article.typeId === 3
|
|
// ? "Text"
|
|
// : article.typeId === 4
|
|
// ? "Audio"
|
|
// : "",
|
|
// ...article,
|
|
// }));
|
|
|
|
// setData(transformedData);
|
|
// } catch (error) {
|
|
// console.error("Gagal memuat data:", error);
|
|
// // Try fallback to old API if new API fails
|
|
// try {
|
|
// const fallbackResponse = await listData(
|
|
// "",
|
|
// "",
|
|
// "",
|
|
// 5,
|
|
// 0,
|
|
// "createdAt",
|
|
// "",
|
|
// "",
|
|
// ""
|
|
// );
|
|
// const content = fallbackResponse?.data?.data?.content || [];
|
|
// setData(content);
|
|
// } catch (fallbackError) {
|
|
// console.error("Fallback API also failed:", fallbackError);
|
|
// }
|
|
// }
|
|
// };
|
|
|
|
// fetchData();
|
|
// }, []);
|
|
|
|
// return (
|
|
// <section className="max-w-[1350px] mx-auto px-4">
|
|
// <div className="flex flex-col lg:flex-row gap-6 py-6">
|
|
// {data.length > 0 && <Card item={data[0]} isBig />}
|
|
|
|
// <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
|
|
// {data.slice(1, 5).map((item) => (
|
|
// <Card key={item.id} item={item} />
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="relative w-full h-48 sm:h-64 md:h-80 lg:h-[460px] mt-4 rounded-xl">
|
|
// <Image
|
|
// src={"/PPS.png"}
|
|
// alt={"pps"}
|
|
// fill
|
|
// className="object-cover rounded-xl"
|
|
// />
|
|
// </div>
|
|
// </section>
|
|
// );
|
|
// }
|
|
|
|
// function Card({ item, isBig = false }: { item: any; isBig?: boolean }) {
|
|
// const getLink = () => {
|
|
// switch (item?.fileTypeId) {
|
|
// case 1:
|
|
// return `/content/image/detail/${item?.id}`;
|
|
// case 2:
|
|
// return `/content/video/detail/${item?.id}`;
|
|
// case 3:
|
|
// return `/content/text/detail/${item?.id}`;
|
|
// case 4:
|
|
// return `/content/audio/detail/${item?.id}`;
|
|
// default:
|
|
// return "#"; // fallback kalau type tidak dikenali
|
|
// }
|
|
// };
|
|
// return (
|
|
// <div>
|
|
// <div
|
|
// className={`rounded-xl overflow-hidden shadow hover:shadow-lg transition-all bg-white ${
|
|
// isBig
|
|
// ? "w-full lg:max-w-[670px] lg:min-h-[680px]"
|
|
// : "w-full h-[350px] md:h-[330px]"
|
|
// }`}
|
|
// >
|
|
// <div
|
|
// className={`relative ${
|
|
// isBig ? "aspect-[3/2] lg:h-[525px]" : "aspect-video"
|
|
// } w-full`}
|
|
// >
|
|
// <Link href={getLink()}>
|
|
// {" "}
|
|
// <Image
|
|
// src={item.smallThumbnailLink || "/contributor.png"}
|
|
// alt={item.title}
|
|
// fill
|
|
// className="object-cover"
|
|
// />
|
|
// </Link>
|
|
// </div>
|
|
|
|
// <div className="p-4 space-y-2">
|
|
// <div className="flex items-center gap-2 text-xs font-semibold flex-wrap">
|
|
// <span className="bg-emerald-600 text-white px-2 py-0.5 rounded">
|
|
// {item.tenantName}
|
|
// </span>
|
|
// <span className="text-orange-600">
|
|
// {" "}
|
|
// {item.categories?.map((cat: any) => cat.title).join(", ")}
|
|
// </span>
|
|
// </div>
|
|
// <div className="text-xs text-gray-500">
|
|
// {new Date(item.createdAt)
|
|
// .toLocaleString("id-ID", {
|
|
// day: "2-digit",
|
|
// month: "short",
|
|
// year: "numeric",
|
|
// hour: "2-digit",
|
|
// minute: "2-digit",
|
|
// hour12: false,
|
|
// timeZone: "Asia/Jakarta",
|
|
// })
|
|
// .replace(".", ":")}{" "}
|
|
// WIB
|
|
// </div>
|
|
// <Link href={getLink()}>
|
|
// {" "}
|
|
// <h3 className="text-sm font-semibold leading-snug line-clamp-2">
|
|
// {item.title}
|
|
// </h3>
|
|
// </Link>
|
|
|
|
// <div className="flex justify-between items-center pt-2">
|
|
// <div className="flex gap-2 text-gray-500">
|
|
// <ThumbsUp
|
|
// size={18}
|
|
// className="cursor-pointer hover:text-[#F60100]"
|
|
// />
|
|
// <ThumbsDown
|
|
// size={18}
|
|
// className="cursor-pointer hover:text-red-600"
|
|
// />
|
|
// </div>
|
|
// <button className="text-sm bg-[#F60100] text-white px-3 py-1 rounded-md hover:bg-[#F60100]">
|
|
// Save
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// }
|