feat: Use configured (const) OFF URLs in the UI (#939)

* feat: Use configured (const) OFF URLs in the UI * fix: Add missing imports * Apply suggestions from code review Co-authored-by: Alexandre Fauquette <[email protected]> * fix: URL should use our base URI * fix: Use `static...` * chg: Don't use encodeURIComponent * fix: Add URL_ORIGINE * Apply suggestions from code review --------- Co-authored-by: Alexandre Fauquette <[email protected]>
openfoodfacts · Apr 14, 2024 · 2407a52 · 2407a52
1 parent f411cf2
commit 2407a52
Show file tree

Hide file tree

Showing 21 changed files with 494 additions and 508 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,7 +16,7 @@ import {
 } from "./localeStorageManager";
 import LoginContext from "./contexts/login";
 import off from "./off";
-import { IS_DEVELOPMENT_MODE } from "./const";
+import { IS_DEVELOPMENT_MODE, OFF_URL } from "./const";
 import ColorModeContext from "./contexts/colorMode";
 
 import Loader from "./pages/loader";
@@ -170,7 +170,7 @@ export default function App() {
       return false;
     }
     const isLoggedIn = await axios
-      .get("https://world.openfoodfacts.org/cgi/auth.pl", {
+      .get(`${OFF_URL}/cgi/auth.pl`, {
         withCredentials: true,
       })
       .then(() => {

diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
@@ -30,6 +30,7 @@ import { useTranslation } from "react-i18next";
 import WelcomeTour from "./welcome/Welcome";
 import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
+import { OFF_URL } from "../const";
 
 // Object with no url are subheader in the menu
 const pages = [
@@ -305,12 +306,7 @@ const ResponsiveAppBar = () => {
                 onClick={async () => {
                   const isLoggedIn = await refresh();
                   if (!isLoggedIn) {
-                    window
-                      .open(
-                        "https://world.openfoodfacts.org/cgi/login.pl",
-                        "_blank",
-                      )
-                      .focus();
+                    window.open(`${OFF_URL}/cgi/login.pl`, "_blank").focus();
                   }
                 }}
               >
@@ -338,7 +334,7 @@ const ResponsiveAppBar = () => {
             >
               <MuiLink
                 sx={{ mr: 1, display: "flex", alignSelf: "center" }}
-                href="https://world.openfoodfacts.org/"
+                href={OFF_URL}
                 target="_blank"
               >
                 <img
@@ -446,10 +442,7 @@ const ResponsiveAppBar = () => {
                       const isLoggedIn = await refresh();
                       if (!isLoggedIn) {
                         window
-                          .open(
-                            "https://world.openfoodfacts.org/cgi/login.pl",
-                            "_blank",
-                          )
+                          .open(`${OFF_URL}/cgi/login.pl`, "_blank")
                           .focus();
                       }
                     }}

diff --git a/src/const.ts b/src/const.ts
@@ -1,10 +1,11 @@
 export const ROBOTOFF_API_URL = "https://robotoff.openfoodfacts.org/api/v1";
-export const OFF_URL = "https://world.openfoodfacts.org";
+export const OFF_DOMAIN = "openfoodfacts.org";
+export const OFF_URL = `https://world.${OFF_DOMAIN}`;
 export const OFF_API_URL = `${OFF_URL}/api/v0`;
 export const OFF_API_URL_V2 = `${OFF_URL}/api/v2`;
 export const OFF_API_URL_V3 = `${OFF_URL}/api/v3`;
-export const OFF_IMAGE_URL = "https://static.openfoodfacts.org/images/products";
-export const OFF_SEARCH = "https://world.openfoodfacts.org/cgi/search.pl";
+export const OFF_IMAGE_URL = `https://static.${OFF_DOMAIN}/images/products`;
+export const OFF_SEARCH = `${OFF_URL}/cgi/search.pl`;
 export const IS_DEVELOPMENT_MODE = process.env.NODE_ENV === "development";
 export const URL_ORIGINE = IS_DEVELOPMENT_MODE
   ? "http://localhost:5173"

diff --git a/src/hooks/useOptions.ts b/src/hooks/useOptions.ts
@@ -1,5 +1,6 @@
 import * as React from "react";
 import axios from "axios";
+import { OFF_DOMAIN } from "../const";
 
 export type Option = {
   value: string;
@@ -14,9 +15,7 @@ export const useOptions = (fileName: Files, lang: string) => {
 
   React.useEffect(() => {
     axios
-      .get(
-        `https://static.openfoodfacts.org/data/taxonomies/${fileName}.full.json`,
-      )
+      .get(`https://static.${OFF_DOMAIN}/data/taxonomies/${fileName}.full.json`)
       .then(({ data }) => {
         const newOptions: Option[] = Object.keys(data)
           .map((key) => {

diff --git a/src/off.ts b/src/off.ts
@@ -1,9 +1,12 @@
 import { getLang } from "./localeStorageManager";
 import {
+  OFF_DOMAIN,
   OFF_API_URL,
   OFF_API_URL_V2,
+  OFF_API_URL_V3,
   OFF_IMAGE_URL,
   OFF_SEARCH,
+  URL_ORIGINE,
 } from "./const";
 import axios from "axios";
 import combineURLs from "axios/lib/helpers/combineURLs";
@@ -72,17 +75,17 @@ const offService = {
     const lang = getLang();
     return `https://world${
       lang === "en" ? "" : "-" + lang
-    }.openfoodfacts.org/product/${barcode}`;
+    }.${OFF_DOMAIN}/product/${barcode}`;
   },
 
   getProductEditUrl(barcode) {
     const lang = getLang();
     return `https://world${
       lang === "en" ? "" : "-" + lang
-    }.openfoodfacts.org/cgi/product.pl?type=edit&code=${barcode}`;
+    }.${OFF_DOMAIN}/cgi/product.pl?type=edit&code=${barcode}`;
   },
   getLogoCropsByBarcodeUrl(barcode) {
-    return `https://hunger.openfoodfacts.org/logos/search?barcode=${barcode}`;
+    return `${URL_ORIGINE}/logos/search?barcode=${barcode}`;
   },
 
   getImageUrl(imagePath) {
@@ -95,7 +98,7 @@ const offService = {
 
   getNutritionToFillUrl({ page, country, creator, category, code = false }) {
     if (code) {
-      return `https://world.openfoodfacts.org/api/v0/product/${code}.json?fields=code,states,lang,image_nutrition_url,product_name,nutriments,images,creator,countries`;
+      return `${OFF_API_URL}/product/${code}.json?fields=code,states,lang,image_nutrition_url,product_name,nutriments,images,creator,countries`;
     }
     let creatorTagNumber = 2;
     let categoryTagNumber = 2;
@@ -163,29 +166,23 @@ const offService = {
       console.error("setIngedrient: Missing text");
     }
 
-    return axios.patch(
-      `https://world.openfoodfacts.org/api/v3/product/${code}`,
-      {
-        product: { [`ingredients_text${lang ? `_${lang}` : ""}`]: text },
-      },
-    );
+    return axios.patch(`${OFF_API_URL_V3}/product/${code}`, {
+      product: { [`ingredients_text${lang ? `_${lang}` : ""}`]: text },
+    });
   },
 
   async getIngedrientParsing(editionParams: { text: string; lang: string }) {
     const { lang, text } = editionParams;
 
-    return await axios.patch(
-      "https://world.openfoodfacts.org/api/v3/product/test",
-      {
-        fields: "ingredients",
-        lc: lang,
-        tags_lc: lang,
-        product: {
-          lang,
-          [`ingredients_text_${lang}`]: text,
-        },
+    return await axios.patch(`${OFF_API_URL_V3}/product/test`, {
+      fields: "ingredients",
+      lc: lang,
+      tags_lc: lang,
+      product: {
+        lang,
+        [`ingredients_text_${lang}`]: text,
       },
-    );
+    });
   },
 };
 

diff --git a/src/pages/Brandinator/index.tsx b/src/pages/Brandinator/index.tsx
@@ -7,6 +7,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
 import data from "./data";
+import { URL_ORIGINE } from "../../const";
 
 //  Unused becaus it's using log scale
 // const MIN_VAL = 18;
@@ -63,7 +64,7 @@ export default function BrandinatorPage() {
           .map(({ label, value }) => (
             <li key={label}>
               <a
-                href={`https://hunger.openfoodfacts.org/logos/deep-search?type=brand&value=${label}`}
+                href={`${URL_ORIGINE}/logos/deep-search?type=brand&value=${label}`}
               >
                 {label} ({value} products)
               </a>

diff --git a/src/pages/bug/index.tsx b/src/pages/bug/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import axios from "axios";
 import off from "../../off";
 import { TextField } from "@mui/material";
-import { OFF_URL } from "../../const";
+import { OFF_URL, OFF_API_URL_V3 } from "../../const";
 
 export default function BugPage() {
   const [text, setText] = React.useState("test ingredient values");
@@ -49,7 +49,7 @@ export default function BugPage() {
         onClick={() => {
           axios
             .post(
-              "https://world.openfoodfacts.org/api/v3/product/123456789",
+              `${OFF_API_URL_V3}/product/123456789`,
               {
                 ingredients_text_fr: text,
               },
@@ -83,7 +83,7 @@ export default function BugPage() {
       <button
         onClick={() => {
           axios
-            .post("https://world.openfoodfacts.org/api/v3/product/123456789", {
+            .post(`${OFF_API_URL_V3}product/123456789`, {
               ingredients_text_fr: text,
             })
             .then(({ data }) => setResponse(data));
@@ -94,7 +94,7 @@ export default function BugPage() {
       <button
         onClick={() => {
           axios
-            .patch("https://world.openfoodfacts.org/api/v3/product/123456789", {
+            .patch(`${OFF_API_URL_V3}product/123456789`, {
               ingredients_text_fr: text,
             })
             .then(({ data }) => setResponse(data));

diff --git a/src/pages/eco-score/index.tsx b/src/pages/eco-score/index.tsx
@@ -16,6 +16,7 @@ import { useSearchParams } from "react-router-dom";
 import { localSettings } from "../../localeStorageManager";
 import countryNames from "../../assets/countries.json";
 import { getCountryId } from "../../utils/getCountryId";
+import { OFF_DOMAIN } from "../../const";
 
 const ecoScoreCards = [
   {
@@ -25,8 +26,7 @@ const ecoScoreCards = [
       valueTag: "en:organic",
     },
     title: "en:organic",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/fr/labels/bio.96x90.png",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/fr/labels/bio.96x90.png`,
   },
   {
     filterState: {
@@ -35,8 +35,7 @@ const ecoScoreCards = [
       valueTag: "en:eu-organic",
     },
     title: "en:eu-organic",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/eu-organic.135x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/eu-organic.135x90.svg`,
   },
   {
     filterState: {
@@ -45,8 +44,7 @@ const ecoScoreCards = [
       valueTag: "fr:ab-agriculture-biologique",
     },
     title: "fr:ab-agriculture-biologique",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/fr/labels/ab-agriculture-biologique.74x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/fr/labels/ab-agriculture-biologique.74x90.svg`,
   },
   {
     filterState: {
@@ -55,8 +53,7 @@ const ecoScoreCards = [
       valueTag: "en:eg-oko-verordnung",
     },
     title: "en:eg-oko-verordnung",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/de/labels/eg-oko-verordnung.110x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/de/labels/eg-oko-verordnung.110x90.svg`,
   },
   {
     filterState: {
@@ -65,8 +62,7 @@ const ecoScoreCards = [
       valueTag: "fr:haute-valeur-environnementale",
     },
     title: "fr:haute-valeur-environnementale",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/fr/labels/haute-valeur-environnementale.90x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/fr/labels/haute-valeur-environnementale.90x90.svg`,
   },
   {
     filterState: {
@@ -75,8 +71,7 @@ const ecoScoreCards = [
       valueTag: "fr:label-rouge",
     },
     title: "fr:label-rouge",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/fr/labels/label-rouge.90x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/fr/labels/label-rouge.90x90.svg`,
   },
   {
     filterState: {
@@ -85,8 +80,7 @@ const ecoScoreCards = [
       valueTag: "fr:bleu-blanc-coeur",
     },
     title: "fr:bleu-blanc-coeur",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/fr/labels/bleu-blanc-coeur.98x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/fr/labels/bleu-blanc-coeur.98x90.svg`,
   },
   {
     filterState: {
@@ -95,8 +89,7 @@ const ecoScoreCards = [
       valueTag: "en:roundtable-on-sustainable-palm-oil",
     },
     title: "en:roundtable-on-sustainable-palm-oil",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/roundtable-on-sustainable-palm-oil.90x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/roundtable-on-sustainable-palm-oil.90x90.svg`,
   },
   {
     filterState: {
@@ -105,8 +98,7 @@ const ecoScoreCards = [
       valueTag: "en:rainforest-alliance",
     },
     title: "en:rainforest-alliance",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/rainforest-alliance.90x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/rainforest-alliance.90x90.svg`,
   },
   {
     filterState: {
@@ -115,8 +107,7 @@ const ecoScoreCards = [
       valueTag: "en:fairtrade-international",
     },
     title: "en:fairtrade-international",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/fairtrade-international.77x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/fairtrade-international.77x90.svg`,
   },
   {
     filterState: {
@@ -125,8 +116,7 @@ const ecoScoreCards = [
       valueTag: "en:max-havelaar",
     },
     title: "en:Max-Havelaar",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/max-havelaar.64x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/max-havelaar.64x90.svg`,
   },
   {
     filterState: {
@@ -135,8 +125,7 @@ const ecoScoreCards = [
       valueTag: "en:sustainable-seafood-msc",
     },
     title: "en:sustainable-seafood-msc",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/sustainable-seafood-msc.126x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/sustainable-seafood-msc.126x90.svg`,
   },
   {
     filterState: {
@@ -145,8 +134,7 @@ const ecoScoreCards = [
       valueTag: "en:responsible-aquaculture-asc",
     },
     title: "en:responsible-aquaculture-asc",
-    imageSrc:
-      "https://static.openfoodfacts.org/images/lang/en/labels/responsible-aquaculture-asc.188x90.svg",
+    imageSrc: `https://static.${OFF_DOMAIN}/images/lang/en/labels/responsible-aquaculture-asc.188x90.svg`,
   },
 ];
 

diff --git a/src/pages/home/UserData.jsx b/src/pages/home/UserData.jsx
@@ -8,25 +8,23 @@ import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import { useTranslation } from "react-i18next";
 
+import { OFF_URL } from "../../const";
+
 const fetchUserData = async (userName) => {
   const editorPromise = axios
-    .get(`https://world.openfoodfacts.org/editor/${userName}.json?fields=count`)
+    .get(`${OFF_URL}/editor/${userName}.json?fields=count`)
     .then(({ data }) => {
       return data?.count;
     })
     .catch(() => undefined);
   const contributorPromise = axios
-    .get(
-      `https://world.openfoodfacts.org/contributor/${userName}.json?fields=count`,
-    )
+    .get(`${OFF_URL}/contributor/${userName}.json?fields=count`)
     .then(({ data }) => {
       return data?.count;
     })
     .catch(() => undefined);
   const photographerPromise = axios
-    .get(
-      `https://world.openfoodfacts.org/photographer/${userName}.json?fields=count`,
-    )
+    .get(`${OFF_URL}/photographer/${userName}.json?fields=count`)
     .then(({ data }) => {
       return data?.count;
     })