From dc9c601f0ca20e86a94ec2c1864516e97fe68485 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Fri, 13 Dec 2024 00:29:07 +0100
Subject: [PATCH] fix: make world an empty country code (#1100)

* make world an empty country code

* update country management

* fix console errors

* fix nav bar world display

* show off data by default
---
 src/assets/countries.json                     |  2 +-
 src/components/ResponsiveAppBar.jsx           | 25 +++++++++--------
 .../CountryProvider/CountryProvider.tsx       | 15 +++++++---
 src/pages/nutrition/NutrimentCell.tsx         |  2 +-
 src/pages/nutrition/index.tsx                 |  7 +++--
 update-countries.js                           | 28 ++++++++++++-------
 6 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/src/assets/countries.json b/src/assets/countries.json
index 4987938ec..91e69b3d6 100644
--- a/src/assets/countries.json
+++ b/src/assets/countries.json
@@ -1485,7 +1485,7 @@
     "id": "en:world",
     "label": "World",
     "languageCode": "en",
-    "countryCode": "world"
+    "countryCode": ""
   },
   {
     "id": "en:yemen",
diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index d991f7385..07da99c1c 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -413,21 +413,22 @@ const ResponsiveAppBar = () => {
               }}
             >
               <Select
-                value={country}
-                onChange={(event) => setCountry(event.target.value, "global")}
+                value={country || "world"}
+                onChange={(event) =>
+                  setCountry(
+                    event.target.value === "world" ? "" : event.target.value,
+                    "global",
+                  )
+                }
                 variant="outlined"
                 sx={{ fieldset: { border: "none" } }}
               >
-                {countryNames
-                  .filter((country) => country.countryCode)
-                  .map((country) => (
-                    <MenuItem
-                      value={country.countryCode}
-                      key={country.countryCode}
-                    >
-                      {country.label} ({country.countryCode})
-                    </MenuItem>
-                  ))}
+                {countryNames.map(({ label, countryCode }) => (
+                  <MenuItem value={countryCode || "world"} key={countryCode}>
+                    {label}
+                    {countryCode && ` (${countryCode})`}
+                  </MenuItem>
+                ))}
               </Select>
               <IconButton
                 color="inherit"
diff --git a/src/contexts/CountryProvider/CountryProvider.tsx b/src/contexts/CountryProvider/CountryProvider.tsx
index dcffa8a0e..2d8a4a6ea 100644
--- a/src/contexts/CountryProvider/CountryProvider.tsx
+++ b/src/contexts/CountryProvider/CountryProvider.tsx
@@ -7,7 +7,7 @@ import countries from "../../assets/countries.json";
 const ValidCountryCodes = new Set(countries.map((c) => c.countryCode));
 
 export function CountryProvider({ children }) {
-  const [country, setCountry] = useLocalStorageState("country", "world");
+  const [country, setCountry] = useLocalStorageState("country", "");
   const [searchParams, setSearchParams] = useSearchParams();
 
   const searchParamsCountry = searchParams.get("country")?.toLowerCase();
@@ -26,9 +26,16 @@ export function CountryProvider({ children }) {
   );
 
   const value = React.useMemo(() => {
-    const lowercasedCountry = (
-      ValidCountryCodes.has(searchParamsCountry) ? searchParamsCountry : country
-    )?.toLocaleLowerCase();
+    // Try from:
+    // - searchParams
+    // - localStorage
+    // - empty
+
+    const lowercasedCountry = ValidCountryCodes.has(searchParamsCountry)
+      ? searchParamsCountry
+      : ValidCountryCodes.has(country?.toLocaleLowerCase())
+      ? country?.toLocaleLowerCase()
+      : "";
 
     return {
       country: lowercasedCountry,
diff --git a/src/pages/nutrition/NutrimentCell.tsx b/src/pages/nutrition/NutrimentCell.tsx
index 696a37261..06b26697b 100644
--- a/src/pages/nutrition/NutrimentCell.tsx
+++ b/src/pages/nutrition/NutrimentCell.tsx
@@ -74,7 +74,7 @@ export const NutrimentCell = (props: NutrimentCellProps) => {
       {isValidUnit(unit) ? (
         <select
           style={{ width: 55 }}
-          value={unit}
+          value={unit || ""}
           tabIndex={tabIndex}
           onChange={(event) => {
             setValues((p) => ({
diff --git a/src/pages/nutrition/index.tsx b/src/pages/nutrition/index.tsx
index 19a5228d1..788387915 100644
--- a/src/pages/nutrition/index.tsx
+++ b/src/pages/nutrition/index.tsx
@@ -20,7 +20,10 @@ import { NUTRIMENTS_ORDER } from "./config";
 export default function Nutrition() {
   const [partiallyFilled, setPartiallyFilled] = React.useState(false);
   const [displayOFFValue, setDisplayOFFValue] = React.useState(false);
-  const handlePartiallyFilled = (_, checked) => setPartiallyFilled(checked);
+  const handlePartiallyFilled = (_, checked) => {
+    setPartiallyFilled(checked);
+    setDisplayOFFValue(checked);
+  };
   const handleDisplayOFFValue = (_, checked) => setDisplayOFFValue(checked);
 
   const [additionalIds, setAdditionalIds] = React.useState([]);
@@ -215,7 +218,7 @@ export default function Nutrition() {
                           setAdditionalIds((p) => [...p, event.target.value]);
                         }}
                       >
-                        <option disabled selected value="">
+                        <option disabled value="">
                           -- add nutriment --
                         </option>
                         {notUsedNutriments.map((nutriId) => (
diff --git a/update-countries.js b/update-countries.js
index a1a75c1f2..0d386a96e 100644
--- a/update-countries.js
+++ b/update-countries.js
@@ -7,20 +7,28 @@ axios("https://static.openfoodfacts.org/data/taxonomies/countries.json")
       "./src/assets/countries.json",
       JSON.stringify(
         Object.entries(data)
-          .map(([key, value]) => ({
-            id: key,
-            label: value.name.en,
-            languageCode:
+          .map(([key, value]) => {
+            let countryCode =
+              value.country_code_2 === undefined
+                ? undefined
+                : value.country_code_2.en.toLowerCase();
+            if (countryCode === "world") {
+              countryCode = "";
+            }
+
+            const languageCode =
               value.languages === undefined
                 ? "en"
                 : value.languages.en === undefined
                 ? undefined
-                : value.languages.en.split(",")[0],
-            countryCode:
-              value.country_code_2 === undefined
-                ? undefined
-                : value.country_code_2.en.toLowerCase(),
-          }))
+                : value.languages.en.split(",")[0];
+            return {
+              id: key,
+              label: value.name.en,
+              languageCode,
+              countryCode,
+            };
+          })
           .filter((country) => country.countryCode !== undefined)
           .sort((a, b) => a.label.localeCompare(b.label)),
       ),