fix:news all filter, pagination collapse
This commit is contained in:
Rama Priyanto
parent
9b4016af80
commit
a7eef2e1dc
|
|
@ -48,6 +48,7 @@ import {
|
|||
} from "next/navigation";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { format } from "date-fns";
|
||||
import { getCategoryById } from "@/services/master-categories";
|
||||
|
||||
const months = [
|
||||
"Jan",
|
||||
|
|
@ -76,11 +77,16 @@ export default function ListNews() {
|
|||
const searchParams = useSearchParams();
|
||||
const categoryIds = searchParams.get("category_id");
|
||||
const [categories, setCategories] = useState<any>([]);
|
||||
const [search, setSearch] = useState(searchParams.get("search") || "");
|
||||
const [searchValue, setSearchValue] = useState(search || "");
|
||||
const [searchValue, setSearchValue] = useState(
|
||||
searchParams.get("search") || ""
|
||||
);
|
||||
const [categorySearch, setCategorySearch] = useState("");
|
||||
const [debouncedValue, setDebouncedValue] = useState("");
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<any>();
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
|
||||
categoryIds ? categoryIds : ""
|
||||
);
|
||||
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
const today = new Date();
|
||||
const [year, setYear] = useState(today.getFullYear());
|
||||
|
|
@ -95,26 +101,26 @@ export default function ListNews() {
|
|||
setSelectedDate(new Date(year, monthIndex, 1));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSearch(searchParams.get("search") || "");
|
||||
setSearchValue(searchParams.get("search") || "");
|
||||
console.log(
|
||||
"ini",
|
||||
searchParams.get("month") ? Number(searchParams.get("month")) : null
|
||||
);
|
||||
setSelectedMonth(
|
||||
searchParams.get("month") ? Number(searchParams.get("month")) : null
|
||||
);
|
||||
}, [searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
getArticle();
|
||||
}, [page, category, search, searchParams]);
|
||||
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" : "",
|
||||
|
|
@ -128,7 +134,6 @@ export default function ListNews() {
|
|||
async function getArticle() {
|
||||
loading();
|
||||
// topRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
|
||||
const req = {
|
||||
page: page,
|
||||
search: searchValue || "",
|
||||
|
|
@ -139,13 +144,17 @@ export default function ListNews() {
|
|||
pathname.includes("polda") || pathname.includes("satker")
|
||||
? String(category)
|
||||
: "",
|
||||
categoryIds: categoryIds ? categoryIds : "",
|
||||
startDate: selectedMonth
|
||||
? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
|
||||
: "",
|
||||
endDate: selectedMonth
|
||||
? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
|
||||
: "",
|
||||
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);
|
||||
|
|
@ -163,6 +172,9 @@ export default function ListNews() {
|
|||
|
||||
const onInputChange = (value: string) => {
|
||||
setCategorySearch(value);
|
||||
if (value === "") {
|
||||
setSelectedCategoryId("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -202,18 +214,22 @@ export default function ListNews() {
|
|||
labelPlacement="outside"
|
||||
variant="bordered"
|
||||
placeholder="Kategori"
|
||||
classNames={{ base: "!mt-0" }}
|
||||
inputValue={categorySearch}
|
||||
// selectedKey={selectedCategoryId}
|
||||
onInputChange={onInputChange}
|
||||
onSelectionChange={(e) => setSelectedCategoryId(e)}
|
||||
inputProps={{ classNames: { inputWrapper: "border-1" } }}
|
||||
defaultItems={categories}
|
||||
>
|
||||
{categories.length > 0 &&
|
||||
{/* {categories.length > 0 &&
|
||||
categories.map((category: any) => (
|
||||
<AutocompleteItem key={category.id}>
|
||||
<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">
|
||||
|
|
@ -271,67 +287,86 @@ export default function ListNews() {
|
|||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
{/* <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]"
|
||||
>
|
||||
<Button className="bg-red-600 text-white w-[80px]">Cari</Button>
|
||||
</Link>
|
||||
Cari
|
||||
</Button>
|
||||
{/* </Link> */}
|
||||
</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}
|
||||
{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"
|
||||
>
|
||||
<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>
|
||||
{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="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 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>
|
||||
<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} />
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue