fix: 🐛 Corrige un problème de refresh sur le moodboard (#1428)

* fix: 🐛 Corrige un problème de refresh sur le moodboard

✅ Closes: #1427

* refactor: 💡 Rename interface MoodsCalendarHandle

Author: benguedj

front/src/components/moodboard/moodsCalendar.component.tsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { useCallback, useEffect, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { AccessibilityInfo, StyleSheet, View } from "react-native";
 import type { DateData } from "react-native-calendars";
 import { Calendar, LocaleConfig } from "react-native-calendars";
@@ -8,17 +15,26 @@ import type { Direction, Theme } from "react-native-calendars/src/types";
 import { Labels, StorageKeysConstants } from "../../constants";
 import { Colors, FontWeight, Margins, Paddings, Sizes } from "../../styles";
 import type { MoodStorageItem } from "../../type";
+import type { MarkedDatesType } from "../../types";
 import { MoodboardUtils, StorageUtils } from "../../utils";
 import { Icomoon, IcomoonIcons, SecondaryText } from "../baseComponents";
 import EditMoodDay from "./editMoodDay.component";
 
 const CALENDAR_MONTH_FORMAT = "MMMM yyyy";
 
-const MoodsCalendar: React.FC = () => {
+interface RefreshMoodCalendar {
+  refresh: () => void;
+}
+
+const MoodsCalendar: React.ForwardRefRenderFunction<RefreshMoodCalendar> = (
+  props,
+  forwardedRef
+) => {
   const [moods, setMoods] = useState<MoodStorageItem[]>();
   const [showEditModal, setShowEditModal] = useState(false);
   const [dateToEdit, setDateToEdit] = useState<string>();
   const [monthToDisplay, setMonthToDisplay] = useState(new Date().getMonth());
+  const calendarRef = useRef<Calendar>(null);
 
   const calenderTheme: Theme = {
     arrowColor: Colors.primaryBlue,
@@ -28,16 +44,23 @@ const MoodsCalendar: React.FC = () => {
     textMonthFontSize: Sizes.xs,
   };
 
-  const findMoods = async () => {
+  useImperativeHandle(forwardedRef, () => ({
+    async refresh() {
+      await findMoods();
+    },
+  }));
+
+  const findMoods = useCallback(async () => {
     const moodsStorage: MoodStorageItem[] =
       (await StorageUtils.getObjectValue(StorageKeysConstants.moodsByDate)) ??
       [];
 
     setMoods(moodsStorage);
-  };
+  }, []);
 
   useEffect(() => {
     void findMoods();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onDayPress = useCallback((day: DateData) => {
@@ -93,10 +116,10 @@ const MoodsCalendar: React.FC = () => {
     );
   }, []);
 
-  const hideEditModal = useCallback(() => {
+  const hideEditModal = useCallback(async () => {
     setShowEditModal(false);
-    void findMoods();
-  }, []);
+    await findMoods();
+  }, [findMoods]);
 
   return (
     <>
@@ -118,6 +141,7 @@ const MoodsCalendar: React.FC = () => {
         markedDates={buildMarkedDatesForCalendar(moods)}
         renderArrow={renderMonthArrow}
         onMonthChange={onMonthChange}
+        ref={calendarRef}
       />
 
       <EditMoodDay
@@ -128,11 +152,12 @@ const MoodsCalendar: React.FC = () => {
     </>
   );
 };
+MoodsCalendar.displayName = "MoodsCalendar";
 
 export const buildMarkedDatesForCalendar = (
   moods: MoodStorageItem[] | undefined
-) => {
-  const markedList = {};
+): MarkedDatesType | undefined => {
+  const markedList: MarkedDatesType = {};
 
   moods?.forEach((item) => {
     const moodItem = MoodboardUtils.MOODBOARD_ITEMS.find(
@@ -167,4 +192,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default MoodsCalendar;
+export default forwardRef(MoodsCalendar);

front/src/screens/moodboard/moodboard.component.tsx

@@ -29,6 +29,8 @@ import type { RootStackParamList } from "../../types";
 import { MoodboardUtils, TrackerUtils } from "../../utils";
 import { getObjectValue } from "../../utils/storage.util";
 
+type MoodsCalendarRef = React.ElementRef<typeof MoodsCalendar>;
+
 const firstItemIndexToShow = 1;
 
 interface Props {
@@ -42,6 +44,7 @@ const Moodboard: FC<Props> = ({ navigation }) => {
   const [dismissAnimation, setDismissAnimation] = useState<unknown>(null);
   const isAccessibilityMode = useAccessibilityReader();
   const elementRef = useRef<Animatable.View & View>(null);
+  const moodsCalendarRef = useRef<MoodsCalendarRef>(null);
 
   const onViewLayout = useCallback((event: LayoutChangeEvent) => {
     const { layout } = event.nativeEvent;
@@ -77,12 +80,13 @@ const Moodboard: FC<Props> = ({ navigation }) => {
     navigation.goBack();
   }, [navigation]);
 
-  const validate = useCallback(() => {
-    void MoodboardUtils.saveMood(
+  const validate = useCallback(async () => {
+    await MoodboardUtils.saveMood(
       MoodboardUtils.MOODBOARD_ITEMS[activeIndex].title
     );
     setTrackerAction(MoodboardUtils.MOODBOARD_ITEMS[activeIndex].title);
     hideCarouselChoice();
+    moodsCalendarRef.current?.refresh();
   }, [activeIndex, hideCarouselChoice]);
 
   return (
@@ -130,7 +134,7 @@ const Moodboard: FC<Props> = ({ navigation }) => {
         </Animatable.View>
       ) : null}
 
-      <MoodsCalendar />
+      <MoodsCalendar ref={moodsCalendarRef} />
     </ScrollView>
   );
 };

front/src/types.tsx

@@ -2,6 +2,7 @@ import type { StackNavigationProp } from "@react-navigation/stack";
 import type { PoiType } from "@socialgouv/nos1000jours-lib";
 import type { FC, ReactNode } from "react";
 import type React from "react";
+import type { MarkingProps } from "react-native-calendars/src/calendar/day/marking";
 import type { LatLng } from "react-native-maps";
 
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
@@ -247,3 +248,5 @@ export type ArticleListHeaderParams = {
 export type Config = {
   lastAppVersionNumber: string | null;
 };
+
+export type MarkedDatesType = Record<string, MarkingProps>;

front/src/utils/moodboard/moodboard.util.ts

@@ -44,5 +44,5 @@ export const saveMood = async (
     title: mood,
   });
 
-  void storeObjectValue(StorageKeysConstants.moodsByDate, newMoods);
+  await storeObjectValue(StorageKeysConstants.moodsByDate, newMoods);
 };