fix-#392: added related blogs section in detailed blog page #398
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey @vamsidhar-914! Thanks for sticking to the guidelines! High five! 🙌🏻 |
|
Hey @vamsidhar-914! Thanks for sticking to the guidelines! High five! 🙌🏻 |
|
hey @krishnaacharyaa please do review it and want any changes then tell me 👍 |
|
helllo @krishnaacharyaa ?? |
There was a problem hiding this comment.
Thank you for the PR @vamsidhar-914 kindly address the review comments
| @@ -30,6 +37,24 @@ export default function DetailsPage() { | |||
| } | |||
| }, [post]); | |||
|
|
|||
| const category = post.categories[0]; | |||
| useEffect(() => { | |||
There was a problem hiding this comment.
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
|
And kindly add the images in the PR description or a video |
|
@krishnaacharyaa ok sure im on itt |
|
fetched all related category posts and displayed 3 posts in mobile view and 4 posts in desktop view |
|
Hey @vamsidhar-914! Thanks for sticking to the guidelines! High five! 🙌🏻 |
frontend/src/pages/details-page.tsx
Outdated
| @@ -12,6 +17,9 @@ export default function DetailsPage() { | |||
| const [loading, setIsLoading] = useState(initialVal); | |||
| const { postId } = useParams(); | |||
| const navigate = useNavigate(); | |||
| const [relatedCategoryPosts, setrelatedCategoryPosts] = useState<Post[]>([]); | |||
| const [relatedPostsLoading, setrelatedPostsLoading] = useState<boolean>(false); | |||
There was a problem hiding this comment.
setRelatedCategoryPosts and setRelatedPostsLoading, kindly follow Camel casing
frontend/src/pages/details-page.tsx
Outdated
| @@ -30,6 +38,38 @@ export default function DetailsPage() { | |||
| } | |||
| }, [post]); | |||
|
|
|||
| useEffect(() => { | |||
| const fetchrelatedCategoryPosts = async () => { | |||
There was a problem hiding this comment.
fetchRelatedCategoryPosts
frontend/src/pages/details-page.tsx
Outdated
| useEffect(() => { | ||
| const handlewindowResize = () => { | ||
| if (window.innerWidth <= 768) { | ||
| setvisiblePosts(3); |
There was a problem hiding this comment.
Kindly don't use this, use tailwind's sm: for the desktop file and no prefix for mobile file
Something like hide horizontal view for mobile and show only the vertical view , vice versa for the desktop
frontend/src/pages/details-page.tsx
Outdated
| useEffect(() => { | ||
| const handlewindowResize = () => { | ||
| if (window.innerWidth <= 768) { | ||
| setvisiblePosts(3); |
There was a problem hiding this comment.
Kindly don't use this, use tailwind's sm: for the desktop file and no prefix for mobile file
Something like hide horizontal view for mobile and show only the vertical view , vice versa for the desktop
|
For mobile can we aim for this kind (style) of related posts? small icon in the left and then the content on the right. If you feel these are quite a few requests in a single PR, kindly let me know we can break this into subtasks, and we can raise this as another PR :) I'm totally fine with that |
|
no its finee...i'll be on it |
|
changed naming conventions |
|
Super @vamsidhar-914 Can you use For the arrow right svg And Can you please take care of this alignment, here the see more related blogs > should be aligned to the below card like And kindly upload the photo of the shimmer/skeleton things aswell, if you feel its too much in a single PR we can take this shimmer loading skeletons in another PR i am fine with that :) IF you could close the above 2 bugs we are good to merge this PR :) |
|
fixed svg icons for light and dark mode added loading skeletons is this alignment ok? or u want any change to it |
Can't we have it right side as earlier You need to use something like justify-between |
|
Here I'm not talking about the skeletons I'm just talking about the "Related blogs" and "See all related blogs" that can we have in a single row! That would be nice |
There was a problem hiding this comment.
I guess this should go under skeletons folder, not sure, whereever all the skeletons are placed, kindly place it there,
And naming sir, please follow guidelines related-post-card-skeleton as other skeletons namings.
|
done it sir @krishnaacharyaa ! |
|
Thank you sir :) |
Summary
added related blogs section in detailed blog page
Description
whenever user visited individual blog page..they can see related posts based on the categories in the blog page
Images
desktop view
mobile view
Issue(s) Addressed
Closes #392
Prerequisites