fix: Display Nutriscore again

This commit is contained in:
Philip 2023-10-19 23:00:56 +02:00
parent 41510dbe06
commit 6418fb1ce3
7 changed files with 82 additions and 65 deletions

2
.gitignore vendored
View file

@ -19,6 +19,8 @@
.DS_Store .DS_Store
*.pem *.pem
.icloud .icloud
*.icloud
*/*.icloud
# debug # debug
npm-debug.log* npm-debug.log*

40
package-lock.json generated
View file

@ -15,7 +15,7 @@
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"eslint-config-sznm": "^2.0.2", "eslint-config-sznm": "^2.0.2",
"jest-worker": "^29.6.2", "jest-worker": "^29.6.2",
"million": "^2.5.13", "million": "^2.6.4",
"next": "13.4.16", "next": "13.4.16",
"next-intl": "^2.19.1", "next-intl": "^2.19.1",
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",
@ -3450,18 +3450,6 @@
"@babel/core": "^7.0.0-0" "@babel/core": "^7.0.0-0"
} }
}, },
"node_modules/babel-plugin-transform-react-createelement-to-jsx": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-createelement-to-jsx/-/babel-plugin-transform-react-createelement-to-jsx-1.1.0.tgz",
"integrity": "sha512-43xMHy06ARCmF8UKte/9OJ+gp5bh51UoUe5SYTSBh3zFtcjxzCTzwKyGv8uOWGQNYrrPAl6iyynxARSXDCXoNA==",
"dependencies": {
"@babel/plugin-syntax-jsx": "^7.0.0",
"@babel/polyfill": "^7.0.0"
},
"engines": {
"node": ">=0.12"
}
},
"node_modules/balanced-match": { "node_modules/balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -6452,23 +6440,41 @@
} }
}, },
"node_modules/million": { "node_modules/million": {
"version": "2.5.13", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/million/-/million-2.5.13.tgz", "resolved": "https://registry.npmjs.org/million/-/million-2.6.4.tgz",
"integrity": "sha512-6PiH6D9zPOi7Ba2NMtxZJHL7LBoIy11iM7sNeqNpqiHq44Rzu+yYyvIjYIrOL5QVdxBif+FrUTpeWWPIAsYuXg==", "integrity": "sha512-voUkdd/jHWrG+7NS+mX49Pat+POKdgGW78V7pYMSrTaOjUitR6ySEcAci8hn17Rsx1IMI3+5w41dkADM1J1ZEg==",
"dependencies": { "dependencies": {
"@babel/core": "^7.21.0", "@babel/core": "^7.21.0",
"@babel/generator": "^7.22.7", "@babel/generator": "^7.22.7",
"@babel/plugin-syntax-jsx": "^7.21.4", "@babel/plugin-syntax-jsx": "^7.21.4",
"@babel/plugin-syntax-typescript": "^7.21.4", "@babel/plugin-syntax-typescript": "^7.21.4",
"@babel/types": "^7.21.3", "@babel/types": "^7.21.3",
"babel-plugin-transform-react-createelement-to-jsx": "^1.1.0",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"rollup": "^3.28.0",
"unplugin": "^1.3.1" "unplugin": "^1.3.1"
}, },
"bin": {
"million": "packages/cli/dist/index.js"
},
"funding": { "funding": {
"url": "https://github.com/sponsors/aidenybai" "url": "https://github.com/sponsors/aidenybai"
} }
}, },
"node_modules/million/node_modules/rollup": {
"version": "3.29.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=14.18.0",
"npm": ">=8.0.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/mime-db": { "node_modules/mime-db": {
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",

View file

@ -18,7 +18,7 @@
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"eslint-config-sznm": "^2.0.2", "eslint-config-sznm": "^2.0.2",
"jest-worker": "^29.6.2", "jest-worker": "^29.6.2",
"million": "^2.5.13", "million": "^2.6.4",
"next": "13.4.16", "next": "13.4.16",
"next-intl": "^2.19.1", "next-intl": "^2.19.1",
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",

View file

@ -1,4 +1,3 @@
import VeganCheck from "@frontendnetwork/vegancheck"; import VeganCheck from "@frontendnetwork/vegancheck";
import Image from "next/image"; import Image from "next/image";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@ -6,34 +5,24 @@ import React, { useState, useEffect, useRef } from "react";
import ModalWrapper from "@/components/elements/modalwrapper"; import ModalWrapper from "@/components/elements/modalwrapper";
import ShareButton from "@/components/elements/share"; import ShareButton from "@/components/elements/share";
import { ErrorResponse } from "@/models/ErrorRepsonse";
import { ProductResult } from "@/models/ProductResults";
import { Sources } from "@/models/Sources";
import Scan from "./Scanner/scanner"; import Scan from "./Scanner/scanner";
interface ProductResult { const ProductSearch = () => {
productname?: string;
vegan?: string;
vegetarian?: string;
animaltestfree?: string;
palmoil?: string;
nutriscore?: string;
grade?: string;
}
interface Sources {
api?: string;
baseuri?: string;
}
interface ErrorResponse {
response: {
status: number;
};
}
const ProductSearch: React.FC = () => {
const t = useTranslations("Check"); const t = useTranslations("Check");
const formRef = useRef<HTMLFormElement>(null); const formRef = useRef<HTMLFormElement>(null);
const [result, setResult] = useState<ProductResult>({}); const [result, setResult] = useState<ProductResult>({
productname: "",
vegan: "n/a",
vegetarian: "n/a",
animaltestfree: "n/a",
palmoil: "n/a",
nutriscore: "",
grade: "",
});
const [sources, setSources] = useState<Sources>({}); const [sources, setSources] = useState<Sources>({});
const [barcode, setBarcode] = useState<string>(""); const [barcode, setBarcode] = useState<string>("");
const [showFound, setShowFound] = useState<boolean>(false); const [showFound, setShowFound] = useState<boolean>(false);
@ -61,12 +50,17 @@ const ProductSearch: React.FC = () => {
setShowFound(false); setShowFound(false);
setShowNotFound(false); setShowNotFound(false);
setShowInvalid(false); setShowInvalid(false);
setLoading(true); setLoading(true);
try { try {
const data = await VeganCheck.getProductByBarcode(barcode, process.env.NEXT_PUBLIC_STAGING === "true" ? true : false); const data = await VeganCheck.getProductByBarcode(
barcode,
process.env.NEXT_PUBLIC_STAGING === "true"
);
setLoading(false); setLoading(false);
if (data.status === 200) { if (data.status === 200) {
console.log(data.product);
setResult(data.product); setResult(data.product);
setSources(data.sources); setSources(data.sources);
setShowFound(true); setShowFound(true);
@ -80,16 +74,15 @@ const ProductSearch: React.FC = () => {
} }
} catch (error) { } catch (error) {
if ( if (
typeof error === 'object' && typeof error === "object" &&
error !== null && error !== null &&
'response' in error && "response" in error &&
'status' in (error as ErrorResponse).response "status" in (error as ErrorResponse).response
) { ) {
if ((error as ErrorResponse).response.status == 400) { if ((error as ErrorResponse).response.status == 400) {
setShowInvalid(true); setShowInvalid(true);
setShowTimeout(false); setShowTimeout(false);
} } else if ((error as ErrorResponse).response.status == 404) {
else if ((error as ErrorResponse).response.status == 404) {
setShowNotFound(true); setShowNotFound(true);
setShowTimeout(false); setShowTimeout(false);
} }
@ -108,30 +101,30 @@ const ProductSearch: React.FC = () => {
const productname = result.productname === "n/a" ? "?" : result.productname; const productname = result.productname === "n/a" ? "?" : result.productname;
let vegan = "unknown icon-help"; let vegan = "unknown icon-help";
if (result.vegan === "true") { if (result.vegan === true) {
vegan = "vegan icon-ok"; vegan = "vegan icon-ok";
} else if (result.vegan === "false") { } else if (result.vegan === false) {
vegan = "non-vegan icon-cancel"; vegan = "non-vegan icon-cancel";
} }
let vegetarian = "unknown icon-help"; let vegetarian = "unknown icon-help";
if (result.vegetarian === "true") { if (result.vegetarian === true) {
vegetarian = "vegan icon-ok"; vegetarian = "vegan icon-ok";
} else if (result.vegetarian === "false") { } else if (result.vegetarian === false) {
vegetarian = "non-vegan icon-cancel"; vegetarian = "non-vegan icon-cancel";
} }
let animaltestfree = "unknown icon-help"; let animaltestfree = "unknown icon-help";
if (result.animaltestfree === "true") { if (result.animaltestfree === true) {
animaltestfree = "vegan icon-ok"; animaltestfree = "vegan icon-ok";
} else if (result.animaltestfree === "false") { } else if (result.animaltestfree === false) {
animaltestfree = "non-vegan icon-cancel"; animaltestfree = "non-vegan icon-cancel";
} }
let palmoil = "unknown icon-help"; let palmoil = "unknown icon-help";
if (result.palmoil === "true") { if (result.palmoil === true) {
palmoil = "non-vegan icon-cancel"; palmoil = "non-vegan icon-cancel";
} else if (result.palmoil === "false") { } else if (result.palmoil === false) {
palmoil = "vegan icon-ok"; palmoil = "vegan icon-ok";
} }
@ -142,15 +135,15 @@ const ProductSearch: React.FC = () => {
if (nutriscore === "n/a") { if (nutriscore === "n/a") {
nutriscore = "unknown icon-help"; nutriscore = "unknown icon-help";
} else if (nutriscore === "a") { } else if (nutriscore === "a" || nutriscore === "A") {
nutriscore = "nutri_a icon-a"; nutriscore = "nutri_a icon-a";
} else if (nutriscore === "b") { } else if (nutriscore === "b" || nutriscore === "B") {
nutriscore = "nutri_b icon-b"; nutriscore = "nutri_b icon-b";
} else if (nutriscore === "c") { } else if (nutriscore === "c" || nutriscore === "C") {
nutriscore = "nutri_c icon-c"; nutriscore = "nutri_c icon-c";
} else if (nutriscore === "d") { } else if (nutriscore === "d" || nutriscore === "D") {
nutriscore = "nutri_d icon-d"; nutriscore = "nutri_d icon-d";
} else if (nutriscore === "e") { } else if (nutriscore === "e" || nutriscore === "E") {
nutriscore = "nutri_e icon-e"; nutriscore = "nutri_e icon-e";
} }
@ -486,9 +479,7 @@ const ProductSearch: React.FC = () => {
</div> </div>
</div> </div>
<div className="Grid"> <div className="Grid">
<div className="Grid-cell description skeleton"> <div className="Grid-cell description skeleton">Grade</div>
Grade
</div>
<div className="Grid-cell icons skeleton"> <div className="Grid-cell icons skeleton">
<span className="icon-help"></span> <span className="icon-help"></span>
</div> </div>

View file

@ -0,0 +1,5 @@
export type ErrorResponse = {
response: {
status: number;
};
};

View file

@ -0,0 +1,9 @@
export type ProductResult = {
productname: string;
vegan: boolean | "n/a" | undefined;
vegetarian: boolean | "n/a" | undefined;
animaltestfree: boolean | "n/a" | undefined;
palmoil: boolean | "n/a" | undefined;
nutriscore?: string;
grade?: string;
};

4
src/models/Sources.ts Normal file
View file

@ -0,0 +1,4 @@
export type Sources = {
api?: string;
baseuri?: string;
};