Merge Dev in Staging

2023-10-03 17:00:16 +02:00 · 2023-10-03 17:00:16 +02:00 · 897f75c698
commit 897f75c698
parent 0da28ad56b 15ec6037c1
11 changed files with 269 additions and 126 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -22,7 +22,7 @@
 				"eslint-config-next": "13.2.4",
 				"form-data": "^4.0.0",
 				"jwt-decode": "^3.1.2",
-				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.85",
+				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.89",
 				"next": "13.2.4",
 				"prettier": "^2.8.7",
 				"react": "18.2.0",
@ -394,9 +394,9 @@
 			}
 		},
 		"node_modules/@eslint-community/regexpp": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.0.tgz",
-			"integrity": "sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ==",
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz",
+			"integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==",
 			"engines": {
 				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
@ -1507,9 +1507,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001542",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz",
-			"integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==",
+			"version": "1.0.30001543",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
+			"integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==",
 			"funding": [
 				{
 					"type": "opencollective",
@ -3361,7 +3361,7 @@
 			}
 		},
 		"node_modules/le-coffre-resources": {
-			"resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#0e1663716a698cc584a89e5e2a03b72113702d55",
+			"resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#a100398ef5c1984ba74cb1c8c182648315accc3e",
 			"license": "MIT",
 			"dependencies": {
 				"class-transformer": "^0.5.1",
--- a/package.json
+++ b/package.json
@ -24,7 +24,7 @@
 		"eslint-config-next": "13.2.4",
 		"form-data": "^4.0.0",
 		"jwt-decode": "^3.1.2",
-		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.88",
+		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.89",
 		"next": "13.2.4",
 		"prettier": "^2.8.7",
 		"react": "18.2.0",
--- a/src/front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors.ts
+++ b/src/front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors.ts
@ -1,9 +1,15 @@
 import { ContentType } from "@Front/Api/BaseApiService";
 import BaseNotary from "../BaseNotary";
+import { OfficeFolderAnchor } from "le-coffre-resources/dist/Notary";
+export interface IGetAnchorsParams {
+	where?: {};
+	include?: {};
+	select?: {};
+}

 export default class OfficeFolderAnchors extends BaseNotary {
 	private static instance: OfficeFolderAnchors;
-	private readonly baseURl = this.namespaceUrl.concat("/anchors");
+	private readonly baseUrl = this.namespaceUrl.concat("/anchors");

 	private constructor() {
 		super();
@ -17,20 +23,34 @@ export default class OfficeFolderAnchors extends BaseNotary {
 		}
 	}

-	public async get(uid: string): Promise<any> {
-		const url = new URL(this.baseURl.concat(`/${uid}`));
+	public async get(q?: IGetAnchorsParams): Promise<OfficeFolderAnchor[]> {
+		const url = new URL(this.baseUrl);
+		if (q) {
+			const query = { q };
+			Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		}
 		try {
-			return await this.getRequest<any>(url);
+			return await this.getRequest<OfficeFolderAnchor[]>(url);
 		} catch (err) {
 			this.onError(err);
 			return Promise.reject(err);
 		}
 	}

-	public async post(uid: string): Promise<any> {
-		const url = new URL(this.baseURl.concat(`/${uid}`));
+	public async getByUid(uid: string): Promise<OfficeFolderAnchor> {
+		const url = new URL(this.baseUrl.concat(`/${uid}`));
 		try {
-			return await this.postRequest<any>(url, {});
+			return await this.getRequest<OfficeFolderAnchor>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async post(uid: string): Promise<OfficeFolderAnchor> {
+		const url = new URL(this.baseUrl.concat(`/${uid}`));
+		try {
+			return await this.postRequest<OfficeFolderAnchor>(url, {});
 		} catch (err) {
 			this.onError(err);
 			return Promise.reject(err);
@ -38,7 +58,7 @@ export default class OfficeFolderAnchors extends BaseNotary {
 	}

 	public async download(uid: string): Promise<any> {
-		const url = new URL(this.baseURl.concat(`/download/${uid}`));
+		const url = new URL(this.baseUrl.concat(`/download/${uid}`));
 		try {
 			return await this.getRequest<any>(url, undefined, ContentType.PDF, `${uid}.pdf`);
 		} catch (err) {
--- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx
@ -8,10 +8,33 @@ import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
 import { usePathname } from "next/navigation";
 import Notifications from "@Front/Api/LeCoffreApi/Notary/Notifications/Notifications";
 import Toasts from "@Front/Stores/Toasts";
+import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
 export default function Navigation() {
 	const pathname = usePathname();

+	const getAnchoringStatus = useCallback(async () => {
+		const anchors = await OfficeFolderAnchors.getInstance().get({
+			where: {
+				status: {
+					not: "VERIFIED_ON_CHAIN",
+				},
+			},
+			include: {
+				folder: true,
+			},
+		});
+
+		try {
+			for (const anchor of anchors) {
+				await OfficeFolderAnchors.getInstance().getByUid(anchor.folder?.uid as string);
+			}
+		} catch (e) {
+			console.log(e);
+		}
+	}, []);
+
 	const getNotifications = useCallback(async () => {
+		//await getAnchoringStatus();
 		const notifications = await Notifications.getInstance().get({
 			where: {
 				read: false,
@ -27,8 +50,9 @@ export default function Navigation() {
 	}, []);

 	useEffect(() => {
+		getAnchoringStatus();
 		getNotifications();
-	}, [pathname, getNotifications]);
+	}, [pathname, getNotifications, getAnchoringStatus]);

 	return (
 		<div className={classes["root"]}>
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
@ -108,10 +108,12 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 		}, 200);
 	}

-	private handleClick(e: React.MouseEvent) {
+	private async handleClick(e: React.MouseEvent) {
+		console.log('redirectUrl', this.props.toast.redirectUrl);
 		if (this.props.toast.redirectUrl) {
-			this.props.router.push(this.props.toast.redirectUrl);
 			this.onClose(e);
+			await this.props.router.push(this.props.toast.redirectUrl);
+			this.props.router.reload();
 		}
 	}
 }
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/index.tsx
@ -8,7 +8,7 @@ type IProps = {};
 type IState = {
 	toastList: IToast[];
 };
-export default class ToastsContainer extends React.Component<IProps, IState> {
+export class ToastsContainerClass extends React.Component<IProps, IState> {
 	private removeOnChange = () => {};

 	public constructor(props: IProps) {
@ -25,7 +25,7 @@ export default class ToastsContainer extends React.Component<IProps, IState> {
 			<div className={classNames(classes["root"], this.state.toastList.length > 0 && classes["open"])}>
 				<>
 					{this.state.toastList.map((toast) => {
-						return <ToastElement toast={toast} key={toast.id} />;
+						return <ToastElement toast={toast} key={toast.id}/>;
 					})}
 				</>
 			</div>
@ -44,3 +44,7 @@ export default class ToastsContainer extends React.Component<IProps, IState> {
 		this.setState({ toastList });
 	}
 }
+
+export default function ToastsContainer(props: IProps) {
+	return <ToastsContainerClass {...props}/>;
+};
--- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/classes.module.scss
@ -0,0 +1,11 @@
+.add-document-form-container {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	.radiobox-container {
+		> :not(:last-child) {
+			margin-bottom: 16px;
+		}
+	}
+}
--- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
@ -0,0 +1,159 @@
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import classes from "./classes.module.scss";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
+import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import { MultiValue } from "react-select";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+
+type IProps = {
+	isCreateDocumentModalVisible: boolean;
+	closeModal: () => void;
+	folder: OfficeFolder;
+};
+
+export default function ParameterDocuments(props: IProps) {
+	const [visibleDescription, setVisibleDescription] = useState<string>("");
+	const [documentName, setDocumentName] = useState<string>("");
+
+	const [addOrEditDocument, setAddOrEditDocument] = useState<"add" | "edit">("edit");
+
+	const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
+	const [formattedOptions, setFormattedOptions] = useState<IOption[]>([]);
+
+	const getAvailableDocuments = useCallback(async () => {
+		const documents = await DocumentTypes.getInstance().get({});
+
+		const formattedOptions: IOption[] = documents
+			.filter((document) => {
+				return !props.folder.deed?.document_types?.some((documentType) => documentType.uid === document.uid);
+			})
+			.map((document) => {
+				return {
+					label: document.name,
+					value: document.uid,
+				};
+			});
+		setFormattedOptions(formattedOptions);
+	}, [props.folder.deed?.document_types]);
+
+	const onVisibleDescriptionChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+		setVisibleDescription(event.target.value);
+	};
+
+	const onDocumentNameChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+		setDocumentName(event.target.value);
+	};
+
+	const onDocumentChangeHandler = useCallback((values: MultiValue<IOption>) => {
+		setSelectedDocuments(values as IOption[]);
+	}, []);
+
+	const handleClose = useCallback(() => {
+		setFormattedOptions([]);
+		setSelectedDocuments([]);
+		setAddOrEditDocument("edit");
+		setVisibleDescription("");
+		setDocumentName("");
+		props.closeModal();
+	}, [props]);
+
+	const addDocument = useCallback(async () => {
+		if (addOrEditDocument === "add") {
+			try {
+				const documentType = await DocumentTypes.getInstance().post({
+					name: documentName,
+					private_description: visibleDescription,
+					office: {
+						uid: props.folder.office!.uid!,
+					},
+					public_description: visibleDescription,
+				});
+
+				const oldDocumentsType = props.folder.deed?.document_types!;
+				await Deeds.getInstance().put(props.folder.deed?.uid!, {
+					document_types: [...oldDocumentsType, documentType],
+				});
+
+				//await this.loadData();
+				handleClose();
+			} catch (e) {
+				console.error(e);
+			}
+		} else {
+			try {
+				const oldDocumentsType = props.folder.deed?.document_types!;
+				await Deeds.getInstance().put(props.folder.deed?.uid!, {
+					document_types: [
+						...oldDocumentsType,
+						...selectedDocuments.map((document) => DocumentType.hydrate<DocumentType>({ uid: document.value as string })),
+					],
+				});
+
+				//await this.loadData();
+				handleClose();
+			} catch (e) {
+				console.error(e);
+			}
+		}
+	}, [addOrEditDocument, documentName, handleClose, props, selectedDocuments, visibleDescription]);
+
+	const selectEditMode = () => {
+		setAddOrEditDocument("edit");
+	};
+
+	const selectAddMode = () => {
+		setAddOrEditDocument("add");
+	};
+
+	useEffect(() => {
+		getAvailableDocuments();
+	}, [getAvailableDocuments, props.folder]);
+
+	return (
+		<Confirm
+			isOpen={props.isCreateDocumentModalVisible}
+			onClose={handleClose}
+			onAccept={addDocument}
+			closeBtn
+			header={"Ajouter des documents demandables"}
+			cancelText={"Annuler"}
+			confirmText={"Ajouter"}>
+			<div className={classes["add-document-form-container"]}>
+				<div className={classes["radiobox-container"]}>
+					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
+						<Typography typo={ITypo.P_ERR_18}>Document existant</Typography>
+					</RadioBox>
+
+					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
+						<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
+					</RadioBox>
+				</div>
+				{addOrEditDocument === "add" && (
+					<>
+						<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={onDocumentNameChange} />
+						<TextAreaField
+							name="description"
+							placeholder="Description visible par le client"
+							onChange={onVisibleDescriptionChange}
+						/>
+					</>
+				)}
+				{addOrEditDocument === "edit" && (
+					<MultiSelect
+						options={formattedOptions}
+						placeholder="Cliquez pour sélectionner des documents"
+						onChange={onDocumentChangeHandler}
+						defaultValue={selectedDocuments}
+					/>
+				)}
+			</div>
+		</Confirm>
+	);
+}
--- a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
@ -37,10 +37,4 @@
 	.buttons-container {
 		margin-top: 32px;
 	}
-
-	.add-document-form-container {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-	}
 }
--- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@ -1,15 +1,10 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
-import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
-import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
-import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
@ -20,6 +15,7 @@ import React from "react";

 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import ParameterDocuments from "./ParameterDocuments";

 type IProps = {};
 type IPropsClass = IProps & {
@ -29,8 +25,6 @@ type IPropsClass = IProps & {
 };
 type IState = {
 	isCreateDocumentModalVisible: boolean;
-	documentName: string;
-	visibleDescription: string;
 	documentTypes: IOption[];
 	folder: OfficeFolder | null;
 };
@ -41,8 +35,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {

 		this.state = {
 			isCreateDocumentModalVisible: false,
-			documentName: "",
-			visibleDescription: "",
 			documentTypes: [],
 			folder: null,
 		};
@ -50,11 +42,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.onFormSubmit = this.onFormSubmit.bind(this);
 		this.closeModal = this.closeModal.bind(this);
 		this.openModal = this.openModal.bind(this);
-		this.cancel = this.cancel.bind(this);
-		this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this);
-		this.onDocumentNameChange = this.onDocumentNameChange.bind(this);
-		this.addDocument = this.addDocument.bind(this);
-		this.canAddDocument = this.canAddDocument.bind(this);
 	}

 	public override render(): JSX.Element {
@ -101,25 +88,14 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 							</div>
 						</div>
 					</Form>
-					<Confirm
-						isOpen={this.state.isCreateDocumentModalVisible}
-						onClose={this.closeModal}
-						onAccept={this.addDocument}
-						canConfirm={this.canAddDocument()}
-						closeBtn
-						header={"Créer un type de document"}
-						cancelText={"Annuler"}
-						confirmText={"Ajouter"}>
-						<div className={classes["add-document-form-container"]}>
-							<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={this.onDocumentNameChange} />
-							<TextAreaField
-								name="description"
-								placeholder="Description visible par le client"
-								onChange={this.onVisibleDescriptionChange}
-							/>
-						</div>
-					</Confirm>
 				</div>
+				{this.state.folder && (
+					<ParameterDocuments
+						folder={this.state.folder}
+						closeModal={this.closeModal}
+						isCreateDocumentModalVisible={this.state.isCreateDocumentModalVisible}
+					/>
+				)}
 			</DefaultNotaryDashboard>
 		);
 	}
@ -128,6 +104,8 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.loadData();
 	}

+	private cancel() {}
+
 	private async loadData() {
 		try {
 			const folder = await Folders.getInstance().getByUid(this.props.folderUid, {
@ -186,72 +164,16 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		return documentTypesOptions;
 	}

-	private canAddDocument() {
-		if (this.state.documentName === "" || this.state.visibleDescription === "") {
-			return false;
-		}
-		return true;
-	}
-
-	private async addDocument() {
-		try {
-			const documentType = await DocumentTypes.getInstance().post({
-				name: this.state.documentName,
-				private_description: this.state.visibleDescription,
-				office: {
-					uid: this.state.folder?.office!.uid!,
-				},
-				public_description: this.state.visibleDescription,
-			});
-
-			const oldDocumentsType = this.state.folder?.deed?.document_types!;
-			await Deeds.getInstance().put(this.state.folder?.deed?.uid!, {
-				document_types: [...oldDocumentsType, documentType],
-			});
-
-			await this.loadData();
-			this.setState({
-				isCreateDocumentModalVisible: false,
-				documentName: "",
-				visibleDescription: "",
-			});
-		} catch (e) {
-			console.error(e);
-		}
-	}
-
-	private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			visibleDescription: e.target.value,
-		});
-	}
-
-	private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			documentName: e.target.value,
-		});
-	}
-
-	private cancel() {
-		this.setState({
-			visibleDescription: "",
-			documentName: "",
-		});
-	}
-
 	private openModal() {
 		this.setState({
 			isCreateDocumentModalVisible: true,
-			visibleDescription: "",
-			documentName: "",
 		});
 	}

 	private closeModal() {
+		this.loadData();
 		this.setState({
 			isCreateDocumentModalVisible: false,
-			visibleDescription: "",
-			documentName: "",
 		});
 	}

--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@ -37,6 +37,7 @@ type IPropsClass = IProps & {
 	isAnchored: AnchorStatus;
 	isLoading: boolean;
 	selectedFolder: OfficeFolder | null;
+	getAnchoringStatus: () => Promise<void>;
 };

 type IState = {
@ -314,7 +315,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {

 	private async anchorFolder() {
 		if (!this.props.selectedFolder?.uid) return;
-		return await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid);
+		await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid);
+		this.props.getAnchoringStatus();
 	}

 	private async downloadAnchoringProof(uid?: string) {
@ -404,6 +406,16 @@ export default function FolderInformation(props: IProps) {
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;

+	const getAnchoringStatus = useCallback(async () => {
+		if (!folderUid) return;
+		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);
+		}
+	}, [folderUid]);
+
 	const getFolder = useCallback(async () => {
 		if (!folderUid) return;
 		setIsLoading(true);
@ -439,17 +451,11 @@ 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);
-			}
+			getAnchoringStatus();
 		}

 		setIsLoading(false);
-	}, [folderUid]);
+	}, [folderUid, getAnchoringStatus]);

 	useEffect(() => {
 		setIsLoading(true);
@ -464,6 +470,7 @@ export default function FolderInformation(props: IProps) {
 			isAnchored={isAnchored}
 			isLoading={isLoading}
 			selectedFolder={selectedFolder}
+			getAnchoringStatus={getAnchoringStatus}
 		/>
 	);
 }