✨ Only one user folder opened working

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -22,12 +22,10 @@ type IProps = {
 	folder: IDashBoardFolder;
 	isArchived?: boolean;
 	isOpened: boolean;
-	onOpen: (id: string) => void;
-	onClose: () => void;
+	onChange: (id: string) => void;
 };
 type IState = {
 	isOpenDeletionModal: boolean;
-	willClose: boolean;
 };
 
 export default class UserFolder extends React.Component<IProps, IState> {
@@ -41,13 +39,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		super(props);
 		this.state = {
 			isOpenDeletionModal: false,
-			willClose: false,
 		};
-		this.toggleOpen = this.toggleOpen.bind(this);
 		this.closeDeletionModal = this.closeDeletionModal.bind(this);
 		this.openDeletionModal = this.openDeletionModal.bind(this);
-		this.openComponent = this.openComponent.bind(this);
-		this.closeComponent = this.closeComponent.bind(this);
+		this.changeUserFolder = this.changeUserFolder.bind(this);
 	}
 	public override render(): JSX.Element {
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
@@ -67,7 +62,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 					Êtes-vous vous de vouloir supprimer la demande de document ?
 				</Confirm>
 
-				<div className={classes["header"]} onClick={this.toggleOpen}>
+				<div className={classes["header"]} onClick={this.changeUserFolder}>
 					<UserFolderHeader
 						customer={this.props.customer}
 						folder={this.props.folder}
@@ -77,12 +72,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
 						src={ChevronIcon}
 						alt="chevron open close"
 						className={classNames(classes["chevron-icon"], this.props.isOpened && classes["open"])}
-						onClick={this.toggleOpen}
+						onClick={this.changeUserFolder}
 					/>
 				</div>
 
 				{this.props.isOpened && (
-					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
+					<div className={classes["container"]} ref={this.rootRefElement}>
 						<QuantityProgressBar
 							title="Complétion du dossier client"
 							total={100}
@@ -123,16 +118,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	public override componentDidUpdate(prevProps: IProps): void {
 		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
-		
-		if(prevProps.isOpened !== this.props.isOpened) {
-			if(this.props.isOpened) {
-				this.openComponent();
-			}else{
-				this.closeComponent();
 	}
-		}	
-	}
-
 
 	private calculateDocumentsPercentageProgress(): number {
 		if (!this.props.customer.documents) return 0;
@@ -165,27 +151,9 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	// 	return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
 	// }
 
-	private toggleOpen(): void {
-		if (this.props.isOpened) {
-			this.closeComponent();
-		} else {
-			this.openComponent();
-		}
-	}
 
-	private openComponent(): void {
-		this.props.onOpen(this.props.folder.uid!);
-	}
-
-	private closeComponent(): void {
-		if (this.state.willClose) return;
-		this.setState({ willClose: true });
-		window.setTimeout(() => {
-			this.props.onClose();
-			this.setState({
-				willClose: false,
-			});
-		}, this.props.animationDelay);
+	private changeUserFolder(){
+		this.props.onChange(this.props.customer.uid!);
 	}
 
 	private openDeletionModal(uid?: string): void {

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

@@ -23,8 +23,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 			openedCustomer: "",
 		};
 
-		this.selectUserFolder = this.selectUserFolder.bind(this);
-		this.closeUserFolder = this.closeUserFolder.bind(this);
+		this.changeUserFolder = this.changeUserFolder.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -63,15 +62,13 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	private renderCustomerFolders() {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, index) => {
 			if (!folderHasCustomer.customer) return null;
-			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
 			return (
 				<UserFolder
 					folder={this.props.folder}
 					customer={folderHasCustomer.customer}
-					key={this.props.folder.uid}
-					isOpened={this.state.openedCustomer === this.props.folder.uid}
-					onOpen={this.selectUserFolder}
-					onClose={this.closeUserFolder}
+					key={folderHasCustomer.customer.uid}
+					isOpened={this.state.openedCustomer === folderHasCustomer.customer.uid}
+					onChange={this.changeUserFolder}
 				/>
 			);
 		});
@@ -79,15 +76,10 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	}
 
 
-	private closeUserFolder() {
+	private changeUserFolder(uid: string) {
+		console.log("changeUserFolder", uid)
 		this.setState({
-			openedCustomer: "",
-		});
-	}
-
-	private selectUserFolder(index: string) {
-		this.setState({
-			openedCustomer: index,
+			openedCustomer: uid === this.state.openedCustomer ? "" : uid,
 		});
 	}