Merge branch 'dev' into staging

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

@@ -13,7 +13,7 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
-import { ChangeEvent } from "react";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import Image from "next/image";
 import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
 
@@ -21,12 +21,21 @@ import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import Loader from "@Front/Components/DesignSystem/Loader";
+
+enum AnchorStatus {
+	"VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN",
+	"ANCHORING" = "ANCHORING",
+	"NOT_ANCHORED" = "NOT_ANCHORED",
+	"FETCHING" = "FETCHING",
+}
 
 type IProps = {};
 
 type IPropsClass = IProps & {
 	router: NextRouter;
 	selectedFolderUid: string;
+	isAnchored: AnchorStatus;
 };
 
 type IState = {
@@ -36,7 +45,6 @@ type IState = {
 	isValidateModalVisible: boolean;
 	hasValidateAnchoring: boolean;
 	isVerifDeleteModalVisible: boolean;
-	isAnchored: boolean | null;
 	isPreventArchiveModalOpen: boolean;
 };
 class FolderInformationClass extends BasePage<IPropsClass, IState> {
@@ -49,7 +57,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			isValidateModalVisible: false,
 			hasValidateAnchoring: false,
 			isVerifDeleteModalVisible: false,
-			isAnchored: null,
 			isPreventArchiveModalOpen: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
@@ -64,7 +71,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.openValidateModal = this.openValidateModal.bind(this);
 		this.openVerifDeleteFolder = this.openVerifDeleteFolder.bind(this);
 		this.closeVerifDeleteFolder = this.closeVerifDeleteFolder.bind(this);
-		this.verifyAnchorStatus = this.verifyAnchorStatus.bind(this);
 		this.closePreventArchiveModal = this.closePreventArchiveModal.bind(this);
 	}
 
@@ -116,12 +122,18 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								</Button>
 								{this.everyDocumentValidated() && (
 									<>
-										{this.state.isAnchored === null && (
+										{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
 											<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
 												Ancrer le dossier
 											</Button>
 										)}
-										{this.state.isAnchored === true && (
+										{this.props.isAnchored === AnchorStatus.ANCHORING && (
+											<Button variant={EButtonVariant.PRIMARY} disabled>
+												Ancrage en cours...&nbsp;&nbsp;
+												<Loader />
+											</Button>
+										)}
+										{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
 											<Button
 												variant={EButtonVariant.PRIMARY}
 												onClick={() => this.downloadAnchoringProof(this.state.selectedFolder?.uid)}>
@@ -232,16 +244,12 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			</DefaultNotaryDashboard>
 		);
 	}
+
 	public override async componentDidMount() {
 		const selectedFolder = await this.getFolder();
-		this.setState(
+		this.setState({
-			{
+			selectedFolder,
-				selectedFolder,
+		});
-			},
-			() => {
-				this.verifyAnchorStatus();
-			},
-		);
 	}
 
 	private closePreventArchiveModal() {
@@ -250,19 +258,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		});
 	}
 
-	private async verifyAnchorStatus() {
-		if (!this.state.selectedFolder || !this.state.selectedFolder.uid) return;
-		try {
-			const anchorStatus = await OfficeFolderAnchors.getInstance().get(this.state.selectedFolder.uid!);
-			this.setState({
-				isAnchored: anchorStatus.status === "VERIFIED_ON_CHAIN",
-			});
-		} catch (e) {
-			this.setState({
-				isAnchored: null,
-			});
-		}
-	}
 	public openVerifDeleteFolder() {
 		this.setState({
 			isVerifDeleteModalVisible: true,
@@ -377,7 +372,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	}
 
 	private openArchivedModal(): void {
-		if (this.everyDocumentValidated() && this.state.isAnchored) {
+		if (this.everyDocumentValidated() && this.props.isAnchored) {
 			this.setState({ isArchivedModalOpen: true });
 		} else {
 			this.setState({ isPreventArchiveModalOpen: true });
@@ -438,7 +433,23 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 
 export default function FolderInformation(props: IProps) {
 	const router = useRouter();
+	const [isAnchored, setIsAnchored] = useState<AnchorStatus>(AnchorStatus.FETCHING);
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} />;
+
+	const verifyAnchorStatus = useCallback(async () => {
+		if (!folderUid) return;
+		try {
+			const anchorStatus = await OfficeFolderAnchors.getInstance().get(folderUid as string);
+			setIsAnchored(anchorStatus.status === "VERIFIED_ON_CHAIN" ? AnchorStatus.VERIFIED_ON_CHAIN : AnchorStatus.ANCHORING);
+		} catch (e) {
+			setIsAnchored(AnchorStatus.NOT_ANCHORED);
+		}
+	}, [folderUid]);
+
+	useEffect(() => {
+		verifyAnchorStatus();
+	}, [folderUid, verifyAnchorStatus]);
+
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} isAnchored={isAnchored} />;
 }