Merge pull request #513 from frontendnetwork/staging

Staging → Main

.github/workflows/build.yml

@@ -28,18 +28,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Log in to the Container registry
-        uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
+        uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
+        uses: docker/metadata-action@879dcbb708d40f8b8679d4f7941b938a086e23a7
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
@@ -86,18 +86,18 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Log in to the Container registry
-        uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
+        uses: docker/login-action@b4bedf8053341df3b5a9f9e0f2cf4e79e27360c6
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
+        uses: docker/metadata-action@879dcbb708d40f8b8679d4f7941b938a086e23a7
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 

.github/workflows/pr.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v3
         with:

package.json

@@ -34,7 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@typescript-eslint/typescript-estree": "^6.8.0",
-    "eslint": "8.47.0",
+    "eslint": "8.52.0",
     "eslint-config-next": "^13.5.6",
     "eslint-plugin-import": "^2.28.0"
   },

src/components/check.tsx

@@ -52,7 +52,7 @@ const ProductSearch = () => {
     setShowInvalid(false);
 
     setLoading(true);
-    
+
     try {
       const data = await VeganCheck.getProductByBarcode(
         barcode,
@@ -178,13 +178,16 @@ const ProductSearch = () => {
       >
         <legend>{t("enterbarcode")}</legend>
         <fieldset>
+          <legend>{t("enterbarcode")}</legend>
           <Scan
             onDetected={(barcode) => setBarcode(barcode)}
             handleSubmit={(barcode) => handleSubmit(barcode)}
           />
+          <label htmlFor="barcodeInput" className="hidden">{t("enterbarcode")}</label>
           <input
             type="number"
             name="barcode"
+            id="barcodeInput"
             placeholder={t("enterbarcode")}
             autoFocus={true}
             value={barcode}

src/components/elements/contents/donate.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-const SupportOption: React.FC = () => {
+const SupportOption = () => {
   const t = useTranslations("More");
   const [icon, setIcon] = useState<string>("icon-paypal");
   const [vendor, setVendor] = useState<string>("PayPal");

src/components/elements/contents/oledmode.tsx

@@ -1,37 +1,45 @@
-import { useTranslations } from 'next-intl';
-import React, { useState, useEffect } from 'react';
+import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
 
-const OLEDMode: React.FC = () => {
-  const t = useTranslations('More');
+const OLEDMode = () => {
+  const t = useTranslations("More");
   const [isChecked, setIsChecked] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
 
   const setThemeColorAttribute = (color: string) => {
-    const themeColorElement = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][media="(prefers-color-scheme: dark)"]');
-
+    const themeColorElement = document.querySelector<HTMLMetaElement>(
+      'meta[name="theme-color"][media="(prefers-color-scheme: dark)"]'
+    );
+
     if (themeColorElement) {
       themeColorElement.setAttribute("content", color);
     }
   };
 
   useEffect(() => {
     const localStorageValue = localStorage.getItem("oled");
-    if (localStorageValue === "true" && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    if (
+      localStorageValue === "true" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
       document.documentElement.setAttribute("data-theme", "oled");
       setThemeColorAttribute("#000");
       setIsChecked(true);
     }
   }, []);
 
   const handleClick = () => {
-    if (!isChecked && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    if (
+      !isChecked &&
+      !window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
       setError(true);
       return;
     }
     if (!isChecked) {
       document.documentElement.setAttribute("data-theme", "oled");
       setThemeColorAttribute("#000");
-      localStorage.setItem('oled', 'true');
+      localStorage.setItem("oled", "true");
     } else {
       localStorage.clear();
       document.documentElement.removeAttribute("data-theme");
@@ -42,11 +50,19 @@ const OLEDMode: React.FC = () => {
   };
 
   return (
-    <span className="Grid switcher">
+    <label htmlFor="oled-switch" className="Grid switcher">
       <div className="Grid-cell description">
         OLED-Mode
-        <span className="info" id="cookieinfo">{t('thissetsacookie')}</span>
-        <span className={`info ${error ? "animated fadeIn" : ""}`} id="oledinfo" style={{display: error ? "block" : "none"}}>{t('activatedarkmode')}</span>
+        <span className="info" id="cookieinfo">
+          {t("thissetsacookie")}
+        </span>
+        <span
+          className={`info ${error ? "animated fadeIn" : ""}`}
+          id="oledinfo"
+          style={{ display: error ? "block" : "none" }}
+        >
+          {t("activatedarkmode")}
+        </span>
       </div>
       <div className="Grid-cell icons">
         <input
@@ -58,7 +74,7 @@ const OLEDMode: React.FC = () => {
           onChange={handleClick}
         />
       </div>
-    </span>
+    </label>
   );
 };
 

src/components/elements/modalwrapper.tsx

@@ -9,9 +9,18 @@ interface ModalProps {
   children: React.ReactNode;
 }
 
-const ModalWrapper: React.FC<ModalProps> = ({ children, id, buttonType, buttonClass, buttonText }) => {
+const ModalWrapper = ({
+  children,
+  id,
+  buttonType,
+  buttonClass,
+  buttonText,
+}: ModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const modalRoot = typeof document !== 'undefined' ? document.getElementById("modal-root") : null;
+  const modalRoot =
+    typeof document !== "undefined"
+      ? document.getElementById("modal-root")
+      : null;
 
   useEffect(() => {
     const handleEscapeKeyPress = (event: KeyboardEvent) => {
@@ -23,9 +32,9 @@ const ModalWrapper: React.FC<ModalProps> = ({ children, id, buttonType, buttonCl
     const handleTouchStart = (event: TouchEvent) => {
       const touchStartY = event.touches[0].clientY;
       let touchEndY;
-    
+
       document.body.addEventListener("touchend", handleTouchEnd);
-    
+
       function handleTouchEnd(event: TouchEvent) {
         touchEndY = event.changedTouches[0].clientY;
         if (touchEndY - touchStartY > 10) {
@@ -34,7 +43,6 @@ const ModalWrapper: React.FC<ModalProps> = ({ children, id, buttonType, buttonCl
         document.body.removeEventListener("touchend", handleTouchEnd);
       }
     };
-
 
     document.addEventListener("keydown", handleEscapeKeyPress);
     document.addEventListener("touchstart", handleTouchStart);
@@ -91,15 +99,12 @@ const ModalWrapper: React.FC<ModalProps> = ({ children, id, buttonType, buttonCl
           {buttonText}
         </div>
       )}
-      {isOpen && modalRoot &&
+      {isOpen &&
+        modalRoot &&
         createPortal(
           <div className="modal_view animated fadeInUp open">
             <div className="modal_close">
-              <a
-                className="btn-dark"
-                data-dismiss="modal"
-                onClick={closeModal}
-              >
+              <a className="btn-dark" data-dismiss="modal" onClick={closeModal}>
                 ×
               </a>
             </div>

src/components/elements/share.tsx

@@ -9,7 +9,7 @@ interface ShareButtonProps {
   barcode: string;
 }
 
-const ShareButton: React.FC<ShareButtonProps> = ({ productName, barcode }) => {
+const ShareButton = ({ productName, barcode }: ShareButtonProps) => {
   const t = useTranslations("Check");
   const [showButton, setShowButton] = useState<boolean>(false);
 
@@ -91,7 +91,9 @@ const ShareButton: React.FC<ShareButtonProps> = ({ productName, barcode }) => {
             text,
             url,
           })
-          .catch((err) => {console.error(err)});
+          .catch((err) => {
+            console.error(err);
+          });
       }}
     >
       {t("share")}

src/components/elements/shortcutinstall.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { useState, useEffect, FC } from "react";
+import { useState, useEffect } from "react";
 
 interface ExtendedWindow extends Window {
   MSStream?: any;
 }
 
-const Shortcut: FC = () => {
+const Shortcut = () => {
   const t = useTranslations("ShortcutPrompt");
   const [showShortcut, setShowShortcut] = useState<boolean>(false);
 
@@ -16,7 +16,8 @@ const Shortcut: FC = () => {
       const windowWithMSStream = window as ExtendedWindow;
 
       const isIOS: boolean =
-        /iPad|iPhone|iPod/.test(navigator.userAgent) && !windowWithMSStream.MSStream;
+        /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+        !windowWithMSStream.MSStream;
 
       if (
         !window.matchMedia("(display-mode: standalone)").matches &&

src/components/ingredientscheck.tsx

@@ -5,11 +5,6 @@ import React, { useState, FormEvent } from "react";
 
 import ModalWrapper from "@/components/elements/modalwrapper";
 
-export interface FlaggedItem {
-  item: string;
-  index: number;
-}
-
 const IngredientsCheck = () => {
   const t = useTranslations("Ingredients");
   const [flagged, setFlagged] = useState<string[]>([]);

src/models/FlaggedItem.ts

@@ -0,0 +1,4 @@
+export type FlaggedItem = {
+  item: string;
+  index: number;
+};