feat: add country list in settings page, using it as default country …

…in eco-score (#892) * feat: add country list in settings page, using it as default country in eco-score * fix: setting france as default * Update src/pages/eco-score/index.tsx Co-authored-by: Alexandre Fauquette <[email protected]> * feat: update country label Co-authored-by: Alexandre Fauquette <[email protected]> * fix: avoid re-fetching localdata Co-authored-by: Alexandre Fauquette <[email protected]> * feat: use label instead of id Co-authored-by: Alexandre Fauquette <[email protected]> * fix: remove unused import * fix: removed unused import `capitaliseName` --------- Co-authored-by: Alexandre Fauquette <[email protected]>
openfoodfacts · Feb 20, 2024 · 5f92e6a · 5f92e6a
1 parent 5607295
commit 5f92e6a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/src/localeStorageManager.ts b/src/localeStorageManager.ts
@@ -16,6 +16,7 @@ const STORAGE_KEY = "hunger-game-settings";
 
 export const localSettingsKeys = {
   language: "lang",
+  country: "country",
   colorMode: "colorMode",
   isDevMode: "devMode",
   visiblePages: "visiblePages",

diff --git a/src/pages/eco-score/index.tsx b/src/pages/eco-score/index.tsx
@@ -11,9 +11,10 @@ import SmallQuestionCard from "../../components/SmallQuestionCard";
 import Opportunities from "../../components/Opportunities";
 import { DEFAULT_FILTER_STATE } from "../../components/QuestionFilter/const";
 import { useTranslation } from "react-i18next";
-import { capitaliseName } from "../../utils";
 import Loader from "../loader";
 import { useSearchParams } from "react-router-dom";
+import { localSettings } from "../../localeStorageManager";
+import countryNames from "../../assets/countries.json";
 
 const ecoScoreCards = [
   {
@@ -148,33 +149,19 @@ const ecoScoreCards = [
   },
 ];
 
-export const countryNames = [
-  "en:belgium",
-  "en:denmark",
-  "en:france",
-  "en:germany",
-  "en:italy",
-  "en:netherlands",
-  "en:portugal",
-  "en:spain",
-  "en:sweden",
-  "en:switzerland",
-  "en:united-states",
-  "en:canada",
-  "en:australia",
-  "en:united-kingdom",
-];
+
 
 export default function EcoScore() {
   const { t } = useTranslation();
+  const localData= localSettings.fetch();
   const [searchParams, setSearchParams] = useSearchParams();
   const [selectedCountry, setSelectedCountry] = React.useState(
-    searchParams.get("cc") || countryNames[0],
+    searchParams.get("cc") || localData['country'] || "en:france",
   );
 
   React.useEffect(() => {
     setSearchParams({ cc: selectedCountry });
-  }, [selectedCountry]);
+  }, [selectedCountry, searchParams]);
 
   return (
     <React.Suspense fallback={<Loader />}>
@@ -210,8 +197,8 @@ export default function EcoScore() {
           sx={{ width: 200 }}
         >
           {countryNames.map((country) => (
-            <MenuItem value={country} key={country}>
-              {capitaliseName(country)}
+            <MenuItem value={country.id} key={country.id}>
+              {country.label}
             </MenuItem>
           ))}
         </TextField>

diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx
@@ -22,15 +22,16 @@ 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";
 
 export default function Settings() {
   const { t, i18n } = useTranslation();
   const theme = useTheme();
   const colorMode = React.useContext(ColorModeContext);
-
   const [language, setLanguage] = React.useState(i18n.language);
   const { devMode, setDevMode, visiblePages, setVisiblePages } =
     React.useContext(DevModeContext);
+  const [selectedCountry, setSelectedCountry]= React.useState(() => localSettings.fetch()['country'])
 
   const handleDevModeChange = (event) => {
     localSettings.update(localSettingsKeys.isDevMode, event.target.checked);
@@ -52,6 +53,11 @@ export default function Settings() {
     setLanguage(e.target.value);
   };
 
+  const handleCountryChange= (e)=>{
+    setSelectedCountry(e.target.value);
+    localSettings.update(localSettingsKeys.country, e.target.value)
+  }
+
   return (
     <React.Suspense fallback={<Loader />}>
       <Stack sx={{ my: 5, mx: 2, alignItems: "flex-start" }} spacing={4}>
@@ -71,6 +77,19 @@ export default function Settings() {
             </MenuItem>
           ))}
         </TextField>
+        <TextField
+          select
+          label={t("eco-score.countryLabel")}
+          value={selectedCountry}
+          onChange={handleCountryChange}
+          sx={{ width: 200 }}
+        >
+          {countryNames.map((country) => (
+            <MenuItem value={country.id} key={country.id}>
+              {country.label}
+            </MenuItem>
+          ))}
+        </TextField>
 
         <div>
           <p>{t("settings.dev_mode_title")}</p>