From 040906173e3d9a1e4e43053eee7c8b5627f646a1 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 2 Oct 2023 16:02:27 +0200 Subject: [PATCH 1/2] :sparkles: Folder loading refacto --- .../Folder/FolderInformation/index.tsx | 130 +++++++++--------- 1 file changed, 68 insertions(+), 62 deletions(-) diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index e07138ca..4c4bdfc7 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -27,7 +27,6 @@ enum AnchorStatus { "VERIFIED_ON_CHAIN" = "VERIFIED_ON_CHAIN", "ANCHORING" = "ANCHORING", "NOT_ANCHORED" = "NOT_ANCHORED", - "FETCHING" = "FETCHING", } type IProps = {}; @@ -36,10 +35,11 @@ type IPropsClass = IProps & { router: NextRouter; selectedFolderUid: string; isAnchored: AnchorStatus; + isLoading: boolean; + selectedFolder: OfficeFolder | null; }; type IState = { - selectedFolder: OfficeFolder | null; isArchivedModalOpen: boolean; inputArchivedDescripton: string; isValidateModalVisible: boolean; @@ -51,7 +51,6 @@ class FolderInformationClass extends BasePage { public constructor(props: IPropsClass) { super(props); this.state = { - selectedFolder: null, isArchivedModalOpen: false, inputArchivedDescripton: "", isValidateModalVisible: false, @@ -59,7 +58,6 @@ class FolderInformationClass extends BasePage { isVerifDeleteModalVisible: false, isPreventArchiveModalOpen: false, }; - this.onSelectedFolder = this.onSelectedFolder.bind(this); this.openArchivedModal = this.openArchivedModal.bind(this); this.closeArchivedModal = this.closeArchivedModal.bind(this); this.onArchivedModalAccepted = this.onArchivedModalAccepted.bind(this); @@ -77,17 +75,15 @@ class FolderInformationClass extends BasePage { // TODO: Message if the user has not created any folder yet // TODO: get the selected folder from the api in componentDidMount public override render(): JSX.Element { + console.log("Loading : ", this.props.isLoading); + console.log("Anchor status : ", this.props.isAnchored); const redirectPathEditCollaborators = Module.getInstance() .get() .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid); return ( - +
- {this.state.selectedFolder ? ( + {this.props.selectedFolder ? (
@@ -100,9 +96,9 @@ class FolderInformationClass extends BasePage {
- +
- +
{ currentNumber={this.getCompletionNumber()} />
- {this.doesFolderHaveCustomer() && } + {this.doesFolderHaveCustomer() && }
- {!this.doesFolderHaveCustomer() && } + {!this.doesFolderHaveCustomer() && }
- {this.everyDocumentValidated() && ( + {this.everyDocumentValidated() && !this.props.isLoading && ( <> {this.props.isAnchored === AnchorStatus.NOT_ANCHORED && ( )} @@ -245,13 +241,6 @@ class FolderInformationClass extends BasePage { ); } - public override async componentDidMount() { - const selectedFolder = await this.getFolder(); - this.setState({ - selectedFolder, - }); - } - private closePreventArchiveModal() { this.setState({ isPreventArchiveModalOpen: false, @@ -311,8 +300,8 @@ class FolderInformationClass extends BasePage { } private async anchorFolder() { - if (!this.state.selectedFolder?.uid) return; - return await OfficeFolderAnchors.getInstance().post(this.state.selectedFolder.uid); + if (!this.props.selectedFolder?.uid) return; + return await OfficeFolderAnchors.getInstance().post(this.props.selectedFolder.uid); } private async downloadAnchoringProof(uid?: string) { @@ -325,7 +314,7 @@ class FolderInformationClass extends BasePage { a.style.display = "none"; a.href = url; // the filename you want - a.download = `anchoring_proof_${this.state.selectedFolder?.folder_number}_${this.state.selectedFolder?.name}.pdf`; + a.download = `anchoring_proof_${this.props.selectedFolder?.folder_number}_${this.props.selectedFolder?.name}.pdf`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); @@ -335,21 +324,21 @@ class FolderInformationClass extends BasePage { } private everyDocumentValidated(): boolean { - if (!this.state.selectedFolder?.documents) return false; + if (!this.props.selectedFolder?.documents) return false; return ( - this.state.selectedFolder?.documents?.length >= 1 && - this.state.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED) + this.props.selectedFolder?.documents?.length >= 1 && + this.props.selectedFolder?.documents.every((document) => document.document_status === EDocumentStatus.VALIDATED) ); } private async deleteFolder() { - if (!this.state.selectedFolder?.uid) return; - await Folders.getInstance().delete(this.state.selectedFolder.uid); + if (!this.props.selectedFolder?.uid) return; + await Folders.getInstance().delete(this.props.selectedFolder.uid); this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path); } private getCompletionNumber() { - const documents = this.state.selectedFolder?.documents; + const documents = this.props.selectedFolder?.documents; if (!documents) return 0; const totalDocuments = documents.length; const refusedDocuments = documents.filter((document) => document.document_status === EDocumentStatus.REFUSED).length ?? 0; @@ -363,12 +352,8 @@ class FolderInformationClass extends BasePage { } private doesFolderHaveCustomer(): boolean { - if (!this.state.selectedFolder?.customers) return false; - return this.state.selectedFolder?.customers!.length > 0; - } - - private onSelectedFolder(folder: OfficeFolder): void { - this.setState({ selectedFolder: folder }); + if (!this.props.selectedFolder?.customers) return false; + return this.props.selectedFolder?.customers!.length > 0; } private openArchivedModal(): void { @@ -388,15 +373,38 @@ class FolderInformationClass extends BasePage { } private async onArchivedModalAccepted() { - if (!this.state.selectedFolder) return; - const ressourceFolder = OfficeFolder.hydrate(this.state.selectedFolder); + if (!this.props.selectedFolder) return; + const ressourceFolder = OfficeFolder.hydrate(this.props.selectedFolder); ressourceFolder.archived_description = this.state.inputArchivedDescripton; - await Folders.getInstance().archive(this.state.selectedFolder.uid ?? "", ressourceFolder); + await Folders.getInstance().archive(this.props.selectedFolder.uid ?? "", ressourceFolder); this.closeArchivedModal(); this.props.router.push(Module.getInstance().get().modules.pages.Folder.props.path); } +} - private async getFolder(): Promise { +export default function FolderInformation(props: IProps) { + const router = useRouter(); + const [isAnchored, setIsAnchored] = useState(AnchorStatus.NOT_ANCHORED); + const [isLoading, setIsLoading] = useState(true); + const [selectedFolder, setSelectedFolder] = useState(null); + + 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; const query = { q: { deed: { include: { deed_type: true } }, @@ -426,30 +434,28 @@ class FolderInformationClass extends BasePage { }, }; - const folder = await Folders.getInstance().getByUid(this.props.selectedFolderUid, query); - return folder; - } -} - -export default function FolderInformation(props: IProps) { - const router = useRouter(); - const [isAnchored, setIsAnchored] = useState(AnchorStatus.FETCHING); - let { folderUid } = router.query; - folderUid = folderUid as string; - - 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); + const folder = await Folders.getInstance().getByUid(folderUid as string, query); + if (folder) { + setSelectedFolder(folder); } }, [folderUid]); useEffect(() => { verifyAnchorStatus(); - }, [folderUid, verifyAnchorStatus]); + getFolder(); + }, [verifyAnchorStatus, getFolder]); - return ; + useEffect(() => { + setIsLoading(true); + }, [folderUid]); + return ( + + ); } From 1fa331e3292775a1ce3a3d4c91f90af652ec635d Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 2 Oct 2023 16:03:28 +0200 Subject: [PATCH 2/2] :bug: Forgot console log --- src/front/Components/Layouts/Folder/FolderInformation/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index 4c4bdfc7..828443ae 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -75,8 +75,6 @@ class FolderInformationClass extends BasePage { // TODO: Message if the user has not created any folder yet // TODO: get the selected folder from the api in componentDidMount public override render(): JSX.Element { - console.log("Loading : ", this.props.isLoading); - console.log("Anchor status : ", this.props.isAnchored); const redirectPathEditCollaborators = Module.getInstance() .get() .modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);