Fixes

src/front/Components/DesignSystem/DepositRib/index.tsx

@@ -59,12 +59,13 @@ export default class DepositRib extends React.Component<IProps, IState> {
 	};
 
 	handleFile = (file: File) => {
+		if (!file) return;
 		if (file.type === "application/pdf" || file.type === "image/jpeg" || file.type === "image/png") {
-			this.setState((prevState) => ({
-				documents: [...prevState.documents, file],
+			this.setState({
+				documents: [file],
 				errorMessage: "",
-			}));
-			this.props.onChange([...this.state.documents, file]);
+			});
+			this.props.onChange([file]);
 		} else {
 			this.setState({ errorMessage: "Only PDF, JPEG, and PNG files are allowed." });
 		}

src/front/Components/Layouts/Rib/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+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";
@@ -17,29 +17,32 @@ export default function Rib() {
 	const [fileName, setFileName] = useState<string>("");
 	const [key, setKey] = useState<string>("");
 	const [isRibModalOpen, setIsRibModalOpen] = useState<boolean>(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
+
+	//Put fetch data in a useCallback
+
+	const fetchData = useCallback(async () => {
+		console.log("fetchData", officeUid);
 
-	const fetchData = async () => {
 		if (!officeUid) return;
-		const blob = await Bucket.getInstance().getRibStream(officeUid as string);
+		try {
+			const blob = await Bucket.getInstance().getRibStream(officeUid as string);
 
-		if (!blob) {
+			const ribUrl = URL.createObjectURL(blob);
+
+			setFileUrl(ribUrl);
+			setKey(key);
+			setFileName(key);
+		} catch (error) {
 			setFileUrl("");
 			setFileName("");
 			setKey("");
 		}
-		const ribUrl = URL.createObjectURL(blob);
+	}, [officeUid]);
 
-		setFileUrl(ribUrl);
-		setKey(key);
-		setFileName(key);
-	};
-
-	async function deleteFile() {
-		if (!officeUid) return;
-		await Bucket.getInstance().delete(officeUid as string);
-		setDocumentList([]);
+	useEffect(() => {
 		fetchData();
-	}
+	}, [officeUid]);
 
 	function downloadFile() {
 		if (!fileUrl) return;
@@ -59,18 +62,34 @@ export default function Rib() {
 
 		await Bucket.getInstance().post(formData);
 
-		setDocumentList([]);
-		setIsRibModalOpen(false);
+		onCloseRibModal();
 		fetchData();
 	}
 
+	function openRibModal(): void {
+		setIsRibModalOpen(true);
+	}
+
 	function onCloseRibModal(): void {
 		setDocumentList([]);
 		setIsRibModalOpen(false);
 	}
 
-	function openRibModal(): void {
-		setIsRibModalOpen(true);
+	async function onDeleteModalAccepted() {
+		if (!officeUid) return;
+		const office = await Bucket.getInstance().delete(officeUid as string);
+		console.log(office);
+
+		onCloseDeleteModal();
+		fetchData();
+	}
+
+	function openDeleteModal(): void {
+		setIsDeleteModalOpen(true);
+	}
+
+	function onCloseDeleteModal(): void {
+		setIsDeleteModalOpen(false);
 	}
 
 	const onDocumentChange = (documentList: File[]) => {
@@ -103,7 +122,7 @@ export default function Rib() {
 					<div className={classes["document-container"]}>
 						<div className={classes["file-container"]}>{fileUrl && <FilePreview href={fileUrl} fileName={fileName} />}</div>
 						<div className={classes["footer"]}>
-							<Button onClick={deleteFile} variant={EButtonVariant.SECONDARY}>
+							<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
 								Supprimer
 							</Button>
 							<Button onClick={openRibModal} variant={EButtonVariant.GHOST}>
@@ -124,12 +143,20 @@ export default function Rib() {
 					<DepositRib onChange={onDocumentChange} />
 				</Confirm>
 
-				{/* <div className={classes["footer"]}>
-					<DepositRib />
-					<Button variant={EButtonVariant.SECONDARY}>Supprimer</Button>
-					<Button variant={EButtonVariant.GHOST}>Modifier</Button>
-					<Button onClick={downloadFile}>Télécharger</Button>
-				</div> */}
+				<Confirm
+					isOpen={isDeleteModalOpen}
+					onAccept={onDeleteModalAccepted}
+					onClose={onCloseDeleteModal}
+					closeBtn
+					cancelText={"Annuler"}
+					confirmText={"Supprimer"}>
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Supprimer le RIB
+					</Typography>
+					<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+						Voulez-vous vraiment supprimer le RIB de votre office ?
+					</Typography>
+				</Confirm>
 			</div>
 		</DefaultTemplate>
 	);