fix: 🐛 Corrige l'actualisation du calendrier + etapes undefined

✅ Closes: #1725 #1723
SocialGouv · Aug 28, 2023 · 30b66f4 · 30b66f4
1 parent 990f1fe
commit 30b66f4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 78 deletions.
diff --git a/front/src/components/timeline/timeline.component.tsx b/front/src/components/timeline/timeline.component.tsx
@@ -25,9 +25,9 @@ const Timeline: FC<TimelineProps> = ({ steps, navigation, scrollTo }) => {
   useEffect(() => {
     checkFontScale();
     // Permet de détecter lorsque l'app change d'état ('active' | 'background' | 'inactive' | 'unknown' | 'extension')
-    AppState.addEventListener("change", checkFontScale);
+    const subscription = AppState.addEventListener("change", checkFontScale);
     return () => {
-      AppState.removeEventListener("change", checkFontScale);
+      subscription.remove();
     };
   }, []);
 

diff --git a/front/src/constants/Labels.ts b/front/src/constants/Labels.ts
@@ -222,10 +222,10 @@ export default {
     },
     pleaseAllowAccessCalendar:
       "Veuillez autoriser l'accès au calendrier dans les paramètres de votre téléphone",
-    synchronise: "Synchroniser avec mon calendrier",
     synchronization: "Synchronisation",
     synchronizationHelper:
       "Ce bouton permet de synchroniser votre calendrier personnel avec celui de l’application. Ainsi, les événements affichés ici le seront aussi sur votre calendrier.",
+    synchronize: "Synchroniser avec mon calendrier",
     today: "Aujourd'hui",
     usefulEvent: "Cette information vous a été utile ?",
   },

diff --git a/front/src/navigation/BottomTabNavigator.tsx b/front/src/navigation/BottomTabNavigator.tsx
@@ -110,7 +110,7 @@ const BottomTabNavigator: FC = () => {
             tabBarAllowFontScaling: false,
             tabBarIcon: ({ color, focused }) => tabItem.getIcon(color, focused),
             title: tabItem.title,
-            unmountOnBlur: tabItem.name === "tabSurveys",
+            unmountOnBlur: true,
           }}
         />
       ))}

