Sc issue 22

[StefieCaff]

Description

Create Toast.jsx, ConfirmToast.jsx, useToast hook, Sprite.jsx and sprite.svg. Implementing these new components, hooks and the reusable icon file, stylish and design consistent messages replace window.alert and window.confirm methods from the browser. The user either sees Toast, which gives them a message and fades away, or the ConfirmationToast which allows them to proceed or cancel based on a warning message. The messages are more conveniently placed in the view as well as matching the feel of the app.

Each component has color, icon and message versatility so that they can be reused in different scenarios; for example an error, a warning, or a success. The Confirmation toast also takes two call backs, so that different actions can me taken depending on if the user confirms or cancels the action. The regular toast also has a dismissible feature, the user can close it out instead of waiting for its functionality to remove it.

I was not able to implement the animation suggested in the design (slide in and back out). That will be an issue for the future when I have many more hours of tailwind under my belt 😅.

Related Issue

closes #49

Acceptance Criteria

Acceptance criteria

• Use FlowBite and Figma design
• Create a Toast component
• Close Button/ Dismissible
• Icon
• Message
• Color
• Animate as per Figma Design
• Create ConfirmToast Component
• Message
• Icon
• Cancel/ Confirm
• Color

Type of Changes

enhancement

Updates

Before

After

Testing Steps/QA material

• git pull from main
• git checkout sc-issue-24
• npm start
• the existing alerts and confirmations were on deleting lists, sharing lists, adding items, and deleting items -- check out each of these scenarios, including leaving fields blank, creating a duplicate item, deleting a shared list and a non shared list, inviting a friend without completing the fields...

###NOTE
There are two places where the Toast will not work because of how our logic/ app is set up.

• When adding the first item to a list -- I couldn't quite see what was happening to prevent the toast.
• When sharing a list, the page reloads so again the Toast is not visible. I implemented them but commented out the alerts, I was not sure what everyone would think here and wanted to wait for the team before making big decisions.

[github-actions]

Visit the preview URL for this PR (updated for commit 9ca831f):

https://tcl-66-smart-shopping-list--pr59-sc-issue-22-gh3ferxt.web.app

_{(expires Fri, 12 Apr 2024 06:56:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0}

[3campos]

Nice job on the design of the toasts, @StefieCaff!

1. When I refresh the home page or I am redirected/navigated to the home view by the application, the outline of the toast container is present in the upper right corner for 2 to 3 seconds. This toast contains the close symbol in its upper right corner but is otherwise blank. I cannot identify what is causing this from your code after reviewing it but will look more in depth at your code if I have time later today. Feel free to try to work on identifying the issue if you have time.
2. When I add a new list, the toast appears in the upper right corner as expected, but the text within the toast flashes extremely quickly (less than half of a second) before the app navigates to the list page. The text of the toast can’t be read given how quickly it disappears. I think that # 1 may be effecting # 2, which you reference in your notes.
3. In the toast for deleting lists that have been shared with the user by other users, “You will loose” should be “You will lose” in the third sentence.
4. The language in the toast for deleting an item confused me at first. I recommend changing it to: “Are you sure? This item will be deleted forever-eva-eva.” This would be clearer to the user.

Regarding the toast not displaying for sharing a list in your notes, I think we could explore delaying the reload method or some other solution. Tagging @eonflower @hun-ah so they can share any ideas.

If you fix number 1, 3, and 4 then you can merge. We can see what the group's ideas are on the toast for sharing a list.

[StefieCaff]

Nice job catching those issues! I am wondering if I forgot to change a time the timeout to 3000....

[StefieCaff]

Strange it shows the timeout at 3 seconds in both files.

[eonflower]

I updated things. Added a timer to the share modal to make sure the toast is shown, and also makes it so the little ghost blank toast doesn't stay. Since the confirm message is for both deleting and unsharing, I kept it as "This action is forever-eva-eva.". Updated some styling here and there to be more consistent with other parts of the app, and fixed the spelling mistake that was previously mine lol.

[3campos]

Nice job getting rid of the spooky ghost toast. 👻🍞 You're good to merge.