104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
"use client";
|
|
import BreadCrumb from "@/components/BreadCrumb/BreadCrumb";
|
|
import { t } from "@/utils";
|
|
import { getBlogsApi } from "@/utils/api";
|
|
import { useEffect, useState } from "react";
|
|
import BlogCardSkeleton from "@/components/Skeletons/BlogCardSkeleton";
|
|
import BlogCard from "../LandingPage/BlogCard";
|
|
import Layout from "@/components/Layout/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import NoData from "@/components/EmptyStates/NoData";
|
|
import Tags from "./Tags";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useSelector } from "react-redux";
|
|
import { getCurrentLangCode } from "@/redux/reducer/languageSlice";
|
|
|
|
const Blogs = () => {
|
|
const searchParams = useSearchParams();
|
|
const tag = searchParams?.get("tag");
|
|
const langCode = useSelector(getCurrentLangCode);
|
|
const [blogs, setBlogs] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
const [isLoadMore, setIsLoadMore] = useState(false);
|
|
useEffect(() => {
|
|
getBlogsData(currentPage);
|
|
}, [tag, langCode]);
|
|
|
|
const getBlogsData = async (page) => {
|
|
try {
|
|
page > 1 ? setIsLoadMore(true) : setIsLoading(true);
|
|
const res = await getBlogsApi.getBlogs({
|
|
sort_by: "new-to-old",
|
|
page,
|
|
...(tag && { tag }),
|
|
});
|
|
|
|
if (res?.data?.error === false) {
|
|
page === 1
|
|
? setBlogs(res?.data?.data?.data)
|
|
: setBlogs([...blogs, ...res?.data?.data?.data]);
|
|
setCurrentPage(res?.data?.data?.current_page);
|
|
setHasMore(res?.data?.data?.current_page < res?.data?.data?.last_page);
|
|
} else {
|
|
console.error(res?.data?.message);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
setIsLoadMore(false);
|
|
}
|
|
};
|
|
|
|
const handleLoadMore = () => {
|
|
getBlogsData(currentPage + 1);
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<BreadCrumb title2={t("ourBlogs")} />
|
|
<div className="container">
|
|
<div className="flex flex-col mt-8 gap-6">
|
|
<h1 className="text-2xl font-medium">{t("ourBlogs")}</h1>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-4 ">
|
|
<div className="lg:col-span-8 col-span-12 order-2 lg:order-1">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{isLoading ? (
|
|
Array.from({ length: 6 })?.map((_, index) => (
|
|
<BlogCardSkeleton key={index} />
|
|
))
|
|
) : blogs && blogs?.length > 0 ? (
|
|
blogs?.map((blog) => <BlogCard key={blog?.id} blog={blog} />)
|
|
) : (
|
|
<div className="col-span-full">
|
|
<NoData name={t("blog")} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
{hasMore && (
|
|
<div className="text-center mt-6 mb-2">
|
|
<Button
|
|
variant="outline"
|
|
className="text-sm sm:text-base text-primary w-[256px]"
|
|
disabled={isLoading || isLoadMore}
|
|
onClick={handleLoadMore}
|
|
>
|
|
{isLoadMore ? t("loading") : t("loadMore")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="col-span-12 lg:col-span-4 order-1 lg:order-2">
|
|
<Tags tag={tag} langCode={langCode} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Blogs;
|