Toastmessages Form completion

[StephieTack]

Value proposition

As a user i want to see toastmessage when i add or edit the form in order to get a clear visual feedback of the success process.

Description

• Precise, no unnecessary information

  Acceptance criteria

• [ ] After clicking the "save" button on the editform of the edit.js, the page is closed and the toastmessage is shown on the detailpage.
• [ ] The toastmessage is on a fixed position.
• [ ] The toastmessage is sliding from the right and the color opacity is maximized.
• [ ] After 3 seconds the message slides to the right and the color opacity is minimized.

  Tasks

• [ ] Create feature branchfeature/toastmessages
• [ ] Create ToastMessage component: Build a reusable ToastMessage component. (hint: with props message, visible)
• [ ] Integrate ToastMessage: Import the ToastMessage component and add the State to the handleSubmit function.
• [ ] Add the ToastMessage to the return statement.
• [ ] Fix Toast Position: Set the toast message to have a fixed position (bottom-right corner).
• [ ] Animate Toast Entrance and Exit: Add functionality for SlideIn and SlideOut with keyframes.
• [ ] Implement StyledToast for the animation (0.3s)

[F-Kirchhoff]

Please update your US as follows:

• remove the "strategy" from your value proposition. Toastmessage is one way of fulfilling the need of the user. But what is the need?
• remove placeholder text in decsription.
• remove implementation details like "opacity" from the Acceptance Criteria. you can use something like fading in / fading out.
• Should the toast message be displayed for adding and editing? if so please mention this in the AC.
• Describe where the toast message is fixed.
• The toast message cannot be added to the return statement of the handleSubmit function. Please research how to implement toast messages with a queue and Message Container.