diff --git a/front/src/screens/articles/articleFavorites.component.tsx b/front/src/screens/articles/articleFavorites.component.tsx
@@ -46,11 +46,9 @@ const ArticleFavorites: FC<Props> = ({ navigation }) => {
   }, [articles, favoriteIds]);
 
   useEffect(() => {
-    const willFocusSubscription = navigation.addListener("focus", () => {
-      void setFavorites();
-    });
-    return willFocusSubscription;
-  }, [navigation, setFavorites]);
+    void setFavorites();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleResults = useCallback((data: unknown) => {
     const results = (data as { articles: Article[] }).articles;

diff --git a/front/src/screens/calendar/tabCalendarScreen.component.tsx b/front/src/screens/calendar/tabCalendarScreen.component.tsx
@@ -1,4 +1,3 @@
-import type { StackNavigationProp } from "@react-navigation/stack";
 import { format } from "date-fns";
 import * as Calendar from "expo-calendar";
 import * as Localization from "expo-localization";
@@ -44,7 +43,7 @@ import {
   Paddings,
   Sizes,
 } from "../../styles";
-import type { Event, TabCalendarParamList } from "../../types";
+import type { Event } from "../../types";
 import {
   NotificationUtils,
   StorageUtils,
@@ -54,11 +53,7 @@ import {
 import { formattedEvents } from "../../utils/events/event.util";
 import * as RootNavigation from "../../utils/rootNavigation.util";
 
-interface Props {
-  navigation: StackNavigationProp<TabCalendarParamList, "eventDetails">;
-}
-
-const TabCalendarScreen: FC<Props> = ({ navigation }) => {
+const TabCalendarScreen: FC = () => {
   const [childBirthday, setChildBirthday] = useState("");
   const [eventsCalcFromBirthday, setEventsCalcFromBirthday] = useState("");
   const [events, setEvents] = useState<Event[]>([]);
@@ -76,6 +71,9 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
   const isAccessibilityModeOn = useAccessibilityReader();
 
   const init = useCallback(async () => {
+    await getLastSyncDate();
+    await getScrollToEventId();
+
     const childBirthdayStr =
       (await StorageUtils.getStringValue(
         StorageKeysConstants.userChildBirthdayKey
@@ -94,16 +92,9 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
   }, [triggerGetAllEvents]);
 
   useEffect(() => {
-    void getLastSyncDate();
-    void getScrollToEventId();
-
-    // Permet de forcer le refresh de la page lorsque l'on arrive dessus
-    const unsubscribe = navigation.addListener("focus", () => {
-      void init();
-    });
-    // Retourne "unsubscribe" pour que l'événement soit supprimé lors du "démontage" (fix memory leak)
-    return unsubscribe;
-  }, [init, navigation]);
+    void init();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const getScrollToEventId = async () => {
     const eventId = await StorageUtils.getStringValue(
@@ -288,21 +279,14 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
         screenName={TrackerUtils.TrackingEvent.CALENDAR}
         actionName={trackerAction}
       />
-      <GraphQLLazyQuery
-        query={CalendarDbQueries.ALL_EVENTS}
-        fetchPolicy={FetchPoliciesConstants.CACHE_AND_NETWORK}
-        getFetchedData={handleResults}
-        triggerLaunchQuery={triggerGetAllEvents}
-        noLoaderBackdrop
-      />
       {!loadingEvents && (
         <View style={styles.calendarContainer}>
           {childBirthday.length > 0 ? (
             <>
               <View style={styles.flexStart}>
                 <View style={{ flex: 0 }}>
                   <CustomButton
-                    title={Labels.calendar.synchronise}
+                    title={Labels.calendar.synchronize}
                     icon={
                       <Icomoon
                         name={IcomoonIcons.synchroniser}
@@ -315,7 +299,7 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
                     action={syncEventsWithOsCalendar}
                     titleStyle={styles.buttonTitleStyle}
                     buttonStyle={styles.buttonStyle}
-                    accessibilityLabel={`${Labels.calendar.synchronise}. ${Labels.calendar.synchronizationHelper}`}
+                    accessibilityLabel={`${Labels.calendar.synchronize}. ${Labels.calendar.synchronizationHelper}`}
                   />
                 </View>
                 {!isAccessibilityModeOn && (
@@ -357,6 +341,13 @@ const TabCalendarScreen: FC<Props> = ({ navigation }) => {
           )}
         </View>
       )}
+      <GraphQLLazyQuery
+        query={CalendarDbQueries.ALL_EVENTS}
+        fetchPolicy={FetchPoliciesConstants.CACHE_AND_NETWORK}
+        getFetchedData={handleResults}
+        triggerLaunchQuery={triggerGetAllEvents}
+        noLoaderBackdrop
+      />
       {showModalHelp && (
         <ModalHelp
           icon={IcomoonIcons.synchroniser}

diff --git a/front/src/screens/home/tabHomeScreen.component.tsx b/front/src/screens/home/tabHomeScreen.component.tsx
@@ -78,14 +78,9 @@ const TabHomeScreen: FC<Props> = ({ navigation }) => {
   }, [triggerGetSteps]);
 
   useEffect(() => {
-    // Permet de forcer le refresh de la page lorsque l'on arrive dessus
-    const unsubscribe = navigation.addListener("focus", () => {
-      void init();
-    });
-    // Return the function to unsubscribe from the event so it gets removed on unmount
-    return unsubscribe;
+    void init();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [init, navigation]);
+  }, []);
 
   useEffect(() => {
     if (currentStep) {
@@ -135,34 +130,36 @@ const TabHomeScreen: FC<Props> = ({ navigation }) => {
 
   const handleResults = useCallback(
     async (data: unknown) => {
-      const result = data as { etapes: Step[] };
-      let _currentStep = undefined;
+      if (data) {
+        const result = data as { etapes: Step[] };
+        let _currentStep = undefined;
 
-      // Set CurrentStep
-      if (result.etapes.length && currentStepId) {
-        _currentStep = _.find(result.etapes, (o) => {
-          return o.id == currentStepId;
-        });
-        if (_currentStep?.nom) {
-          setCurrentStep(_currentStep);
-          await StorageUtils.storeObjectValue(
-            StorageKeysConstants.currentStep,
-            _currentStep
-          );
+        // Set CurrentStep
+        if (result.etapes.length && currentStepId) {
+          _currentStep = _.find(result.etapes, (o) => {
+            return o.id == currentStepId;
+          });
+          if (_currentStep?.nom) {
+            setCurrentStep(_currentStep);
+            await StorageUtils.storeObjectValue(
+              StorageKeysConstants.currentStep,
+              _currentStep
+            );
+          }
         }
-      }
 
-      // Format and Set the Steps
-      const etapes = result.etapes.map((etape) => ({
-        ...etape,
-        // '+' permet de convertir l'id (string) en number
-        active: currentStepId === +etape.id,
-        id: +etape.id,
-      }));
-      setEtapes(etapes);
+        // Format and Set the Steps
+        const etapes = result.etapes.map((etape) => ({
+          ...etape,
+          // '+' permet de convertir l'id (string) en number
+          active: currentStepId === +etape.id,
+          id: +etape.id,
+        }));
+        setEtapes(etapes);
 
-      if (_currentStep)
-        await checkIfCurrentStepHasChanged(etapes, _currentStep);
+        if (_currentStep)
+          await checkIfCurrentStepHasChanged(etapes, _currentStep);
+      }
     },
     [checkIfCurrentStepHasChanged, currentStepId]
   );
@@ -183,6 +180,11 @@ const TabHomeScreen: FC<Props> = ({ navigation }) => {
       )}
       <ScrollView style={[styles.mainContainer]} ref={scrollViewRef}>
         <TrackerHandler screenName={TrackerUtils.TrackingEvent.HOME} />
+        <TitleH1
+          title={Labels.timeline.title}
+          description={Labels.timeline.description}
+          animated={false}
+        />
         <GraphQLLazyQuery
           query={HomeDbQueries.HOME_GET_ALL_STEPS}
           fetchPolicy={FetchPoliciesConstants.CACHE_AND_NETWORK}
@@ -191,18 +193,11 @@ const TabHomeScreen: FC<Props> = ({ navigation }) => {
           noLoaderBackdrop
         />
         {_etapes.length > 0 && (
-          <>
-            <TitleH1
-              title={Labels.timeline.title}
-              description={Labels.timeline.description}
-              animated={false}
-            />
-            <Timeline
-              steps={_etapes}
-              scrollTo={scrollTo}
-              navigation={navigation}
-            />
-          </>
+          <Timeline
+            steps={_etapes}
+            scrollTo={scrollTo}
+            navigation={navigation}
+          />
         )}
         {showUpdateProfile && (
           <UpdateChildBirthdayModal