4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Folder loading refacto

Browse Source
This commit is contained in:
Maxime Lalo 2023-10-02 16:02:27 +02:00
parent 008b755dfd
commit 040906173e
1 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/front/Components/Layouts/Folder/FolderInformation/index.tsx
View File

@ -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<IPropsClass, IState> {
public constructor(props: IPropsClass) {
super(props);
this.state = {
selectedFolder: null,
isArchivedModalOpen: false,
inputArchivedDescripton: "",
isValidateModalVisible: false,
@ -59,7 +58,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
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<IPropsClass, IState> {
// 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 (
<DefaultNotaryDashboard
title={"Dossier"}
onSelectedFolder={this.onSelectedFolder}
isArchived={false}
mobileBackText="Retour aux dossiers">
<DefaultNotaryDashboard title={"Dossier"} isArchived={false} mobileBackText="Retour aux dossiers">
<div className={classes["root"]}>
{this.state.selectedFolder ? (
{this.props.selectedFolder ? (
<div className={classes["folder-informations"]}>
<div className={classes["folder-header"]}>
<div className={classes["header"]}>
@ -100,9 +96,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
</Button>
</Link>
</div>
<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
<div className={classes["second-box"]}>
<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
<FolderBoxInformation folder={this.props.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
</div>
<div className={classes["progress-bar"]}>
<QuantityProgressBar
@ -111,16 +107,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
currentNumber={this.getCompletionNumber()}
/>
</div>
{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
{this.doesFolderHaveCustomer() && <ClientSection folder={this.props.selectedFolder} />}
</div>
{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.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.everyDocumentValidated() && !this.props.isLoading && (
<>
{this.props.isAnchored === AnchorStatus.NOT_ANCHORED && (
<Button variant={EButtonVariant.PRIMARY} onClick={this.openValidateModal}>
@ -136,7 +132,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
<Button
variant={EButtonVariant.PRIMARY}
onClick={() => this.downloadAnchoringProof(this.state.selectedFolder?.uid)}>
onClick={() => this.downloadAnchoringProof(this.props.selectedFolder?.uid)}>
Télécharger la preuve d'ancrage
</Button>
)}
@ -245,13 +241,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
);
}
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<IPropsClass, IState> {
}
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<IPropsClass, IState> {
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<IPropsClass, IState> {
}
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<IPropsClass, IState> {
}
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<IPropsClass, IState> {
}
private async onArchivedModalAccepted() {
if (!this.state.selectedFolder) return;
const ressourceFolder = OfficeFolder.hydrate<OfficeFolder>(this.state.selectedFolder);
if (!this.props.selectedFolder) return;
const ressourceFolder = OfficeFolder.hydrate<OfficeFolder>(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<OfficeFolder> {
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;
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<IPropsClass, IState> {
},
};
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>(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 <FolderInformationClass {...props} selectedFolderUid={folderUid} router={router} isAnchored={isAnchored} />;
useEffect(() => {
setIsLoading(true);
}, [folderUid]);
return (
<FolderInformationClass
{...props}
selectedFolderUid={folderUid}
router={router}
isAnchored={isAnchored}
isLoading={isLoading}
selectedFolder={selectedFolder}
/>
);
}