feat: Nutrition Game #70

src/App.js

@@ -14,6 +14,7 @@ import {
   NotFoundPage,
   NutriscoreValidator,
   Home,
+  Nutrition,
 } from "./pages";
 import ResponsiveAppBar from "./components/ResponsiveAppBar";
 import DevModeContext from "./contexts/devMode";
@@ -126,6 +127,7 @@ export default function App() {
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="/questions" element={<QuestionsPage />} />
               <Route path="/insights" element={<InsightsPage />} />
+              <Route path="/nutrition" element={<Nutrition />} />
               <Route path="*" element={<NotFoundPage />} />
               <Route path="/nutriscore" element={<NutriscoreValidator />} />
             </Routes>

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",

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",

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"

src/pages/nutrition/additionalNutritions.jsx

@@ -0,0 +1,35 @@
+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("");
+  const { t } = useTranslation();
+
+  return (
+    <Autocomplete
+      value={null}
+      disablePortal
+      id="nutrition-input"
+      options={options}
+      sx={{ width: 245, marginLeft: 2, marginTop: 2 }}
+      onChange={(event) => {
+        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
+          )
+        );
+        setInputValue("");
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      renderInput={(params) => <TextField {...params} label="Add nutriment" />}
+    />
+  );
+}

src/pages/nutrition/index.jsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import NutritionTable from "./table";
+import ProductNutriments from "./productCard";
+import { Box } from "@mui/material";
+
+import { basicNutriments } from "./nutritionFields";
+
+export default function Nutrition() {
+  const [nutriments, setNutriments] = React.useState(basicNutriments);
+
+  function onchangeHandler(e) {
+    const { value, name, id } = e.target;
+    console.log(name);
+    setNutriments((prevState) =>
+      prevState.map((nutr) => {
+        return id === nutr.label ? { ...nutr, [name]: value } : nutr;
+      })
+    );
+  }
+
+  function deleteItem(nutr) {
+    setNutriments((prev) =>
+      prev.map((nutriment) =>
+        nutriment === nutr ? { ...nutriment, display: false } : nutriment
+      )
+    );
+  }
+
+  return (
+    <Box
+      display={"flex"}
+      flexDirection={{ xs: "column", md: "row" }}
+      gap={2}
+      sx={{
+        width: 1,
+        height: 1,
+        alignItems: { xs: "center", md: "flex-start" },
+        justifyContent: "center",
+        padding: 4,
+        border: "5px solid green",
+        minHeight: "89.4vh",
+      }}
+    >
+      <ProductNutriments
+        setNutriments={setNutriments}
+        nutriments={nutriments}
+      />
+      <NutritionTable
+        nutriments={nutriments.filter((nutr) => nutr.display)}
+        setNutriments={setNutriments}
+        additionalNutriments={nutriments.filter((nutr) => !nutr.display)}
+        onchangeHandler={onchangeHandler}
+        deleteItem={deleteItem}
+      />
+    </Box>
+  );
+}