Set Up Toast Notifications with react-toastify

lokytech5 commented 1 month ago

Feature Request: Set Up Toast Notifications with react-toastify

Description

This task aims to install react-toastify for toast notifications and create a toast component to display notifications across the application.

Tasks

Navigate to the frontend folder using this command
```
 cd frontend
```
Install react-toastify:
- Install react-toastify using npm.
```
npm install react-toastify
```
Set Up Toast Notifications:
- Create a new file called ToastNotify.tsx in the app/components directory.
- Configure the ToastContainer component.
- Create a utility function to display different types of toast notifications.
Integrate Toast Container in Layout Component:
- Ensure the ToastContainer is included in layout component.

Additional Notes

Branch: Please create a new branch from development for your changes.


git checkout development
git pull origin development
git checkout -b feature/setup-toast-notifications

Pull Request: Submit a pull request to merge your changes into development.
Testing: Ensure the toast notifications work correctly by displaying different types of notifications (success, error, info, warning).

Guidelines to Follow:

Create ToastNotify.tsx:

Use the following code as a starting point:

     import React from 'react';
     import { ToastContainer, toast } from 'react-toastify';
     const ToastNotify = () => {
       return <ToastContainer position="bottom-right" autoClose={5000} hideProgressBar={false} newestOnTop={false} 
     closeOnClick={true} draggable={true} pauseOnHover={true} />;
     };

     export default ToastNotify;

Create Utility Functions for Toast Notifications:

Create a new folder called utils in the component directory
Create a new file called toastUtils.ts in the component/utils directory.

Add utility functions for displaying different types of toast notifications:

 import { toast } from 'react-toastify';

 export const showToastSuccess = (message: string) => {
   toast.success(message);
 };

Do the same for error, info and warning

Integrate Toast Container in Layout Component:

Ensure the ToastContainer is included in layout component (e.g., Layout.tsx):

 import ToastNotify from './components/ToastNotify';
 import 'react-toastify/dist/ReactToastify.css';
 return (
<html lang="en">
  <body className={inter.className}>
    <Providers>
  <div className="min-h-screen bg-base-300 flex flex-col">
      <Navbar />
      <div className="flex-grow">{children}</div>
      <Footer />
    </div>
    <ToastNotify />
    </Providers>
    </body>
</html>
)

lokytech5 commented 1 month ago

let me know if there is anything not clear.

aedoardo1990 commented 1 month ago

good morning @lokytech5 , sure! working on it

aedoardo1990 commented 1 month ago

pull request open

lokytech5 commented 1 month ago

good day @aedoardo1990. am checking the pr

lokytech5 / e-get-why