[FIX] sets one ToastContainer for the whole application (Cannot set p…

…roperties of undefined (setting 'toggle'))
zakarm · May 15, 2024 · 87665d5 · 87665d5
1 parent 09c1794
commit 87665d5
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 18 deletions.
diff --git a/app/front-end/src/app/(authentication)/sign-in/page.tsx b/app/front-end/src/app/(authentication)/sign-in/page.tsx
@@ -60,7 +60,7 @@ export default function SignInPage() {
     }
     return (
       <div className={`container`}>
-        <ToastContainer />
+        {/* <ToastContainer /> */}
         {twoFaData && <TwoFa value={twoFaData.value} email={twoFaData.email} />}
         <div className={`${styles.flexx}`}>
           <div className={`${styles.main_card} shadow row`}>

diff --git a/app/front-end/src/app/(authentication)/sign-up/page.tsx b/app/front-end/src/app/(authentication)/sign-up/page.tsx
@@ -55,7 +55,7 @@ export default function SignUp() {
 
   return (
     <div className="container">
-      <ToastContainer />
+      {/* <ToastContainer /> */}
       <div className={`${styles.flexx}`}>
         <div className={`${styles.main_card} shadow row`}>
           <div

diff --git a/app/front-end/src/app/layout.tsx b/app/front-end/src/app/layout.tsx
@@ -1,19 +1,20 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import type { Metadata } from 'next'
 import './global.css';
-
+import ToastProvider  from '@/components/ToastProvider';
 
 export const metadata = {
   title: 'ft_transcendence',
   description: 'the world of game',
 }
 
-export default function RootLayout({children,}: {children: React.ReactNode}) 
+export default function RootLayout({children}: {children: React.ReactNode}) 
 {
   return (
     <html lang="en">
       <body>
-        {children}
+      <ToastProvider children={children} />
+      {/* </ToastProvider> */}
       </body>
     </html>
   )

diff --git a/app/front-end/src/app/settings/page.tsx b/app/front-end/src/app/settings/page.tsx
@@ -6,22 +6,23 @@ import styles from './styles.module.css'
 import AccountTab from '@/components/SettingsForm/account-tab/accountTab'
 import SecurityTab from '@/components/SettingsForm/security-tab/security'
 import { FormContext, SettingsProps } from '@/components/SettingsForm/form-components/formContext'
-import { ToastContainer, toast } from 'react-toastify';
+import { toast } from 'react-toastify';
+import { notificationStyle } from '@/components/ToastProvider'
 
 
 async function    getInitialData({setValuesToPost, setAccountValues} :
     {
         setValuesToPost : SettingsProps['setValuesToPost'],
         setAccountValues : SettingsProps['setAccountValues']
     }) {
-    
+
     try {
         const   access = Cookies.get('access');
         const   response = await fetch('', {
             method : "GET",
             headers :{ Authorization : `Bearer ${access}` },
         })
-        
+
         // const data = await response.json();
         setValuesToPost(
             {
@@ -72,22 +73,22 @@ const   postFormData = async ({valuesToPost, isChanged} :
         }
 
         const   validateInput : () => boolean = () => {
-            const   toCheck : string[] = ["first_name", "last_name", "nickname", "email"];
+            const   toCheck : string[] = ["first_name", "last_name", "nickname"];
             let     isValid : boolean = true;
 
             toCheck.map((key) => {
                 if (valuesToPost[key] === "") {
-                    toast.error(`Invalid input : ${key}`)
+                    toast.error(`Invalid input : ${key}`, notificationStyle)
                     isValid = false;
                 }
             });
             if (! validateEmail(valuesToPost["email"] as string)) {
-                toast.error(`Invalid input : email`);
+                toast.error(`Invalid input : email`, notificationStyle);
                 isValid = false;
             }
 
             if (valuesToPost['new_password'] !== valuesToPost['repeat_password']) {
-                toast.error(`Invalid input : new_password or repeat_password`);
+                toast.error(`Invalid input : new_password or repeat_password`, notificationStyle);
                 isValid = false;
             }
             return isValid;
@@ -108,7 +109,7 @@ const   postFormData = async ({valuesToPost, isChanged} :
             });
 
             if (res.ok) {
-                toast.success("To be saved...");
+                toast.success("To be saved...", notificationStyle);
                 /* .... updates form placeholders */
             }
         }
@@ -173,7 +174,6 @@ function    SettingsPage()
 
     return (
         <div className={` ${styles.wrapper} container-fluid vh-100  -warning p-0 m-0`}>
-            <ToastContainer />
             <div className="row h-100 p-0 m-0">
 
                 <section className="row p-0 m-0 mt-5">

diff --git a/app/front-end/src/components/ToastProvider.tsx b/app/front-end/src/components/ToastProvider.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from 'react'
+import { ToastContainer } from "react-toastify";
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+const   notificationStyle : {} = 
+{
+    position: "top-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "dark",
+    // transition: Bounce,
+}
+
+function ToastProvider({ children }: ToastProviderProps) {
+
+  return (
+    <>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+    //   transition="Bounce"
+      />
+      {children}
+    </>
+  );
+}
+
+export default ToastProvider;
+export { notificationStyle }
diff --git a/app/front-end/src/components/inviteFriend.tsx b/app/front-end/src/components/inviteFriend.tsx
@@ -277,7 +277,7 @@ export default function InviteFriend( {show, close}: Props) {
 
   return (
       <>
-        <ToastContainer 
+        {/* <ToastContainer 
           position="top-right"
           autoClose={2000}
           hideProgressBar={false}
@@ -289,7 +289,7 @@ export default function InviteFriend( {show, close}: Props) {
           pauseOnHover
           theme="colored"
           transition={Zoom}
-        />
+        /> */}
         <Modal contentClassName={`${styles.friend_modal}`} show={show} aria-labelledby="add_friend" centered>
                 <Tabs
                   defaultActiveKey="friends"

diff --git a/app/front-end/src/components/srightBar.tsx b/app/front-end/src/components/srightBar.tsx
@@ -9,7 +9,7 @@ import Notification from "./Notification";
 import React, { forwardRef, useState, useEffect } from 'react';
 import Image from 'next/image'
 import { useRouter } from 'next/navigation';
-import { ToastContainer } from 'react-toastify';
+// import { ToastContainer } from 'react-toastify';
 import {useGlobalContext} from './webSocket'
 import Spinner from 'react-bootstrap/Spinner'
 

diff --git a/app/front-end/src/components/twoFa.tsx b/app/front-end/src/components/twoFa.tsx
@@ -62,7 +62,7 @@ export default function TwoFa({ value = '', email }: QrCode) {
         backgroundColor: 'rgba(0, 0, 0, 0.8)',
       }}
     >
-      <ToastContainer />
+      {/* <ToastContainer /> */}
       <Modal.Dialog>
         <Modal.Header>
           <Modal.Title>Two Factor Authentication</Modal.Title>