From 856ac6714b03ee2f88b182d7fdc139d576f7f76b Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:07:00 +0100
Subject: [PATCH] Allows ingredients game to filter products by country (#899)

filter by country
---
 src/pages/eco-score/index.tsx     |  6 ++--
 src/pages/ingredients/index.tsx   | 57 +++++++++++++++++++++++++++----
 src/pages/ingredients/useData.tsx | 14 +++++---
 src/pages/settings/index.jsx      | 12 ++++---
 4 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/pages/eco-score/index.tsx b/src/pages/eco-score/index.tsx
index dbb7f62e3..f9035a1c5 100644
--- a/src/pages/eco-score/index.tsx
+++ b/src/pages/eco-score/index.tsx
@@ -149,14 +149,12 @@ const ecoScoreCards = [
   },
 ];
 
-
-
 export default function EcoScore() {
   const { t } = useTranslation();
-  const localData= localSettings.fetch();
+  const localData = localSettings.fetch();
   const [searchParams, setSearchParams] = useSearchParams();
   const [selectedCountry, setSelectedCountry] = React.useState(
-    searchParams.get("cc") || localData['country'] || "en:france",
+    searchParams.get("cc") || localData["country"] || "en:france",
   );
 
   React.useEffect(() => {
diff --git a/src/pages/ingredients/index.tsx b/src/pages/ingredients/index.tsx
index 8c82f08ed..fab2bbbe9 100644
--- a/src/pages/ingredients/index.tsx
+++ b/src/pages/ingredients/index.tsx
@@ -9,6 +9,8 @@ import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import TabPanel from "@mui/lab/TabPanel";
 import Link from "@mui/material/Link";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
 
 import { MapInteractionCSS } from "react-map-interaction";
 
@@ -17,6 +19,9 @@ import off from "../../off";
 import { useTranslation } from "react-i18next";
 import useData from "./useData";
 import ImageAnnotation from "./ImageAnnotation";
+import { useSearchParams } from "react-router-dom";
+import { localSettings } from "../../localeStorageManager";
+import countryNames from "../../assets/countries.json";
 
 function ProductInterface(props) {
   const { product, next } = props;
@@ -34,8 +39,8 @@ function ProductInterface(props) {
   };
 
   return (
-    <div>
-      <Typography>
+    <div style={{ padding: "0 5px" }}>
+      <Typography variant="h6">
         {product_name || "No product name"} (
         <a href={off.getProductUrl(code)}>{code}</a>)
       </Typography>
@@ -45,13 +50,15 @@ function ProductInterface(props) {
             <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
               <TabList
                 onChange={handleChange}
-                aria-label="country code of the selected image"
+                aria-label="language code of the selected image"
               >
                 {selectedImages.map(({ countryCode }) => {
                   return (
                     <Tab
                       key={`${code}-${countryCode}`}
-                      label={countryCode ? `country ${countryCode}` : "default"}
+                      label={
+                        countryCode ? `Lang ${countryCode}` : "default lang"
+                      }
                       value={countryCode}
                     />
                   );
@@ -132,17 +139,53 @@ function ProductInterface(props) {
 export default function IngredientsPage() {
   const { t } = useTranslation();
 
-  const [data, removeHead, isLoading] = useData();
+  const localData = localSettings.fetch();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [selectedCountry, setSelectedCountry] = React.useState(
+    searchParams.get("cc") || localData["country"] || "en:france",
+  );
+
+  React.useEffect(() => {
+    setSearchParams({ cc: selectedCountry });
+  }, [selectedCountry, searchParams]);
+
+  const selectedCountryCode = React.useMemo(() => {
+    const country = countryNames.find(({ id }) => id === selectedCountry);
+    if (!country) {
+      return undefined;
+    }
+    return country.countryCode;
+  }, [selectedCountry]);
+
+  const [data, removeHead, isLoading] = useData(selectedCountryCode);
 
   return (
     <React.Suspense fallback={<Loader />}>
       <Stack
-        spacing={2}
+        spacing={1}
         sx={{
-          padding: 5,
+          px: 5,
+          pt: 4,
+          pb: 2,
         }}
       >
         <Typography>{t("ingredients.description")}</Typography>
+        <TextField
+          select
+          size="small"
+          label={t("eco-score.countryLabel")}
+          value={selectedCountry}
+          onChange={(event) => {
+            setSelectedCountry(event.target.value);
+          }}
+          sx={{ width: 200 }}
+        >
+          {countryNames.map((country) => (
+            <MenuItem value={country.id} key={country.id}>
+              {country.label}
+            </MenuItem>
+          ))}
+        </TextField>
       </Stack>
       {/* <IngeredientDisplay /> */}
       {isLoading ? (
diff --git a/src/pages/ingredients/useData.tsx b/src/pages/ingredients/useData.tsx
index 4ef9d1504..641505040 100644
--- a/src/pages/ingredients/useData.tsx
+++ b/src/pages/ingredients/useData.tsx
@@ -86,8 +86,9 @@ const formatData = (product) => {
   };
 };
 
-export default function useData(): [any[], () => void, boolean] {
+export default function useData(countryCode): [any[], () => void, boolean] {
   const [data, setData] = React.useState([]);
+  const prevCountry = React.useRef(countryCode);
   const [isLoading, setIsLoading] = React.useState(true);
   const [page, setPage] = React.useState(() => {
     return 0;
@@ -110,7 +111,7 @@ export default function useData(): [any[], () => void, boolean] {
           pageSize: 25,
           filters: imagesToRead,
           fields: "all",
-          countryCode: "ch",
+          countryCode: countryCode || "world",
         });
         if (isValid) {
           const rep = products
@@ -123,7 +124,12 @@ export default function useData(): [any[], () => void, boolean] {
               return isNew;
             })
             .map(formatData);
-          setData((prev) => [...prev, ...rep]);
+          if (prevCountry.current !== countryCode) {
+            setData(rep);
+            prevCountry.current = countryCode;
+          } else {
+            setData((prev) => [...prev, ...rep]);
+          }
           setIsLoading(false);
         }
       } catch (error) {
@@ -135,7 +141,7 @@ export default function useData(): [any[], () => void, boolean] {
     return () => {
       isValid = false;
     };
-  }, [page]);
+  }, [page, countryCode]);
 
   const removeHead = React.useCallback(() => {
     setData((prev) => [...prev.slice(1)]);
diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx
index d4ea38580..0b76c27c3 100644
--- a/src/pages/settings/index.jsx
+++ b/src/pages/settings/index.jsx
@@ -22,7 +22,7 @@ import DevModeContext from "../../contexts/devMode";
 import ColorModeContext from "../../contexts/colorMode";
 import { localSettings, localSettingsKeys } from "../../localeStorageManager";
 import FooterWithLinks from "../../components/Footer";
-import countryNames  from "../../assets/countries.json";
+import countryNames from "../../assets/countries.json";
 
 export default function Settings() {
   const { t, i18n } = useTranslation();
@@ -31,7 +31,9 @@ export default function Settings() {
   const [language, setLanguage] = React.useState(i18n.language);
   const { devMode, setDevMode, visiblePages, setVisiblePages } =
     React.useContext(DevModeContext);
-  const [selectedCountry, setSelectedCountry]= React.useState(() => localSettings.fetch()['country'])
+  const [selectedCountry, setSelectedCountry] = React.useState(
+    () => localSettings.fetch()["country"],
+  );
 
   const handleDevModeChange = (event) => {
     localSettings.update(localSettingsKeys.isDevMode, event.target.checked);
@@ -53,10 +55,10 @@ export default function Settings() {
     setLanguage(e.target.value);
   };
 
-  const handleCountryChange= (e)=>{
+  const handleCountryChange = (e) => {
     setSelectedCountry(e.target.value);
-    localSettings.update(localSettingsKeys.country, e.target.value)
-  }
+    localSettings.update(localSettingsKeys.country, e.target.value);
+  };
 
   return (
     <React.Suspense fallback={<Loader />}>