Replace react-redux-toastr by sonner

Author: quentinovega

daikoku/javascript/package-lock.json

@@ -59,17 +59,16 @@
     "react-modal": "3.16.1",
     "react-paginate": "8.2.0",
     "react-redux": "8.1.3",
-    "react-redux-toastr": "7.6.13",
     "react-router-dom": "6.22.0",
     "react-select": "5.8.0",
     "react-step-wizard": "5.3.11",
     "react-tooltip": "5.26.2",
     "recharts": "2.12.0",
     "redoc": "2.1.3",
     "redux": "4.2.1",
-    "redux-logger": "3.0.6",
     "redux-thunk": "2.4.2",
     "set-value": "4.1.0",
+    "sonner": "^1.4.0",
     "showdown": "2.1.0",
     "swagger-editor": "4.12.1",
     "swagger-ui-dist": "5.11.6",

daikoku/javascript/package.json

@@ -2,16 +2,13 @@ import React, { useContext, useEffect, useState } from 'react';
 import { BrowserRouter, BrowserRouter as Router, Route, Routes, useParams } from 'react-router-dom';
 import { Navigate } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
-import ReduxToastr from 'react-redux-toastr';
 
 import { SideBar, Spinner, Error, Footer } from '../components/utils';
 import * as Services from '../services';
 import { updateTeam, setError } from '../core';
 import { TeamBackOffice } from '../components/backoffice/TeamBackOffice';
 import { ModalProvider, NavProvider } from '../contexts';
 
