Merge pull request #2517 from refugies-info/luis/ri-548-des-tres-nomb…

…reux-appels-a-la-fetchuserfavorites-saga rI-548: fix(client): 🐛 Fix handling of initial user favorites fetch
refugies-info · Dec 13, 2024 · 51e5255 · 51e5255
2 parents a6c8f4a + 3f2f94a
commit 51e5255
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/apps/client/src/__fixtures__/reduxStore.ts b/apps/client/src/__fixtures__/reduxStore.ts
@@ -49,7 +49,7 @@ const initialMockTranslationState = {
 };
 
 const initialUserFavoritesState: UserFavoritesState = {
-  favorites: [],
+  favorites: null,
 };
 
 const initialMockSearchReults: SearchResultsState = {

diff --git a/apps/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx b/apps/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
@@ -45,8 +45,8 @@ const UserFavorites = (props: Props) => {
   const isLoadingUpdate = useSelector(isLoadingSelector(LoadingStatusKey.UPDATE_USER_FAVORITES));
   const favorites = useSelector(userFavoritesSelector);
   const isLoading = useMemo(
-    () => (isLoadingFetch || isLoadingUpdate) && favorites.length === 0,
-    [isLoadingFetch, isLoadingUpdate, favorites.length],
+    () => (isLoadingFetch || isLoadingUpdate) && favorites === null,
+    [isLoadingFetch, isLoadingUpdate, favorites],
   );
 
   const [showDeleteToast, setShowDeleteToast] = useState(false);
@@ -65,7 +65,7 @@ const UserFavorites = (props: Props) => {
     <>
       {isLoading ? (
         <FavoritesLoading t={t} />
-      ) : favorites.length === 0 ? (
+      ) : favorites === null || favorites.length === 0 ? (
         <NoFavorites t={t} toggleTutoModal={toggleTutoModal} />
       ) : (
         <>

diff --git a/apps/client/src/components/Layout/Layout.tsx b/apps/client/src/components/Layout/Layout.tsx
@@ -177,10 +177,10 @@ const Layout = (props: Props) => {
   const isUserFavoritesLoading = useSelector(isLoadingSelector(LoadingStatusKey.FETCH_USER_FAVORITES));
   const hasUserFavoritesError = useSelector(hasErroredSelector(LoadingStatusKey.FETCH_USER_FAVORITES));
   useEffect(() => {
-    if (user && userFavorites.length === 0 && !isUserFavoritesLoading && !hasUserFavoritesError) {
+    if (user && userFavorites === null && !isUserFavoritesLoading && !hasUserFavoritesError) {
       dispatch(fetchUserFavoritesActionCreator(router.locale || "fr"));
     }
-  }, [user, userFavorites.length, isUserFavoritesLoading, hasUserFavoritesError, dispatch, router.locale]);
+  }, [user, userFavorites, isUserFavoritesLoading, hasUserFavoritesError, dispatch, router.locale]);
 
   const computeFullSentence = (nodeList: any) => {
     let sentence = "";

diff --git a/apps/client/src/hooks/useFavorites.ts b/apps/client/src/hooks/useFavorites.ts
@@ -33,7 +33,10 @@ const useFavorites = (contentId: Id | null) => {
   const { isAuth } = useAuth();
 
   // Memoized computation of whether the current content is favorited
-  const isFavorite = useMemo(() => isContentFavorite(favorites, contentId), [favorites, contentId]);
+  const isFavorite = useMemo(
+    () => favorites !== null && isContentFavorite(favorites, contentId),
+    [favorites, contentId],
+  );
 
   // Callback to refresh favorites after successful API operations
   const successCallback = useCallback(() => {

diff --git a/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.reducer.ts b/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.reducer.ts
@@ -3,11 +3,11 @@ import { createReducer } from "typesafe-actions";
 import { UserFavoritesActions } from "./UserFavoritesInLocale.actions";
 
 export type UserFavoritesState = {
-  favorites: GetUserFavoritesResponse[];
+  favorites: GetUserFavoritesResponse[] | null;
 };
 
 const initialUserFavoritesState: UserFavoritesState = {
-  favorites: [],
+  favorites: null,
 };
 
 export const userFavoritesReducer = createReducer<UserFavoritesState, UserFavoritesActions>(initialUserFavoritesState, {

diff --git a/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.selectors.ts b/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.selectors.ts
@@ -1,4 +1,5 @@
 import { GetUserFavoritesResponse } from "@refugies-info/api-types";
 import { RootState } from "../rootReducer";
 
-export const userFavoritesSelector = (state: RootState): GetUserFavoritesResponse[] => state.userFavorites.favorites;
+export const userFavoritesSelector = (state: RootState): GetUserFavoritesResponse[] | null =>
+  state.userFavorites.favorites;