kiosco_desk/renderer/components/Imprimir/Imprimir.tsx

import axios from "axios";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import SimpleLoading from "../Loading/SimpleLoading";
import Swal from "sweetalert2";

interface ImprimirProps {
  api: string;
  setSaldo: Dispatch<SetStateAction<number>>;
  saldo: number;
}

export interface archivo {
  idArchivo: number;
  idPersona: number;
  rutaArchivo: string;
  fecha: string;
  nombreArchivo: string;
  numeroPaginas: number;
  size: number;
}

export default function Imprimir({ api, saldo, setSaldo }: ImprimirProps) {
  const [archivos, setArchivos] = useState<archivo[]>([]);
  const [imprimiendo, setImprimiendo] = useState<boolean>(false);
  const [error, setError] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string>("Error");
  const [sendPrintFlag, setSendPrintFlag] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        axios.defaults.headers.common.Authorization =
          localStorage.getItem("Token");
        const [filesResponse, saldoResponse] = await Promise.all([
          axios.get(`${api}/files`),
          axios.get(`http://localhost:3000/persona/saldo`),
        ]);
        setArchivos(filesResponse.data.data);
        setSaldo(saldoResponse.data.data);
      } catch (error) {
        console.error("Error fetching data:", error);
        setError(true);
        setErrorMessage("Ha ocurrido un problema al traer tus documentos");
      }
    };

    fetchData();
  }, [api, setSaldo, imprimiendo]);

  useEffect(() => {
    const handlePrintError = (event: string | object) => {
      setErrorMessage(typeof event === "string" ? event : "Error desconocido");
      setError(true);
    };

    //Si al enviar a imprimir no podemos imprimir y detectamos un error lo mostramos
    //y no afectamos el saldo del usuario
    window.ipc.on("finishPrintError", handlePrintError);
  }, []);

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("es-ES", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  };

  const puedeImprimir = async (idArchivo: number): Promise<boolean> => {
    try {
      const res = await axios.post(`${api}/imprimirCheck`, {
        idKiosco: localStorage.getItem("kioscoAcatlanKiosco"),
        idArchivo: idArchivo,
      });
      if (!res.data.error) {
        console.log("Si puede imprimir");
        return true;
      } else {
        return false;
      }
    } catch (error) {
      Swal.fire({
        title: `Error`,
        text: `${error.response.data.msj}`,
        icon: "success",
      });
      console.log(error);
      return false;
    }
  };

  const handlePrintClick = async (idArchivo: number) => {
    setImprimiendo(true);
    if (await puedeImprimir(idArchivo)) {
      const token = localStorage.getItem("kioscoAcatlanToken");
      const dataToSend = {
        token: token,
        fileId: idArchivo,
        api: api,
      };
      setSendPrintFlag(true);
      window.ipc.send("openDial", dataToSend);
    } else {
      setImprimiendo(false);
    }
    return;
  };

  useEffect(() => {
    const descontarImpresion = async (event, datos) => {
      try {
        const res = await axios.post(`${api}/imprimir`, {
          idKiosco: localStorage.getItem("kioscoAcatlanKiosco"),
          idArchivo: event,
        });
        const saldoActualizado = res.data.msj.slice(-5);
        setSaldo(saldoActualizado);
        Swal.fire({
          title: `Exito`,
          text: `${res.data.msj}`,
          icon: "success",
        });
        console.log("Descontar impresion");
      } catch (error) {
        console.log(error);
      } finally {
        setImprimiendo(false);
        console.log("Fin");
      }
    };

    // Suscribirse al evento finishPrint una vez
    const unsubscribe = window.ipc.on("finishPrint", descontarImpresion);
    return () => unsubscribe();
  }, []);

  return (
    <>
      <div className="alert alert-primary" role="alert">
        El precio de tu impresion dependera del numero de paginas de tu
        documento
      </div>
      <div className="w-75 shadow bg-white rounded py-3 px-4 text-center">
        <h3>Tus documentos</h3>
        {error ? (
          <div className="alert alert-danger mt-3" role="alert">
            <h4 className="alert-heading">Ha ocurrido un error</h4>
            <p>Por favor inténtalo más tarde</p>
            <hr />
            <p className="mb-0">{errorMessage}</p>
          </div>
        ) : imprimiendo ? (
          <SimpleLoading mensaje="Imprimiendo..." />
        ) : (
          <table className="mt-4 table">
            <thead>
              <tr className="table-primary">
                <th>Nombre del archivo</th>
                <th>No. Páginas</th>
                <th>Fechas</th>
                <th>Imprimir</th>
              </tr>
            </thead>
            <tbody>
              {archivos.length > 0 ? (
                archivos.map((archivo, index) => (
                  <tr key={index}>
                    <td className=" py-2">{archivo.nombreArchivo}</td>
                    <td className=" py-2">{archivo.numeroPaginas}</td>
                    <td className=" py-2">{formatDate(archivo.fecha)}</td>
                    <td className="py-2">
                      <button
                        type="button"
                        className="btn btn-primary"
                        onClick={() => {
                          handlePrintClick(archivo.idArchivo);
                        }}
                      >
                        Imprimir
                      </button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={4}>No tienes archivos en tu cuenta</td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>
    </>
  );
}