-import 'react-redux-toastr/src/styles/index.scss';
-
 import {
   TeamHome,
   MyHome,
@@ -403,14 +400,6 @@ export const DaikokuApp = ({
                 <Error />
               </div>
             </div>
-            <ReduxToastr
-              timeOut={4000}
-              newestOnTop={false}
-              position="top-right"
-              transitionIn="fadeIn"
-              transitionOut="fadeOut"
-              closeOnToastrClick
-            />
             <Routes>
               {['/settings', '/notifications', '/me', '/:teamId/settings'].map((r) => (
                 <Route key={r} path={r} element={<></>} />

daikoku/javascript/src/apps/DaikokuApp.tsx

@@ -2,7 +2,7 @@ import { constraints, Form, format, type } from '@maif/react-forms';
 import { md5 } from 'js-md5';
 import queryString from 'query-string';
 import { useContext, useEffect, useState } from 'react';
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
 
 import { UnauthenticatedHome, UnauthenticatedTopBar } from '../components/frontend/unauthenticated';
@@ -329,9 +329,9 @@ export const TwoFactorAuthentication = ({
   function reset2faAccess() {
     Services.reset2faAccess(backupCode).then((res) => {
       if (res.error) {
-        toastr.error(translate('Error'), res.error);
+        toast.error(res.error);
       } else {
-        toastr.success(translate('Success'), translate('2fa.successfully_disabled'));
+        toast.success(translate('2fa.successfully_disabled'));
         window.location.replace('/');
       }
     });

daikoku/javascript/src/apps/DaikokuHomeApp.tsx

@@ -3,7 +3,7 @@ import { useMachine } from '@xstate/react';
 import orderBy from 'lodash/orderBy';
 import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import StepWizard from 'react-step-wizard';
 import ReactDOMServer from 'react-dom/server';
 
@@ -155,14 +155,14 @@ export const InitializeFromOtoroshi = () => {
       setStep(1);
       // setApis({apis});
       setCreatedApis([]);
-      toastr.success(translate('Success'), translate('Apis successfully created'));
+      toast.success(translate('Apis successfully created'));
     });
   };
 
   const afterSubCreation = () => {
     setStep(1);
     setCreatedSubs([]);
-    toastr.success(translate('Success'), translate('Subscriptions successfully created'));
+    toast.success(translate('Subscriptions successfully created'));
   };
 
   const loadPreviousState = () => {
@@ -178,7 +178,7 @@ export const InitializeFromOtoroshi = () => {
       setCreatedSubs(prevState.createdSubs);
       send('LOAD_PREVIOUS_STATE', { otoroshi: prevState.otoroshi, tenant: prevState.tenant, goto: 'apikeys' });
     } else {
-      toastr.warning(translate('Warning'), translate('Seems to have no saved state...please continue'));
+      toast.warning(translate('Seems to have no saved state...please continue'));
     }
   };
 

daikoku/javascript/src/components/adminbackoffice/otoroshi/InititializeFromOtoroshi.tsx

@@ -5,7 +5,7 @@ import { Form, type, constraints } from '@maif/react-forms'
 
 import * as Services from '../../../services';
 import { Can, manage, tenant as TENANT, Spinner } from '../../utils';
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import { I18nContext } from '../../../contexts/i18n-context';
 import { useTenantBackOffice } from '../../../contexts';
 
@@ -57,19 +57,19 @@ export const TenantOtoroshi = () => {
       Services.createOtoroshiSettings(tenant._id, data)
         .then((result) => {
           if (result.error) {
-            toastr.error('Failure', result.error);
+            toast.error(result.error);
           } else {
-            toastr.success(translate('Success'), translate('otoroshi.settings.created.success'));
+            toast.success(translate('otoroshi.settings.created.success'));
             navigate('/settings/otoroshis')
           }
         });
     } else {
       Services.saveOtoroshiSettings(tenant._id, data)
         .then((result) => {
           if (result.error) {
-            toastr.error('Failure', result.error);
+            toast.error(result.error);
           } else {
-            toastr.success(translate('Success'), translate('otoroshi.settings.updated.success'));
+            toast.success(translate('otoroshi.settings.updated.success'));
             navigate('/settings/otoroshis')
           }
         });

daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshi.tsx

@@ -6,7 +6,7 @@ import { nanoid } from 'nanoid';
 import * as Services from '../../../services';
 import { Table, TableRef } from '../../inputs';
 import { Can, manage, tenant as TENANT } from '../../utils';
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import { I18nContext } from '../../../contexts/i18n-context';
 import { ModalContext, useTenantBackOffice } from '../../../contexts';
 import { IOtoroshiSettings, isError, IState, IStateContext } from '../../../types';
@@ -83,7 +83,7 @@ export const TenantOtoroshis = () => {
         if (ok) {
           Services.deleteOtoroshiSettings(tenant._id, id)
             .then(() => {
-              toastr.success(translate('Success'), translate('otoroshi.settings.deleted.success'));
+              toast.success(translate('otoroshi.settings.deleted.success'));
               table.current?.update();
             });
         }

daikoku/javascript/src/components/adminbackoffice/otoroshi/TenantOtoroshis.tsx

@@ -4,7 +4,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import debounce from "lodash/debounce";
 import { useContext, useEffect, useMemo, useState } from 'react';
 import Pagination from "react-paginate";
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import { useNavigate } from 'react-router-dom';
 import Plus from 'react-feather/dist/icons/plus'
 
@@ -151,13 +151,11 @@ export const TeamList = () => {
             .then(team => Services.createTeam(team))
             .then(r => {
               if (r.error) {
-                toastr.error(translate('Error'), r.error)
+                toast.error(r.error)
               } else {
                 queryClient.invalidateQueries({ queryKey: ['teams'] });
-                toastr.info(
-                  translate("mailValidation.sent.title"),
-                  translate("mailValidation.sent.body"))
-                toastr.success(translate('Success'), translate({ key: "team.created.success", replacements: [data.name] }))
+                toast.info(translate("mailValidation.sent.body"))
+                toast.success(translate({ key: "team.created.success", replacements: [data.name] }))
               }
             }),
           value: newTeam
@@ -226,9 +224,9 @@ export const TeamList = () => {
                   .then(teamToUpdate => Services.updateTeam(teamToUpdate))
                   .then(r => {
                     if (r.error) {
-                      toastr.error(translate('Error'), r.error)
+                      toast.error(r.error)
                     } else {
-                      toastr.success(translate('Success'), translate({ key: "team.updated.success", replacements: [team.name] }))
+                      toast.success(translate({ key: "team.updated.success", replacements: [team.name] }))
                       queryClient.invalidateQueries({ queryKey: ['teams'] });
                     }
                   })

daikoku/javascript/src/components/adminbackoffice/teams/TeamList.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { toastr } from 'react-redux-toastr';
+import { toast } from 'sonner';
 import { nanoid } from 'nanoid';
 import { type, format, constraints } from '@maif/react-forms';
 
@@ -117,7 +117,7 @@ export function EditFrontOfficeTranslations(props: any) {
                       } else {
                         updateTranslation(t)
                           .then(() => {
-                            toastr.success(translate('Success'), translate('mailing_internalization.translation_updated'))
+                            toast.success(translate('mailing_internalization.translation_updated'))
                             table.current?.update()
                           })
                       }