🐛 Fixing other documents

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) {

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

@@ -24,18 +24,7 @@ export default function ClientDashboard(props: IProps) {
 	const [folder, setFolder] = useState<OfficeFolder | null>(null);
 	const [isAddDocumentModalVisible, setIsAddDocumentModalVisible] = useState<boolean>(false);
 
-	const onCloseModalAddDocument = useCallback(() => {
+	const getDocuments = useCallback(async () => {
-		console.log("Closing");
-
-		setIsAddDocumentModalVisible(false);
-	}, []);
-
-	const onOpenModalAddDocument = useCallback(() => {
-		setIsAddDocumentModalVisible(true);
-	}, []);
-
-	useEffect(() => {
-		async function getDocuments() {
 		let jwt;
 		if (typeof document !== "undefined") {
 			jwt = JwtService.getInstance().decodeJwt();
@@ -62,11 +51,21 @@ export default function ClientDashboard(props: IProps) {
 		setFolder(folder);
 		setDocuments(documentList);
 		setCustomer(actualCustomer);
-		}
-
-		getDocuments();
 	}, [folderUid]);
 
+	const onCloseModalAddDocument = useCallback(() => {
+		setIsAddDocumentModalVisible(false);
+		getDocuments();
+	}, [getDocuments]);
+
+	const onOpenModalAddDocument = useCallback(() => {
+		setIsAddDocumentModalVisible(true);
+	}, []);
+
+	useEffect(() => {
+		getDocuments();
+	}, [folderUid, getDocuments]);
+
 	const renderHeader = useCallback(() => {
 		console.log("Dossier : ", customer);
 		return (
@@ -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",
 					}),
 				})}
 			/>

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",
 									}),
 								})}
 							/>