feat: allows to see packaging interface for specific products (#411)

Fix #396

src/pages/logos/LogoSearch.jsx

@@ -82,13 +82,7 @@ export default function LogoSearch() {
 
   return (
     <Box sx={{ padding: 2 }}>
-      <LogoSearchForm
-        value=""
-        type=""
-        barcode=""
-        count={25}
-        validate={validate}
-      />
+      <LogoSearchForm {...searchState} validate={validate} />
 
       {isLoading ? (
         <LinearProgress sx={{ mt: 5 }} />

src/pages/packaging/index.tsx

@@ -27,6 +27,7 @@ import ZoomableImage from "../../components/ZoomableImage";
 import { getImagesUrls } from "../questions/utils";
 import offService from "../../off";
 import { useTranslation } from "react-i18next";
+import useUrlParams from "../../hooks/useUrlParams";
 
 type CustomProps = {
   options: Option[];
@@ -243,11 +244,16 @@ const Page = () => {
   const packagingMaterials = useOptions("packaging_materials", lang);
   const packagingShapes = useOptions("packaging_shapes", lang);
   const packagingRecycling = useOptions("packaging_recycling", lang);
+  const [searchState] = useUrlParams({
+    country: "en:france",
+    creator: undefined,
+    code: "",
+  });
 
   const [rows, setRows] = React.useState([]);
   const [innerRows, setInnerRows] = React.useState([]);
 
-  const [data, next] = useBuffer();
+  const [data, next] = useBuffer(searchState);
 
   const product = data?.[0] ?? null;
   React.useEffect(() => {

src/pages/packaging/useBuffer.ts

@@ -53,14 +53,16 @@ function getProductsToAnnotateUrl({
   }`;
 }
 
-export const useBuffer = (
-  country?: string,
-  creator?: string
-): [ProductDescription[], () => void] => {
+export const useBuffer = ({
+  country,
+  creator,
+  code,
+}: Omit<Parameters, "page">): [ProductDescription[], () => void] => {
   const [page, setPage] = React.useState(() => Math.ceil(Math.random() * 100));
   const [data, setData] = React.useState<ProductDescription[]>(null);
+  const [maxPage, setMaxPage] = React.useState<number>(100);
 
-  const url = getProductsToAnnotateUrl({ page, country, creator });
+  const url = getProductsToAnnotateUrl({ page, country, creator, code });
 
   const canReset = React.useRef(false);
   React.useEffect(() => {
@@ -72,15 +74,16 @@ export const useBuffer = (
 
   React.useEffect(() => {
     if (data !== null && data.length === 0) {
-      setPage((p) => p + 1);
+      setPage((p) => Math.min(maxPage, p + 1));
     }
-  }, [data]);
+  }, [data, maxPage]);
 
   React.useEffect(() => {
     let isValid = true;
     axios.get(url).then(({ data }) => {
       if (isValid) {
         setData(data.products);
+        setMaxPage(Math.floor(data.count / data.page_size) + 1);
         canReset.current = true;
       }
     });

src/pages/settings/index.jsx

@@ -105,7 +105,7 @@ export default function Settings() {
         ].map(({ pageUrl, pageName, isExperimental }) => (
           <FormControlLabel
             key={pageUrl}
-            checked={visiblePages[pageUrl]}
+            checked={visiblePages[pageUrl] ?? false}
             onChange={handleVisiblePagesChange(pageUrl)}
             control={<Switch />}
             label={`${t("settings.dev_page_toggle", { name: pageName })}${