feat(articles): ajout filtre favoris (#1430)

front/src/components/article/articleListHeader.component.tsx

@@ -2,25 +2,28 @@ import type { StackNavigationProp } from "@react-navigation/stack";
 import _ from "lodash";
 import type { FC } from "react";
 import * as React from "react";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { StyleSheet } from "react-native";
 
 import { Labels } from "../../constants";
+import { useFavoriteArticlesIds } from "../../hooks";
 import { Colors, Margins, Paddings, Sizes } from "../../styles";
+import type { TrackerEvent } from "../../type";
 import type {
   Article,
   ArticleFilter,
   Step,
   TabHomeParamList,
   Thematique,
 } from "../../types";
-import { TrackerUtils } from "../../utils";
+import { ArticleFilterUtils, TrackerUtils } from "../../utils";
 import ArticlesFilter from "../article/articlesFilter.component";
 import BackButton from "../baseComponents/backButton.component";
 import CustomButton from "../baseComponents/customButton.component";
 import { CommonText, SecondaryText } from "../baseComponents/StyledText";
 import { View } from "../baseComponents/Themed";
 import TitleH1 from "../baseComponents/titleH1.component";
+import TrackerHandler from "../tracker/trackerHandler.component";
 
 interface Props {
   title: string;
@@ -45,6 +48,8 @@ const ArticleListHeader: FC<Props> = ({
   navigation,
   step,
 }) => {
+  const [trackerEventObject, setTrackerEventObject] = useState<TrackerEvent>();
+  const favoriteIds = useFavoriteArticlesIds();
   const stepIsFirstThreeMonths = step
     ? step.id == ETAPE_ENFANT_3_PREMIERS_MOIS
     : false;
@@ -89,6 +94,24 @@ const ArticleListHeader: FC<Props> = ({
     [articles, sendFiltersTracker, setArticles]
   );
 
+  const filterArticlesByFavorites = useCallback(() => {
+    const filteredArticles = ArticleFilterUtils.getFavoriteArticles(
+      articles,
+      favoriteIds
+    );
+    const result = articles.map((article) => {
+      return ArticleFilterUtils.hideArticleNotInFavorites(
+        article,
+        filteredArticles
+      );
+    });
+    setTrackerEventObject({
+      action: "FilterByFavorites",
+      name: `Step: ${step?.nom}`,
+    });
+    setArticles(result);
+  }, [articles, favoriteIds, setArticles, step]);
+
   const navigateToSurvey = useCallback(() => {
     navigation.navigate("epdsSurvey");
   }, [navigation]);
@@ -99,6 +122,7 @@ const ArticleListHeader: FC<Props> = ({
 
   return (
     <View>
+      <TrackerHandler eventObject={trackerEventObject} />
       <View style={styles.topContainer}>
         <View style={[styles.flexStart]}>
           <BackButton action={onGoBack} />
@@ -124,7 +148,11 @@ const ArticleListHeader: FC<Props> = ({
         </View>
       )}
       {articles.length > 0 && (
-        <ArticlesFilter articles={articles} applyFilters={applyFilters} />
+        <ArticlesFilter
+          articles={articles}
+          applyFilters={applyFilters}
+          filterByFavorites={filterArticlesByFavorites}
+        />
       )}
     </View>
   );

front/src/components/article/articlesFilter.component.tsx

@@ -7,6 +7,7 @@ import { ScrollView } from "react-native-gesture-handler";
 
 import { Labels } from "../../constants";
 import { PLATFORM_IS_ANDROID } from "../../constants/platform.constants";
+import { useFavoriteArticlesIds } from "../../hooks";
 import { Colors, Margins, Paddings, Sizes, Styles } from "../../styles";
 import type { Article, ArticleFilter } from "../../types";
 import { ArticleFilterUtils } from "../../utils";
@@ -20,18 +21,31 @@ import {
   TitleH1,
   View,
 } from "../baseComponents";
+import CustomDivider from "../baseComponents/customDivider.component";
+import ArticlesFilterFavoritesRow from "./articlesFilterFavoritesRow.component";
 
 interface Props {
   articles: Article[];
   applyFilters: (filters: ArticleFilter[]) => void;
+  filterByFavorites: () => void;
 }
 
-const ArticlesFilter: FC<Props> = ({ articles, applyFilters }) => {
+const ArticlesFilter: FC<Props> = ({
+  articles,
+  applyFilters,
+  filterByFavorites,
+}) => {
+  const favoriteArticlesIds = useFavoriteArticlesIds();
   const [filters, setFilters] = useState<ArticleFilter[]>([]);
   const [lastAppliedFilters, setLastAppliedFilters] = useState<ArticleFilter[]>(
     []
   );
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [showFavoriteToggle, setShowFavoriteToggle] = useState(false);
+
+  const [lastToggleOnFavoritesValue, setLastToggleOnFavoritesValue] =
+    useState(false);
+  const [isToggleOn, setIsToggleOn] = useState(false);
 
   useEffect(() => {
     if (filters.length === 0) {
@@ -42,34 +56,78 @@ const ArticlesFilter: FC<Props> = ({ articles, applyFilters }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [articles]);
 
+  useEffect(() => {
+    setShowFavoriteToggle(
+      ArticleFilterUtils.shouldShowFavoriteToggle(articles, favoriteArticlesIds)
+    );
+  }, [articles, favoriteArticlesIds]);
+
+  useEffect(() => {
+    if (showFavoriteToggle && !isToggleOn) {
+      const areArticlesAllFavorites =
+        !ArticleFilterUtils.areArticlesNotAllFavorites(
+          articles,
+          favoriteArticlesIds
+        );
+
+      setLastToggleOnFavoritesValue(areArticlesAllFavorites);
+      setIsToggleOn(areArticlesAllFavorites);
+    }
+  }, [articles, favoriteArticlesIds, isToggleOn, showFavoriteToggle]);
+
   const onShowModal = useCallback(() => {
     if (lastAppliedFilters.length > 0) {
       setFilters(lastAppliedFilters);
     }
+    setIsToggleOn(lastToggleOnFavoritesValue);
     setIsModalVisible(!isModalVisible);
-  }, [isModalVisible, lastAppliedFilters]);
+  }, [isModalVisible, lastAppliedFilters, lastToggleOnFavoritesValue]);
 
   const resetFilters = useCallback(() => {
     setFilters(ArticleFilterUtils.getFilters(articles));
+    setIsToggleOn(false);
   }, [articles]);
 
   const cancelFiltersModal = useCallback(() => {
     setFilters(lastAppliedFilters);
+    setIsToggleOn(lastToggleOnFavoritesValue);
     setIsModalVisible(false);
-  }, [lastAppliedFilters]);
+  }, [lastAppliedFilters, lastToggleOnFavoritesValue]);
 
   const onCheckboxPressed = useCallback(
     (selectedFilter: ArticleFilter) => () => {
+      if (isToggleOn) setIsToggleOn(false);
       setFilters(ArticleFilterUtils.updateFilters(filters, selectedFilter));
     },
-    [filters]
+    [filters, isToggleOn]
   );
 
+  const onToggleFavorite = useCallback(() => {
+    setIsToggleOn(!isToggleOn);
+    setFilters(ArticleFilterUtils.getFilters(articles));
+  }, [isToggleOn, articles]);
+
   const onValidateFilter = useCallback(() => {
+    setLastToggleOnFavoritesValue(isToggleOn);
     setLastAppliedFilters(filters);
-    applyFilters(filters);
+
+    if (isToggleOn) filterByFavorites();
+    else applyFilters(filters);
+
     setIsModalVisible(false);
-  }, [applyFilters, filters]);
+  }, [applyFilters, filters, isToggleOn, filterByFavorites]);
+
+  const renderFavoriteToggleRow = () => {
+    return showFavoriteToggle ? (
+      <>
+        <CustomDivider />
+        <ArticlesFilterFavoritesRow
+          onToggleFavorite={onToggleFavorite}
+          isToggleOn={isToggleOn}
+        />
+      </>
+    ) : null;
+  };
 
   return (
     <View style={styles.paddingsDefault}>
@@ -130,21 +188,22 @@ const ArticlesFilter: FC<Props> = ({ articles, applyFilters }) => {
                   <CheckBox
                     containerStyle={styles.checkboxItem}
                     textStyle={{
+                      color: Colors.primaryBlueDark,
                       flex: 1,
                       fontWeight: filter.active ? "bold" : "normal",
                     }}
                     key={index}
                     iconRight
                     uncheckedIcon={
-                      <BaseAssets.UncheckedIcon
-                        width={Sizes.lg}
-                        height={Sizes.lg}
+                      <BaseAssets.CheckboxUncheckedIcon
+                        width={Sizes.sm}
+                        height={Sizes.sm}
                       />
                     }
                     checkedIcon={
-                      <BaseAssets.CheckedIcon
-                        width={Sizes.lg}
-                        height={Sizes.lg}
+                      <BaseAssets.CheckboxCheckedIcon
+                        width={Sizes.sm}
+                        height={Sizes.sm}
                       />
                     }
                     uncheckedColor={Colors.primaryBlueDark}
@@ -157,6 +216,7 @@ const ArticlesFilter: FC<Props> = ({ articles, applyFilters }) => {
                     onPress={onCheckboxPressed(filter)}
                   />
                 ))}
+                {renderFavoriteToggleRow()}
               </ScrollView>
 
               <View style={styles.buttonsContainer}>

front/src/components/article/articlesFilterFavoritesRow.component.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+import { Labels } from "../../constants";
+import { Colors, FontWeight, Margins, Paddings, Sizes } from "../../styles";
+import { SecondaryText, Toggle } from "../baseComponents";
+
+interface Props {
+  isToggleOn: boolean;
+  onToggleFavorite: () => void;
+}
+
+const ArticlesFilterFavoritesRow: React.FC<Props> = ({
+  isToggleOn,
+  onToggleFavorite,
+}) => {
+  return (
+    <View style={styles.mainContainer}>
+      <SecondaryText
+        style={{
+          color: Colors.primaryBlueDark,
+          fontSize: Sizes.xs,
+          fontWeight: isToggleOn ? FontWeight.bold : FontWeight.normal,
+        }}
+      >
+        {Labels.articleList.filterByFavorites}
+      </SecondaryText>
+      <Toggle isToggleOn={isToggleOn} toggleSwitch={onToggleFavorite} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    margin: Margins.default,
+    marginEnd: 0,
+    padding: Paddings.default,
+    paddingTop: 0,
+  },
+  rowTitleStyle: {
+    color: Colors.primaryBlueDark,
+    fontSize: Sizes.xs,
+  },
+});
+
+export default ArticlesFilterFavoritesRow;

front/src/components/assets/baseAssets.component.ts

@@ -1,7 +1,17 @@
 import IcomoonFont from "../../assets/icomoon/icomoon.ttf";
+import CheckboxCheckedIcon from "../../assets/images/checkbox_checked.svg";
+import CheckboxUncheckedIcon from "../../assets/images/checkbox_unchecked.svg";
 import LogoMinistere from "../../assets/images/Logo ministere.svg";
 import AppLogo from "../../assets/images/logo.svg";
 import CheckedIcon from "../../assets/images/radio_checked.svg";
 import UncheckedIcon from "../../assets/images/radio_unchecked.svg";
 
-export { AppLogo, CheckedIcon, IcomoonFont, LogoMinistere, UncheckedIcon };
+export {
+  AppLogo,
+  CheckboxCheckedIcon,
+  CheckboxUncheckedIcon,
+  CheckedIcon,
+  IcomoonFont,
+  LogoMinistere,
+  UncheckedIcon,
+};

front/src/components/baseComponents/customDivider.component.tsx

@@ -12,7 +12,7 @@ const CustomDivider: FC = () => {
 const styles = StyleSheet.create({
   divider: {
     alignSelf: "center",
-    backgroundColor: Colors.navigation,
+    backgroundColor: Colors.primaryBlue,
     borderRadius: Sizes.xs,
     height: Sizes.divider,
     marginVertical: Margins.default,

front/src/components/index.ts

@@ -14,6 +14,7 @@ import SubmitNewFilter from "./aroundMe/submitNewFilter.component";
 import ArticleCard from "./article/articleCard.component";
 import ArticleList from "./article/articleList.component";
 import ArticlesFilter from "./article/articlesFilter.component";
+import ArticlesFilterFavoritesRow from "./article/articlesFilterFavoritesRow.component";
 import DidYouKnow from "./article/didYouKnow.component";
 import ImageBanner from "./article/imageBanner.component";
 import InShort from "./article/inShort.component";
@@ -57,6 +58,7 @@ export {
   ArticleCard,
   ArticleList,
   ArticlesFilter,
+  ArticlesFilterFavoritesRow,
   CheckAppVersion,
   ConditionsOfUse,
   CustomMapMarker,

front/src/constants/Labels.ts

@@ -176,6 +176,7 @@ export default {
   articleList: {
     articlesAlreadyRead: "article(s) déjà lu(s)",
     articlesToRead: "article(s) à lire",
+    filterByFavorites: "Afficher seulement mes favoris",
     filters: "Filtrer",
     resetFilters: "Réinitialiser",
   },

front/src/hooks/index.ts

@@ -1,11 +1,13 @@
 import useAccessibilityReader from "./useAccessibilityReader";
 import useCachedResources from "./useCachedResources";
 import useColorScheme from "./useColorScheme";
+import useFavoriteArticlesIds from "./useFavoriteArticlesIds";
 import useSavedCartographyFilters from "./useSavedCartographyFilters";
 
 export {
   useAccessibilityReader,
   useCachedResources,
   useColorScheme,
+  useFavoriteArticlesIds,
   useSavedCartographyFilters,
 };