From 96431b3355186fcca11a0fa2378187f2275b3b54 Mon Sep 17 00:00:00 2001 From: Luis Arias Date: Fri, 13 Dec 2024 18:33:13 +0100 Subject: [PATCH 1/2] fix(client): :bug: Use null value in state to mean that fetching the user favorites hasn't occured yet instead of empty array --- .../Backend/screens/UserFavorites/UserFavorites.tsx | 6 +++--- apps/client/src/components/Layout/Layout.tsx | 4 ++-- apps/client/src/hooks/useFavorites.ts | 5 ++++- .../UserFavoritesInLocale/UserFavoritesInLocale.reducer.ts | 4 ++-- .../UserFavoritesInLocale.selectors.ts | 3 ++- 5 files changed, 13 insertions(+), 9 deletions(-) diff --git a/apps/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx b/apps/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx index 2f672c9c07..b027577b41 100644 --- 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 ? ( - ) : favorites.length === 0 ? ( + ) : favorites === null || favorites.length === 0 ? ( ) : ( <> diff --git a/apps/client/src/components/Layout/Layout.tsx b/apps/client/src/components/Layout/Layout.tsx index b505e55577..44654d8f29 100644 --- 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 index 89e379f6c1..c25eb90d7e 100644 --- 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 index 3daa313cf1..3adee2f4b2 100644 --- 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(initialUserFavoritesState, { diff --git a/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.selectors.ts b/apps/client/src/services/UserFavoritesInLocale/UserFavoritesInLocale.selectors.ts index 3a9f0cc0ed..5229288b8f 100644 --- 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; From 3f2f94a874c19b706898eb010f35b1b61e49fa73 Mon Sep 17 00:00:00 2001 From: Luis Arias Date: Fri, 13 Dec 2024 18:42:54 +0100 Subject: [PATCH 2/2] test(client): :white_check_mark: Fix mock state --- apps/client/src/__fixtures__/reduxStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/__fixtures__/reduxStore.ts b/apps/client/src/__fixtures__/reduxStore.ts index ce183d7b05..96ecb8f135 100644 --- 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 = {