[WIP] allow to complete nutrition facts

src/NutritionValues/PortionSetter.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const UNITS = ['g', 'kg', 'mg', 'L', 'cl', 'ml'];
+
+const PortionSetter = ({ values, setValues }) => {
+  const setValue = name => event => {
+    setValues({ ...values, [name]: event.target.value });
+  };
+  const toogleValue = name => () => {
+    setValues({ ...values, [name]: !values[name] });
+  };
+
+  return (
+    <div className="portion">
+      <p>
+        Data per:
+        <input
+          type="number"
+          value={values.quantity}
+          onChange={setValue('quantity')}
+          className="portion_value"
+        />
+        <select
+          value={values.unit}
+          onChange={setValue('unit')}
+          className="portion_unit"
+        >
+          <option disabled selected value>
+            unit
+          </option>
+          {UNITS.map(unit => (
+            <option value={unit}>{unit}</option>
+          ))}
+        </select>
+      </p>
+      <p>
+        It is a portion{' '}
+        <input
+          type="checkbox"
+          value={values.isPortion}
+          onChange={toogleValue('isPortion')}
+        />
+      </p>
+    </div>
+  );
+};
+
+export default PortionSetter;

src/NutritionValues/checkEntries.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import axios from 'axios';
+
+const edit = ({
+  nutritionVisible,
+  nutritionValues,
+  nutrimentsKey,
+  portionValues,
+  code,
+}) => {
+  const toDelete = Object.keys(nutritionVisible)
+    .filter(nutrimentName => !nutritionVisible[nutrimentName])
+    .map(nutrimentName => nutrimentsKey[nutrimentName]);
+
+  const toFill = Object.keys(nutritionVisible)
+    .filter(
+      nutrimentName =>
+        nutritionVisible[nutrimentName] &&
+        nutritionValues[nutrimentName].quantity &&
+        nutritionValues[nutrimentName].quantity.length > 0,
+    )
+    .map(nutrimentName => ({
+      name: nutrimentsKey[nutrimentName],
+      value: `${nutritionValues[nutrimentName].quantity}${nutritionValues[
+        nutrimentName
+      ].unit || ''}`,
+      quantity: nutritionValues[nutrimentName].quantity,
+      unit: nutritionValues[nutrimentName].unit,
+    }));
+
+  if (toFill.length > 0) {
+    axios.post(
+      `${process.env.REACT_APP_OFF_BASE}/cgi/product_jqm2.pl?`,
+      new URLSearchParams(
+        `${toFill.map(data => `${data.name}=${data.quantity}&`)}${toFill.map(
+          data => (data.unit ? `${data.name}_unit=${data.unit}&` : ''),
+        )}code=${code}`,
+      ),
+    ); // The status of the response is not displayed so no need to wait the response
+  }
+
+  if (portionValues.quantity) {
+    const quantity = `${portionValues.quantity}${
+      portionValues.unit ? portionValues.unit : ''
+    }`;
+    if (portionValues.isPortion) {
+      axios.post(
+        `${process.env.REACT_APP_OFF_BASE}/cgi/product_jqm2.pl?`,
+        new URLSearchParams(
+          `nutrition_data_per=serving&serving_size=${quantity}&code=${code}`,
+        ),
+      );
+    } else {
+      axios.post(
+        `${process.env.REACT_APP_OFF_BASE}/cgi/product_jqm2.pl?`,
+        new URLSearchParams(`nutrition_data_per=${quantity}&code=${code}`),
+      );
+    }
+  }
+};
+
+export default ({
+  nutriments,
+  nutritionValues,
+  nutritionVisible,
+  portionValues,
+  close,
+  nextProduct,
+  code,
+}) => {
+  const toDelete = Object.keys(nutriments).filter(
+    nutrimentName => !nutritionVisible[nutrimentName],
+  );
+  const empty = Object.keys(nutriments).filter(
+    nutrimentName =>
+      (nutritionVisible[nutrimentName] &&
+        !nutritionValues[nutrimentName].quantity) ||
+      (nutritionVisible[nutrimentName] &&
+        !nutritionValues[nutrimentName].quantity.length > 0),
+  );
+  const filled = Object.keys(nutriments).filter(
+    nutrimentName =>
+      nutritionVisible[nutrimentName] &&
+      nutritionValues[nutrimentName].quantity &&
+      nutritionValues[nutrimentName].quantity.length > 0,
+  );
+  return (
+    <>
+      <p>
+        This is nutritions values for{' '}
+        {portionValues.quantity
+          ? `${portionValues.quantity} ${
+              portionValues.unit ? portionValues.unit : 'unknown unit'
+            }`
+          : "we don't know how much "}
+        of the product
+      </p>
+      {portionValues.isPortion ? <p>It is a portion of the product</p> : null}
+      <ol className="recap">
+        {toDelete.length > 0 && (
+          <div className="toDelete">
+            <li className="title">Will be deleted</li>
+            {toDelete.map(nutrimentName => (
+              <li>{nutrimentName}</li>
+            ))}
+          </div>
+        )}
+        {empty.length > 0 && (
+          <div className="toIgnore">
+            <li className="title">You skip</li>
+            {empty.map(nutrimentName => (
+              <li>{nutrimentName}</li>
+            ))}
+          </div>
+        )}
+        {filled.length > 0 && (
+          <div className="toSend">
+            <li className="title">You fill</li>
+            {filled.map(nutrimentName => (
+              <li>{`${nutrimentName} : ${
+                nutritionValues[nutrimentName].quantity
+              }${nutritionValues[nutrimentName].unit || ''}`}</li>
+            ))}
+          </div>
+        )}
+      </ol>
+      <button
+        className="validate button"
+        onClick={() => {
+          edit({
+            nutritionVisible,
+            nutritionValues,
+            nutrimentsKey: nutriments,
+            portionValues,
+            code,
+          });
+          close();
+          nextProduct();
+        }}
+      >
+        Validate
+      </button>
+      <button
+        className="button"
+        onClick={() => {
+          close();
+        }}
+      >
+        Need to modify
+      </button>
+    </>
+  );
+};