From a8cbc514b0d3107c2831c4af313e536b52f2c370 Mon Sep 17 00:00:00 2001
From: Hamza El Gatia <h.elgatia@axelor.com>
Date: Fri, 2 Feb 2024 16:29:15 +0100
Subject: [PATCH] feat: add LoaderToastNotifier

---
 .../stock/src/screens/loader/LoaderScreen.js  |   6 +-
 .../core/src/app/ContextedApplication.tsx     |   2 +
 .../templates/Loader/LoaderContext.tsx        | 203 ++++++++++++++++--
 .../templates/Loader/LoaderPopup.tsx          |   5 +-
 .../templates/Loader/LoaderToastNotifier.tsx  |  80 +++++++
 .../src/components/templates/Loader/index.ts  |   3 +-
 .../templates/Loader/use-loader-listener.ts   |  99 ++++-----
 7 files changed, 317 insertions(+), 81 deletions(-)
 create mode 100644 packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx

diff --git a/packages/apps/stock/src/screens/loader/LoaderScreen.js b/packages/apps/stock/src/screens/loader/LoaderScreen.js
index f3693e46b7..6c1ef2fbb2 100644
--- a/packages/apps/stock/src/screens/loader/LoaderScreen.js
+++ b/packages/apps/stock/src/screens/loader/LoaderScreen.js
@@ -37,7 +37,7 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {Button, Screen} from '@axelor/aos-mobile-ui';
-import {LoaderPopup} from '@axelor/aos-mobile-core';
+import {LoaderPopup, useLoader} from '@axelor/aos-mobile-core';
 
 // Screen for test Loader functionnalities
 const LoaderScreen = () => {
@@ -60,13 +60,15 @@ const LoaderScreen = () => {
     console.log('Error action executed!');
   };
 
+  const {loading} = useLoader();
+
   return (
     <Screen>
       <View>
         <Button
           title="Run process"
           onPress={() => setRunProccess(true)}
-          disabled={runProccess}
+          disabled={loading}
         />
         <LoaderPopup
           process={process}
diff --git a/packages/core/src/app/ContextedApplication.tsx b/packages/core/src/app/ContextedApplication.tsx
index d34bf43f82..6643ab6591 100644
--- a/packages/core/src/app/ContextedApplication.tsx
+++ b/packages/core/src/app/ContextedApplication.tsx
@@ -30,6 +30,7 @@ import {
   Camera,
   CameraScanner,
   HeaderBandList,
+  LoaderToastNotifier,
   Scanner,
   Toast,
 } from '../components';
@@ -87,6 +88,7 @@ const ContextedApplication = ({
         <NavigationContainer>
           <HeaderBandList />
           <LoadingIndicator />
+          <LoaderToastNotifier />
           <BlockInteractionMessage />
           <RootNavigator
             modules={modules}
diff --git a/packages/core/src/components/templates/Loader/LoaderContext.tsx b/packages/core/src/components/templates/Loader/LoaderContext.tsx
index 42a07db111..6949da5c1f 100644
--- a/packages/core/src/components/templates/Loader/LoaderContext.tsx
+++ b/packages/core/src/components/templates/Loader/LoaderContext.tsx
@@ -24,41 +24,91 @@ import React, {
   useReducer,
 } from 'react';
 
+export type LoaderStatus = 'ok' | 'error' | undefined;
+
+type callBack = () => void;
+
 interface LoaderContextState {
+  loading: boolean;
   notifyMe: boolean;
   showPopup: boolean;
-  getCurrentNotifyMe: () => boolean;
+  status: LoaderStatus;
+  message: string;
+  finished: boolean;
+  disabled: boolean;
+  onSuccessCallBack: () => void;
+  onErrorCallBack: () => void;
+  setLoading: (option: boolean) => void;
   setNotifyMe: (option: boolean) => void;
   setShowPopup: (option: boolean) => void;
+  setStatus: (option: LoaderStatus) => void;
+  setMessage: (message: string) => void;
+  setFinished: (option: boolean) => void;
+  setDisabled: (option: boolean) => void;
+  setOnSuccessCallBack: (f: callBack) => void;
+  setOnErrorCallBack: (f: callBack) => void;
 }
 
 interface LoaderAction {
   type: string;
-  payload: boolean;
+  payload: boolean | string | callBack | LoaderStatus;
 }
 
 const defaultLoaderContext = {
+  loading: false,
   notifyMe: false,
   showPopup: false,
-  getCurrentNotifyMe: () => {
-    throw new Error(
-      'LoaderProvider should be mounted to get current notify me',
-    );
+  status: null,
+  message: null,
+  finished: false,
+  disabled: false,
+  onSuccessCallBack: () => {},
+  onErrorCallBack: () => {},
+  setLoading: () => {
+    throw new Error('LoaderProvider should be mounted to set loading');
   },
   setNotifyMe: () => {
     throw new Error('LoaderProvider should be mounted to set notify me');
   },
   setShowPopup: () => {
-    throw new Error('LoaderProvider should be mounted to show popup');
+    throw new Error('LoaderProvider should be mounted to set show popup');
+  },
+  setStatus: () => {
+    throw new Error('LoaderProvider should be mounted to set status');
+  },
+  setMessage: () => {
+    throw new Error('LoaderProvider should be mounted to set message');
+  },
+  setFinished: () => {
+    throw new Error('LoaderProvider should be mounted to set finished');
+  },
+  setDisabled: () => {
+    throw new Error('LoaderProvider should be mounted to set disabled');
+  },
+  setOnSuccessCallBack: () => {
+    throw new Error(
+      'LoaderProvider should be mounted to set on success callback',
+    );
+  },
+  setOnErrorCallBack: () => {
+    throw new Error(
+      'LoaderProvider should be mounted to set on success callback',
+    );
   },
 };
 
 const LoaderContext = createContext<LoaderContextState>(defaultLoaderContext);
 
 const actionTypes = {
-  getCurrentNotifyMe: 'getCurrentNotifyMe',
+  setLoading: 'setLoading',
   setNotifyMe: 'setNotifyMe',
   setShowPopup: 'setShowPopup',
+  setStatus: 'setStatus',
+  setMessage: 'setMessage',
+  setFinished: 'setFinished',
+  setDisabled: 'setDisabled',
+  setOnSuccessCallBack: 'setOnSuccessCallBack',
+  setOnErrorCallBack: 'setOnErrorCallBack',
 };
 
 const LoaderReducer = (
@@ -66,6 +116,12 @@ const LoaderReducer = (
   action: LoaderAction,
 ): LoaderContextState => {
   switch (action.type) {
+    case actionTypes.setLoading: {
+      return {
+        ...state,
+        loading: action.payload as boolean,
+      };
+    }
     case actionTypes.setNotifyMe: {
       return {
         ...state,
@@ -78,10 +134,50 @@ const LoaderReducer = (
         showPopup: action.payload as boolean,
       };
     }
+    case actionTypes.setStatus: {
+      return {
+        ...state,
+        status: action.payload as LoaderStatus,
+      };
+    }
+    case actionTypes.setMessage: {
+      return {
+        ...state,
+        message: action.payload as string,
+      };
+    }
+    case actionTypes.setFinished: {
+      return {
+        ...state,
+        finished: action.payload as boolean,
+      };
+    }
+    case actionTypes.setDisabled: {
+      return {
+        ...state,
+        disabled: action.payload as boolean,
+      };
+    }
+    case actionTypes.setOnSuccessCallBack: {
+      return {
+        ...state,
+        onSuccessCallBack: action.payload as callBack,
+      };
+    }
+    case actionTypes.setOnErrorCallBack: {
+      return {
+        ...state,
+        onErrorCallBack: action.payload as callBack,
+      };
+    }
   }
 };
 
 const actions = {
+  setLoading: option => ({
+    type: actionTypes.setLoading,
+    payload: option,
+  }),
   setNotifyMe: option => ({
     type: actionTypes.setNotifyMe,
     payload: option,
@@ -90,34 +186,105 @@ const actions = {
     type: actionTypes.setShowPopup,
     payload: option,
   }),
+  setStatus: status => ({
+    type: actionTypes.setStatus,
+    payload: status,
+  }),
+  setMessage: message => ({
+    type: actionTypes.setMessage,
+    payload: message,
+  }),
+  setFinished: option => ({
+    type: actionTypes.setFinished,
+    payload: option,
+  }),
+  setDisabled: option => ({
+    type: actionTypes.setDisabled,
+    payload: option,
+  }),
+  setOnSuccessCallBack: f => ({
+    type: actionTypes.setOnSuccessCallBack,
+    payload: f,
+  }),
+  setOnErrorCallBack: f => ({
+    type: actionTypes.setOnErrorCallBack,
+    payload: f,
+  }),
 };
 
 export const LoaderProvider = ({children}) => {
   const [state, dispatch] = useReducer(LoaderReducer, defaultLoaderContext);
 
-  const getCurrentNotifyMe = useCallback(() => {
-    console.log('getCurrentNotifyMe', state.notifyMe);
-    return state.notifyMe;
-  }, [state]);
+  const setLoading = useCallback(
+    option => dispatch(actions.setLoading(option)),
+    [],
+  );
 
-  const setNotifyMe = useCallback(option => {
-    console.log('setNotifyMe', option);
-    dispatch(actions.setNotifyMe(option));
-  }, []);
+  const setNotifyMe = useCallback(
+    option => dispatch(actions.setNotifyMe(option)),
+    [],
+  );
 
   const setShowPopup = useCallback(
     option => dispatch(actions.setShowPopup(option)),
     [],
   );
 
+  const setStatus = useCallback(
+    status => dispatch(actions.setStatus(status)),
+    [],
+  );
+
+  const setMessage = useCallback(
+    message => dispatch(actions.setMessage(message)),
+    [],
+  );
+
+  const setFinished = useCallback(
+    option => dispatch(actions.setFinished(option)),
+    [],
+  );
+
+  const setDisabled = useCallback(
+    option => dispatch(actions.setDisabled(option)),
+    [],
+  );
+
+  const setOnSuccessCallBack = useCallback(
+    f => dispatch(actions.setOnSuccessCallBack(f)),
+    [],
+  );
+
+  const setOnErrorCallBack = useCallback(
+    f => dispatch(actions.setOnErrorCallBack(f)),
+    [],
+  );
+
   const LoaderContextState = useMemo<LoaderContextState>(
     () => ({
       ...state,
-      getCurrentNotifyMe,
+      setLoading,
       setNotifyMe,
       setShowPopup,
+      setStatus,
+      setMessage,
+      setFinished,
+      setDisabled,
+      setOnSuccessCallBack,
+      setOnErrorCallBack,
     }),
-    [state, getCurrentNotifyMe, setNotifyMe, setShowPopup],
+    [
+      state,
+      setLoading,
+      setNotifyMe,
+      setShowPopup,
+      setStatus,
+      setMessage,
+      setFinished,
+      setDisabled,
+      setOnSuccessCallBack,
+      setOnErrorCallBack,
+    ],
   );
 
   return (
diff --git a/packages/core/src/components/templates/Loader/LoaderPopup.tsx b/packages/core/src/components/templates/Loader/LoaderPopup.tsx
index d6bbe1f5c0..7cc6955260 100644
--- a/packages/core/src/components/templates/Loader/LoaderPopup.tsx
+++ b/packages/core/src/components/templates/Loader/LoaderPopup.tsx
@@ -56,11 +56,10 @@ const LoaderPopup = ({
 
   const timeoutRef = useRef(null);
 
-  const {notifyMe, showPopup, setNotifyMe, setShowPopup} = useLoader();
+  const {loading, notifyMe, showPopup, setNotifyMe, setShowPopup} = useLoader();
 
-  const {loading, listener} = useLoaderListner({
+  const {listener} = useLoaderListner({
     process,
-    onFinish: () => setShowPopup(false),
     onSuccess,
     onError,
     disabled,
diff --git a/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx b/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx
new file mode 100644
index 0000000000..766f18b052
--- /dev/null
+++ b/packages/core/src/components/templates/Loader/LoaderToastNotifier.tsx
@@ -0,0 +1,80 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {useEffect} from 'react';
+import {useTranslator} from '../../../i18n';
+import {showToastMessage} from '../../../utils/show-toast-message';
+import {useLoader} from './LoaderContext';
+
+const LoaderToastNotifier = () => {
+  const I18n = useTranslator();
+
+  const {
+    notifyMe,
+    status,
+    message,
+    finished,
+    disabled,
+    setFinished,
+    onSuccessCallBack,
+    onErrorCallBack,
+  } = useLoader();
+
+  useEffect(() => {
+    if (finished) {
+      if (!notifyMe) {
+        status === 'ok' ? onSuccessCallBack() : onErrorCallBack();
+      } else {
+        if (status === 'ok') {
+          showToastMessage({
+            type: 'success',
+            position: 'top',
+            topOffset: 30,
+            text1: I18n.t('Base_Success'),
+            text2: message || I18n.t('Base_Loader_ProccessSuccessMessage'),
+            onPress: () => !disabled && onSuccessCallBack(),
+          });
+        } else {
+          showToastMessage({
+            type: 'error',
+            position: 'top',
+            topOffset: 30,
+            text1: I18n.t('Base_Error'),
+            text2: message || I18n.t('Base_Loader_ProccessErrorMessage'),
+            onPress: () => !disabled && onErrorCallBack(),
+          });
+        }
+      }
+      setFinished(false);
+    }
+  }, [
+    notifyMe,
+    status,
+    message,
+    finished,
+    disabled,
+    setFinished,
+    onSuccessCallBack,
+    onErrorCallBack,
+    I18n,
+  ]);
+
+  return null;
+};
+
+export default LoaderToastNotifier;
diff --git a/packages/core/src/components/templates/Loader/index.ts b/packages/core/src/components/templates/Loader/index.ts
index 509236e85b..68dd070ccb 100644
--- a/packages/core/src/components/templates/Loader/index.ts
+++ b/packages/core/src/components/templates/Loader/index.ts
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+export * from './LoaderContext';
 export {default as LoaderPopup} from './LoaderPopup';
+export {default as LoaderToastNotifier} from './LoaderToastNotifier';
 export {default as useLoaderListner} from './use-loader-listener';
-export * from './LoaderContext';
diff --git a/packages/core/src/components/templates/Loader/use-loader-listener.ts b/packages/core/src/components/templates/Loader/use-loader-listener.ts
index a7488528d2..42dbcf1391 100644
--- a/packages/core/src/components/templates/Loader/use-loader-listener.ts
+++ b/packages/core/src/components/templates/Loader/use-loader-listener.ts
@@ -17,11 +17,7 @@
  */
 
 import {useCallback, useEffect, useMemo, useState} from 'react';
-import {useTranslator} from '../../../i18n';
-import {showToastMessage} from '../../../utils/show-toast-message';
-import {useLoader} from './LoaderContext';
-
-export type LoaderStatus = 'error' | 'ok' | undefined;
+import {LoaderStatus, useLoader} from './LoaderContext';
 
 interface LoaderListenerProps {
   process: () => Promise<any>;
@@ -38,56 +34,30 @@ const useLoaderListner = ({
   onError = () => {},
   disabled = false,
 }: LoaderListenerProps) => {
-  const I18n = useTranslator();
-
-  const [loading, setLoading] = useState(false);
   const [start, setStart] = useState(false);
 
-  const {getCurrentNotifyMe, setNotifyMe, setShowPopup} = useLoader();
+  const {
+    setLoading,
+    setNotifyMe,
+    setShowPopup,
+    setStatus,
+    setMessage,
+    setFinished,
+    setDisabled,
+    setOnSuccessCallBack,
+    setOnErrorCallBack,
+  } = useLoader();
 
   const onFinishCallBack = useCallback(
     (status: LoaderStatus, response: any) => {
-      const notifyMe = getCurrentNotifyMe();
-
+      setLoading(false);
       setShowPopup(false);
+      setStatus(status);
+      setMessage(response);
+      setFinished(true);
       onFinish(status);
-
-      console.log('notifyMe######', notifyMe);
-
-      if (!notifyMe) {
-        status === 'ok' ? onSuccess() : onError();
-        return;
-      }
-
-      if (status === 'ok') {
-        showToastMessage({
-          type: 'success',
-          position: 'top',
-          topOffset: 30,
-          text1: I18n.t('Base_Success'),
-          text2: response || I18n.t('Base_Loader_ProccessSuccessMessage'),
-          onPress: () => !disabled && onSuccess(),
-        });
-      } else {
-        showToastMessage({
-          type: 'error',
-          position: 'top',
-          topOffset: 30,
-          text1: I18n.t('Base_Error'),
-          text2: response || I18n.t('Base_Loader_ProccessErrorMessage'),
-          onPress: () => !disabled && onError(),
-        });
-      }
     },
-    [
-      disabled,
-      getCurrentNotifyMe,
-      setShowPopup,
-      onSuccess,
-      onError,
-      onFinish,
-      I18n,
-    ],
+    [setLoading, setFinished, setShowPopup, setStatus, setMessage, onFinish],
   );
 
   const executeProcess = useCallback(async () => {
@@ -96,14 +66,11 @@ const useLoaderListner = ({
 
     try {
       const response = await process();
-
-      setLoading(false);
       onFinishCallBack('ok', response);
     } catch (error) {
-      setLoading(false);
       onFinishCallBack('error', error);
     }
-  }, [process, onFinishCallBack]);
+  }, [process, setLoading, onFinishCallBack]);
 
   const processCallBack = useCallback(
     (_start: boolean) => {
@@ -117,18 +84,36 @@ const useLoaderListner = ({
   );
 
   const handleListener = useCallback(() => {
-    setNotifyMe(false);
     setStart(true);
-  }, [setNotifyMe]);
+    setLoading(false);
+
+    setNotifyMe(false);
+    setShowPopup(false);
+    setStatus(null);
+    setMessage(null);
+    setDisabled(disabled);
+
+    setOnSuccessCallBack(onSuccess);
+    setOnErrorCallBack(onError);
+  }, [
+    disabled,
+    onSuccess,
+    onError,
+    setLoading,
+    setNotifyMe,
+    setShowPopup,
+    setStatus,
+    setMessage,
+    setDisabled,
+    setOnSuccessCallBack,
+    setOnErrorCallBack,
+  ]);
 
   useEffect(() => {
     processCallBack(start);
   }, [start, processCallBack]);
 
-  return useMemo(
-    () => ({loading, listener: handleListener}),
-    [loading, handleListener],
-  );
+  return useMemo(() => ({listener: handleListener}), [handleListener]);
 };
 
 export default useLoaderListner;