From 406a04bcfedbc1755bd5a28aafc7069a36b8a418 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 28 Sep 2023 17:23:06 +0200
Subject: [PATCH] :bug: Fixing other documents

---
 .../DepositOtherDocument/index.tsx            | 70 +++++++++---------
 .../Layouts/ClientDashboard/index.tsx         | 71 +++++++++----------
 .../Layouts/ClientDashboard/index2.tsx        |  2 +-
 3 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
index e8364ceb..7b9c165c 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
@@ -39,6 +39,7 @@ type IState = {
 	refusedReason?: string;
 	isShowRefusedReasonModalVisible: boolean;
 	isAddDocumentModalVisible: boolean;
+	isLoading: boolean;
 };
 
 export default class DepositOtherDocument extends React.Component<IProps, IState> {
@@ -54,6 +55,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 			isDragOver: false,
 			refusedReason: "",
 			isShowRefusedReasonModalVisible: false,
+			isLoading: false,
 		};
 
 		this.addDocument = this.addDocument.bind(this);
@@ -65,45 +67,17 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 		this.onAccept = this.onAccept.bind(this);
 	}
 
-	private async onAccept() {
-		const filesArray = this.state.currentFiles;
-
-		if (!filesArray) return;
-
-		const documentCreated = await Documents.getInstance().post({
-			folder: {
-				uid: this.props.folder_uid,
-			},
-			depositor: {
-				uid: this.props.customer_uid,
-			},
-		});
-
-		console.log(documentCreated);
-
-		filesArray.forEach(async (file) => {
-			const formData = new FormData();
-			formData.append("file", file.file, file.fileName);
-			const query = JSON.stringify({ document: { uid: documentCreated.uid } });
-			formData.append("q", query);
-
-			const newFile = await Files.getInstance().post(formData);
-			console.log(newFile);
-		});
-
-		this.props.onClose!();
-	}
-
 	public override render(): JSX.Element {
 		return (
 			<Confirm
 				isOpen={this.state.isAddDocumentModalVisible}
-				onClose={this.props.onClose!}
+				onClose={() => {}}
 				onAccept={this.onAccept}
 				closeBtn
 				header={"Ajouter un document"}
 				cancelText={"Annuler"}
-				confirmText={"Déposer le document"}>
+				confirmText={this.state.isLoading ? "Chargement..." : "Déposer le document"}
+				canConfirm={!this.state.isLoading}>
 				<div className={classes["modal-content"]}>
 					<div className={classes["container"]}>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
@@ -140,7 +114,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 										</div>
 									</Typography>
 									<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
-										Sélectionnez des TEST documents .jpg, .pdf ou .png
+										Sélectionnez des documents .jpg, .pdf ou .png
 									</Typography>
 								</div>
 							</div>
@@ -187,6 +161,38 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 
 	public override componentDidMount(): void {}
 
+	private async onAccept() {
+		this.setState({
+			isLoading: true,
+		});
+		const filesArray = this.state.currentFiles;
+
+		if (!filesArray) return;
+
+		const documentCreated = await Documents.getInstance().post({
+			folder: {
+				uid: this.props.folder_uid,
+			},
+			depositor: {
+				uid: this.props.customer_uid,
+			},
+		});
+
+		for (let i = 0; i < filesArray.length; i++) {
+			const formData = new FormData();
+			formData.append("file", filesArray[i]!.file, filesArray[i]!.fileName);
+			const query = JSON.stringify({ document: { uid: documentCreated.uid } });
+			formData.append("q", query);
+			await Files.getInstance().post(formData);
+		}
+
+		this.setState({
+			isLoading: false,
+		});
+
+		this.props.onClose!();
+	}
+
 	private shortName(name: string): string {
 		const maxLength = 20;
 		if (name.length > maxLength) {
diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx
index f75de598..2985328c 100644
--- a/src/front/Components/Layouts/ClientDashboard/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index.tsx
@@ -24,48 +24,47 @@ export default function ClientDashboard(props: IProps) {
 	const [folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
 
-	const onCloseModalAddDocument = useCallback(() => {
-		console.log("Closing");
+	const getDocuments = useCallback(async () => {
+		let jwt;
+		if (typeof document !== "undefined") {
+			jwt = JwtService.getInstance().decodeJwt();
+		}
+		if (!jwt || !jwt.email) return;
+		const customers = await Customers.getInstance().get({
+			where: { contact: { email: jwt.email }, office_folders: { some: { uid: folderUid } } },
+		});
+		const actualCustomer: Customer = customers[0]!;
 
+		const query: IGetDocumentsparams = {
+			where: { depositor: { uid: actualCustomer.uid }, folder_uid: folderUid as string },
+			include: {
+				files: true,
+				document_history: true,
+				document_type: true,
+				depositor: true,
+			},
+		};
+
+		const documentList = await Documents.getInstance().get(query);
+
+		const folder = await Folders.getInstance().getByUid(folderUid as string, { q: { office: true } });
+		setFolder(folder);
+		setDocuments(documentList);
+		setCustomer(actualCustomer);
+	}, [folderUid]);
+
+	const onCloseModalAddDocument = useCallback(() => {
 		setIsAddDocumentModalVisible(false);
-	}, []);
+		getDocuments();
+	}, [getDocuments]);
 
 	const onOpenModalAddDocument = useCallback(() => {
 		setIsAddDocumentModalVisible(true);
 	}, []);
 
 	useEffect(() => {
-		async function getDocuments() {
-			let jwt;
-			if (typeof document !== "undefined") {
-				jwt = JwtService.getInstance().decodeJwt();
-			}
-			if (!jwt || !jwt.email) return;
-			const customers = await Customers.getInstance().get({
-				where: { contact: { email: jwt.email }, office_folders: { some: { uid: folderUid } } },
-			});
-			const actualCustomer: Customer = customers[0]!;
-
-			const query: IGetDocumentsparams = {
-				where: { depositor: { uid: actualCustomer.uid }, folder_uid: folderUid as string },
-				include: {
-					files: true,
-					document_history: true,
-					document_type: true,
-					depositor: true,
-				},
-			};
-
-			const documentList = await Documents.getInstance().get(query);
-
-			const folder = await Folders.getInstance().getByUid(folderUid as string, { q: { office: true } });
-			setFolder(folder);
-			setDocuments(documentList);
-			setCustomer(actualCustomer);
-		}
-
 		getDocuments();
-	}, [folderUid]);
+	}, [folderUid, getDocuments]);
 
 	const renderHeader = useCallback(() => {
 		console.log("Dossier : ", customer);
@@ -101,11 +100,9 @@ export default function ClientDashboard(props: IProps) {
 				</a>
 			</div>
 		);
-	}, [customer]);
+	}, [customer, folder?.folder_number, folder?.name, folder?.office?.name]);
 
 	const renderBox = useCallback(() => {
-		console.log(isAddDocumentModalVisible);
-
 		return (
 			<DepositOtherDocument
 				folder_uid={folderUid!}
@@ -114,7 +111,7 @@ export default function ClientDashboard(props: IProps) {
 				onClose={onCloseModalAddDocument}
 				document={Document.hydrate<Document>({
 					document_type: DocumentType.hydrate<DocumentType>({
-						name: "Document annexe",
+						name: "Autres documents",
 					}),
 				})}
 			/>
diff --git a/src/front/Components/Layouts/ClientDashboard/index2.tsx b/src/front/Components/Layouts/ClientDashboard/index2.tsx
index 506e9249..ee472c3e 100644
--- a/src/front/Components/Layouts/ClientDashboard/index2.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index2.tsx
@@ -71,7 +71,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
 							<DepositDocument
 								document={Document.hydrate<Document>({
 									document_type: DocumentType.hydrate<DocumentType>({
-										name: "Document annexe",
+										name: "Autres documents",
 									}),
 								})}
 							/>