From d8c5deeb7528694d81216107e2b3590823acd6b9 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 2 Oct 2023 16:23:01 +0200
Subject: [PATCH 1/3] :sparkles: Add a loader to folders

---
 .../FolderInformation/classes.module.scss     |  12 +
 .../Folder/FolderInformation/index.tsx        | 230 +++++++++---------
 2 files changed, 133 insertions(+), 109 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
index ce30f22f..f84b215e 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
@@ -99,3 +99,15 @@
 		}
 	}
 }
+
+.loader-container {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	.loader {
+		width: 40px;
+		height: 40px;
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 828443ae..61548236 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -80,109 +80,124 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
-				<div className={classes["root"]}>
-					{this.props.selectedFolder ? (
-						<div className={classes["folder-informations"]}>
-							<div className={classes["folder-header"]}>
-								<div className={classes["header"]}>
-									<div className={classes["title"]}>
-										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+				{!this.props.isLoading && (
+					<div className={classes["root"]}>
+						{this.props.selectedFolder ? (
+							<div className={classes["folder-informations"]}>
+								<div className={classes["folder-header"]}>
+									<div className={classes["header"]}>
+										<div className={classes["title"]}>
+											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+										</div>
+										<Link href={redirectPathEditCollaborators}>
+											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+												Modifier les collaborateurs
+											</Button>
+										</Link>
 									</div>
-									<Link href={redirectPathEditCollaborators}>
-										<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
-											Modifier les collaborateurs
-										</Button>
-									</Link>
-								</div>
-								<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
-								<div className={classes["second-box"]}>
-									<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
-								</div>
-								<div className={classes["progress-bar"]}>
-									<QuantityProgressBar
-										title="Complétion du dossier"
-										total={100}
-										currentNumber={this.getCompletionNumber()}
+									<FolderBoxInformation
+										folder={this.props.selectedFolder}
+										type={EFolderBoxInformationType.INFORMATIONS}
 									/>
+									<div className={classes["second-box"]}>
+										<FolderBoxInformation
+											folder={this.props.selectedFolder}
+											type={EFolderBoxInformationType.DESCRIPTION}
+										/>
+									</div>
+									<div className={classes["progress-bar"]}>
+										<QuantityProgressBar
+											title="Complétion du dossier"
+											total={100}
+											currentNumber={this.getCompletionNumber()}
+										/>
+									</div>
+									{this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
 								</div>
-								{this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
-							</div>
 
-							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
+								{!this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
 
-							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
-									Archiver le dossier
-								</Button>
-								{this.everyDocumentValidated() && !this.props.isLoading && (
-									<>
-										{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
-											<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
-												Ancrer le dossier
-											</Button>
-										)}
-										{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.props.selectedFolder?.uid)}>
-												Télécharger la preuve d'ancrage
-											</Button>
-										)}
-									</>
-								)}
-								{!this.doesFolderHaveCustomer() && (
-									<span className={classes["delete-folder"]} onClick={this.openVerifDeleteFolder}>
-										<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
-									</span>
-								)}
-							</div>
-							<Confirm
-								isOpen={this.state.isArchivedModalOpen}
-								onAccept={this.onArchivedModalAccepted}
-								onClose={this.closeArchivedModal}
-								closeBtn
-								header={"Archiver le dossier ?"}
-								cancelText={"Annuler"}
-								confirmText={"Archiver"}>
-								<div className={classes["modal-title"]}>
-									<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+								<div className={classes["button-container"]}>
+									<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+										Archiver le dossier
+									</Button>
+									{this.everyDocumentValidated() && !this.props.isLoading && (
+										<>
+											{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
+												<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
+													Ancrer le dossier
+												</Button>
+											)}
+											{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.props.selectedFolder?.uid)}>
+													Télécharger la preuve d'ancrage
+												</Button>
+											)}
+										</>
+									)}
+									{!this.doesFolderHaveCustomer() && (
+										<span className={classes["delete-folder"]} onClick={this.openVerifDeleteFolder}>
+											<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
+										</span>
+									)}
 								</div>
-								<TextAreaField
-									name="archived_description"
-									placeholder="Description"
-									onChange={this.onArchivedDescriptionInputChange}
-								/>
-							</Confirm>
-							<Confirm
-								isOpen={this.state.isVerifDeleteModalVisible}
-								onAccept={this.deleteFolder}
-								onClose={this.closeVerifDeleteFolder}
-								closeBtn
-								header={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
-								cancelText={"Annuler"}
-								confirmText={"Confirmer"}>
-								<div className={classes["modal-title"]}>
-									<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
-								</div>
-							</Confirm>
-						</div>
-					) : (
-						<div className={classes["no-folder-selected"]}>
-							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-							<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-									Sélectionnez un dossier
-								</Typography>
+								<Confirm
+									isOpen={this.state.isArchivedModalOpen}
+									onAccept={this.onArchivedModalAccepted}
+									onClose={this.closeArchivedModal}
+									closeBtn
+									header={"Archiver le dossier ?"}
+									cancelText={"Annuler"}
+									confirmText={"Archiver"}>
+									<div className={classes["modal-title"]}>
+										<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+									</div>
+									<TextAreaField
+										name="archived_description"
+										placeholder="Description"
+										onChange={this.onArchivedDescriptionInputChange}
+									/>
+								</Confirm>
+								<Confirm
+									isOpen={this.state.isVerifDeleteModalVisible}
+									onAccept={this.deleteFolder}
+									onClose={this.closeVerifDeleteFolder}
+									closeBtn
+									header={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
+									cancelText={"Annuler"}
+									confirmText={"Confirmer"}>
+									<div className={classes["modal-title"]}>
+										<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
+									</div>
+								</Confirm>
 							</div>
+						) : (
+							<div className={classes["no-folder-selected"]}>
+								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<div className={classes["choose-a-folder"]}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+										Sélectionnez un dossier
+									</Typography>
+								</div>
+							</div>
+						)}
+					</div>
+				)}
+				{this.props.isLoading && (
+					<div className={classes["loader-container"]}>
+						<div className={classes["loader"]}>
+							<Loader />
 						</div>
-					)}
-				</div>
+					</div>
+				)}
 				<Confirm
 					isOpen={this.state.isPreventArchiveModalOpen}
 					onAccept={this.closePreventArchiveModal}
