Snapgram Related Posts
Task 🎯
Your goal is to complete the post details page by developing the “Related Posts” feature.
Example 🧩
Visit the Figma Design and see how the feature should look like
Resources đź“–
Hint đź’ˇ
Stuck somewhere? No worries, we’re here to help!
Ask yourself —
What is expected (The Output)?
When someone visits the details of any kind of post, we would like to show similar kinds of posts or related posts created by that user.
What do we need in order to build that?
- User ID
- Postcard and its Grid
- Loader to show the status while doing the fetch
- Appwrite function to get the related posts
- …?
Do I even have to explain? You got the game, don’t you?
Yes, the UI of Related posts is similar to what we have done before with Explore or another page.
See, that’s the magic of Reusability. Once you abstract something properly, you can reuse it wherever needed.
So,
-
Create the horizontal line and the head text by following the Figma styles
-
Reuse the
GridPostList
component and pass the dummy data for now to see the results -
Create a query hook, say,
useGetUserPosts
, that will fetch the posts created by that particular userexport const useGetUserPosts = (userId?: string) => {return useQuery({...});}; -
Create the Appwrite API using try-catch, say,
getUserPosts
, and assign that function to thequeryFn
export async function getUserPosts(userId?: string) {try {} catch (error) {console.log(error);}}export const useGetUserPosts = (userId?: string) => {return useQuery({**queryFn: () => getUserPosts(userId),**});}; -
Now inside the Appwrite API, implement the logic to get the posts created by that particular user. What we’ll need for that?
- User ID
- Appwrite List documents endpoint
- Database ID
- User Collection ID
- Queries to filter out the posts created by that particular user
Were you able to create it?
Great!
Now we have to do one final thing before calling the hook inside the code.
Right now, with the way we have it, if we call the hook directly inside the component, it may execute before it gets the ID of the user, thus leading to errors.
To avoid this, we can explicitly tell the react query to execute the query only when the user ID is there. How?
Using enabled, which decides when and when not to execute the query hook, and using the queryKey
to revalidate the cache
export const useGetUserPosts = (userId?: string) => {
return useQuery({
**queryKey: ["getUserPosts", userId],**
queryFn: () => getUserPosts(userId),
**enabled: !!userId,**
});
};
That’s it now. All you have to do is now call the hook inside the PostDetails component, pass the ID, and get the results and loading state and render the content accordingly
These challenges or features are more logic-oriented, and there may be other solutions. So take your time, think carefully, develop your logical abilities, and give it a try.
We believe in your capabilities ❤️