374 lines
12 KiB
TypeScript
374 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 { 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";
|
|
|
|
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 [debouncedValue, setDebouncedValue] = useState("");
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
|
|
categoryIds ? categoryIds : ""
|
|
);
|
|
|
|
const [count, setCount] = useState(0);
|
|
|
|
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));
|
|
};
|
|
|
|
const getCategoryId = async () => {
|
|
if (categoryIds) {
|
|
const res = await getCategoryById(Number(selectedCategoryId));
|
|
setCategorySearch(res?.data?.data.title);
|
|
setCategories([res?.data?.data]);
|
|
setCount(1);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getCategory();
|
|
if (categoryIds && count == 0) {
|
|
getCategoryId();
|
|
}
|
|
}, [debouncedValue]);
|
|
|
|
useEffect(() => {
|
|
getArticle();
|
|
}, [page]);
|
|
|
|
const getCategory = async () => {
|
|
const res = await getArticleByCategoryLanding({
|
|
limit: debouncedValue === "" ? "5" : "",
|
|
title: debouncedValue,
|
|
});
|
|
if (res?.data?.data) {
|
|
setCategories(res?.data?.data);
|
|
}
|
|
};
|
|
|
|
async function getArticle() {
|
|
loading();
|
|
// topRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
const req = {
|
|
page: page,
|
|
search: searchValue || "",
|
|
limit: "9",
|
|
isPublish: true,
|
|
sort: "desc",
|
|
categorySlug:
|
|
pathname.includes("polda") || pathname.includes("satker")
|
|
? String(category)
|
|
: "",
|
|
categoryIds: selectedCategoryId,
|
|
// categoryIds:
|
|
// selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
|
|
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();
|
|
}
|
|
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
setDebouncedValue(categorySearch);
|
|
}, 1500);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, [categorySearch]);
|
|
|
|
const onInputChange = (value: string) => {
|
|
setCategorySearch(value);
|
|
if (value === "") {
|
|
setSelectedCategoryId("");
|
|
}
|
|
};
|
|
|
|
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="py-5 lg:py-10 lg:px-10 flex flex-col lg:flex-row gap-2 items-end">
|
|
<Input
|
|
aria-label="Judul"
|
|
className="w-full"
|
|
classNames={{
|
|
inputWrapper: "bg-white hover:!bg-gray-100 border-1",
|
|
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"
|
|
/>
|
|
<div className="flex w-full lg:w-fit gap-4">
|
|
<Autocomplete
|
|
className="w-full lg:w-[240px] mt-0"
|
|
label=""
|
|
labelPlacement="outside"
|
|
variant="bordered"
|
|
placeholder="Kategori"
|
|
inputValue={categorySearch}
|
|
// selectedKey={selectedCategoryId}
|
|
onInputChange={onInputChange}
|
|
onSelectionChange={(e) => setSelectedCategoryId(e)}
|
|
inputProps={{ classNames: { inputWrapper: "border-1" } }}
|
|
defaultItems={categories}
|
|
>
|
|
{/* {categories.length > 0 &&
|
|
categories.map((category: any) => (
|
|
<AutocompleteItem key={`${category.id}`}>
|
|
{category.title}
|
|
</AutocompleteItem>
|
|
))} */}
|
|
{(item: any) => (
|
|
<AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
|
|
)}
|
|
</Autocomplete>
|
|
</div>
|
|
<div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl 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-[220px]">
|
|
<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>
|
|
{/* <Link
|
|
href={`/news/all?search=${searchValue}&category_id=${
|
|
selectedCategoryId || ""
|
|
}&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
|
|
> */}
|
|
<Button
|
|
onPress={getArticle}
|
|
className="bg-red-600 text-white w-[80px]"
|
|
>
|
|
Cari
|
|
</Button>
|
|
{/* </Link> */}
|
|
</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 text-center",
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|