@@ -389,20 +404,9 @@ export default function FolderInformation(props: IProps) {
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
 
-	const verifyAnchorStatus = useCallback(async () => {
-		if (!folderUid) return;
-		setIsLoading(true);
-		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);
-		}
-		setIsLoading(false);
-	}, [folderUid]);
-
 	const getFolder = useCallback(async () => {
 		if (!folderUid) return;
+		setIsLoading(true);
 		const query = {
 			q: {
 				deed: { include: { deed_type: true } },
@@ -435,13 +439,21 @@ export default function FolderInformation(props: IProps) {
 		const folder = await Folders.getInstance().getByUid(folderUid as string, query);
 		if (folder) {
 			setSelectedFolder(folder);
+
+			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);
+			}
 		}
+
+		setIsLoading(false);
 	}, [folderUid]);
 
 	useEffect(() => {
-		verifyAnchorStatus();
 		getFolder();
-	}, [verifyAnchorStatus, getFolder]);
+	}, [getFolder]);
 
 	useEffect(() => {
 		setIsLoading(true);

From e741db098d0e3ec4fa0fb809437d52fb334b356c Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 2 Oct 2023 16:25:01 +0200
Subject: [PATCH 2/3] :bug: Fixing useEffect

---
 .../Components/Layouts/Folder/FolderInformation/index.tsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 61548236..f2d0100c 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -452,12 +452,10 @@ export default function FolderInformation(props: IProps) {
 	}, [folderUid]);
 
 	useEffect(() => {
+		setIsLoading(true);
 		getFolder();
 	}, [getFolder]);
 
-	useEffect(() => {
-		setIsLoading(true);
-	}, [folderUid]);
 	return (
 		<FolderInformationClass
 			{...props}

From 65edf32c706adfb75c16136bff6f151b31506c9b Mon Sep 17 00:00:00 2001
From: OxSaitama <arnaud.daubernatali@smart-chain.fr>
Date: Mon, 2 Oct 2023 16:30:47 +0200
Subject: [PATCH 3/3] refacto app host url

---
 src/pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b5ff011d..31e20063 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -47,7 +47,7 @@ const MyApp = (({
 	instance.BACK_API_HOST = backApiHost ?? "api.stg.lecoffre.smart-chain.fr";
 	instance.BACK_API_ROOT_URL = backApiRootUrl ?? "/api";
 	instance.BACK_API_VERSION = backApiVersion ?? "/v1";
-	instance.FRONT_APP_HOST = frontAppHost ?? "app.stg.lecoffre.smart-chain.fr";
+	instance.FRONT_APP_HOST = frontAppHost ?? "https://app.stg.lecoffre.smart-chain.fr";
 	instance.IDNOT_BASE_URL = idNotBaseUrl ?? "https://qual-connexion.idnot.fr";
 	instance.IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint ?? "/IdPOAuth2/authorize/idnot_idp_v1";
 	instance.IDNOT_CLIENT_ID = idNotClientId ?? "4501646203F3EF67";