Bookmark Emotion Entry

[Leon910]

Value Proposition

As a user

I want to bookmark emotion entries,

so that I can quickly recall significant emotional experiences and identify patterns or triggers over time.

Description

Acceptance Criteria

• Each listed emotion entry includes a bookmark option.
• Clicking the bookmark button of an unbookmarked emotion entry adds it to the bookmarked list.
• Clicking the bookmark button of a bookmarked emotion entry removes it from the bookmarked list.
• The bookmarked emotion entries are displayed on a separate list accessible via a new page dedicated to bookmarked emotion entries.
• There is a clearly visible link on the homepage to navigate to the bookmarked emotion entries page.
• There is a clearly visible link on the bookmarked emotion entries page to navigate back to the homepage.
• Bookmarked emotion entries are visually highlighted by a distinct bookmark icon colour to differentiate them from unbookmarked emotion entries.
• If there are no bookmarked emotion entries in the bookmarked list, a message is displayed to the user indicating that there are no bookmarks.

Tasks

• [x] Create feature branch feature/bookmark-emotion-entry
• [x] Create an additional globalState myEmotion on Homepage to save further information for emotions (also think of useLocalStorageState)
• [x] Find suitable svg-files for both states and safe it in the assets-folder [hint: fontawesome.com]
• [x] Create new function on Homepage handleToggleEmotion to store the favorite flag in the setMyEmotion
• [x] Create a new page /pages/myEmotion/index.js
• [x] On myEmotion page map over the setMyEmotion variable
• [x] Create a new component FavoriteButton and save it in the /components/FavouriteButton/index.js
• [x] Handle the FavoriteButton props: isFavorite, onToggleFavorite
• [x] Render the FavoriteButton component in the Homepage and on myEmotions page
• [x] Create a new Navigation component and save it in the /components/Navigation/Navigation.js
• [x] Import useRouter into Navigation.js
• [x] Implement logic and styling for active page
• [x] Create a new file inside the components folder and name it Layout.js, import the Navigation-component
• [x] Go to the app.js file and import the Layout-component
• [x] Wrap the Layout-component around the global Component
• [x] Create a message indicating no bookmarks in the list using the length method (hint: App.js of recap-project-4)

[F-Kirchhoff]

maybe there is another way to display the navigation everywhere (think about layouts)

[Leon910]

maybe there is another way to display the navigation everywhere (think about layouts)

We do not want to have the navigation-bar on the details-page yet. That is why we create a component for the navigation-bar. On the Details-page we at first only want to implement the back-arrow as navigation. Do you mean with "layouts" the global styling?

[NikRoe]

I am assuming Felix meant this Layout pattern you often see in Next.js applications.

This layout will be displayed on every page.

Since you don't want to have the navigation visible when on a details page, you would need to modify this. Ensuring it only gets displayed on pages that are no detail pages. You could achieve this by working with useRouter and checking what the current path is. For your use case, it does sound like quite some work for some small results.

Therefore I would also ask, why don't you want the navigation also visible for the details page? Are there any downsides? 🤔

[NikRoe]

👍 LGTM