Added toast component

[SarveshLimaye]

Fixes : #77

screen-capture (13).webm

[Dnouv]

Hey @SarveshLimaye

Thank you for the PR. To ensure we are on the same page, the component should also be a wrapper around the NextJS App, such that if any throw new Error is called inside any used component, the Toast component should catch these errors and show it as a warning.

I would suggest it is better to have this as a hook. Use example:

const dispatchToastMessage = useToastMessageDispatch();

const {
    data,
    isError
    } = useQuery(
    ['/some/api/endpoint', { params }],
    async () => {
        const response = await getResponse({ params });
        return response;
    },
    {
        onError: (error) => {
            dispatchToastMessage({ type: 'error', message: error while fetching });
        },
    },
);

if (isError) {
    dispatchToastMessage({ type: 'error', message: error while fetching });
}

Thank you!

[SarveshLimaye]

@Dnouv Thank you for the detailed explanation . I have incorporated all the changes and made it similar to the example you mentioned. You can import this hook using -

const toast = useToastMsgDispatch() toast ('error','msg')

screen-capture (18).webm

[Dnouv]

Hey, @SarveshLimaye, thank you for the quick fix. Could you add these toast messages (the newly created hook) in the API calls or in any components that may use this?

And does this also works when we call the following code instead of importing the hook? (since I saw you were wrapping the component in _app.js)

throw new Error("some error occurred")

Thank you!

[SarveshLimaye]

@Dnouv Thank you for the review. I have added the toast component in EventBasicDetail Form , so the toast will be shown once we create the event. I don't think we can use the hook without importing.

screen-capture (20).webm

Thank you !

[Dnouv]

Thanks! Uh, I meant not only the EventBasicDetail but all other places that are making use console.error or that require a success prompt. For e.g., This can be used on login when you click "Create Event", to prompt "Login Successful", "Invalid credentials", "Account verified"

[SarveshLimaye]

@Dnouv Yes this can be used everywhere. Sholud I add this in this pr itself or can we do it in different pr since it will result in a lot of file changes ? Wanted to know about your opinion on this one .

[SarveshLimaye]

@Dnouv as per our discussion on Rocket.chat I have added the toast component using the react-hot-toast package. I have tried to use this toast in all the required places, but let me know if I missed any case.

Thank you !

[Dnouv]

Hey @SarveshLimaye

Thanks for the PR. And congrats on your first PR. 🎉

I look forward to having more of your contributions.