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, + }, + })} + > + + + + + + {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, - }, - })) - } +
+ + - - {isValidUnit(item?.unit) ? ( - - ) : ( - - {item?.unit} - - )} - - + + ); })} - - - + + + + + + +
Nutriments100g + serving{" "} + +
+ {NUTRIMENTS[nutrimentId] ?? nutrimentId} +
+ + + +
+