Write a generalised error handling/success notification component using react-hot-toast

[simenandre]

Moved here from indivorg/app#457. Originally created by @braaar

Currently, Alert requires a lot of manual implementation.

I think it could be useful to make a component that shows react-hot-toast notifications for common operations.

I think it would be simplest if this component can just take in the data, error and loading objects you get from query and mutation hooks:

const [
    updatePlanMutation,
    {data: updateData, loading: updateLoading, error: updateError},
  ] = useUpdatePlanMutation({
    variables: {
      id: planId, // value for 'id'
      plan: null, // value for 'plan'
      tenantId, // value for 'tenantId'
    },
  });

Not sure how we would want it to behave. Let's discuss!

For mutations (create, update, delete):

• Start a progress/loading type animation when you submit the mutation.
• Success check mark when complete
• Red error message if error
• Possibly show a link or other action in the toast ("User created! Click here to go to user")

For queries:

• Show errors?
• Loading progress is probably best reflected by having loading components like <Loading/>, etc..

[braaar]

I have already implemented some functions in app/src/services/toast-helpers.ts to make it easy to show toasts when we perform mutations. I'm not sure how an improved Alert component would look like, but I think there are some improvements that could be made.

What if we make the Skeleton component a part of this? If we get an error the skeletons can become orange or something?