From 5f92e6a9e708a4a2c9722f4ff6a5507b78b17e46 Mon Sep 17 00:00:00 2001
From: Gaurav Verrma <63046396+Gaurav-Verma07@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:20:02 +0530
Subject: [PATCH] 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 <45398769+alexfauquette@users.noreply.github.com>

* feat: update country label

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

* fix: avoid re-fetching localdata

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

* feat: use label instead of id

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

* fix: remove unused import

* fix: removed unused import `capitaliseName`

---------

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
---
 src/localeStorageManager.ts   |  1 +
 src/pages/eco-score/index.tsx | 29 ++++++++---------------------
 src/pages/settings/index.jsx  | 21 ++++++++++++++++++++-
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/localeStorageManager.ts b/src/localeStorageManager.ts
index 61ceda0e1..7108e1fe2 100644
--- 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
index 0c2853dff..dbb7f62e3 100644
--- 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
index 0da58eabb..d4ea38580 100644
--- 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>