Workshop

Bookmarks

Sign up to watch this lesson (and more).

By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.

Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.

You'll also be the first to know about upcoming launches, events, and exclusive discounts.

No spam—just helpful content to level up your skills.

If that sounds fair, go ahead and log in to continue →

Enter your name and email to get instant access

Bookmarks

You probably noticed that the Figma design includes bookmark icons in the Companion Cards, but we haven’t implemented them yet. That’s a task for you, to test how much you have learned during this course. If you get stuck, the code for bookmarks implementation is available in the Video Kit below this video.

Tips:
- Database Table - we should store ID of an user, and ID of Companion they have bookmarked. session_history table has exactly the same structure, so you should be able to easily replicate it!
- Getting user’s bookmarked companions - since bookmarks table is identical to session history, you can get the bookmarks in the same way you we did with user’s session history. Jump in to /lib/actions/companion.actions.ts and have a look at getUserSessions.
- Showing bookmarked companions in “My Journey” - you probably guessed it already - follow what we did with session history. First, get the bookmarked companions from the database using the method you just added to the companion server actions, then add a new AccordionItem element with CompanionsList, passing bookmarked companions to it.
- Showing the bookmarked state on Companion Cards - this one might be a bit tricky. You’ll have to modify the getAllCompanions method:
  - Before you return companions, you’d have to check bookmarks table for each companion ID present in the query, and check if a user_id - companion_id pair in exists in bookmarks. Then, for each existing bookmark get the companion with the same ID and add new bookmarked property set to true.
  - In Companion Card you can simply check if that bookmarked property is true, and show different images based on that check - we have provided you with bookmark.svg and bookmark-filled.svg for that purpose.
  - Last thing is to implement addBookmark and removeBookmark server actions - this is going to be simple again, since you did something very similar before - addBookmark is going to be basically the same as addToSessionHistory.
- If you ever get stuck during this assignment, remember to have a look at the code in the Repository!

0 Comments

No Comments Yet

Be the first to share your thoughts and start the conversation.

Bookmarks

Tips:

Database Table - we should store ID of an user, and ID of Companion they have bookmarked. session_history table has exactly the same structure, so you should be able to easily replicate it!
Getting user’s bookmarked companions - since bookmarks table is identical to session history, you can get the bookmarks in the same way you we did with user’s session history. Jump in to /lib/actions/companion.actions.ts and have a look at getUserSessions.
Showing bookmarked companions in “My Journey” - you probably guessed it already - follow what we did with session history. First, get the bookmarked companions from the database using the method you just added to the companion server actions, then add a new AccordionItem element with CompanionsList, passing bookmarked companions to it.
Showing the bookmarked state on Companion Cards - this one might be a bit tricky. You’ll have to modify the getAllCompanions method:
- Before you return companions, you’d have to check bookmarks table for each companion ID present in the query, and check if a user_id - companion_id pair in exists in bookmarks. Then, for each existing bookmark get the companion with the same ID and add new bookmarked property set to true.
- In Companion Card you can simply check if that bookmarked property is true, and show different images based on that check - we have provided you with bookmark.svg and bookmark-filled.svg for that purpose.
- Last thing is to implement addBookmark and removeBookmark server actions - this is going to be simple again, since you did something very similar before - addBookmark is going to be basically the same as addToSessionHistory.
If you ever get stuck during this assignment, remember to have a look at the code in the Repository!