classify web
This commit is contained in:
Husanjonazamov
103
components/PagesComponent/Blogs/Blogs.jsx
Normal file
103
components/PagesComponent/Blogs/Blogs.jsx
Normal file
@@ -0,0 +1,103 @@
|
||||
"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;
|
||||
80
components/PagesComponent/Blogs/PopularPosts.jsx
Normal file
80
components/PagesComponent/Blogs/PopularPosts.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import NoData from "@/components/EmptyStates/NoData";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { t } from "@/utils";
|
||||
import { getBlogsApi } from "@/utils/api";
|
||||
import CustomLink from "@/components/Common/CustomLink";
|
||||
import { useEffect, useState } from "react";
|
||||
import CustomImage from "@/components/Common/CustomImage";
|
||||
|
||||
const PopularPosts = ({ langCode }) => {
|
||||
const [isPopularPostLoading, setIsPopularPostLoading] = useState(false);
|
||||
const [popularBlogs, setPopulerBlogs] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
getPopulerBlogsData();
|
||||
}, [langCode]);
|
||||
|
||||
const getPopulerBlogsData = async () => {
|
||||
setIsPopularPostLoading(true);
|
||||
try {
|
||||
const res = await getBlogsApi.getBlogs({ sort_by: "popular" });
|
||||
setPopulerBlogs(res?.data?.data?.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsPopularPostLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col border rounded-xl">
|
||||
<div className="p-4 border-b">
|
||||
<p className="font-medium">{t("popularPosts")}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{isPopularPostLoading ? (
|
||||
Array.from({ length: 8 })?.map((_, index) => (
|
||||
<PopularPostsSkeleton key={index} />
|
||||
))
|
||||
) : popularBlogs && popularBlogs?.length > 0 ? (
|
||||
popularBlogs?.map((popularBlog) => (
|
||||
<CustomLink
|
||||
key={popularBlog?.id}
|
||||
href={`/blogs/${popularBlog?.slug}`}
|
||||
className="flex gap-3 px-4 py-2 items-center"
|
||||
>
|
||||
<CustomImage
|
||||
src={popularBlog?.image}
|
||||
alt={popularBlog?.title}
|
||||
height={48}
|
||||
width={64}
|
||||
className="aspect-[64/48] rounded object-cover"
|
||||
/>
|
||||
<p className="line-clamp-3 font-medium">
|
||||
{popularBlog?.translated_title || popularBlog?.title}
|
||||
</p>
|
||||
</CustomLink>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full">
|
||||
<NoData name={t("popularPosts")} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopularPosts;
|
||||
|
||||
const PopularPostsSkeleton = () => {
|
||||
return (
|
||||
<div className="flex gap-3 px-4 py-2 items-center">
|
||||
<Skeleton className="h-12 w-16 rounded-lg" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
82
components/PagesComponent/Blogs/Tags.jsx
Normal file
82
components/PagesComponent/Blogs/Tags.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { t } from "@/utils";
|
||||
import { getBlogTagsApi } from "@/utils/api";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "@/components/Common/useNavigate";
|
||||
|
||||
const Tags = ({ tag, langCode }) => {
|
||||
const pathname = usePathname();
|
||||
const { navigate } = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [blogTags, setBlogTags] = useState([]);
|
||||
|
||||
const isAllTagActive = pathname === "/blogs" && !tag;
|
||||
|
||||
useEffect(() => {
|
||||
getBlogTagsData();
|
||||
}, [langCode]);
|
||||
|
||||
const getBlogTagsData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await getBlogTagsApi.getBlogs();
|
||||
setBlogTags(res?.data?.data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAllTags = () => {
|
||||
navigate("/blogs", { scroll: false });
|
||||
};
|
||||
|
||||
const handleTagClick = (tagItem) => {
|
||||
window.history.pushState(null, "", `/blogs?tag=${tagItem}`);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col border rounded-lg ">
|
||||
<div className="p-4">
|
||||
<p className="font-bold">{t("tags")}</p>
|
||||
</div>
|
||||
<div className="border-b w-full"></div>
|
||||
<div className="p-4 flex flex-wrap gap-2">
|
||||
{isLoading ? (
|
||||
Array.from({ length: 10 }).map((_, index) => (
|
||||
<Skeleton key={index} className="w-20 h-8" />
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className={cn(
|
||||
"border px-4 text-sm py-2 rounded-md",
|
||||
isAllTagActive && "border-primary text-primary"
|
||||
)}
|
||||
onClick={handleAllTags}
|
||||
>
|
||||
{t("all")}
|
||||
</button>
|
||||
|
||||
{blogTags?.map((tagItem) => (
|
||||
<button
|
||||
key={tagItem.value}
|
||||
className={cn(
|
||||
"border px-4 text-sm py-2 rounded-md break-all",
|
||||
tag === String(tagItem.value) && "border-primary text-primary"
|
||||
)}
|
||||
onClick={() => handleTagClick(tagItem.value)}
|
||||
>
|
||||
{tagItem.label}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tags;
|
||||
Reference in New Issue
Block a user