mirror of
https://github.com/frontendnetwork/vegancheck.me
synced 2024-11-10 06:24:13 +00:00
fix: Display Nutriscore again
This commit is contained in:
parent
41510dbe06
commit
6418fb1ce3
7 changed files with 82 additions and 65 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -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
40
package-lock.json
generated
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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);
|
||||||
|
@ -63,10 +52,15 @@ const ProductSearch: React.FC = () => {
|
||||||
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>
|
||||||
|
|
5
src/models/ErrorRepsonse.ts
Normal file
5
src/models/ErrorRepsonse.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export type ErrorResponse = {
|
||||||
|
response: {
|
||||||
|
status: number;
|
||||||
|
};
|
||||||
|
};
|
9
src/models/ProductResults.ts
Normal file
9
src/models/ProductResults.ts
Normal 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
4
src/models/Sources.ts
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
export type Sources = {
|
||||||
|
api?: string;
|
||||||
|
baseuri?: string;
|
||||||
|
};
|
Loading…
Reference in a new issue