feat(deps): Added VeganCheck library for API calls

Author: philipbrembeck

src/components/check.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import VeganCheck from "@frontendnetwork/vegancheck";
 import Scan from "./Scanner/scanner";
 import Image from "next/image";
 import ModalWrapper from "@/components/elements/modalwrapper";
@@ -20,6 +21,12 @@ interface Sources {
   baseuri?: string;
 }
 
+interface ErrorResponse {
+  response: {
+    status: number;
+  };
+}
+
 const ProductSearch: React.FC = () => {
   const t = useTranslations("Check");
   const formRef = useRef<HTMLFormElement>(null);
@@ -44,44 +51,52 @@ const ProductSearch: React.FC = () => {
   }, []);
 
   /* Submitting */
-  const handleSubmit = (barcode: string, event?: React.FormEvent) => {
+  const handleSubmit = async (barcode: string, event?: React.FormEvent) => {
     event?.preventDefault();
     setShowTimeoutFinal(false);
     setShowTimeout(false);
     setShowFound(false);
     setShowNotFound(false);
     setShowInvalid(false);
-
+  
     setLoading(true);
-    fetch(`https://api.vegancheck.me/v0/product/${barcode}`, {
-      method: "POST",
-    })
-      .then((res) => {
+    try {
+      const data = await VeganCheck.getProductByBarcode(barcode);
+      setLoading(false);
+      if (data.status === 200) {
+        setResult(data.product);
+        setSources(data.sources);
+        setShowFound(true);
         setShowTimeout(false);
-
-        return res.json();
-      })
-      .then((data) => {
-        setLoading(false);
-        if (data.status === 200) {
-          setResult(data.product);
-          setSources(data.sources);
-          setShowFound(true);
+      } else if (data.status === 404) {
+        setShowNotFound(true);
+        setShowTimeout(false);
+      } else {
+        setShowInvalid(true);
+        setShowTimeout(false);
+      }
+    } catch (error) {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        'response' in error &&
+        'status' in (error as ErrorResponse).response
+      ) {
+        if ((error as ErrorResponse).response.status == 400) {
+          setShowInvalid(true);
           setShowTimeout(false);
-        } else if (data.status === 404) {
+        }
+        else if ((error as ErrorResponse).response.status == 404) {
           setShowNotFound(true);
           setShowTimeout(false);
-        } else {
-          setShowInvalid(true);
-          setShowTimeout(false);
         }
-      })
-      .catch((error) => {
+      } else {
         console.error(error);
-        setLoading(false);
         setShowTimeoutFinal(true);
         setShowTimeout(false);
-      });
+      }
+      setLoading(false);
+    }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -469,7 +484,7 @@ const ProductSearch: React.FC = () => {
               </div>
               <div className="Grid">
                 <div className="Grid-cell description skeleton">
-                  {t("grade")}
+                  Grade
                 </div>
                 <div className="Grid-cell icons skeleton">
                   <span className="icon-help"></span>

src/components/ingredientscheck.tsx

@@ -1,45 +1,49 @@
 import React, { useState, FormEvent } from "react";
+import VeganCheck from "@frontendnetwork/vegancheck";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import ModalWrapper from "@/components/elements/modalwrapper";
 
 interface FlaggedItem {
-item: string;
-index: number;
+  item: string;
+  index: number;
 }
 
 const IngredientsCheck: React.FC = () => {
-const t = useTranslations("Ingredients");
-const [flagged, setFlagged] = useState<string[]>([]);
-const [vegan, setVegan] = useState<string | boolean>("");
-const [error, setError] = useState(false);
-const [loading, setLoading] = useState(false);
+  const t = useTranslations("Ingredients");
+  const [flagged, setFlagged] = useState<string[]>([]);
+  const [vegan, setVegan] = useState<string | boolean>("");
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-setVegan("");
-setError(false);
-event.preventDefault();
-const ingredients = event.currentTarget.elements.namedItem("ingredients") as HTMLInputElement;
-const url = `https://api.vegancheck.me/v0/ingredients/${ingredients.value}`;
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    setVegan("");
+    setError(false);
+    event.preventDefault();
+    const ingredients = event.currentTarget.elements.namedItem(
+      "ingredients"
+    ) as HTMLInputElement;
 
-setLoading(true);
-fetch(url, { method: "GET" })
-  .then((response) => response.json())
-  .then((data) => {
-    if (data.data.vegan === "false") {
-      setVegan(false);
-      setFlagged(data.data.flagged);
-      setLoading(false);
-    } else if (data.data.vegan === "true") {
-      setVegan(true);
-      setLoading(false);
-    }
-  })
-  .catch((error) => {
-    setError(true);
-    setLoading(false);
-  });
-};
+    const checkIngredients = async () => {
+      setLoading(true);
+      try {
+        const data = await VeganCheck.checkIngredientsList(ingredients.value);
+        if (data.data.vegan === "false") {
+          setVegan(false);
+          setFlagged(data.data.flagged);
+          setLoading(false);
+        } else if (data.data.vegan === "true") {
+          setVegan(true);
+          setLoading(false);
+        }
+      } catch (error) {
+        setError(true);
+        setLoading(false);
+      }
+    };
+
+    checkIngredients();
+  };
 
   return (
     <>