From 0767d164910c86b58d0ba689762d38283a0c0d73 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 23 Jul 2024 10:56:25 +0200
Subject: [PATCH] :sparkles: Delete client working

---
 .../ClientBox/DeleteCustomerModal/index.tsx   | 18 +++++----------
 .../ClientView/ClientBox/index.tsx            | 11 ++++++++--
 .../FolderInformation/ClientView/index.tsx    | 22 ++++++++++++++++---
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
index 559ba8ca..bdf407d9 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
@@ -7,21 +7,15 @@ type IProps = {
 	isOpen: boolean;
 	onClose?: () => void;
 
-	onDeleteSuccess: (uid: string) => void;
+	onDelete: (customerUid: string) => void;
 };
 
 export default function DeleteCustomerModal(props: IProps) {
-	const { isOpen, onClose, customerUid, onDeleteSuccess } = props;
+	const { isOpen, onClose, onDelete } = props;
 
-	const onDelete = useCallback(
-		() => onDeleteSuccess(customerUid),
-		// Documents.getInstance()
-		// 	.delete(documentUid)
-		// 	.then(() => onDeleteSuccess(documentUid))
-		// 	.then(onClose)
-		// 	.catch((error) => console.warn(error)),
-		[customerUid, onDeleteSuccess],
-	);
+	const handleDelete = useCallback(() => {
+		onDelete(props.customerUid);
+	}, [onDelete, props.customerUid]);
 
 	return (
 		<Modal
@@ -29,7 +23,7 @@ export default function DeleteCustomerModal(props: IProps) {
 			onClose={onClose}
 			title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
 			firstButton={{ children: "Annuler", onClick: onClose }}
-			secondButton={{ children: "Supprimer le client", onClick: onDelete }}>
+			secondButton={{ children: "Supprimer le client", onClick: handleDelete }}>
 			<Typography typo={ETypo.TEXT_MD_light}>
 				Cette action retirera le client de ce dossier. Vous ne pourrez plus récupérer les informations associées à ce client dans ce
 				dossier une fois supprimées.
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
index 63908f68..6d9c01f8 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
@@ -10,11 +10,13 @@ import classes from "./classes.module.scss";
 import DeleteCustomerModal from "./DeleteCustomerModal";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
+import { useCallback } from "react";
 
 type IProps = {
 	customer: ICustomer;
 	anchorStatus: AnchorStatus;
 	folderUid: string | undefined;
+	onDelete: (customerUid: string) => void;
 };
 
 export default function ClientBox(props: IProps) {
@@ -22,7 +24,12 @@ export default function ClientBox(props: IProps) {
 
 	const { isOpen, open, close } = useOpenable();
 
-	console.log("customer", customer);
+	const handleDelete = useCallback(
+		(customerUid: string) => {
+			props.onDelete(customerUid);
+		},
+		[props],
+	);
 
 	return (
 		<div className={classes["root"]}>
@@ -76,7 +83,7 @@ export default function ClientBox(props: IProps) {
 						onClick={open}>
 						Supprimer le client
 					</Button>
-					<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
+					<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDelete={handleDelete} />
 				</>
 			)}
 		</div>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
index 8f771e32..3cce0e55 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
@@ -2,7 +2,7 @@ import Tabs from "@Front/Components/Elements/Tabs";
 import Customer from "le-coffre-resources/dist/Customer";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { AnchorStatus } from "..";
 import classes from "./classes.module.scss";
@@ -13,6 +13,7 @@ import Module from "@Front/Config/Module";
 import Link from "next/link";
 import NoDocument from "./NoDocument";
 import DocumentTables from "./DocumentTables";
+import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 
 type IProps = {
 	folder: OfficeFolder;
@@ -47,6 +48,21 @@ export default function ClientView(props: IProps) {
 
 	const doesCustomerHaveDocument = useMemo(() => customer.documents && customer.documents.length > 0, [customer]);
 
+	const handleClientDelete = useCallback(
+		(customerUid: string) => {
+			if (!folder.uid) return;
+			Folders.getInstance().put(
+				folder.uid,
+				OfficeFolder.hydrate<OfficeFolder>({
+					...folder,
+					customers: folder.customers?.filter((customer) => customer.uid !== customerUid),
+				}),
+			);
+			window.location.reload();
+		},
+		[folder],
+	);
+
 	return (
 		<section className={classes["root"]}>
 			<div className={classes["tab-container"]}>
@@ -68,7 +84,7 @@ export default function ClientView(props: IProps) {
 			</div>
 			<div className={classes["content"]}>
 				<div className={classes["client-box"]}>
-					<ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} />
+					<ClientBox customer={customer} anchorStatus={anchorStatus} folderUid={folder.uid} onDelete={handleClientDelete} />
 					{anchorStatus === AnchorStatus.NOT_ANCHORED && (
 						<Link
 							href={Module.getInstance()
@@ -81,7 +97,7 @@ export default function ClientView(props: IProps) {
 						</Link>
 					)}
 				</div>
-				{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []}/> : <NoDocument />}
+				{doesCustomerHaveDocument ? <DocumentTables documents={customer.documents ?? []} /> : <NoDocument />}
 			</div>
 		</section>
 	);