Add links to product and count of insights (#1088)

src/pages/nutrition/LinksToProduct.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import Stack, { StackProps } from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import EditIcon from "@mui/icons-material/Edit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import { useTranslation } from "react-i18next";
+import offService from "../../off";
+import { Typography } from "@mui/material";
+
+export default function LinkToProduct(
+  props: { barcode: string; count: number } & StackProps,
+) {
+  const { barcode, count, ...other } = props;
+
+  const { t } = useTranslation();
+  return (
+    <Stack direction="row" alignItems="center" {...other}>
+      <Button
+        size="small"
+        component={Link}
+        target="_blank"
+        href={offService.getProductUrl(barcode)}
+        variant="outlined"
+        startIcon={<VisibilityIcon />}
+        sx={{ minWidth: 150 }}
+      >
+        {t("questions.view")}
+      </Button>
+      <Button
+        size="small"
+        component={Link}
+        target="_blank"
+        href={offService.getProductEditUrl(barcode)}
+        variant="contained"
+        startIcon={<EditIcon />}
+        sx={{ ml: 2, minWidth: 150 }}
+      >
+        {t("questions.edit")}
+      </Button>
+      <Typography sx={{ ml: "auto" }}>Restant: {count}</Typography>
+    </Stack>
+  );
+}

src/pages/nutrition/index.tsx

@@ -19,9 +19,11 @@ import {
 import { NutrimentPrediction } from "./insight.types";
 import { ErrorBoundary } from "../taxonomyWalk/Error";
 import { UNITS } from "./config";
+import LinksToProduct from "./LinksToProduct";
 
 export default function Nutrition() {
-  const { isLoading, insight, nextItem } = useRobotoffPredicitions();
+  const { isLoading, insight, nextItem, count } = useRobotoffPredicitions();
+
   // const [showRaw, setShowRaw] = React.useState(false);
   const [values, setValues] = React.useState<
     Record<string, Pick<NutrimentPrediction, "value" | "unit">>
@@ -64,7 +66,12 @@ export default function Nutrition() {
               </TransformComponent>
             </TransformWrapper>
           </Box>
-          <Stack direction="column" sx={{ width: "50%", pt: 3 }}>
+          <Stack direction="column" sx={{ width: "50%", p: 2 }}>
+            <LinksToProduct
+              barcode={insight.barcode}
+              count={count}
+              sx={{ mb: 2 }}
+            />
             <Stack direction="row">
               <Stack direction="column">
                 <div>Nutri</div>

src/pages/nutrition/useRobotoffPredicitions.ts

@@ -4,9 +4,9 @@ import { InsightType } from "./insight.types";
 
 export function useRobotoffPredicitions() {
   const [isLoading, setIsLoading] = React.useState(false);
+  const [count, setCount] = React.useState(0);
   const [insights, setInsights] = React.useState<InsightType[]>([]);
   const [insightIndex, setInsightIndex] = React.useState(0);
-  const [page, setPage] = React.useState(1);
 
   React.useEffect(() => {
     if (isLoading || insightIndex < insights.length - 1) {
@@ -16,31 +16,35 @@ export function useRobotoffPredicitions() {
     setIsLoading(true);
 
     robotoff
-      .getInsights(
-        "",
-        "nutrient_extraction",
-        "",
-        "",
-
-        page,
-      )
+      .getInsights("", "nutrient_extraction", "", "", 1)
       .then(({ data }) => {
         if (!valid) {
           return;
         }
+
+        setCount(data.count);
         setInsights((prev) => [...prev, ...data.insights]);
-        setPage((p) => p + 1);
+        // setPage((p) => p + 1);
         setIsLoading(false);
       });
 
     return () => {
       valid = false;
     };
-  }, [page, insightIndex, insights]);
+  }, [insightIndex, insights]);
+
 
-  const nextItem = React.useCallback(() => setInsightIndex((p) => p + 1), []);
+  const nextItem = React.useCallback(() => {
+    setInsightIndex((p) => p + 1);
+    setCount((p) => p - 1);
+  }, []);
 
   const insight = insights[insightIndex];
 
-  return { isLoading, insight, nextItem };
+  return {
+    isLoading,
+    insight,
+    nextItem,
+    count,
+  };
 }