✨ Handling default files

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

@@ -9,12 +9,12 @@ import Button, { EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
-import { Document } from "le-coffre-resources/dist/Customer";
+import { File as FileCustomer } from "le-coffre-resources/dist/Customer";
 
 type IProps = {
 	title: string;
 	dateAsked: Date;
-	defaultDocuments?: Document[];
+	defaultFiles?: FileCustomer[];
 	onChange?: (files: File[]) => void;
 };
 
@@ -80,7 +80,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
 										<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-											{fileObj.name}
+											{this.shortName(fileObj.name)}
 										</Typography>
 									</div>
 									<Image
@@ -107,6 +107,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		);
 	}
 
+	public override componentDidMount(): void {
+		console.log(this.props.defaultFiles);
+		if (this.props.defaultFiles) {
+			this.setState({
+				files: this.props.defaultFiles.map((file) => ({
+					index: this.index++,
+					file: new File([""], file.file_path, {}),
+				})),
+			});
+		}
+	}
+
+    private shortName(name: string): string {
+        const maxLength = 20;
+        if (name.length > maxLength) {
+            return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length);
+        }
+        return name;
+    }
+
 	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
 		if (!this.state.isDragOver) {
 			this.setState({
@@ -143,7 +163,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			],
 		});
 
-        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
+		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private removeFile(e: any) {
@@ -154,7 +174,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
 		});
 
-        if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
+		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private async onFileChange() {

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -6,7 +6,7 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import Base from "@Front/Components/Layouts/Base";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import React from "react";
-
+import { documentDeposited } from "../DesignSystem/dummyData";
 import classes from "./classes.module.scss";
 
 type IProps = {};
@@ -31,7 +31,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
 					{this.renderHeader()}
 					<div className={classes["sub-container"]}>
 						<div className={classes["content"]}>
-							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
+							<DepositDocument
+								title={"Carte d'identité - recto-verso"}
+								dateAsked={new Date()}
+								defaultFiles={documentDeposited.files ?? []}
+							/>
 							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
 							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
 							<DepositDocument title={"Carte d'identité - recto-verso"} dateAsked={new Date()} />
@@ -40,10 +44,10 @@ export default class ClientDashboard extends Base<IProps, IState> {
 						</div>
 						<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
-							Vous souhaitez envoyer d’autres documents à votre notaire ?
+							Vous souhaitez envoyer d'autres documents à votre notaire ?
 						</Typography>
 						<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
-							Ajouter d’autres documents
+							Ajouter d'autres documents
 						</Button>
 					</div>
 					<Confirm