Adds some additive's risks

src/components/productDisplay/ProductDataDisplay.js

@@ -7,7 +7,7 @@ import ProductDataFilter from './ProductDataFilter';
 import ProductDisplayTitle from './ProductDisplayTitle';
 import NutrientLevels from './NutrientLevels';
 import DietaryData from './DietaryData';
-import Additives from './Additives';
+import Additives from './additives';
 import AddProductInfo from '../addProductInfo';
 import NutriScore from '../nutriScore';
 import NovaGroup from '../novaGroup';

src/components/productDisplay/additives/additives.json

@@ -0,0 +1,107 @@
+{
+  "E330": {
+    "name": "Citric acid",
+    "risk": "Low",
+    "function": "Antioxidant"
+  },
+  "E322": {
+    "name": "Lecithins",
+    "risk": "Low",
+    "function": "Antioxidant"
+  },
+  "E415": {
+    "name": "Xanthan gum",
+    "risk": "Low",
+    "function": "Emulsifier, Thickener"
+  },
+  "E500": {
+    "name": "Sodium carbonates",
+    "risk": "Low",
+    "function": "Stabilizer, Thickener"
+  },
+  "E471": {
+    "name": "Mono- and diglycerides of fatty acids",
+    "risk": "Low",
+    "function": "Emulsifier, Stabilizer"
+  },
+  "E412": {
+    "name": "Guar gum",
+    "risk": "Low",
+    "function": "Emulsifier, Thickener"
+  },
+  "E202": {
+    "name": "Potassium sorbate",
+    "risk": "High",
+    "function": "Preservative"
+  },
+  "E440": {
+    "name": "Pectins",
+    "risk": "Low",
+    "function": "Emulsifier, Thickener"
+  },
+  "E250": {
+    "name": "Sodium nitrite",
+    "risk": "Moderate",
+    "function": "Preservative"
+  },
+  "E407": {
+    "name": "Carrageenan",
+    "risk": "Moderate",
+    "function": "Carrier, Emulsifier, Humectant, Stabilizer, Thickener"
+  },
+  "E450": {
+    "name": "Diphosphates",
+    "risk": "Low",
+    "function": "Emulsifier, Humectant, Sequestrant, Stabilizer, Thickener"
+  },
+  "E300": {
+    "name": "Ascorbic acid",
+    "risk": "Low",
+    "function": "Antioxidant, Sequestrant"
+  },
+  "E410": {
+    "name": "Locust bean gum",
+    "risk": "Low",
+    "function": "Emulsifier, Stabilizer, Thickener"
+  },
+  "E331": {
+    "name": "Sodium citrates",
+    "risk": "Low",
+    "function": "Emulsifier, Sequestrant, Stabilizer"
+  },
+  "E270": {
+    "name": "Lactic acid",
+    "risk": "Low",
+    "function": "?"
+  },
+  "E129": {
+    "name": "Allura red ac",
+    "risk": "Low",
+    "function": "Colour"
+  },
+  "E150": {
+    "name": "Ammonia caramel",
+    "risk": "Moderate",
+    "function": "Colour"
+  },
+  "E621": {
+    "name": "Monosodium glutamate",
+    "risk": "High",
+    "function": "Flavour enhancer"
+  },
+  "E428": {
+    "name": "Gelatine",
+    "risk": "Low",
+    "function": "Ingredient"
+  },
+  "E102": {
+    "name": "Tartrazine",
+    "risk": "High",
+    "function": "Colour"
+  },
+  "E133": {
+    "name": "Brilliant blue FCF",
+    "risk": "Moderate",
+    "function": "Colour"
+  }
+}

src/components/productDisplay/additives/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import ADDITIVES_DATA from "./additives.json";
+
+const Additives = (product) => {
+  const setAdditives = () => {
+    if (localStorage.getItem("ADDITIVES") === null) {
+      localStorage.setItem("ADDITIVES", JSON.stringify(ADDITIVES_DATA));
+    }
+    return JSON.parse(localStorage.getItem("ADDITIVES"));
+  };
+
+  const additives = setAdditives();
+
+  const normalize = (x) => {
+    return x.toUpperCase().substring(0, 4);
+  }
+
+  const getAdditive = (x) => additives[x] ? additives[x] : null;
+
+  const getAdditiveData = (x) => {
+    if (x === null) {
+      return null;
+    }
+    return (
+      <>
+        <div>
+          Name: {x.name}
+        </div>
+        <div>
+          Risk: {x.risk}
+        </div>
+        <div>
+          Function: {x.function}
+        </div>
+      </>
+    )
+  }
+
+  const displayAdditives = () => {
+      if (product.product.additives() === undefined) {
+        return <div>Unknown <span role="img" aria-label="question mark">❓</span></div>
+      }
+      if (product.product.additives().length === 0) {
+        return <div>None</div>
+      }
+      return product.product.additives().map((x) =>
+        <div key={x} className="productDisplay__additive">
+          <div><b>{x}</b></div>
+          <div>{getAdditiveData(getAdditive(normalize(x)))}</div>
+        </div>
+    );
+  }
+
+  return (<section className="productDisplay__section">
+    <h3 className="productDisplay__sectionTitle">Additives</h3>
+    {displayAdditives()}
+  </section>);
+};
+
+export default Additives;