import React, { useCallback, useEffect, useState } from "react"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import classes from "./classes.module.scss"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import FilePreview from "@Front/Components/DesignSystem/FilePreview"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { useRouter } from "next/router"; import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib"; import DepositRib from "@Front/Components/DesignSystem/DepositRib"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; export default function Rib() { const [documentList, setDocumentList] = useState([]); const router = useRouter(); let { officeUid } = router.query; const [fileUrl, setFileUrl] = useState(""); const [fileName, setFileName] = useState(""); const [key, setKey] = useState(""); const [isRibModalOpen, setIsRibModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); //Put fetch data in a useCallback const fetchData = useCallback(async () => { try { const blob = await OfficeRib.getInstance().getRibStream(); const ribUrl = URL.createObjectURL(blob); setFileUrl(ribUrl); setKey(key); setFileName(key); } catch (error) { setFileUrl(""); setFileName(""); setKey(""); } }, [officeUid]); useEffect(() => { fetchData(); }, [officeUid]); function downloadFile() { if (!fileUrl) return; const a = document.createElement("a"); a.style.display = "none"; a.href = fileUrl; a.download = key; document.body.appendChild(a); a.click(); } async function onRibModalAccepted() { // Send documents to the backend for validation if (documentList.length === 0) return; const formData = new FormData(); formData.append("file", documentList[0]!, documentList[0]!.name); await OfficeRib.getInstance().post(formData); onCloseRibModal(); fetchData(); } function openRibModal(): void { setIsRibModalOpen(true); } function onCloseRibModal(): void { setDocumentList([]); setIsRibModalOpen(false); } async function onDeleteModalAccepted() { await OfficeRib.getInstance().delete(); onCloseDeleteModal(); fetchData(); } function openDeleteModal(): void { setIsDeleteModalOpen(true); } function onCloseDeleteModal(): void { setIsDeleteModalOpen(false); } const onDocumentChange = (documentList: File[]) => { setDocumentList(documentList); }; return (
Rib de l'office {!fileUrl && (
Aucun RIB n'a été déposé pour cet office
)} {fileUrl && (
{fileUrl && }
)} Supprimer le RIB Voulez-vous vraiment supprimer le RIB de votre office ?
); }