fix: wrap loader listner hook in loader popup component

axelor · Jan 25, 2024 · 88981d4 · 88981d4
1 parent 96e1e24
commit 88981d4
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 31 deletions.
diff --git a/packages/apps/stock/src/screens/loader/LoaderScreen.js b/packages/apps/stock/src/screens/loader/LoaderScreen.js
@@ -35,9 +35,9 @@
  */
 
 import React from 'react';
-import {Button, View} from 'react-native';
+import {View} from 'react-native';
 import {Screen} from '@axelor/aos-mobile-ui';
-import {LoaderPopup, useLoaderListner} from '@axelor/aos-mobile-core';
+import {LoaderPopup} from '@axelor/aos-mobile-core';
 
 // Screen for test Loader functionnalities
 const LoaderScreen = () => {
@@ -52,18 +52,16 @@ const LoaderScreen = () => {
     console.log('Custom action executed!');
   };
 
-  const {loading, listener} = useLoaderListner({
-    process,
-    onSuccess: handleCustomAction,
-    onError: () => console.warn('An error has occurred!'),
-    disabled: true,
-  });
-
   return (
     <Screen>
       <View>
-        <Button title="check process" onPress={listener} disabled={loading} />
-        <LoaderPopup loading={loading} timeout={5000} />
+        <LoaderPopup
+          process={process}
+          timeout={5000}
+          onSuccess={handleCustomAction}
+          onError={() => console.warn('An error has occurred!')}
+          disabled={true}
+        />
       </View>
     </Screen>
   );

diff --git a/packages/core/src/components/templates/Loader/LoaderPopup.tsx b/packages/core/src/components/templates/Loader/LoaderPopup.tsx
@@ -16,7 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native';
 import {
   BlockInteractionScreen,
   Button,
@@ -26,41 +27,72 @@ import {
   useConfig,
   useThemeColor,
 } from '@axelor/aos-mobile-ui';
-import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native';
 import {useTranslator} from '../../../i18n';
-import {useNavigation} from '@react-navigation/native';
+import {useNavigation} from '../../../hooks/use-navigation';
+import useLoaderListner from './use-loader-listener';
 
 interface LoaderPopupProps {
-  loading: boolean;
-  timeout: number;
+  process: () => Promise<any>;
   onSuccess: () => void;
   onError: () => void;
+  timeout: number;
+  disabled: boolean;
 }
 
-const LoaderPopup = ({loading, timeout = 100}: LoaderPopupProps) => {
+const LoaderPopup = ({
+  process,
+  onSuccess,
+  onError,
+  timeout = 100,
+  disabled = false,
+}: LoaderPopupProps) => {
   const navigation = useNavigation();
   const I18n = useTranslator();
   const Colors = useThemeColor();
   const {setActivityIndicator} = useConfig();
+  const timeoutRef = useRef(null);
+
+  const {loading, listener} = useLoaderListner({
+    process,
+    onSuccess: () => {
+      setShowPopup(false);
+      !disabled && onSuccess();
+    },
+    onError: () => {
+      setShowPopup(false);
+      !disabled && onError();
+    },
+  });
 
   const [showPopup, setShowPopup] = useState<boolean>(false);
 
   const handleGoBack = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
+  useEffect(() => {
+    listener();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (loading && !showPopup) {
       setActivityIndicator(true);
     }
 
-    const timerId = setTimeout(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
       setActivityIndicator(false);
       setShowPopup(true);
     }, timeout);
 
-    return () => clearTimeout(timerId);
-  }, [timeout, loading, showPopup, setActivityIndicator]);
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [timeout, loading, showPopup, setActivityIndicator, setShowPopup]);
 
   if (!loading || !showPopup) {
     return null;
@@ -71,21 +103,21 @@ const LoaderPopup = ({loading, timeout = 100}: LoaderPopupProps) => {
       <Card style={styles.popupContainer}>
         <Label
           type="danger"
-          message={I18n.t('Base_Loading_DoNotCloseTheApp')}
+          message={I18n.t('Base_Loader_DoNotCloseTheApp')}
           iconName="exclamation-triangle-fill"
         />
         <View style={styles.activityIndicatorContainer}>
           <ActivityIndicator
             size="large"
             color={Colors.primaryColor.background}
           />
-          <Text style={styles.loadingLabel}>
+          <Text writingType="title">
             {I18n.t('Base_Loader_LoadingInProgress')}
           </Text>
         </View>
         <Button
           iconName="check-lg"
-          title={I18n.t('Base_Loader_NotifyMeWantItIsReady')}
+          title={I18n.t('Base_Loader_NotifyMe')}
           onPress={handleGoBack}
         />
       </Card>
@@ -110,9 +142,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginHorizontal: 30,
   },
-  loadingLabel: {
-    fontWeight: 'bold',
-  },
 });
 
 export default LoaderPopup;
diff --git a/packages/core/src/components/templates/Loader/use-loader-listener.ts b/packages/core/src/components/templates/Loader/use-loader-listener.ts
@@ -24,14 +24,12 @@ interface LoaderListenerProps {
   process: () => Promise<any>;
   onSuccess?: () => void;
   onError?: () => void;
-  disabled?: boolean;
 }
 
 const useLoaderListner = ({
   process,
   onSuccess = () => {},
   onError = () => {},
-  disabled = false,
 }: LoaderListenerProps) => {
   const I18n = useTranslator();
 
@@ -51,7 +49,7 @@ const useLoaderListner = ({
         topOffset: 30,
         text1: I18n.t('Base_Success'),
         text2: response || I18n.t('Base_Loader_ProccessSuccessMessage'),
-        onPress: !disabled ? onSuccess : () => {},
+        onPress: onSuccess,
       });
     } catch (error) {
       showToastMessage({
@@ -60,12 +58,12 @@ const useLoaderListner = ({
         topOffset: 30,
         text1: I18n.t('Base_Error'),
         text2: error || I18n.t('Base_Loader_ProccessErrorMessage'),
-        onPress: !disabled ? onError : () => {},
+        onPress: onError,
       });
     } finally {
       setLoading(false);
     }
-  }, [process, disabled, onSuccess, onError, I18n]);
+  }, [process, onSuccess, onError, I18n]);
 
   useEffect(() => {
     if (start && !loading) {

diff --git a/packages/core/src/i18n/translations/en.json b/packages/core/src/i18n/translations/en.json
@@ -160,6 +160,9 @@
   "Base_Dashboard_RefreshConfig": "Refresh dashboard",
   "Base_Loader_ProccessSuccessMessage": "Process successfully completed.",
   "Base_Loader_ProccessErrorMessage": "An error has occurred.",
+  "Base_Loader_DoNotCloseTheApp": "Do not close the application until the process is done.",
+  "Base_Loader_NotifyMe": "Notify me when it's ready",
+  "Base_Loader_LoadingInProgress": "Loading in progress",
   "Base_SliceAction_FetchAttachedFiles": "fetch attached files",
   "Base_SliceAction_FetchFilesDetails": "fetch file details",
   "Base_SliceAction_FetchMetaModule": "fetch meta modules",

diff --git a/packages/core/src/i18n/translations/fr.json b/packages/core/src/i18n/translations/fr.json
@@ -160,6 +160,9 @@
   "Base_Dashboard_RefreshConfig": "Actualiser le tableau de bord",
   "Base_Loader_ProccessSuccessMessage": "Le processus s'est terminé avec succès.",
   "Base_Loader_ProccessErrorMessage": "Une erreur s'est produite.",
+  "Base_Loader_DoNotCloseTheApp": "Veuillez ne pas fermer l'application avant que le processus soit terminé.",
+  "Base_Loader_NotifyMe": "M'avertir lorsqu'il est prêt",
+  "Base_Loader_LoadingInProgress": "Chargement en cours",
   "Base_SliceAction_FetchAttachedFiles": "récupération des fichiers joints",
   "Base_SliceAction_FetchFilesDetails": "récupération des détails du fichier",
   "Base_SliceAction_FetchMetaModule": "récupération des modules",