From c7043b92c6305d500fae67c1f34bc14e2470ab4e Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:32:21 +0300 Subject: [PATCH 01/29] bug: shortCut issue solved --- src/pages/questions/QuestionDisplay.jsx | 28 +++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx index c701fd070..8fe369526 100644 --- a/src/pages/questions/QuestionDisplay.jsx +++ b/src/pages/questions/QuestionDisplay.jsx @@ -62,6 +62,30 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { const valueTagQuestionsURL = getValueTagQuestionsURL(question); const valueTagExamplesURL = getValueTagExamplesURL(question); + React.useEffect(() => { + + function handleShortCut(event) { + const preventShortCut = event.target.tagName.toUpperCase() === 'INPUT' + if (question && !preventShortCut) { + switch (event.keyCode) { + case 75: + answerQuestion({ value: -1, insightId: question.insight_id }); + break; + case 79: + answerQuestion({ value: 1, insightId: question.insight_id }); + break; + case 78: + answerQuestion({ value: 0, insightId: question.insight_id }); + break; + default: + break; + } + }} + + window.addEventListener( 'keydown', handleShortCut) + return () => window.removeEventListener('keydown', handleShortCut) + }, [question, answerQuestion]) + if (question === NO_QUESTION_LEFT) { return ( @@ -125,7 +149,7 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { justifyContent="center" spacing={2} sx={{ mb: 1 }} - onKeyDown={(event) => { + /*onKeyDown={(event) => { switch (event.key) { case "k": answerQuestion({ value: -1, insightId: question.insight_id }); @@ -139,7 +163,7 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { default: break; } - }} + }}*/ > ) : null )} diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx index 9b2f3b8ca..cd9c3de16 100644 --- a/src/pages/questions/ProductInformation.jsx +++ b/src/pages/questions/ProductInformation.jsx @@ -13,6 +13,7 @@ import "react-medium-image-zoom/dist/styles.css"; import EditIcon from "@mui/icons-material/Edit"; import VisibilityIcon from "@mui/icons-material/Visibility"; + import { useTranslation } from "react-i18next"; import { NO_QUESTION_LEFT } from "../../const"; import offService from "../../off"; From 0df05c0b84c56b77c8573fc9a5f63dd3da6e79e0 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Thu, 28 Jul 2022 15:36:44 +0300 Subject: [PATCH 05/29] UI: align pictures and add gap --- src/App.js | 2 + src/components/ResponsiveAppBar.jsx | 84 ++++++++++++++++------------- src/i18n/common.json | 3 +- src/pages/index.js | 1 + src/pages/nutrition/index.jsx | 7 +++ 5 files changed, 59 insertions(+), 38 deletions(-) create mode 100644 src/pages/nutrition/index.jsx diff --git a/src/App.js b/src/App.js index 1a6a7e480..45a6bfac5 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import { NotFoundPage, NutriscoreValidator, Home, + Nutrition, } from "./pages"; import ResponsiveAppBar from "./components/ResponsiveAppBar"; import DevModeContext from "./contexts/devMode"; @@ -63,6 +64,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx index 4a2e27ce7..3c55ce9e5 100644 --- a/src/components/ResponsiveAppBar.jsx +++ b/src/components/ResponsiveAppBar.jsx @@ -27,7 +27,7 @@ const pages = [ { url: "eco-score", translationKey: "menu.eco-score" }, { translationKey: "menu.manage" }, { url: "insights", translationKey: "menu.insights" }, - { url: "settings", translationKey: "menu.settings" }, + // { url: "settings", translationKey: "menu.settings" }, ]; const ResponsiveAppBar = () => { @@ -131,50 +131,49 @@ const ResponsiveAppBar = () => { justifyContent: 'space-between' }} > - - - OpenFoodFact logo - - - Hunger Games - - - + + OpenFoodFact logo + + + Hunger Games + + {displayedPages.map((page) => page.url ? ( ) : null )} + + + ); }; -export default ResponsiveAppBar; +export default ResponsiveAppBar; \ No newline at end of file diff --git a/src/i18n/common.json b/src/i18n/common.json index 2f5765222..0496e5aad 100644 --- a/src/i18n/common.json +++ b/src/i18n/common.json @@ -56,7 +56,8 @@ "insights": "Insights", "nutritions": "Nutrition facts", "settings": "Settings", - "eco-score": "Eco-score" + "eco-score": "Eco-score", + "nutrition": "nutrition" }, "insights": { "insights": "Insights", diff --git a/src/pages/index.js b/src/pages/index.js index c534ee76d..3ec479b53 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -11,3 +11,4 @@ export { default as LogoUpdatePage } from "./logos/LogoUpdate"; // experimental export { default as NutriscoreValidator } from "./nutriscoreValidator"; +export { default as Nutrition } from "./nutrition" diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx new file mode 100644 index 000000000..471508a13 --- /dev/null +++ b/src/pages/nutrition/index.jsx @@ -0,0 +1,7 @@ +import * as React from "react"; + +export default function Nutrition(){ + return ( +

Hello world

+ ) +} \ No newline at end of file From c89e1f21e20b690527e6f339caf1a74e38405030 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Fri, 29 Jul 2022 16:53:02 +0300 Subject: [PATCH 06/29] UI: create table component --- package.json | 2 + src/components/ResponsiveAppBar.jsx | 2 +- src/pages/nutrition/index.jsx | 5 +- src/pages/nutrition/selectComp.jsx | 36 ++++++++ src/pages/nutrition/table.jsx | 107 ++++++++++++++++++++++++ src/pages/questions/QuestionDisplay.jsx | 15 ---- yarn.lock | 21 ++++- 7 files changed, 168 insertions(+), 20 deletions(-) create mode 100644 src/pages/nutrition/selectComp.jsx create mode 100644 src/pages/nutrition/table.jsx diff --git a/package.json b/package.json index ce1a13130..f9c4e7ff3 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@mui/material": "^5.8.7", "@mui/x-data-grid": "^5.13.0", "axios": "^0.27.2", + "clsx": "^1.2.1", "i18next": "^21.8.13", "lodash.isequal": "^4.5.0", "react": "^18.2.0", @@ -19,6 +20,7 @@ "react-medium-image-zoom": "^4.4.3", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-virtualized": "^9.22.3", "web-vitals": "^2.1.4" }, "devDependencies": { diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx index 3c55ce9e5..a0e1ac80c 100644 --- a/src/components/ResponsiveAppBar.jsx +++ b/src/components/ResponsiveAppBar.jsx @@ -27,7 +27,7 @@ const pages = [ { url: "eco-score", translationKey: "menu.eco-score" }, { translationKey: "menu.manage" }, { url: "insights", translationKey: "menu.insights" }, - // { url: "settings", translationKey: "menu.settings" }, + { url: "nutrition", translationKey: "menu.nutrition" }, ]; const ResponsiveAppBar = () => { diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 471508a13..d48312a73 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -1,7 +1,8 @@ import * as React from "react"; +import NutritionTable from './table' export default function Nutrition(){ - return ( -

Hello world

+ return( + NutritionTable() ) } \ No newline at end of file diff --git a/src/pages/nutrition/selectComp.jsx b/src/pages/nutrition/selectComp.jsx new file mode 100644 index 000000000..645085609 --- /dev/null +++ b/src/pages/nutrition/selectComp.jsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; + +export default function SelectAutoWidth({}) { + const [age, setAge] = React.useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setAge(event.target.value); + }; + + return ( +
+ + Unit + + +
+ ); +} \ No newline at end of file diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx new file mode 100644 index 000000000..a40838e0f --- /dev/null +++ b/src/pages/nutrition/table.jsx @@ -0,0 +1,107 @@ +import * as React from "react"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import TextField from "@mui/material/TextField"; +import SelectAutoWidth from "./selectComp"; +import { Box } from "@mui/material"; +import Checkbox from "@mui/material/Checkbox"; + +function createData( + name: string, + calories: number, + fat: number +) { + return { name, calories, fat }; +} + +const nutritions = [{ + off_nutriment_id: "energy_kj", + label: "Energie (kJ)", + value: "", + unit: 'null', + quantification: "=", + robotoffPrediction: null +}, + { + off_nutriment_id: "energy_kcal", + label: "Energie (kCal)", + value: "", + unit: 'null', + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Energie (kCal)", + value: "", + unit: 'null', + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Energie (kCal)", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Energie (kCal)", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null + } +] + +const rows = nutritions.map(nutrition => { + return ( + createData( , , + )) +}) + + +export default function NutritionTable() { + return ( + + + + + nutrition.table.value + isPresent + + + + {rows.map((row) => ( + + + {row.name} + + {row.calories} + + ))} + +
+ + ); +} diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx index 8fe369526..d2a7b5b3a 100644 --- a/src/pages/questions/QuestionDisplay.jsx +++ b/src/pages/questions/QuestionDisplay.jsx @@ -149,21 +149,6 @@ const QuestionDisplay = ({ question, answerQuestion, resetFilters }) => { justifyContent="center" spacing={2} sx={{ mb: 1 }} - /*onKeyDown={(event) => { - switch (event.key) { - case "k": - answerQuestion({ value: -1, insightId: question.insight_id }); - break; - case "o": - answerQuestion({ value: 1, insightId: question.insight_id }); - break; - case "n": - answerQuestion({ value: 0, insightId: question.insight_id }); - break; - default: - break; - } - }}*/ > + + + ) +} \ No newline at end of file diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index a40838e0f..db8cbd348 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -5,18 +5,15 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; -import Paper from "@mui/material/Paper"; import TextField from "@mui/material/TextField"; import SelectAutoWidth from "./selectComp"; import { Box } from "@mui/material"; import Checkbox from "@mui/material/Checkbox"; function createData( - name: string, - calories: number, - fat: number + label, property, unit ) { - return { name, calories, fat }; + return { label, property, unit }; } const nutritions = [{ @@ -29,7 +26,7 @@ const nutritions = [{ }, { off_nutriment_id: "energy_kcal", - label: "Energie (kCal)", + label: "Protein", value: "", unit: 'null', quantification: "<", @@ -37,7 +34,7 @@ const nutritions = [{ }, { off_nutriment_id: "energy_kcal", - label: "Energie (kCal)", + label: "Shugar", value: "", unit: 'null', quantification: "<", @@ -45,7 +42,7 @@ const nutritions = [{ }, { off_nutriment_id: "energy_kcal", - label: "Energie (kCal)", + label: "Fat", value: "", unit: null, quantification: "<", @@ -78,26 +75,28 @@ const rows = nutritions.map(nutrition => { export default function NutritionTable() { return ( - - +
- nutrition.table.value + nutrition.table.value isPresent {rows.map((row) => ( - {row.name} + scope="row" + sx={{border: '5px solid red', width: 10}} + > + {row.label} - {row.calories} + {row.property} ))} diff --git a/yarn.lock b/yarn.lock index e6e26c990..c9d4ee738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1034,6 +1034,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.4.4": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.18.6", "@babel/template@^7.3.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31" @@ -1616,6 +1623,25 @@ resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A== +"@material-ui/system@^4.12.2": + version "4.12.2" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b" + integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.3" + csstype "^2.5.2" + prop-types "^15.7.2" + +"@material-ui/utils@^4.11.3": + version "4.11.3" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942" + integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg== + dependencies: + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@mui/base@5.0.0-alpha.88": version "5.0.0-alpha.88" resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.88.tgz#0930d1849c74ba62a28ab2d8533de88764173ba4" @@ -3634,6 +3660,11 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" +csstype@^2.5.2: + version "2.6.20" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda" + integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA== + csstype@^3.0.2, csstype@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" @@ -7496,7 +7527,7 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.1, react-is@^17.0.2: +"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== From 9412b2c224a9921fc4da81c70871eb0755a95397 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Sun, 31 Jul 2022 14:03:42 +0300 Subject: [PATCH 08/29] fix: add controlled input --- src/i18n/en.json | 3 +- src/pages/nutrition/additionalNutritions.jsx | 50 ++++++ src/pages/nutrition/index.jsx | 29 +-- src/pages/nutrition/picture.jsx | 5 +- src/pages/nutrition/table.jsx | 177 ++++++++++--------- 5 files changed, 169 insertions(+), 95 deletions(-) create mode 100644 src/pages/nutrition/additionalNutritions.jsx diff --git a/src/i18n/en.json b/src/i18n/en.json index 3e6091faf..9bcce6a5d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -56,7 +56,8 @@ "insights": "Insights", "nutritions": "Nutrition facts", "settings": "Settings", - "eco-score": "Eco-score" + "eco-score": "Eco-score", + "nutrition": "nutrition" }, "insights": { "insights": "Insights", diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx new file mode 100644 index 000000000..148e1565c --- /dev/null +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -0,0 +1,50 @@ +import * as React from "react"; +import TextField from "@mui/material/TextField"; +import Autocomplete from "@mui/material/Autocomplete"; + +const options = [ + "Option 1", + "Option 2", + "Option 3", + "Option 4", + "Option 5", + "Option 6", + "Option 7", + "Option 8" +]; + +export default function ControllableStates() { + const [data, setData] = React.useState([]); + const [inputValue, setInputValue] = React.useState(""); + + return ( +
+
    + {data.map((obj) => ( +
  1. {obj.label}
    2. + ))} +
+
+ { + if (newValue !== "" && data.every((obj) => obj.label !== newValue)) { + // if it's a new one + setData((previouseData) => [...previouseData, { label: newValue }]); + } + // Reset the input content on selection + setInputValue(""); + }} + inputValue={inputValue} + onInputChange={(event, newInputValue) => { + setInputValue(newInputValue); + }} + options={options} + sx={{ width: 300 }} + renderInput={(params) => ( + + )} + /> +
+ ); +} diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 5b532b6f6..526995eef 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -1,14 +1,23 @@ import * as React from "react"; -import NutritionTable from './table' -import ImageTable from './picture' -import { Box } from "@mui/material" -import { flexbox } from '@material-ui/system' +import NutritionTable from "./table"; +import ImageTable from "./picture"; +import { Box } from "@mui/material"; +import { flexbox } from "@material-ui/system"; -export default function Nutrition(){ - return( - - - +export default function Nutrition() { + return ( + + + - ) + ); } \ No newline at end of file diff --git a/src/pages/nutrition/picture.jsx b/src/pages/nutrition/picture.jsx index 7b4168768..7b27f1ae7 100644 --- a/src/pages/nutrition/picture.jsx +++ b/src/pages/nutrition/picture.jsx @@ -9,9 +9,8 @@ export default function ImageTable() { { - return ( - createData( , , - )) -}) + const [nutriments, setNutriments] = React.useState([ + { + off_nutriment_id: "energy_kj", + label: "Energie (kJ)", + value: "", + unit: "null", + quantification: "=", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Protein", + value: "", + unit: "null", + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Shugar", + value: "", + unit: "null", + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Fat", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null + } + ]) + + function onchangeHandler(e) { + const {value, name} = e.target + console.log('value:', value, 'name:', name) + setNutriments(prevState => prevState.map( + nutr => { + return name === nutr.label? {...nutr, value} : nutr + } + )) + } + const rows = nutriments.map(nutrition => { + return ( + createData( , , + )); + }); -export default function NutritionTable() { return ( - -
- - - nutrition.table.value - isPresent - - - - {rows.map((row) => ( - - - {row.label} - - {row.property} + + +
+ + + nutrition.table.value + isPresent - ))} - -
- + + + {rows.map((row) => ( + + + {row.label} + + {row.property} + + ))} + + + + + ); } From d36a11906f954618821c403946f94d1bc79713eb Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Sun, 31 Jul 2022 20:23:50 +0300 Subject: [PATCH 09/29] fix: add controlled input --- src/pages/nutrition/additionalNutritions.jsx | 7 +------ src/pages/nutrition/table.jsx | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index 148e1565c..4bff1acce 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -19,12 +19,7 @@ export default function ControllableStates() { return (
-
    - {data.map((obj) => ( -
  1. {obj.label}
    2. - ))} -
-
+ { diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index f3964756c..61c0a7797 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -56,7 +56,6 @@ export default function NutritionTable() { function onchangeHandler(e) { const {value, name} = e.target - console.log('value:', value, 'name:', name) setNutriments(prevState => prevState.map( nutr => { return name === nutr.label? {...nutr, value} : nutr @@ -71,6 +70,7 @@ export default function NutritionTable() { alignItems: "center", flexDirection: "row" }}> Date: Mon, 1 Aug 2022 13:42:15 +0300 Subject: [PATCH 10/29] feature: change the code of additional nutr --- src/pages/nutrition/additionalNutritions.jsx | 180 ++++++++++++++----- src/pages/nutrition/table.jsx | 42 ++++- 2 files changed, 179 insertions(+), 43 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index 4bff1acce..cb30df2ef 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -1,45 +1,143 @@ -import * as React from "react"; -import TextField from "@mui/material/TextField"; -import Autocomplete from "@mui/material/Autocomplete"; - -const options = [ - "Option 1", - "Option 2", - "Option 3", - "Option 4", - "Option 5", - "Option 6", - "Option 7", - "Option 8" -]; - -export default function ControllableStates() { - const [data, setData] = React.useState([]); - const [inputValue, setInputValue] = React.useState(""); +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; +export default function AdditionalNutriments() { return ( -
- - { - if (newValue !== "" && data.every((obj) => obj.label !== newValue)) { - // if it's a new one - setData((previouseData) => [...previouseData, { label: newValue }]); - } - // Reset the input content on selection - setInputValue(""); - }} - inputValue={inputValue} - onInputChange={(event, newInputValue) => { - setInputValue(newInputValue); - }} - options={options} - sx={{ width: 300 }} - renderInput={(params) => ( - - )} - /> -
+ } + /> ); } + +// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top +const top100Films = [ + { label: 'The Shawshank Redemption', year: 1994 }, + { label: 'The Godfather', year: 1972 }, + { label: 'The Godfather: Part II', year: 1974 }, + { label: 'The Dark Knight', year: 2008 }, + { label: '12 Angry Men', year: 1957 }, + { label: "Schindler's List", year: 1993 }, + { label: 'Pulp Fiction', year: 1994 }, + { + label: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, + { label: 'The Good, the Bad and the Ugly', year: 1966 }, + { label: 'Fight Club', year: 1999 }, + { + label: 'The Lord of the Rings: The Fellowship of the Ring', + year: 2001, + }, + { + label: 'Star Wars: Episode V - The Empire Strikes Back', + year: 1980, + }, + { label: 'Forrest Gump', year: 1994 }, + { label: 'Inception', year: 2010 }, + { + label: 'The Lord of the Rings: The Two Towers', + year: 2002, + }, + { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, + { label: 'Goodfellas', year: 1990 }, + { label: 'The Matrix', year: 1999 }, + { label: 'Seven Samurai', year: 1954 }, + { + label: 'Star Wars: Episode IV - A New Hope', + year: 1977, + }, + { label: 'City of God', year: 2002 }, + { label: 'Se7en', year: 1995 }, + { label: 'The Silence of the Lambs', year: 1991 }, + { label: "It's a Wonderful Life", year: 1946 }, + { label: 'Life Is Beautiful', year: 1997 }, + { label: 'The Usual Suspects', year: 1995 }, + { label: 'Léon: The Professional', year: 1994 }, + { label: 'Spirited Away', year: 2001 }, + { label: 'Saving Private Ryan', year: 1998 }, + { label: 'Once Upon a Time in the West', year: 1968 }, + { label: 'American History X', year: 1998 }, + { label: 'Interstellar', year: 2014 }, + { label: 'Casablanca', year: 1942 }, + { label: 'City Lights', year: 1931 }, + { label: 'Psycho', year: 1960 }, + { label: 'The Green Mile', year: 1999 }, + { label: 'The Intouchables', year: 2011 }, + { label: 'Modern Times', year: 1936 }, + { label: 'Raiders of the Lost Ark', year: 1981 }, + { label: 'Rear Window', year: 1954 }, + { label: 'The Pianist', year: 2002 }, + { label: 'The Departed', year: 2006 }, + { label: 'Terminator 2: Judgment Day', year: 1991 }, + { label: 'Back to the Future', year: 1985 }, + { label: 'Whiplash', year: 2014 }, + { label: 'Gladiator', year: 2000 }, + { label: 'Memento', year: 2000 }, + { label: 'The Prestige', year: 2006 }, + { label: 'The Lion King', year: 1994 }, + { label: 'Apocalypse Now', year: 1979 }, + { label: 'Alien', year: 1979 }, + { label: 'Sunset Boulevard', year: 1950 }, + { + label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', + year: 1964, + }, + { label: 'The Great Dictator', year: 1940 }, + { label: 'Cinema Paradiso', year: 1988 }, + { label: 'The Lives of Others', year: 2006 }, + { label: 'Grave of the Fireflies', year: 1988 }, + { label: 'Paths of Glory', year: 1957 }, + { label: 'Django Unchained', year: 2012 }, + { label: 'The Shining', year: 1980 }, + { label: 'WALL·E', year: 2008 }, + { label: 'American Beauty', year: 1999 }, + { label: 'The Dark Knight Rises', year: 2012 }, + { label: 'Princess Mononoke', year: 1997 }, + { label: 'Aliens', year: 1986 }, + { label: 'Oldboy', year: 2003 }, + { label: 'Once Upon a Time in America', year: 1984 }, + { label: 'Witness for the Prosecution', year: 1957 }, + { label: 'Das Boot', year: 1981 }, + { label: 'Citizen Kane', year: 1941 }, + { label: 'North by Northwest', year: 1959 }, + { label: 'Vertigo', year: 1958 }, + { + label: 'Star Wars: Episode VI - Return of the Jedi', + year: 1983, + }, + { label: 'Reservoir Dogs', year: 1992 }, + { label: 'Braveheart', year: 1995 }, + { label: 'M', year: 1931 }, + { label: 'Requiem for a Dream', year: 2000 }, + { label: 'Amélie', year: 2001 }, + { label: 'A Clockwork Orange', year: 1971 }, + { label: 'Like Stars on Earth', year: 2007 }, + { label: 'Taxi Driver', year: 1976 }, + { label: 'Lawrence of Arabia', year: 1962 }, + { label: 'Double Indemnity', year: 1944 }, + { + label: 'Eternal Sunshine of the Spotless Mind', + year: 2004, + }, + { label: 'Amadeus', year: 1984 }, + { label: 'To Kill a Mockingbird', year: 1962 }, + { label: 'Toy Story 3', year: 2010 }, + { label: 'Logan', year: 2017 }, + { label: 'Full Metal Jacket', year: 1987 }, + { label: 'Dangal', year: 2016 }, + { label: 'The Sting', year: 1973 }, + { label: '2001: A Space Odyssey', year: 1968 }, + { label: "Singin' in the Rain", year: 1952 }, + { label: 'Toy Story', year: 1995 }, + { label: 'Bicycle Thieves', year: 1948 }, + { label: 'The Kid', year: 1921 }, + { label: 'Inglourious Basterds', year: 2009 }, + { label: 'Snatch', year: 2000 }, + { label: '3 Idiots', year: 2009 }, + { label: 'Monty Python and the Holy Grail', year: 1975 }, +]; diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index 61c0a7797..d454099d2 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -9,7 +9,7 @@ import TextField from "@mui/material/TextField"; import SelectAutoWidth from "./selectComp"; import { Box } from "@mui/material"; import Checkbox from "@mui/material/Checkbox"; -import ControllableStates from "./additionalNutritions"; +import AdditionalNutriments from "./additionalNutritions"; function createData( label, property, unit @@ -54,6 +54,41 @@ export default function NutritionTable() { } ]) + const [additionalNutriments, setAdditionalNutriments] = React.useState([ + { + off_nutriment_id: "energy_kj", + label: "Energie (kJ)", + value: "", + unit: "null", + quantification: "=", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Protein", + value: "", + unit: "null", + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Shugar", + value: "", + unit: "null", + quantification: "<", + robotoffPrediction: null + }, + { + off_nutriment_id: "energy_kcal", + label: "Fat", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null + } + ]) + function onchangeHandler(e) { const {value, name} = e.target setNutriments(prevState => prevState.map( @@ -115,7 +150,10 @@ export default function NutritionTable() { - + ); } From fe21b025743043dd512ab33a4ba7ccaa6077dbc0 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Mon, 1 Aug 2022 14:32:56 +0300 Subject: [PATCH 11/29] feature: implement adding nutriments to the table --- src/pages/nutrition/additionalNutritions.jsx | 141 ++----------------- src/pages/nutrition/table.jsx | 1 + 2 files changed, 13 insertions(+), 129 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index cb30df2ef..397691ffd 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -2,142 +2,25 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -export default function AdditionalNutriments() { +export default function AdditionalNutriments({options, setNutriments, setAdditionalNutriments}) { return ( } + onChange={(event) => { + const nutrIndex = event.target.dataset.optionIndex + if (nutrIndex) { + console.log(Number(nutrIndex)) + setNutriments(prev => [...prev, options[nutrIndex]]) + setAdditionalNutriments(prev => prev.filter(item => options.indexOf(item) !== nutrIndex)) + } + + }} + renderInput={(params) => } /> ); } // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { label: 'The Shawshank Redemption', year: 1994 }, - { label: 'The Godfather', year: 1972 }, - { label: 'The Godfather: Part II', year: 1974 }, - { label: 'The Dark Knight', year: 2008 }, - { label: '12 Angry Men', year: 1957 }, - { label: "Schindler's List", year: 1993 }, - { label: 'Pulp Fiction', year: 1994 }, - { - label: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { label: 'The Good, the Bad and the Ugly', year: 1966 }, - { label: 'Fight Club', year: 1999 }, - { - label: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - label: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { label: 'Forrest Gump', year: 1994 }, - { label: 'Inception', year: 2010 }, - { - label: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { label: 'Goodfellas', year: 1990 }, - { label: 'The Matrix', year: 1999 }, - { label: 'Seven Samurai', year: 1954 }, - { - label: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { label: 'City of God', year: 2002 }, - { label: 'Se7en', year: 1995 }, - { label: 'The Silence of the Lambs', year: 1991 }, - { label: "It's a Wonderful Life", year: 1946 }, - { label: 'Life Is Beautiful', year: 1997 }, - { label: 'The Usual Suspects', year: 1995 }, - { label: 'Léon: The Professional', year: 1994 }, - { label: 'Spirited Away', year: 2001 }, - { label: 'Saving Private Ryan', year: 1998 }, - { label: 'Once Upon a Time in the West', year: 1968 }, - { label: 'American History X', year: 1998 }, - { label: 'Interstellar', year: 2014 }, - { label: 'Casablanca', year: 1942 }, - { label: 'City Lights', year: 1931 }, - { label: 'Psycho', year: 1960 }, - { label: 'The Green Mile', year: 1999 }, - { label: 'The Intouchables', year: 2011 }, - { label: 'Modern Times', year: 1936 }, - { label: 'Raiders of the Lost Ark', year: 1981 }, - { label: 'Rear Window', year: 1954 }, - { label: 'The Pianist', year: 2002 }, - { label: 'The Departed', year: 2006 }, - { label: 'Terminator 2: Judgment Day', year: 1991 }, - { label: 'Back to the Future', year: 1985 }, - { label: 'Whiplash', year: 2014 }, - { label: 'Gladiator', year: 2000 }, - { label: 'Memento', year: 2000 }, - { label: 'The Prestige', year: 2006 }, - { label: 'The Lion King', year: 1994 }, - { label: 'Apocalypse Now', year: 1979 }, - { label: 'Alien', year: 1979 }, - { label: 'Sunset Boulevard', year: 1950 }, - { - label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { label: 'The Great Dictator', year: 1940 }, - { label: 'Cinema Paradiso', year: 1988 }, - { label: 'The Lives of Others', year: 2006 }, - { label: 'Grave of the Fireflies', year: 1988 }, - { label: 'Paths of Glory', year: 1957 }, - { label: 'Django Unchained', year: 2012 }, - { label: 'The Shining', year: 1980 }, - { label: 'WALL·E', year: 2008 }, - { label: 'American Beauty', year: 1999 }, - { label: 'The Dark Knight Rises', year: 2012 }, - { label: 'Princess Mononoke', year: 1997 }, - { label: 'Aliens', year: 1986 }, - { label: 'Oldboy', year: 2003 }, - { label: 'Once Upon a Time in America', year: 1984 }, - { label: 'Witness for the Prosecution', year: 1957 }, - { label: 'Das Boot', year: 1981 }, - { label: 'Citizen Kane', year: 1941 }, - { label: 'North by Northwest', year: 1959 }, - { label: 'Vertigo', year: 1958 }, - { - label: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { label: 'Reservoir Dogs', year: 1992 }, - { label: 'Braveheart', year: 1995 }, - { label: 'M', year: 1931 }, - { label: 'Requiem for a Dream', year: 2000 }, - { label: 'Amélie', year: 2001 }, - { label: 'A Clockwork Orange', year: 1971 }, - { label: 'Like Stars on Earth', year: 2007 }, - { label: 'Taxi Driver', year: 1976 }, - { label: 'Lawrence of Arabia', year: 1962 }, - { label: 'Double Indemnity', year: 1944 }, - { - label: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { label: 'Amadeus', year: 1984 }, - { label: 'To Kill a Mockingbird', year: 1962 }, - { label: 'Toy Story 3', year: 2010 }, - { label: 'Logan', year: 2017 }, - { label: 'Full Metal Jacket', year: 1987 }, - { label: 'Dangal', year: 2016 }, - { label: 'The Sting', year: 1973 }, - { label: '2001: A Space Odyssey', year: 1968 }, - { label: "Singin' in the Rain", year: 1952 }, - { label: 'Toy Story', year: 1995 }, - { label: 'Bicycle Thieves', year: 1948 }, - { label: 'The Kid', year: 1921 }, - { label: 'Inglourious Basterds', year: 2009 }, - { label: 'Snatch', year: 2000 }, - { label: '3 Idiots', year: 2009 }, - { label: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index d454099d2..ac110a429 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -153,6 +153,7 @@ export default function NutritionTable() { ); From a674dfd272d7eed76e99f3ef10f7c3461e65d3a3 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Mon, 1 Aug 2022 14:43:09 +0300 Subject: [PATCH 12/29] feature: implement adding nutriments to the table and removing them from addition nutriments --- src/pages/nutrition/additionalNutritions.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index 397691ffd..79300770b 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -12,9 +12,9 @@ export default function AdditionalNutriments({options, setNutriments, setAdditio onChange={(event) => { const nutrIndex = event.target.dataset.optionIndex if (nutrIndex) { - console.log(Number(nutrIndex)) setNutriments(prev => [...prev, options[nutrIndex]]) - setAdditionalNutriments(prev => prev.filter(item => options.indexOf(item) !== nutrIndex)) + setAdditionalNutriments(prev => prev.filter(elem => elem !== options[nutrIndex])) + console.log(options) } }} From 630f0ef99e7cf8b1ac878605c7d8289a0c1e5d78 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Mon, 1 Aug 2022 17:43:24 +0300 Subject: [PATCH 13/29] feature: add delete icons and implement deleting nutriments from the table --- src/pages/nutrition/additionalNutritions.jsx | 18 ++++++---- src/pages/nutrition/index.jsx | 2 +- src/pages/nutrition/picture.jsx | 5 ++- src/pages/nutrition/table.jsx | 33 +++++++------------ .../{selectComp.jsx => unitSelect.jsx} | 2 -- 5 files changed, 26 insertions(+), 34 deletions(-) rename src/pages/nutrition/{selectComp.jsx => unitSelect.jsx} (91%) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index 79300770b..289e72cdb 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -3,24 +3,30 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function AdditionalNutriments({options, setNutriments, setAdditionalNutriments}) { + + const [inputValue, setInputValue] = React.useState('') + return ( { const nutrIndex = event.target.dataset.optionIndex if (nutrIndex) { setNutriments(prev => [...prev, options[nutrIndex]]) setAdditionalNutriments(prev => prev.filter(elem => elem !== options[nutrIndex])) - console.log(options) + setInputValue("") } - }} - renderInput={(params) => } + inputValue={inputValue} + onInputChange={(event, newInputValue) => { + setInputValue(newInputValue); + }} + renderInput={(params) => } /> ); } -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 526995eef..17396bb29 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -12,7 +12,7 @@ export default function Nutrition() { sx={{ width: 1, height: 1, - alignItems: "center", + alignItems: { xs: 'center', md:"flex-start" }, justifyContent: "center", padding: 4 }}> diff --git a/src/pages/nutrition/picture.jsx b/src/pages/nutrition/picture.jsx index 7b27f1ae7..4dc3baba4 100644 --- a/src/pages/nutrition/picture.jsx +++ b/src/pages/nutrition/picture.jsx @@ -2,15 +2,14 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Zoom from "react-medium-image-zoom"; import Button from "@mui/material/Button"; -import DeleteIcon from "@mui/icons-material/Delete"; export default function ImageTable() { + return ( prev.filter(elem => elem !== nutrition)) + setAdditionalNutriments(prev => [...prev, nutrition]) + } + const rows = nutriments.map(nutrition => { return ( createData( , , - )); + deleteItem(nutrition)}/>)); }); return ( - + @@ -127,8 +117,7 @@ export default function NutritionTable() { fontSize: "large", fontWeight: "bold" }}>nutrition.table.value - isPresent + @@ -144,7 +133,7 @@ export default function NutritionTable() { {row.label} {row.property} + sx={{ width: "1rem"}}>{row.property} ))} diff --git a/src/pages/nutrition/selectComp.jsx b/src/pages/nutrition/unitSelect.jsx similarity index 91% rename from src/pages/nutrition/selectComp.jsx rename to src/pages/nutrition/unitSelect.jsx index 645085609..452b22830 100644 --- a/src/pages/nutrition/selectComp.jsx +++ b/src/pages/nutrition/unitSelect.jsx @@ -27,8 +27,6 @@ export default function SelectAutoWidth({}) { Noneg - mg - kg From 257bd351ebd693988350bc4ddd441324124e451e Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Mon, 1 Aug 2022 18:06:31 +0300 Subject: [PATCH 14/29] feature: add Title and the description of the product (hardcoded) --- src/pages/nutrition/index.jsx | 4 ++-- src/pages/nutrition/{picture.jsx => productCard.jsx} | 12 +++++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) rename src/pages/nutrition/{picture.jsx => productCard.jsx} (74%) diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 17396bb29..1322f5250 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -1,6 +1,6 @@ import * as React from "react"; import NutritionTable from "./table"; -import ImageTable from "./picture"; +import ProductNutriments from "./productCard"; import { Box } from "@mui/material"; import { flexbox } from "@material-ui/system"; @@ -16,7 +16,7 @@ export default function Nutrition() { justifyContent: "center", padding: 4 }}> - + ); diff --git a/src/pages/nutrition/picture.jsx b/src/pages/nutrition/productCard.jsx similarity index 74% rename from src/pages/nutrition/picture.jsx rename to src/pages/nutrition/productCard.jsx index 4dc3baba4..45a5d64d6 100644 --- a/src/pages/nutrition/picture.jsx +++ b/src/pages/nutrition/productCard.jsx @@ -2,15 +2,25 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Zoom from "react-medium-image-zoom"; import Button from "@mui/material/Button"; +import Typography from '@mui/material/Typography' -export default function ImageTable() { +export default function ProductNutriments() { return ( + + + PRODUCT.BRAND + + + PRODUCT DESCRIPTION IF NEEDED + Date: Tue, 2 Aug 2022 19:04:44 +0300 Subject: [PATCH 15/29] feature: get data from API. Display picture --- src/components/ResponsiveAppBar.jsx | 2 +- src/pages/nutrition/index.jsx | 1 + src/pages/nutrition/productCard.jsx | 32 ++++++++++++++++++++++++++++- src/pages/nutrition/table.jsx | 2 +- 4 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx index c951f96b3..ac92b04aa 100644 --- a/src/components/ResponsiveAppBar.jsx +++ b/src/components/ResponsiveAppBar.jsx @@ -27,7 +27,7 @@ const pages = [ { url: "eco-score", translationKey: "menu.eco-score" }, { translationKey: "menu.manage" }, { url: "insights", translationKey: "menu.insights" }, - { url: "nutrition", translationKey: "menu.nutrition" }, + /*{ url: "nutrition", translationKey: "menu.nutrition" },*/ ]; const ResponsiveAppBar = () => { diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 1322f5250..c7a393622 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -5,6 +5,7 @@ import { Box } from "@mui/material"; import { flexbox } from "@material-ui/system"; export default function Nutrition() { + return ( { + console.log('fetched') + const productListUrl = getNutritionToFillUrl({page}) + fetch(productListUrl) + .then(res => res.json()) + .then(data => setProducts(data.products)) + }, [page]) + + const pictureURL = products[index] ? products[index].image_nutrition_url : "https://static.openfoodfacts.org/images/image-placeholder.png" + + function clickHandler(){ + setIndex(prev => { + if (prev < 22 ) return prev += 1; + else { + setPage(prevPage => prevPage += 1); + return 0 + } + }) + + } + return (
+ + + nutrition.table.value + + + + + {rows} + +
+ + - ); + ) } diff --git a/src/pages/nutrition/tableRow.jsx b/src/pages/nutrition/tableRow.jsx new file mode 100644 index 000000000..44c154d75 --- /dev/null +++ b/src/pages/nutrition/tableRow.jsx @@ -0,0 +1,54 @@ +import * as React from "react"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import TextField from "@mui/material/TextField"; +import SelectAutoWidth from "./unitSelect"; +import { Box } from "@mui/material"; +import Checkbox from "@mui/material/Checkbox"; +import AdditionalNutriments from "./additionalNutritions"; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + +export default function TableRowComp({nutriment, onchangeHandler, deleteItem}) { + /*{nutrition, onchangeHandler, deleteItem}*/ + + function createData( + label, property, deleteIcon + ) { + return { label, property, deleteIcon }; + } + + const row = createData( , , + deleteItem(nutriment)}/>) + +return ( + + + {row.label} + + {row.property} + +) +} \ No newline at end of file From b1795153b09d4445d18243745ff429c20dd86b16 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Tue, 9 Aug 2022 18:06:03 +0300 Subject: [PATCH 20/29] feature: now delete icon toggle display property --- src/pages/nutrition/additionalNutritions.jsx | 3 +- src/pages/nutrition/index.jsx | 14 ++-- src/pages/nutrition/nutritionFields.js | 23 +++---- src/pages/nutrition/table.jsx | 67 +------------------- 4 files changed, 19 insertions(+), 88 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index c83f0687d..fa25b9413 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -export default function AdditionalNutriments({options, setNutriments, setAdditionalNutriments}) { +export default function AdditionalNutriments({options, setNutriments}) { const [inputValue, setInputValue] = React.useState('') @@ -17,7 +17,6 @@ export default function AdditionalNutriments({options, setNutriments, setAdditio const nutrIndex = event.target.dataset.optionIndex if (nutrIndex) { setNutriments(prev => [...prev, options[nutrIndex]]) - setAdditionalNutriments(prev => prev.filter(elem => elem !== options[nutrIndex])) setInputValue("") } }} diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 4055b22ae..7bff5cb2b 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -4,14 +4,12 @@ import ProductNutriments from "./productCard"; import { Box } from "@mui/material"; import { flexbox } from "@material-ui/system"; -import {basicNutriments, additionalNutrs} from "./nutritionFields"; +import {basicNutriments} from "./nutritionFields"; export default function Nutrition() { const [nutriments, setNutriments] = React.useState(basicNutriments) - const [additionalNutriments, setAdditionalNutriments] = React.useState(additionalNutrs) - function onchangeHandler(e) { const {value, name} = e.target setNutriments(prevState => prevState.map( @@ -21,9 +19,8 @@ export default function Nutrition() { )) } - function deleteItem(nutrition) { - setNutriments(prev => prev.filter(elem => elem !== nutrition)) - setAdditionalNutriments(prev => [...prev, nutrition]) + function deleteItem(nutr) { + setNutriments(prev => prev.map(nutriment => nutriment === nutr ? ({...nutriment, display: false}) : nutriment )) } return ( @@ -39,10 +36,9 @@ export default function Nutrition() { }}> nutr.display)} setNutriments={setNutriments} - additionalNutriments={additionalNutriments} - setAdditionalNutriments={setAdditionalNutriments} + additionalNutriments={nutriments.filter(nutr => !nutr.display)} onchangeHandler={onchangeHandler} deleteItem={deleteItem} /> diff --git a/src/pages/nutrition/nutritionFields.js b/src/pages/nutrition/nutritionFields.js index 3902923c4..e3718736a 100644 --- a/src/pages/nutrition/nutritionFields.js +++ b/src/pages/nutrition/nutritionFields.js @@ -14,7 +14,8 @@ const basicNutriments = [ value: "", unit: "null", quantification: "<", - robotoffPrediction: null + robotoffPrediction: null, + display: true }, { off_nutriment_id: "energy_kcal", @@ -22,7 +23,8 @@ const basicNutriments = [ value: "", unit: "null", quantification: "<", - robotoffPrediction: null + robotoffPrediction: null, + display: true }, { off_nutriment_id: "energy_kcal", @@ -30,18 +32,17 @@ const basicNutriments = [ value: "", unit: null, quantification: "<", - robotoffPrediction: null - } -] - -const additionalNutrs = [ + robotoffPrediction: null, + display: true + }, { off_nutriment_id: "energy_kj", label: "Energie (kJ)", value: "", unit: "null", quantification: "=", - robotoffPrediction: null + robotoffPrediction: null, + display: false }, { off_nutriment_id: "energy_kcal", @@ -49,8 +50,8 @@ const additionalNutrs = [ value: "", unit: "null", quantification: "<", - robotoffPrediction: null + robotoffPrediction: null, + display: false } ] - -export {basicNutriments, additionalNutrs} \ No newline at end of file +export {basicNutriments} \ No newline at end of file diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index b596cad8a..f894886d0 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -5,12 +5,8 @@ import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; -import TextField from "@mui/material/TextField"; -import SelectAutoWidth from "./unitSelect"; import { Box } from "@mui/material"; -import Checkbox from "@mui/material/Checkbox"; import AdditionalNutriments from "./additionalNutritions"; -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import TableRowComp from "./tableRow"; @@ -20,70 +16,10 @@ function createData( return { label, property, unit }; } -export default function NutritionTable({nutriments, setNutriments, additionalNutriments, deleteItem, setAdditionalNutriments, onchangeHandler}) { +export default function NutritionTable({nutriments, setNutriments, additionalNutriments, deleteItem, onchangeHandler}) { const rows = nutriments.map(nutriment => ) - /*const rows = nutriments.map(nutrition => { - return ( - createData( , , - deleteItem(nutrition)}/>)); - }); - - return ( - - - - - - nutrition.table.value - - - - - {rows.map(row => ( - - - {row.label} - - {row.property} - - ))} - -
- - - - - )*/ - return ( @@ -106,7 +42,6 @@ export default function NutritionTable({nutriments, setNutriments, additionalNut ) From cb6e2c2a8313b9ed210cc436fffa4ebf1148bf0d Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Tue, 9 Aug 2022 18:21:53 +0300 Subject: [PATCH 21/29] feature: now delete icon toggle display property --- src/pages/nutrition/additionalNutritions.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index fa25b9413..f52a415c3 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -13,12 +13,10 @@ export default function AdditionalNutriments({options, setNutriments}) { id="nutrition-input" options={options} sx={{ width: 245, marginLeft: 2, marginTop: 2 }} - onChange={(event) => { - const nutrIndex = event.target.dataset.optionIndex - if (nutrIndex) { - setNutriments(prev => [...prev, options[nutrIndex]]) + onChange={event => { + const nutrName = event.target.innerText + setNutriments(prev => prev.map( nutr => nutr.label === nutrName ? ({...nutr, display: true}) : nutr)) setInputValue("") - } }} inputValue={inputValue} onInputChange={(event, newInputValue) => { From 79d4643b98e99fe96272259bef59b2265396c69a Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Tue, 9 Aug 2022 22:44:12 +0200 Subject: [PATCH 22/29] remove unused import --- src/pages/nutrition/index.jsx | 54 +++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index 7bff5cb2b..caf652c5f 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -2,46 +2,50 @@ import * as React from "react"; import NutritionTable from "./table"; import ProductNutriments from "./productCard"; import { Box } from "@mui/material"; -import { flexbox } from "@material-ui/system"; -import {basicNutriments} from "./nutritionFields"; +import { basicNutriments } from "./nutritionFields"; export default function Nutrition() { - - const [nutriments, setNutriments] = React.useState(basicNutriments) + const [nutriments, setNutriments] = React.useState(basicNutriments); function onchangeHandler(e) { - const {value, name} = e.target - setNutriments(prevState => prevState.map( - nutr => { - return name === nutr.label? {...nutr, value} : nutr - } - )) + const { value, name } = e.target; + setNutriments((prevState) => + prevState.map((nutr) => { + return name === nutr.label ? { ...nutr, value } : nutr; + }) + ); } function deleteItem(nutr) { - setNutriments(prev => prev.map(nutriment => nutriment === nutr ? ({...nutriment, display: false}) : nutriment )) + setNutriments((prev) => + prev.map((nutriment) => + nutriment === nutr ? { ...nutriment, display: false } : nutriment + ) + ); } return ( - - + + nutr.display)} + nutriments={nutriments.filter((nutr) => nutr.display)} setNutriments={setNutriments} - additionalNutriments={nutriments.filter(nutr => !nutr.display)} + additionalNutriments={nutriments.filter((nutr) => !nutr.display)} onchangeHandler={onchangeHandler} deleteItem={deleteItem} /> ); -} \ No newline at end of file +} From 9b873e3c268ed9d0729cd79cc0caed0eb9a567a3 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Thu, 11 Aug 2022 13:15:08 +0300 Subject: [PATCH 23/29] feature: now i18n works into the table --- src/pages/nutrition/additionalNutritions.jsx | 29 +- src/pages/nutrition/nutritionFields.js | 339 +++++++++++++++++-- src/pages/nutrition/table.jsx | 53 +-- src/pages/nutrition/tableRow.jsx | 89 ++--- 4 files changed, 411 insertions(+), 99 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index f52a415c3..1a34f38f0 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -1,10 +1,11 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; +import * as React from "react"; +import TextField from "@mui/material/TextField"; +import Autocomplete from "@mui/material/Autocomplete"; +import { useTranslation } from "react-i18next"; -export default function AdditionalNutriments({options, setNutriments}) { - - const [inputValue, setInputValue] = React.useState('') +export default function AdditionalNutriments({ options, setNutriments }) { + const [inputValue, setInputValue] = React.useState(""); + const { t } = useTranslation(); return ( { - const nutrName = event.target.innerText - setNutriments(prev => prev.map( nutr => nutr.label === nutrName ? ({...nutr, display: true}) : nutr)) - setInputValue("") + onChange={(event) => { + const nutrIndex = +event.target.dataset.optionIndex; + const nutrName = options[nutrIndex].id; + setNutriments((prev) => + prev.map((nutr) => + nutr.label === nutrName ? { ...nutr, display: true } : nutr + ) + ); + setInputValue(""); }} inputValue={inputValue} onInputChange={(event, newInputValue) => { - setInputValue(newInputValue) + setInputValue(newInputValue); }} renderInput={(params) => } /> ); } - diff --git a/src/pages/nutrition/nutritionFields.js b/src/pages/nutrition/nutritionFields.js index e3718736a..4f1535daa 100644 --- a/src/pages/nutrition/nutritionFields.js +++ b/src/pages/nutrition/nutritionFields.js @@ -1,57 +1,342 @@ const basicNutriments = [ { - off_nutriment_id: "energy_kj", - label: "Energie (kJ)", + off_nutriment_id: "energy-kj", + label: "nutriment_energy-kj", value: "", - unit: "null", + unit: null, quantification: "=", robotoffPrediction: null, - display: true + display: true, }, { - off_nutriment_id: "energy_kcal", - label: "Protein", + off_nutriment_id: "energy-kcal", + label: "nutriment_energy-kcal", value: "", - unit: "null", + unit: null, quantification: "<", robotoffPrediction: null, - display: true + display: true, }, { - off_nutriment_id: "energy_kcal", - label: "Shugar", + off_nutriment_id: "nutriment_fat", + label: "nutriment_fat", value: "", - unit: "null", + unit: "g", quantification: "<", robotoffPrediction: null, - display: true + display: true, }, { - off_nutriment_id: "energy_kcal", - label: "Fat", + off_nutriment_id: "saturated-fat", + label: "nutriment_saturated-fat", value: "", - unit: null, + unit: "g", quantification: "<", robotoffPrediction: null, - display: true + display: true, }, { - off_nutriment_id: "energy_kj", - label: "Energie (kJ)", + off_nutriment_id: "carbohydrates", + label: "nutriment_carbohydrates", value: "", - unit: "null", + unit: "g", quantification: "=", robotoffPrediction: null, - display: false + display: false, + }, + { + off_nutriment_id: "sugars", + label: "nutriment_sugars", + value: "", + unit: "g", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + { + off_nutriment_id: "proteins", + label: "nutriment_proteins", + value: "", + unit: "g", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + { + off_nutriment_id: "fiber", + label: "nutriment_fiber", + value: "", + unit: "g", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "salt", + label: "nutriment_salt", + value: "", + unit: "g", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "sodium", + label: "nutriment_sodium", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "zinc", + label: "nutriment_zinc", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "vitamin-c", + label: "nutriment_vitamin-c", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "vitamin-d", + label: "nutriment_vitamin-d", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "vitamin-k", + label: "nutriment_vitamin-k", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "vitamin-b6", + label: "nutriment_vitamin-b6", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "vitamin-a", + label: "nutriment_vitamin-a", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "selenium", + label: "nutriment_selenium", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, }, { - off_nutriment_id: "energy_kcal", - label: "Protein", + off_nutriment_id: "bicarbonate", + label: "nutriment_bicarbonate", value: "", - unit: "null", + unit: "mg", quantification: "<", robotoffPrediction: null, - display: false - } -] -export {basicNutriments} \ No newline at end of file + display: false, + }, + + { + off_nutriment_id: "magnesium", + label: "nutriment_magnesium", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "pantothenic-acid", + label: "nutriment_pantothenic-acid", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + { + off_nutriment_id: "fluoride", + label: "nutriment_fluoride", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "iodine", + label: "nutriment_iodine", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "silica", + label: "nutriment_silica", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "alcohol", + label: "nutriment_alcohol", + value: "", + unit: "% vol", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "potassium", + label: "nutriment_potassium", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "manganese", + label: "nutriment_manganese", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "phosphorus", + label: "nutriment_phosphorus", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + { + off_nutriment_id: "biotin", + label: "nutriment_biotin", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + { + off_nutriment_id: "ph", + label: "nutriment_ph", + value: "", + unit: null, + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "molybdenum", + label: "nutriment_molybdenum", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "caffeine", + label: "nutriment_caffeine", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "chromium", + label: "nutriment_chromium", + value: "", + unit: "µg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "iron", + label: "nutriment_iron", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "copper", + label: "nutriment_copper", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, + + { + off_nutriment_id: "cholesterol", + label: "nutriment_cholesterol", + value: "", + unit: "mg", + quantification: "<", + robotoffPrediction: null, + display: false, + }, +]; + +export { basicNutriments }; diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index f894886d0..b33ba6e66 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -7,18 +7,35 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { Box } from "@mui/material"; import AdditionalNutriments from "./additionalNutritions"; +import { useTranslation } from "react-i18next"; import TableRowComp from "./tableRow"; -function createData( - label, property, unit -) { +function createData(label, property, unit) { return { label, property, unit }; } -export default function NutritionTable({nutriments, setNutriments, additionalNutriments, deleteItem, onchangeHandler}) { +export default function NutritionTable({ + nutriments, + setNutriments, + additionalNutriments, + deleteItem, + onchangeHandler, +}) { + const { t } = useTranslation(); - const rows = nutriments.map(nutriment => ) + const rows = nutriments.map((nutriment) => ( + + )); + const options = additionalNutriments.map((item) => ({ + label: t(`nutrition.nutriments.${item.label}`), + id: item.label, + })); return ( @@ -26,23 +43,21 @@ export default function NutritionTable({nutriments, setNutriments, additionalNut - nutrition.table.value - + + nutrition.table.value + - - {rows} - + {rows}
- + - ) + ); } diff --git a/src/pages/nutrition/tableRow.jsx b/src/pages/nutrition/tableRow.jsx index 44c154d75..53a90f25b 100644 --- a/src/pages/nutrition/tableRow.jsx +++ b/src/pages/nutrition/tableRow.jsx @@ -1,54 +1,61 @@ import * as React from "react"; -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; -import TableContainer from "@mui/material/TableContainer"; -import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import TextField from "@mui/material/TextField"; import SelectAutoWidth from "./unitSelect"; import { Box } from "@mui/material"; -import Checkbox from "@mui/material/Checkbox"; -import AdditionalNutriments from "./additionalNutritions"; -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; -export default function TableRowComp({nutriment, onchangeHandler, deleteItem}) { - /*{nutrition, onchangeHandler, deleteItem}*/ +import { useTranslation } from "react-i18next"; - function createData( - label, property, deleteIcon - ) { +export default function TableRowComp({ + nutriment, + onchangeHandler, + deleteItem, +}) { + /*{nutrition, onchangeHandler, deleteItem}*/ + const { t } = useTranslation(); + function createData(label, property, deleteIcon) { return { label, property, deleteIcon }; } - const row = createData( , , - deleteItem(nutriment)}/>) + const row = createData( + + {" "} + , + , + deleteItem(nutriment)} + /> + ); -return ( - - - {row.label} - - {row.property} - -) -} \ No newline at end of file + + {row.label} + + + {row.property} + + + ); +} From 0add0f0fab2525b81ee4073f05d9ec53aa6761a7 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Thu, 11 Aug 2022 13:55:19 +0300 Subject: [PATCH 24/29] feature: add keys to common json and en json --- src/i18n/common.json | 27 ++++++++++++++++++++++++++- src/i18n/en.json | 27 ++++++++++++++++++++++++++- src/pages/nutrition/unitSelect.jsx | 18 ++++++++++-------- 3 files changed, 62 insertions(+), 10 deletions(-) diff --git a/src/i18n/common.json b/src/i18n/common.json index 8ebc5c131..15732522e 100644 --- a/src/i18n/common.json +++ b/src/i18n/common.json @@ -190,7 +190,32 @@ "nutriment_proteins": "Proteins", "nutriment_fiber": "Fibers", "nutriment_salt": "Salt", - "nutriment_sodium": "Sodium" + "nutriment_sodium": "Sodium", + "nutriment_zinc" : "Zinc", + "nutriment_vitamin-c" : "Vitamin-c", + "nutriment_vitamin-d" : "Vitamin-d", + "nutriment_vitamin-k" : "Vitamin-k", + "nutriment_vitamin-b6" : "Vitamin-b6", + "nutriment_vitamin-a" : "Vitamin-a", + "nutriment_selenium" : "Selenium", + "nutriment_bicarbonate" : "Bicarbonate", + "nutriment_magnesium" : "Magnesium", + "nutriment_pantothenic-acid" : "Pantothenic-acid", + "nutriment_fluoride" : "Fluoride", + "nutriment_iodine" : "Iodine", + "nutriment_silica" : "Silica", + "nutriment_alcohol" : "Alcohol", + "nutriment_potassium" : "Potassium", + "nutriment_manganese" : "Manganese", + "nutriment_phosphorus" : "Phosphorus", + "nutriment_biotin" : "Biotin", + "nutriment_ph" : "Ph", + "nutriment_molybdenum" : "Molybdenum", + "nutriment_caffeine" : "Caffeine", + "nutriment_chromium" : "Chromium", + "nutriment_iron" : "Iron", + "nutriment_copper" : "Copper", + "nutriment_cholesterol": "Cholesterol" }, "history": { "title": "Session History", diff --git a/src/i18n/en.json b/src/i18n/en.json index b862dbc57..d9c8d79f7 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -190,7 +190,32 @@ "nutriment_proteins": "Protein content", "nutriment_fiber": "Fibers", "nutriment_salt": "Salt", - "nutriment_sodium": "Sodium" + "nutriment_sodium": "Sodium", + "nutriment_zinc" : "Zinc", + "nutriment_vitamin-c" : "Vitamin-c", + "nutriment_vitamin-d" : "Vitamin-d", + "nutriment_vitamin-k" : "Vitamin-k", + "nutriment_vitamin-b6" : "Vitamin-b6", + "nutriment_vitamin-a" : "Vitamin-a", + "nutriment_selenium" : "Selenium", + "nutriment_bicarbonate" : "Bicarbonate", + "nutriment_magnesium" : "Magnesium", + "nutriment_pantothenic-acid" : "Pantothenic-acid", + "nutriment_fluoride" : "Fluoride", + "nutriment_iodine" : "Iodine", + "nutriment_silica" : "Silica", + "nutriment_alcohol" : "Alcohol", + "nutriment_potassium" : "Potassium", + "nutriment_manganese" : "Manganese", + "nutriment_phosphorus" : "Phosphorus", + "nutriment_biotin" : "Biotin", + "nutriment_ph" : "Ph", + "nutriment_molybdenum" : "Molybdenum", + "nutriment_caffeine" : "Caffeine", + "nutriment_chromium" : "Chromium", + "nutriment_iron" : "Iron", + "nutriment_copper" : "Copper", + "nutriment_cholesterol": "Cholesterol" }, "history": { "title": "Session History", diff --git a/src/pages/nutrition/unitSelect.jsx b/src/pages/nutrition/unitSelect.jsx index 452b22830..205b62e10 100644 --- a/src/pages/nutrition/unitSelect.jsx +++ b/src/pages/nutrition/unitSelect.jsx @@ -1,11 +1,11 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import * as React from "react"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; export default function SelectAutoWidth({}) { - const [age, setAge] = React.useState(''); + const [age, setAge] = React.useState(""); const handleChange = (event: SelectChangeEvent) => { setAge(event.target.value); @@ -13,7 +13,7 @@ export default function SelectAutoWidth({}) { return (
- + Unit
); -} \ No newline at end of file +} From 79764f16ec85ca16b0a0b36c4e1872b6a3911294 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Fri, 12 Aug 2022 15:23:20 +0300 Subject: [PATCH 25/29] feature: display correct properties in select elements --- src/pages/nutrition/productCard.jsx | 95 +++++++++++++++++------------ src/pages/nutrition/table.jsx | 26 ++++++-- src/pages/nutrition/tableRow.jsx | 54 ++++++++++------ src/pages/nutrition/unitSelect.jsx | 34 +++++------ 4 files changed, 131 insertions(+), 78 deletions(-) diff --git a/src/pages/nutrition/productCard.jsx b/src/pages/nutrition/productCard.jsx index b16de23af..47871f86e 100644 --- a/src/pages/nutrition/productCard.jsx +++ b/src/pages/nutrition/productCard.jsx @@ -1,50 +1,56 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; +import * as React from "react"; +import Box from "@mui/material/Box"; import Zoom from "react-medium-image-zoom"; import Button from "@mui/material/Button"; -import Typography from '@mui/material/Typography' -import offService from '../../off' +import Typography from "@mui/material/Typography"; +import offService from "../../off"; +import { basicNutriments } from "./nutritionFields"; -import {basicNutriments} from "./nutritionFields"; +export default function ProductNutriments({ setNutriments }) { + const [page, setPage] = React.useState(1); + const [index, setIndex] = React.useState(0); + const [products, setProducts] = React.useState([]); -export default function ProductNutriments({setNutriments}) { - - const [ page, setPage ] = React.useState(1) - const [ index, setIndex ] = React.useState(0) - const [ products, setProducts ] = React.useState([]) - - const product = products[index] - const productName = product ? product.product_name ? product.product_name: 'Brand Unknown' : 'Loading...' + const product = products[index]; + const productName = product + ? product.product_name + ? product.product_name + : "Brand Unknown" + : "Loading..."; React.useEffect(() => { - const productListUrl = offService.getNutritionToFillUrl({page}) + const productListUrl = offService.getNutritionToFillUrl({ page }); - fetch(productListUrl) - .then(res => res.json()) - .then(data => {setProducts(data.products)}) - }, [page]) + fetch(productListUrl) + .then((res) => res.json()) + .then((data) => { + setProducts(data.products); + }); + }, [page]); - const pictureURL = products[index] ? products[index].image_nutrition_url : "https://static.openfoodfacts.org/images/image-placeholder.png" + const pictureURL = products[index] + ? products[index].image_nutrition_url + : "https://static.openfoodfacts.org/images/image-placeholder.png"; - function clickHandler(){ - setIndex(prev => prev < 22 ? ++prev : 0) - setNutriments(basicNutriments) + function clickHandler() { + setIndex((prev) => (prev < 22 ? ++prev : 0)); + setNutriments(basicNutriments); } - - return ( - - - - { productName } + + + {productName} {/**/} {/* PRODUCT DESCRIPTION IF NEEDED*/} @@ -58,13 +64,18 @@ export default function ProductNutriments({setNutriments}) { style={{ maxWidth: "100%", maxHeight: "100%" }} /> - + @@ -73,10 +84,16 @@ export default function ProductNutriments({setNutriments}) { color="success" variant="contained" size="large" - sx={{ display: "flex", flexDirection: "column", flexGrow: 1, width: '47%' }} + sx={{ + display: "flex", + flexDirection: "column", + flexGrow: 1, + width: "47%", + }} > VALIDATE - ) -} \ No newline at end of file + + ); +} diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index b33ba6e66..68989c6ec 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -36,10 +36,17 @@ export default function NutritionTable({ label: t(`nutrition.nutriments.${item.label}`), id: item.label, })); - + //, width: "340px" return ( - + @@ -48,16 +55,27 @@ export default function NutritionTable({ maxWidth: "8em", fontSize: "large", fontWeight: "bold", + display: "flex", + flexDirection: "row", }} > - nutrition.table.value + + {t("nutrition.table.value")} + + {rows}
 - ); } diff --git a/src/pages/nutrition/tableRow.jsx b/src/pages/nutrition/tableRow.jsx index 53a90f25b..3360ad2da 100644 --- a/src/pages/nutrition/tableRow.jsx +++ b/src/pages/nutrition/tableRow.jsx @@ -2,42 +2,60 @@ import * as React from "react"; import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import TextField from "@mui/material/TextField"; -import SelectAutoWidth from "./unitSelect"; +import SelectUnit from "./unitSelect"; +import { Typography } from "@mui/material"; import { Box } from "@mui/material"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; import { useTranslation } from "react-i18next"; +function createData(label, property, deleteIcon) { + return { label, property, deleteIcon }; +} + export default function TableRowComp({ nutriment, onchangeHandler, deleteItem, }) { - /*{nutrition, onchangeHandler, deleteItem}*/ const { t } = useTranslation(); - function createData(label, property, deleteIcon) { - return { label, property, deleteIcon }; - } const row = createData( - {" "} - , + {t(`nutrition.nutriments.${nutriment.label}`)} + + + + + + , ); + // console.log(nutriment); + return ( { setAge(event.target.value); @@ -14,22 +14,20 @@ export default function SelectAutoWidth({}) { return (
- Unit - + {options && ( + + )}
); From ae0bffedce96a4914c4a679eda17ea7bd73fb132 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Fri, 12 Aug 2022 17:31:40 +0300 Subject: [PATCH 26/29] feature: on change is working --- src/pages/nutrition/index.jsx | 5 +++-- src/pages/nutrition/table.jsx | 1 + src/pages/nutrition/tableRow.jsx | 13 ++++++++----- src/pages/nutrition/unitSelect.jsx | 13 ++++--------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index caf652c5f..fe56119ae 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -9,10 +9,11 @@ export default function Nutrition() { const [nutriments, setNutriments] = React.useState(basicNutriments); function onchangeHandler(e) { - const { value, name } = e.target; + const { value, name, id } = e.target; + console.log(name); setNutriments((prevState) => prevState.map((nutr) => { - return name === nutr.label ? { ...nutr, value } : nutr; + return id === nutr.label ? { ...nutr, [name]: value } : nutr; }) ); } diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index 68989c6ec..caaedfd41 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -57,6 +57,7 @@ export default function NutritionTable({ fontWeight: "bold", display: "flex", flexDirection: "row", + width: "100%", }} > - + , ); - // console.log(nutriment); - return ( { - setAge(event.target.value); - }; - +export default function SelectUnit({ options, value, onchangeHandler }) { return (
@@ -19,8 +13,9 @@ export default function SelectUnit({ options, value }) { labelId="demo-simple-select-autowidth-label" id="demo-simple-select-autowidth" value={options} - //onChange={handleChange} - autoWidth + onChange={onchangeHandler} + name={value} + // autoWidth label="" > {options} From 30be0611040b436f3620037768335085c7bb73c1 Mon Sep 17 00:00:00 2001 From: Shmigolk <75388692+Shmigolk@users.noreply.github.com> Date: Sat, 13 Aug 2022 14:52:09 +0300 Subject: [PATCH 27/29] UI: fixed width problem --- src/pages/nutrition/table.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index caaedfd41..fc10abf6c 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -11,10 +11,6 @@ import { useTranslation } from "react-i18next"; import TableRowComp from "./tableRow"; -function createData(label, property, unit) { - return { label, property, unit }; -} - export default function NutritionTable({ nutriments, setNutriments, @@ -52,7 +48,6 @@ export default function NutritionTable({ Date: Sat, 13 Aug 2022 15:52:44 +0300 Subject: [PATCH 28/29] UI: change the order of elements of productCard and add temporary borders feature: log into the console array of nutriments that we want to send to the server --- src/pages/nutrition/index.jsx | 7 ++++- src/pages/nutrition/productCard.jsx | 47 +++++++++++++++++------------ src/pages/nutrition/table.jsx | 2 +- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/pages/nutrition/index.jsx b/src/pages/nutrition/index.jsx index fe56119ae..6c2bbbe8c 100644 --- a/src/pages/nutrition/index.jsx +++ b/src/pages/nutrition/index.jsx @@ -37,9 +37,14 @@ export default function Nutrition() { alignItems: { xs: "center", md: "flex-start" }, justifyContent: "center", padding: 4, + border: "5px solid green", + minHeight: "89.4vh", }} > - + nutr.display)} setNutriments={setNutriments} diff --git a/src/pages/nutrition/productCard.jsx b/src/pages/nutrition/productCard.jsx index 47871f86e..1fa1f68b5 100644 --- a/src/pages/nutrition/productCard.jsx +++ b/src/pages/nutrition/productCard.jsx @@ -7,7 +7,7 @@ import offService from "../../off"; import { basicNutriments } from "./nutritionFields"; -export default function ProductNutriments({ setNutriments }) { +export default function ProductNutriments({ setNutriments, nutriments }) { const [page, setPage] = React.useState(1); const [index, setIndex] = React.useState(0); const [products, setProducts] = React.useState([]); @@ -35,6 +35,7 @@ export default function ProductNutriments({ setNutriments }) { function clickHandler() { setIndex((prev) => (prev < 22 ? ++prev : 0)); + console.log(nutriments.filter((nutr) => nutr.display && nutr.value)); setNutriments(basicNutriments); } @@ -43,38 +44,26 @@ export default function ProductNutriments({ setNutriments }) { flexGrow={1} flexShrink={1} display={"flex"} + gap={"1em"} flexDirection={"column"} sx={{ maxWidth: "380px", - minHeight: "70vh", + border: "5px solid red", + alignItems: "center", }} > - - {productName} - - {/**/} - {/* PRODUCT DESCRIPTION IF NEEDED*/} - {/**/} - - - + + {productName} + + {/**/} + {/* PRODUCT DESCRIPTION IF NEEDED*/} + {/**/} + + + ); } diff --git a/src/pages/nutrition/table.jsx b/src/pages/nutrition/table.jsx index fc10abf6c..ee9cad111 100644 --- a/src/pages/nutrition/table.jsx +++ b/src/pages/nutrition/table.jsx @@ -32,7 +32,7 @@ export default function NutritionTable({ label: t(`nutrition.nutriments.${item.label}`), id: item.label, })); - //, width: "340px" + return ( Date: Sat, 13 Aug 2022 16:26:26 +0300 Subject: [PATCH 29/29] bug: fix onChange handler bug --- src/pages/nutrition/additionalNutritions.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/nutrition/additionalNutritions.jsx b/src/pages/nutrition/additionalNutritions.jsx index 1a34f38f0..33af96a34 100644 --- a/src/pages/nutrition/additionalNutritions.jsx +++ b/src/pages/nutrition/additionalNutritions.jsx @@ -15,8 +15,9 @@ export default function AdditionalNutriments({ options, setNutriments }) { options={options} sx={{ width: 245, marginLeft: 2, marginTop: 2 }} onChange={(event) => { - const nutrIndex = +event.target.dataset.optionIndex; - const nutrName = options[nutrIndex].id; + const nutr = event.target.innerText; + const nutrName = options.find((item) => item.label === nutr).id; + setNutriments((prev) => prev.map((nutr) => nutr.label === nutrName ? { ...nutr, display: true } : nutr