readQR.js

import "./styles.css";
import { decodeUrlLevel, validURL } from "../../utils/helpers";
import { useState } from "react";
import QrcodeDecoder from "qrcode-decoder";
import swal from "sweetalert";

const qr = new QrcodeDecoder();

const randomString = () => Math.random().toString(36);

const LoadFromQR = ({ label, handleQR }) => {
  const [inputKey, setInputKey] = useState(randomString());

  /**
   * Para desplegar la acción de seleccionar la imagen de tipo QR
   */
  const handleClick = () => {
    const fileInput = document.querySelector("#fileInput");
    if (fileInput) {
      fileInput.click();
    }
  };

  /**
   * Función que recibe la imagen que el usuario a seleccionado
   * @param {*} event
   */
  const handleOnChange = async (event) => {
    let isInvalidQR = true;
    const image = URL.createObjectURL(event.target.files[0]);
    const code = await qr.decodeFromImage(image);
    if (code && code.data && validURL(code.data)) {
      const url = code.data;
      const pathname = new URL(url).pathname;
      const dataURL = pathname.split("/");
      if (dataURL.length === 3) {
        const decodeLevel = decodeUrlLevel(dataURL[2]);
        isInvalidQR = decodeLevel.error;

        if (!isInvalidQR) {
          handleQR && handleQR(decodeLevel.grid);
        }
      }
    }

    if (isInvalidQR) {
      swal({
        title: "Opps!",
        text: "The QR code is invalid or was not created in the game",
        icon: "error",
        closeOnClickOutside: false,
        closeOnEsc: false,
        button: "Ok",
      });
    }

    setInputKey(randomString());
  };

  return (
    <>
      <input
        className="file-qr"
        id="fileInput"
        type="file"
        accept="image/x-png"
        onChange={handleOnChange}
        key={inputKey}
      />
      <button className="button file-qr-button" onClick={handleClick}>
        {label}
      </button>
    </>
  );
};

export default LoadFromQR;