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 (
-
-
+
+
{product_name || "No product name"} (
{code})
@@ -45,13 +50,15 @@ function ProductInterface(props) {
{selectedImages.map(({ countryCode }) => {
return (
);
@@ -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 (
}>
{t("ingredients.description")}
+ {
+ setSelectedCountry(event.target.value);
+ }}
+ sx={{ width: 200 }}
+ >
+ {countryNames.map((country) => (
+
+ ))}
+
{/* */}
{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 (
}>