diff --git a/src/pages/nutrition/NutrimentCell.tsx b/src/pages/nutrition/NutrimentCell.tsx
new file mode 100644
index 000000000..88c836faa
--- /dev/null
+++ b/src/pages/nutrition/NutrimentCell.tsx
@@ -0,0 +1,93 @@
+import * as React from "react";
+import { UNITS } from "./config";
+import { isValidUnit } from "./utils";
+
+interface NutrimentCellProps {
+ nutrimentId: string;
+ nutrimentKey: string;
+ tabIndex: number;
+ value?: string;
+ unit?: string;
+ setValues: (object) => void;
+}
+
+export const NutrimentCell = (props: NutrimentCellProps) => {
+ const { nutrimentId, nutrimentKey, tabIndex, value, unit, setValues } = props;
+
+ return (
+
{
+ const element = document.querySelector(
+ `tr[data-label-id=${nutrimentId}]`,
+ );
+ element.classList.add("focused");
+ }}
+ onBlur={() => {
+ const element = document.querySelector(
+ `tr[data-label-id=${nutrimentId}]`,
+ );
+ element.classList.remove("focused");
+ }}
+ >
+
+ setValues((p) => ({
+ ...p,
+ [nutrimentKey]: {
+ ...p[nutrimentKey],
+ value: event.target.value,
+ },
+ }))
+ }
+ />
+
+ {isValidUnit(unit) ? (
+
+ ) : (
+ {unit}
+ )}
+
+ |
+ );
+};
diff --git a/src/pages/nutrition/index.tsx b/src/pages/nutrition/index.tsx
index 57efa696e..699627d6e 100644
--- a/src/pages/nutrition/index.tsx
+++ b/src/pages/nutrition/index.tsx
@@ -10,7 +10,6 @@ import { Box, Button } from "@mui/material";
import Stack from "@mui/material/Stack";
import {
deleteRobotoff,
- isValidUnit,
NUTRIMENTS,
postRobotoff,
skipRobotoff,
@@ -18,13 +17,12 @@ import {
} from "./utils";
import { NutrimentPrediction } from "./insight.types";
import { ErrorBoundary } from "../taxonomyWalk/Error";
-import { UNITS } from "./config";
import LinksToProduct from "./LinksToProduct";
+import { NutrimentCell } from "./NutrimentCell";
export default function Nutrition() {
const { isLoading, insight, nextItem, count } = useRobotoffPredicitions();
- // const [showRaw, setShowRaw] = React.useState(false);
const [values, setValues] = React.useState<
Record>
>({});
@@ -94,190 +92,117 @@ export default function Nutrition() {
count={count}
sx={{ mb: 2 }}
/>
-
-
- Nutri
- {nutrimentsDetected.map((nutrimentId) => {
- return (
-
- {NUTRIMENTS[nutrimentId] ?? nutrimentId}
-
- );
- })}
-
-
- 100g
- {nutrimentsDetected.map((nutrimentId) => {
- const key = `${nutrimentId}_100g`;
- const item = values[key];
- return (
-
-
- setValues((p) => ({
- ...p,
- [key]: {
- ...p[key],
- value: event.target.value,
- },
- }))
- }
- />
-
- {isValidUnit(item?.unit) ? (
-
- ) : (
-
- {item?.unit}
-
- )}
-
-
- );
- })}
-
-
-
-
- serving{" "}
-
-
+ ({
+ width: "fit-content",
+ "& .focused": {
+ backgroundColor: theme.palette.divider,
+ },
+ })}
+ >
+
+
+ Nutriments |
+ 100g |
+
+ serving{" "}
+
+ |
+
{nutrimentsDetected.map((nutrimentId) => {
- const key = `${nutrimentId}_serving`;
- const item = values[key];
+ const key100g = `${nutrimentId}_100g`;
+ const { value: value100g, unit: unit100g } =
+ values[key100g] ?? {};
+
+ const keyServing = `${nutrimentId}_serving`;
+ const { value: valueServing, unit: unitServing } =
+ values[keyServing] ?? {};
return (
-
-
- setValues((p) => ({
- ...p,
- [key]: {
- ...p[key],
- value: event.target.value,
- },
- }))
- }
+
+
+ {NUTRIMENTS[nutrimentId] ?? nutrimentId}
+ |
+
-
- {isValidUnit(item?.unit) ? (
-
- ) : (
-
- {item?.unit}
-
- )}
-
-
+
+
);
})}
-
-
-
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+