feat: add toasts

[alefDev-prog]

fixes #10

Affected files:

• src/app/page.tsx
• src/utils/clipboard.ts

What I have done:

1. Installed npm package react-toastify
2. Inserted the ToastContainer in page.tsx
3. Call toast-functions in clipboard.ts on fail and success

Issue I have encountered:

I have encountered an issue in src/components/ClipboardImage.tsx. The component in this file re-renders multiple times when clicking on the picture in the frame. This causes the pasteImage function to be called multiple times, resulting in several toasts apperaing on a single click. I think that the issue is with the imageCallback function and how it uses the useCallback hook. The items in its dependency-array are being changed within the function itself, something I think causes this issue.

I have tried to solve this issue without changing the useCallback hook but without success. As I wrote before, this results in multiple toasts appearing on a single click.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
screenshot	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 17, 2023 4:39pm

[iamhectorsosa]

Hey, @alefDev-prog . This issue could be definitely cause by this.

However, before anything. I'd like to focus on implementing the toasts following: https://ui.shadcn.com/docs/components/toast

We can use the manual installation and copy the entire implementation, just make sure to adapt and use TailwindCSS colors.

This is the main AC from this issue. Once we've implemented the toasts to fit the UI we can then figure out what refactoring do we need in the component itself.

Since it is a bit of refactoring needed, I can take over this one if you'd need. I'm not happy with react-toastify package because we're using Radix for the most part and it falls outside of the UI aesthetic.

[alefDev-prog]

Hi, ok sure I use your prefered package instead.

[iamhectorsosa]

We're heavily inspiring our look from that library so that's why I'm pushing for consistency. Sorry, I appreciate your help. It's just going to make it easier for all of us. @alefDev-prog

[alefDev-prog]

Hi, I understand that you want consistency. I have now included the package you wanted and I have set it up so that the toast gets presented to the user on fail or success. However, as I am not very experienced in Tailwind css I will leave the styling for someone else to do.

[iamhectorsosa]

@alefDev-prog good work here! Unfortunately, I cannot collaborate in this PR because you didn't use a branch and are working off main. In the future to ensure collaboration please from your forked repository open a branch.

When contributors fork your repository and intend to make changes or additions, it is generally recommended for them to create a separate branch in their forked repository. They should make their changes on that branch and then open a pull request (PR) from their branch to the main branch of your repository