391 lines
12 KiB
TypeScript
391 lines
12 KiB
TypeScript
"use client";
|
|
import {
|
|
Autocomplete,
|
|
AutocompleteItem,
|
|
BreadcrumbItem,
|
|
Breadcrumbs,
|
|
Button,
|
|
DatePicker,
|
|
Image,
|
|
Input,
|
|
Listbox,
|
|
ListboxItem,
|
|
Pagination,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Select,
|
|
SelectItem,
|
|
} from "@heroui/react";
|
|
import {
|
|
CalendarIcon,
|
|
Calender,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
ClockIcon,
|
|
EyeFilledIcon,
|
|
SearchIcon,
|
|
TimesIcon,
|
|
UserIcon,
|
|
} from "../../icons";
|
|
import Link from "next/link";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import {
|
|
getArticleByCategoryLanding,
|
|
getListArticle,
|
|
} from "@/services/article";
|
|
import {
|
|
convertDateFormatNoTimeV2,
|
|
formatMonthString,
|
|
htmlToString,
|
|
textEllipsis,
|
|
} from "@/utils/global";
|
|
import {
|
|
useParams,
|
|
usePathname,
|
|
useRouter,
|
|
useSearchParams,
|
|
} from "next/navigation";
|
|
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",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
];
|
|
|
|
export default function ListNews() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
const [page, setPage] = useState(1);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const topRef = useRef<HTMLDivElement>(null);
|
|
const params = useParams();
|
|
const category = params?.name;
|
|
const searchParams = useSearchParams();
|
|
const categoryIds = searchParams.get("category_id");
|
|
const [categories, setCategories] = useState<any>([]);
|
|
const [searchValue, setSearchValue] = useState(
|
|
searchParams.get("search") || ""
|
|
);
|
|
const [categorySearch, setCategorySearch] = useState("");
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState<any>([]);
|
|
|
|
const today = new Date();
|
|
const [year, setYear] = useState(today.getFullYear());
|
|
|
|
const [selectedMonth, setSelectedMonth] = useState<number | null>(
|
|
searchParams.get("month") ? Number(searchParams.get("month")) - 1 : null
|
|
);
|
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
|
|
|
const handleMonthClick = (monthIndex: number) => {
|
|
setSelectedMonth(monthIndex);
|
|
setSelectedDate(new Date(year, monthIndex, 1));
|
|
};
|
|
|
|
useEffect(() => {
|
|
const search = searchParams.get("search");
|
|
const category = searchParams.get("category_id");
|
|
if (searchParams.get("search")) {
|
|
setSearchValue(String(searchParams.get("search")));
|
|
getArticle({ title: String(search) });
|
|
}
|
|
|
|
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, searchParams]);
|
|
|
|
async function getArticle(props?: { title?: string; category?: any }) {
|
|
loading();
|
|
// topRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
const req = {
|
|
page: page,
|
|
search: props?.title || searchValue || "",
|
|
limit: "9",
|
|
isPublish: true,
|
|
sort: "desc",
|
|
categorySlug:
|
|
pathname.includes("polda") || pathname.includes("satker")
|
|
? String(category)
|
|
: "",
|
|
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))
|
|
: "",
|
|
endDate:
|
|
selectedDate && selectedMonth !== null
|
|
? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
|
|
: "",
|
|
};
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
setTotalPage(response?.data?.meta?.totalPage);
|
|
close();
|
|
}
|
|
|
|
const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
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">
|
|
<div className="flex flex-row gap-4">
|
|
<Link href="/" className="text-black font-semibold">
|
|
Beranda
|
|
</Link>
|
|
<ChevronRightIcon />
|
|
<p className="text-black">Berita</p>
|
|
</div>
|
|
<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"
|
|
placeholder="Judul..."
|
|
value={searchValue}
|
|
onValueChange={setSearchValue}
|
|
type="search"
|
|
/>
|
|
<AsyncSelect
|
|
isMulti
|
|
loadOptions={loadOptions}
|
|
defaultOptions
|
|
placeholder="Kategori"
|
|
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
|
|
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) => (
|
|
<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>
|
|
</div>
|
|
{article?.length < 1 || !article ? (
|
|
<div className="flex justify-center items-center">Tidak ada Data</div>
|
|
) : (
|
|
<>
|
|
<section
|
|
id="content"
|
|
className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
|
|
>
|
|
{article?.map((news: any) => (
|
|
<Link
|
|
href={`/news/detail/${news?.id}-${news?.slug}`}
|
|
key={news?.id}
|
|
>
|
|
<div className="">
|
|
<Image
|
|
src={
|
|
news.thumbnailUrl == ""
|
|
? "/no-image.jpg"
|
|
: news.thumbnailUrl
|
|
}
|
|
width={1920}
|
|
alt="thumbnail"
|
|
className="rounded-b-none h-[27vh] w-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
|
|
<div className="font-semibold text-lg">{news?.title}</div>
|
|
<div className="flex flex-row items-center py-1 text-[10px] gap-2">
|
|
<div className="flex flex-row items-center gap-1">
|
|
<CalendarIcon size={18} />
|
|
<p>{formatMonthString(news?.createdAt)}</p>
|
|
</div>
|
|
<div className="flex flex-row items-center">
|
|
<ClockIcon size={18} />
|
|
<p>{`${new Date(news?.createdAt)
|
|
.getHours()
|
|
.toString()
|
|
.padStart(2, "0")}:${new Date(news?.createdAt)
|
|
.getMinutes()
|
|
.toString()
|
|
.padStart(2, "0")}`}</p>
|
|
</div>
|
|
<div className="flex flex-row items-center gap-1">
|
|
<UserIcon size={14} />
|
|
<p>{news?.createdByName}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-sm">
|
|
{textEllipsis(htmlToString(news?.description), 165)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</section>
|
|
<div className="flex justify-center mt-5">
|
|
<Pagination
|
|
page={page}
|
|
total={totalPage}
|
|
onChange={setPage}
|
|
classNames={{
|
|
item: "w-fit px-3",
|
|
cursor: "w-fit px-3",
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|