fix archived folder

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -3,9 +3,11 @@ import classes from "./classes.module.scss";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
+import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
 
 type IProps = {
 	folder: OfficeFolder;
+	anchorStatus: AnchorStatus;
 };
 type IState = {
 	openedCustomer: string;
@@ -49,6 +51,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					key={customer.uid}
 					isOpened={this.state.openedCustomer === customer.uid}
 					onChange={this.changeUserFolder}
+					anchorStatus={this.props.anchorStatus}
 					isArchived
 				/>
 			);

src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss

@@ -86,4 +86,16 @@
 	.modal-title {
 		margin-bottom: 24px;
 	}
+}
+
+.loader-container {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	.loader {
+		width: 40px;
+		height: 40px;
+	}
 }

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -13,12 +13,18 @@ import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
 import Link from "next/link";
+import { AnchorStatus } from "../../Folder/FolderInformation";
+import { useCallback, useEffect, useState } from "react";
+import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
+import Loader from "@Front/Components/DesignSystem/Loader";
 
 type IProps = {};
 
 type IPropsClass = IProps & {
 	router: NextRouter;
 	selectedFolderUid: string;
+	isLoading: boolean;
+	isAnchored: AnchorStatus;
 };
 
 type IState = {
@@ -46,6 +52,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
+				{!this.props.isLoading && (
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -61,12 +68,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									</Link>
 								</div>
 								<FolderBoxInformation
+									anchorStatus={this.props.isAnchored}
 									folder={this.state.selectedFolder}
 									isArchived
 									type={EFolderBoxInformationType.INFORMATIONS}
 								/>
 								<div className={classes["second-box"]}>
 									<FolderBoxInformation
+										anchorStatus={this.props.isAnchored}
 										folder={this.state.selectedFolder}
 										isArchived
 										type={EFolderBoxInformationType.DESCRIPTION}
@@ -74,6 +83,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								</div>
 								<div className={classes["second-box"]}>
 									<FolderBoxInformation
+										anchorStatus={this.props.isAnchored}
 										folder={this.state.selectedFolder}
 										isArchived
 										type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
@@ -83,10 +93,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["progress-bar"]}>
 									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
 								</div>
-								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
 							</div>
 
-							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
 
 							<div className={classes["button-container"]}>
 								<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
@@ -105,6 +115,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						</div>
 					)}
 				</div>
+				)}
+				{this.props.isLoading && (
+					<div className={classes["loader-container"]}>
+						<div className={classes["loader"]}>
+							<Loader />
+						</div>
+					</div>
+				)}
 			</DefaultNotaryDashboard>
 		);
 	}
@@ -154,7 +172,69 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 
 export default function FolderInformation(props: IProps) {
 	const router = useRouter();
+	const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.NOT_ANCHORED);
+	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
+
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} />;
+
+	const getAnchoringStatus = useCallback(async () => {
+		if(!folderUid) return;
+		setIsLoading(true);
+		try {
+			const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
+			setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
+		} catch (e) {
+			setIsAnchored(AnchorStatus.NOT_ANCHORED);
+		}
+		setIsLoading(false);
+	}, [folderUid]);
+
+	const getFolder = useCallback(async () => {
+		if (!folderUid) return;
+		setIsLoading(true);
+		const query = {
+			q: {
+				deed: { include: { deed_type: true } },
+				office: true,
+				customers: {
+					include: {
+						contact: true,
+						documents: {
+							include: {
+								folder: true,
+								document_type: true,
+								files: true,
+							},
+						},
+					},
+				},
+				documents: {
+					include: {
+						depositor: {
+							include: {
+								contact: true,
+							},
+						},
+					},
+				},
+				folder_anchor: true,
+			},
+		};
+		const folder = await Folders.getInstance().getByUid(folderUid as string, query);
+		if (folder) {
+			setSelectedFolder(folder);
+			getAnchoringStatus();
+		}
+
+		setIsLoading(false);
+	}, [folderUid, getAnchoringStatus]);
+
+	useEffect(() => {
+		setIsLoading(true);
+		getFolder();
+	}, [getFolder]);
+
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} isLoading={isLoading} isAnchored={isAnchored} />;
 }