Toast messages

[eneben]

Toast Messages

Value Proposition

As a user

I want to receive messages as feedback when I perform actions like saving or deleting flashcards,

so that I can be immediately informed of the success or failure of my actions without disrupting my workflow.

Description

Acceptance Criteria

• The confirmation message should clearly describe the action performed (e.g., "Flashcard saved successfully," "Flashcard deleted," "Error saving flashcard").
• The message should use consistent and user-friendly language.
• The confirmation message should appear within 1 second after an action is performed.
• The confirmation message should be visible for 5 seconds before disappearing automatically - the left amount of time is visible for the user.
• Each message should contain an icon indicating the action.
• The confirmation message should be dismissible by the user before it disappears automatically.

Tasks

• [x] Create feature branch feature/toast-messages
• [x] Implement toast messages for specific actions
• [x] Create a reusable ToastMessage component that accepts props for message type, content, and visibility duration.
• [x] Depending on the message type there's a specific styling.
• [x] Implement a function showToastMessage that triggers the ToastMessage component with the appropriate message and visibility settings with useEffect.
• [x] Integrate the showToastMessage function in the following actions:
  • [x] Create Flashcard: "Flashcard successfully added to e.g. Biology"
  • [x] Delete Flashcard: "Flashcard deleted successfully"
  • [x] Update Flashcard: "Flashcard updated successfully"
  • [ ] Error Handling: "Error: Please try again"
  • [ ] Ensure the ToastMessage component appears within 1 second after an action is triggered.
  • [x] Set the ToastMessage component to automatically disappear after 5 seconds.
  • [x] Make the whole toast message clickable to allow users to manually dismiss the toast before it disappears automatically.

[SylvieDoumet]

Good job !

Please be more precise in the acceptance criteria description how long the confirmation message is displayed >> 3 seconds

Take care to not use to many different styling for different message types

Don't use messages that too long (cf. mark as (in-)correct) - that's not readable in a short time / when a message is disappearing after 3 seconds

Please rethink if it is necessary to dismiss a message via a click event if it disappears eventhough after 3 seconds - it seems a lot a work for a little extra functionality

[IsabellUrban]

Thanks for your comments! We adjusted the time in the acceptance criteria and tasks to 5 seconds so that it still make sense to dismiss the toast message by clicking on it. We also deleted the long toast messages. 😄