✨ Multiple files working

src/front/Assets/Icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6L9 12L15 18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/front/Assets/Icons/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -106,7 +106,7 @@ export const document: Document = {
 };
 
 export const fileMock: File = {
-	uid: "super_file_uid",
+	uid: "super_file_uid_1",
 	created_at: new Date(),
 	updated_at: new Date(),
 	document: document,
@@ -114,6 +114,15 @@ export const fileMock: File = {
 		"https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf",
 };
 
+export const fileMock2: File = {
+	uid: "super_file_uid_2",
+	created_at: new Date(),
+	updated_at: new Date(),
+	document: document,
+	file_path:
+		"https://minteed-prod-euwest3-s3.s3.eu-west-3.amazonaws.com/Qm_Wq_En1_DCA_8yt_RX_Qx_QFA_9_Fm_ZKZH_Qqb_VH_1_Q_Mnv_G_Jtt1_FS_Xp_2a35a36e19",
+};
+
 export const documentPending: Document = {
 	uid: "fzefeazdagrtetrury",
 	depositor: customer,
@@ -122,7 +131,7 @@ export const documentPending: Document = {
 	document_type: docType,
 	updated_at: new Date(),
 	created_at: new Date(),
-	files: [fileMock],
+	files: [fileMock2],
 };
 
 export const documentDeposited: Document = {

src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss

@@ -9,10 +9,20 @@
 		margin-top: 32px;
 	}
 
-	.file-container {
+	.document-container {
-		min-height: 700px;
 		margin-top: 32px;
-		@media (max-width: $screen-s) {
+		gap: 64px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		
+		.arrow-container{
+			cursor: pointer;
+		}
+
+		.file-container{
+			min-height: 700px;
+			flex: 1;
 		}
 	}
 

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -1,3 +1,5 @@
+import "reflect-metadata";
+
 import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
@@ -9,23 +11,30 @@ import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { Document } from "le-coffre-resources/dist/Customer";
 import Image from "next/image";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 
-import "reflect-metadata";
+import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
+import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 
 type IProps = {};
 type IPropsClass = {
-	selectedDocument: Document | null;
+	documentsList: Document[];
+	selectedDocument:  Document | null;
+	router: NextRouter;
+	folderUid: string;
 };
+
 type IState = {
 	isRefuseModalVisible: boolean;
 	isValidateModalVisible: boolean;
 	refuseText: string;
 	hasValidateAnchoring: boolean;
+	selectedDocument: Document | null;
+	selectedDocumentIndex: number;
 };
 
 class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
@@ -37,6 +46,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			isRefuseModalVisible: false,
 			refuseText: "",
 			hasValidateAnchoring: false,
+			selectedDocument: null,
+			selectedDocumentIndex: -1
 		};
 
 		this.closeModals = this.closeModals.bind(this);
@@ -49,18 +60,26 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	public override render(): JSX.Element | null {
 		return (
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
-				{this.props.selectedDocument && (
+				{this.state.selectedDocument && (
 					<div className={classes["root"]}>
 						<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
 							App 23 rue Torus Toulon
 						</Typography>
 						<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
-							{this.props.selectedDocument.document_type.name}
+							{this.state.selectedDocument.document_type.name}
 						</Typography>
-						<div className={classes["file-container"]}>
+						<div className={classes["document-container"]}>
-							{this.props.selectedDocument.files?.map((file) => (
+							<div className={classes["arrow-container"]} onClick={this.goToPrevious()}>
-								<FilePreview href={file.file_path as string} key={file.uid} />
+								<Image src={LeftArrowIcon} alt="left arrow" />
-							))}
+							</div>
+							<div className={classes["file-container"]}>
+								{this.state.selectedDocument.files?.map((file) => (
+									<FilePreview href={file.file_path as string} key={file.uid} />
+								))}
+							</div>
+							<div className={classes["arrow-container"]} onClick={this.goToNext()}>
+								<Image src={RightArrowIcon} alt="right arrow" />
+							</div>
 						</div>
 						<div className={classes["buttons-container"]}>
 							<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
@@ -117,7 +136,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 						</Confirm>
 					</div>
 				)}
-				{!this.props.selectedDocument && (
+				{!this.state.selectedDocument && (
 					<div className={classes["root"]}>
 						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
@@ -128,6 +147,43 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 
+	override componentDidMount(): void {
+		if(!this.props.selectedDocument) return;
+		this.setState({
+			selectedDocument: this.props.selectedDocument,
+			selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
+		});
+	}
+
+	override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, snapshot?: any): void {
+		if (prevProps.selectedDocument !== this.props.selectedDocument) {
+			this.setState({
+				selectedDocument: this.props.selectedDocument,
+				selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
+			});
+		}
+	}
+	
+	private goToPrevious() {
+		return () => {
+			const index = this.state.selectedDocumentIndex - 1;
+			if (index < 0) {
+				return;
+			}
+			this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`)
+		};
+	}
+
+	private goToNext() {
+		return () => {
+			const index = this.state.selectedDocumentIndex + 1;
+			if (index >= this.props.documentsList.length) {
+				return;
+			}
+			this.props.router.push(`/folder/${this.props.folderUid}/document/${this.props.documentsList[index]!.uid}`)
+		}
+	}
+
 	private validateAnchoring() {
 		this.setState({
 			hasValidateAnchoring: true,
@@ -163,12 +219,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 export default function ViewDocuments(props: IProps) {
 	const router = useRouter();
 	let { folderUid, documentUid } = router.query;
-	folderUid = folderUid as string;
 
 	const folder = folders[0]!;
 	const documents = folder.documents!;
 
 	const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
-
+	return <ViewDocumentsClass {...props} documentsList={documents} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string}/>;
-	return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} />;
 }