Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix-#392: added related blogs section in detailed blog page #398

Merged
merged 5 commits into from
Jun 7, 2024
Merged

fix-#392: added related blogs section in detailed blog page #398

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9e344f0
fix-#392: added related blogs section in detailed blog page
vamsidhar-914 Jun 4, 2024
f0b2237
fix-#339: added all related categoris posts
vamsidhar-914 Jun 5, 2024
5c8427b
fix-#392: changed styling of posts for mobileView
vamsidhar-914 Jun 5, 2024
4c40ce0
fix-#392: added shimmer loading skeletons,fixed alignment
vamsidhar-914 Jun 6, 2024
2cc631c
fix-#392: fixed alignment
vamsidhar-914 Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 44 additions & 1 deletion frontend/src/pages/details-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import navigateBackWhiteIcon from '@/assets/svg/navigate-back-white.svg';
import formatPostTime from '@/utils/format-post-time';
import CategoryPill from '@/components/category-pill';
import { useEffect, useState } from 'react';
import axios from 'axios';
import Post from '@/types/post-type';
import axiosInstance from '@/helpers/axios-instance';
import { ArrowBigRight } from 'lucide-react';
import { PostCardSkeleton } from '@/components/skeletons/post-card-skeleton';
import PostCard from '@/components/post-card';
krishnaacharyaa marked this conversation as resolved.
Show resolved Hide resolved

export default function DetailsPage() {
const { state } = useLocation();
Expand All @@ -12,6 +17,8 @@ export default function DetailsPage() {
const [loading, setIsLoading] = useState(initialVal);
const { postId } = useParams();
const navigate = useNavigate();
const [categoryPosts, setcategoryPosts] = useState<Post[]>([]);
const [postLoading, setpostLoading] = useState(false);

useEffect(() => {
krishnaacharyaa marked this conversation as resolved.
Show resolved Hide resolved
const getPostById = async () => {
Expand All @@ -30,6 +37,24 @@ export default function DetailsPage() {
}
}, [post]);

const category = post.categories[0];
useEffect(() => {
const fetchCategoryPost = async () => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should use all the categories,
Basically if there are three categories a b and c , i need to get all the posts which has any of a b or c. and then get only top 3 posts in the mobile view, vertically and may be 4 or 5 in the desktop view

try {
setpostLoading(true);
const res = await axiosInstance.get(`/api/posts/categories/${category}`);
const filterdPosts = res.data.filter((item: Post) => item._id !== post._id);
const posts = filterdPosts.slice(0, 4);
setcategoryPosts(posts);
setpostLoading(false);
} catch (err) {
console.log(err);
setpostLoading(false);
}
};
fetchCategoryPost();
}, [category]);

if (!loading)
return (
<div className="flex-grow bg-light dark:bg-dark">
Expand Down Expand Up @@ -66,6 +91,24 @@ export default function DetailsPage() {
</p>
</div>
</div>
<div className="container mx-auto flex flex-col px-4 py-6 text-white">
<div className="flex justify-between text-2xl font-semibold">
<div>Related Blogs</div>
<div className="mr-8 flex cursor-pointer items-center gap-1 text-gray-400 hover:underline">
<Link to="/">
<div className="text-sm">see more blogs</div>
</Link>
<ArrowBigRight className="h-6 w-6" />
</div>
</div>
<div className="flex flex-wrap">
{categoryPosts.length === 0 && postLoading
? Array(4)
.fill(0)
.map((_, index) => <PostCardSkeleton key={index} />)
: categoryPosts.map((post) => <PostCard key={post._id} post={post} />)}
</div>
</div>
</div>
);
else return <h1>Loading...</h1>;
Expand Down
Loading