Transform Display of Timestamp

[StephieTack]

Value proposition

As a user, I want to see the date and time of my emotion entry clearly displayed, So that I can quickly understand when I recorded my feelings and reflect on my emotional journey over time.

Description

• Instead of this format on the emotion cards: YYYY-MM-DDThh:mm , it should be displayed like this: DD.MM.YYYY hh:mm

  Acceptance criteria

• [x] The date and time is shown in this format DD.MM.YYYY hh:mm
• [x] The date and time is displayed on the emotion card of the homepage and the Detail-page.
• [x] When the selected date meets the current day, the date and time should display "today" instead of the format on the emotion card.
• [x] When the selected date meets the past day, the date should display "yesterday" instead of the format on the emotion card.

Tasks

• [x] Create a new branch: feature/transform-display-timestamp.
• [x] Install Library: Run the command npm install date-fns.
• [x] Add Imports: Import format, isToday, and isYesterday from date-fns.
• [x] Create new componentTransformDateTime.js
• [x] Create formatDate Function: Transform the date into the desired format with an if-else for today or yesterday.
• [x] Update EmotionCard Component: Use the formatDate function to display the date and time.
• [x] Update Detail Page: Ensure it uses the formatDate function to display the date correctly.
• [x] Update EmotionList Component: Reflect the sorting of emotions based on the date and implement filtering.
• [x] Test Filter Functionality: Confirm the filtering function works and sorts by emotion type while maintaining date order.

[JessicaLoers]

Here are some suggestions for improving the user story. As I mentioned in this US review, it's not easy to write good stories right away, and it takes a little practice. 🙂

Value proposition

To improve the Value Proposition format, please structure it like this to make it consistent and easy to follow:

As a user  `<role>`
I want to   `<action>`
So that I   `<benefit / reason>`

Please write it more precise Example:

As a user,
I want to see the date and time of my emotion entry clearly displayed,
So that I can quickly understand when I recorded my feelings and reflect on my emotional journey over time.

Some Considerations:

• It would be helpful to specify how and where the date will be displayed (e.g., next to the emotion entry or in the detail view).
• Creating a wireframe would provide visual clarity on where exactly the date should be placed in the app layout. This can assist us in understanding the requirements better.

[F-Kirchhoff]

Your tasks about the library are very detailed already, very nice. Please add some more tasks on which components need to be updated and maybe if you want to create a new component for the date display.

[F-Kirchhoff]

Looks better, please keep the shorter layout of the tasks from the previous US without a heading and sub-tasklist for each task.

[W-Schkulov]

Looks better, please keep the shorter layout of the tasks from the previous US without a heading and sub-tasklist for each task.

does it looks better now?