fix: Avoid loading logos without a filtering defined (#742)

Co-authored-by: Pierre Slamich <[email protected]>
openfoodfacts · Oct 4, 2023 · 9a86c3f · 9a86c3f
1 parent e59ac10
commit 9a86c3f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/src/components/LogoSearchForm.jsx b/src/components/LogoSearchForm.jsx
@@ -69,7 +69,6 @@ const LogoSearchForm = (props) => {
   return (
     <Stack direction="column" spacing={{ xs: 1, sm: 2, md: 4 }} {...other}>
       <Stack direction={{ xs: "column", sm: "row" }} spacing={1} wrap="wrap">
-        <p>{innerType}</p>
         <TextField
           fullWidth
           value={innerType}

diff --git a/src/pages/logos/LogoSearch.jsx b/src/pages/logos/LogoSearch.jsx
@@ -41,7 +41,7 @@ const request = async ({ barcode, value, type, count }) => {
 export default function LogoSearch() {
   const { t } = useTranslation();
 
-  const [isLoading, setIsLoading] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
   const [searchState, setSearchState] = useUrlParams(
     {
       type: "",
@@ -61,7 +61,16 @@ export default function LogoSearch() {
     [setSearchState]
   );
 
+  const filterStateHasValue =
+    (searchState.type &&
+      (TYPE_WITHOUT_VALUE.includes(searchState.type) || searchState.value)) ||
+    searchState.barcode;
+
   React.useEffect(() => {
+    if (!filterStateHasValue) {
+      // Avoid fetching data if no value to filter
+      return () => {};
+    }
     let isValidRequest = true;
     setIsLoading(true);
     setResult({ logos: [], count: undefined });

diff --git a/src/pages/logos/ProductLogoAnnotations.jsx b/src/pages/logos/ProductLogoAnnotations.jsx
@@ -25,6 +25,12 @@ const OFF_2_ROBOTOFF = {
   labels: "label",
   packaging: "packaging",
 };
+const ROBOTOFF_2_OFF = {
+  category: "categories",
+  label: "labels",
+  packaging: "packaging",
+};
+
 const fetchProducts = async ({ page, filter }) => {
   try {
     const {
@@ -87,6 +93,12 @@ const useLogoFetching = (filter) => {
   }, [filter]);
 
   React.useEffect(() => {
+    const filterStateIsIncomplet = !filter.tagtype || !filter.tag;
+    if (filterStateIsIncomplet) {
+      // Avoid fetching data if no value to filter
+      return () => {};
+    }
+
     let isValid = true;
     setIsLoading(true);
     setCanLoadMore(false);
@@ -181,7 +193,7 @@ export default function AnnotateLogosFromProducts() {
     {
       tagtype: "labels",
       tag_contains: "contains",
-      tag: "en:eg-oko-verordnung",
+      tag: "",
     },
     {
       tag: ["valueTag", "value_tag", "value"],
@@ -228,7 +240,10 @@ export default function AnnotateLogosFromProducts() {
             sx={{ minWidth: 200 }}
           >
             {logoTypeOptions.map(({ value: typeValue, labelKey }) => (
-              <MenuItem key={typeValue} value={typeValue}>
+              <MenuItem
+                key={typeValue}
+                value={ROBOTOFF_2_OFF[typeValue] ?? typeValue}
+              >
                 {t(labelKey)}
               </MenuItem>
             ))}