🔨 handle better fetching documents in documents tables

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx

@@ -19,10 +19,13 @@ import classes from "./classes.module.scss";
 import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
 import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
 import FilesNotary from "@Front/Api/LeCoffreApi/Notary/FilesNotary/Files";
+import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
+
+import NoDocument from "../NoDocument";
+import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 
 type IProps = {
-	documents: Document[];
+	customerUid: string;
-	documentsNotary: DocumentNotary[];
 	folderUid: string;
 };
 
@@ -34,23 +37,46 @@ const tradDocumentStatus: Record<EDocumentStatus, string> = {
 };
 
 export default function DocumentTables(props: IProps) {
-	const { documents: documentsProps, folderUid, documentsNotary } = props;
+	const { folderUid, customerUid } = props;
-	const [documents, setDocuments] = useState<Document[]>(documentsProps);
+	const [documents, setDocuments] = useState<Document[]>([]);
-	const [documentUid, setDocumentUid] = useState<string | null>(null);
+	const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
+	const [focusedDocumentUid, setFocusedDocumentUid] = useState<string | null>(null);
 
 	const isMobile = useMediaQuery("(max-width:524px)");
 
 	const deleteAskedDocumentModal = useOpenable();
 	const deleteSentDocumentModal = useOpenable();
 
+	const fetchDocuments = useCallback(
+		() =>
+			Documents.getInstance()
+				.get({
+					where: { folder: { uid: folderUid }, depositor: { uid: customerUid } },
+					include: { files: true, document_type: true },
+				})
+				.then(setDocuments)
+				.catch(console.warn),
+		[customerUid, folderUid],
+	);
+
+	const fetchDocumentsNotary = useCallback(
+		() =>
+			DocumentsNotary.getInstance()
+				.get({ where: { folder: { uid: folderUid }, customer: { uid: customerUid } }, include: { files: true } })
+				.then(setDocumentsNotary)
+				.catch(console.warn),
+		[customerUid, folderUid],
+	);
+
 	useEffect(() => {
-		setDocuments(documentsProps);
+		fetchDocuments();
-	}, [documentsProps]);
+		fetchDocumentsNotary();
+	}, [fetchDocuments, fetchDocumentsNotary]);
 
 	const openDeleteAskedDocumentModal = useCallback(
 		(uid: string | undefined) => {
 			if (!uid) return;
-			setDocumentUid(uid);
+			setFocusedDocumentUid(uid);
 			deleteAskedDocumentModal.open();
 		},
 		[deleteAskedDocumentModal],
@@ -59,7 +85,7 @@ export default function DocumentTables(props: IProps) {
 	const openDeleteSentDocumentModal = useCallback(
 		(uid: string | undefined) => {
 			if (!uid) return;
-			setDocumentUid(uid);
+			setFocusedDocumentUid(uid);
 			deleteSentDocumentModal.open();
 		},
 		[deleteSentDocumentModal],
@@ -237,9 +263,9 @@ export default function DocumentTables(props: IProps) {
 		return (validatedDocuments.length / total) * 100;
 	}, [askedDocuments.length, refusedDocuments.length, toValidateDocuments.length, validatedDocuments.length]);
 
-	const handleDelete = useCallback((_documentUid: string) => {
+	console.log({ documents });
-		window.location.reload();
+
-	}, []);
+	if (documents.length === 0 && documentsNotary.length === 0) return <NoDocument />;
 
 	return (
 		<div className={classes["root"]}>
@@ -254,19 +280,19 @@ export default function DocumentTables(props: IProps) {
 			{validatedDocuments.length > 0 && <Table header={getHeader("Validé le", isMobile)} rows={validatedDocuments} />}
 			{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={refusedDocuments} />}
 			{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le", isMobile)} rows={sentDocuments} />}
-			{documentUid && (
+			{focusedDocumentUid && (
 				<>
 					<DeleteAskedDocumentModal
 						isOpen={deleteAskedDocumentModal.isOpen}
 						onClose={deleteAskedDocumentModal.close}
-						onDeleteSuccess={handleDelete}
+						onDeleteSuccess={fetchDocuments}
-						documentUid={documentUid}
+						documentUid={focusedDocumentUid}
 					/>
 					<DeleteSentDocumentModal
 						isOpen={deleteSentDocumentModal.isOpen}
 						onClose={deleteSentDocumentModal.close}
-						onDeleteSuccess={handleDelete}
+						onDeleteSuccess={fetchDocumentsNotary}
-						documentUid={documentUid}
+						documentUid={focusedDocumentUid}
 					/>
 				</>
 			)}

src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx

@@ -1,4 +1,3 @@
-import DocumentsNotary from "@Front/Api/LeCoffreApi/Notary/DocumentsNotary/DocumentsNotary";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Tabs from "@Front/Components/Elements/Tabs";
@@ -7,16 +6,14 @@ import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
 import Customer from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import { DocumentNotary } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { AnchorStatus } from "..";
 import classes from "./classes.module.scss";
 import ClientBox from "./ClientBox";
 import DocumentTables from "./DocumentTables";
 import EmailReminder from "./EmailReminder";
-import NoDocument from "./NoDocument";
 
 type IProps = {
 	folder: OfficeFolder;
@@ -27,7 +24,6 @@ export type ICustomer = Customer & { id: string };
 
 export default function ClientView(props: IProps) {
 	const { folder, anchorStatus } = props;
-	const [documentsNotary, setDocumentsNotary] = useState<DocumentNotary[]>([]);
 
 	const customers: ICustomer[] = useMemo(
 		() =>
@@ -77,12 +73,6 @@ export default function ClientView(props: IProps) {
 		[folder],
 	);
 
-	useEffect(() => {
-		DocumentsNotary.getInstance()
-			.get({ where: { folder: { uid: folder.uid }, customer: { uid: customer.uid } }, include: { files: true } })
-			.then((documentsNotary) => setDocumentsNotary(documentsNotary));
-	}, [customer.uid, folder]);
-
 	return (
 		<section className={classes["root"]}>
 			<div className={classes["tab-container"]}>
@@ -132,11 +122,7 @@ export default function ClientView(props: IProps) {
 					</div>
 				</div>
 
-				{doesCustomerHaveDocument || documentsNotary.length > 0 ? (
+				{customer.uid && folder.uid && <DocumentTables customerUid={customer.uid} folderUid={folder.uid} />}
-					<DocumentTables documents={customer.documents ?? []} documentsNotary={documentsNotary} folderUid={folder?.uid ?? ""} />
-				) : (
-					<NoDocument />
-				)}
 			</div>
 		</section>
 	);