✨ Mocking files in folders

src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss

@@ -7,11 +7,22 @@
 	justify-content: space-between;
 	align-items: center;
 	&.PENDING {
-		border-color: $orange-soft;
+		cursor: pointer;
+		border: 1px solid $orange-soft;
+		&:hover {
+			border: 1px solid $orange-soft;
+			outline: 1px solid $orange-soft;
+		}
 	}
 	&.VALIDATED {
-		border-color: $green-soft;
+		cursor: pointer;
+		border: 1px solid $green-soft;
+		&:hover {
+			border: 1px solid $green-soft;
+			outline: 1px solid $green-soft;
 		}
+	}
+
 	.valid-radius {
 		background-color: $green-flash;
 		padding: 6px;

src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx

@@ -1,12 +1,14 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import { Document } from "le-coffre-resources/dist/Customer";
-import Typography, { ITypo } from "../../Typography";
-import Image from "next/image";
-import TrashIcon from "@Assets/Icons/trash.svg";
 import ValidIcon from "@Assets/Icons/check-valid.svg";
+import TrashIcon from "@Assets/Icons/trash.svg";
 import classNames from "classnames";
+import { Document } from "le-coffre-resources/dist/Customer";
+import Image from "next/image";
+import { NextRouter, useRouter } from "next/router";
+import React from "react";
+
+import Typography, { ITypo } from "../../Typography";
 import WarningBadge from "../../WarningBadge";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	document: {
@@ -16,16 +18,22 @@ type IProps = {
 	};
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
+
+type IPropsClass = IProps & {
+	router: NextRouter;
+};
+
 type IState = {};
 
-export default class DocumentNotary extends React.Component<IProps, IState> {
+class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
-	public constructor(props: IProps) {
+	public constructor(props: IPropsClass) {
 		super(props);
 		this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
+		this.onClick = this.onClick.bind(this);
 	}
 	public override render(): JSX.Element {
 		return (
-			<div className={classNames(classes["root"], classes[this.props.document.document_status])}>
+			<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
 				<div>
 					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
 					<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
@@ -35,6 +43,11 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		);
 	}
 
+	private onClick() {
+		if (this.props.document.document_status !== "VALIDATED" && this.props.document.document_status !== "PENDING") return;
+		this.props.router.push(`/folder/${this.props.document.folder.uid}/document/${this.props.document.uid}`);
+	}
+
 	private renderIcon(): JSX.Element {
 		switch (this.props.document.document_status) {
 			case "VALIDATED":
@@ -55,3 +68,8 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		this.props.openDeletionModal(this.props.document.uid);
 	}
 }
+
+export default function DocumentNotary(props: IProps): JSX.Element {
+	const router = useRouter();
+	return <DocumentNotaryClass {...props} router={router} />;
+}

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

@@ -121,9 +121,10 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	private getDocumentsByStatus(status: string): Document[] | null {
 		if (!this.props.customer.documents) return null;
-		return this.props.customer.documents.filter(
+		const filteredDocuments = this.props.customer.documents.filter(
 			(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
 		);
+		return filteredDocuments;
 	}
 
 	// Get all documents Validated, pending

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

@@ -81,7 +81,7 @@ export const customer: Customer = {
 	status: ECustomerStatus.VALIDATED,
 };
 export const folder: OfficeFolder = {
-	uid: "zfaefergregrezterf",
+	uid: "mkovrijvrezviev",
 	folder_number: "12331",
 	name: "Mon dossier",
 	status: EFolderStatus.ARCHIVED,
@@ -93,6 +93,8 @@ export const folder: OfficeFolder = {
 	archived_description: "Archived description",
 };
 
+
+
 export const document: Document = {
 	uid: "fzeafergreztyzgrf",
 	depositor: customer,
@@ -103,16 +105,6 @@ export const document: Document = {
 	created_at: new Date(),
 };
 
-export const documentPending: Document = {
-	uid: "fzefeazdagrtetrury",
-	depositor: customer,
-	document_status: "PENDING",
-	folder: folder,
-	document_type: docType,
-	updated_at: new Date(),
-	created_at: new Date(),
-};
-
 export const fileMock: File = {
 	uid: "super_file_uid",
 	created_at: new Date(),
@@ -122,6 +114,17 @@ 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 documentPending: Document = {
+	uid: "fzefeazdagrtetrury",
+	depositor: customer,
+	document_status: "PENDING",
+	folder: folder,
+	document_type: docType,
+	updated_at: new Date(),
+	created_at: new Date(),
+	files: [fileMock],
+};
+
 export const documentDeposited: Document = {
 	uid: "uè§u§htfgrthytrgr",
 	depositor: customer,

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

@@ -1,5 +1,3 @@
-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,18 +7,19 @@ import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 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 React from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
-import { Document } from "le-coffre-resources/dist/Customer";
 
+import "reflect-metadata";
 
 type IProps = {};
 type IPropsClass = {
-	selectedDocument: Document;
+	selectedDocument: Document | null;
 };
 type IState = {
 	isRefuseModalVisible: boolean;
@@ -47,12 +46,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.validateAnchoring = this.validateAnchoring.bind(this);
 	}
 
-	public override render(): JSX.Element {
+	public override render(): JSX.Element | null {
 		return (
-			<DefaultNotaryDashboard
+			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
-				title={"Demander des documents"}
+				{this.props.selectedDocument && (
-				hasBackArrow
-				mobileBackText="Retour aux documents">
 					<div className={classes["root"]}>
 						<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
 							App 23 rue Torus Toulon
@@ -119,6 +116,14 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							</div>
 						</Confirm>
 					</div>
+				)}
+				{!this.props.selectedDocument && (
+					<div className={classes["root"]}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+							Document non trouvé
+						</Typography>
+					</div>
+				)}
 			</DefaultNotaryDashboard>
 		);
 	}
@@ -157,11 +162,13 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 
 export default function ViewDocuments(props: IProps) {
 	const router = useRouter();
-	let { folderUid } = router.query;
+	let { folderUid, documentUid } = router.query;
 	folderUid = folderUid as string;
 
 	const folder = folders[0]!;
 	const documents = folder.documents!;
-	const selecteDocument = documents[2]!;
+
-	return <ViewDocumentsClass {...props} selectedDocument={selecteDocument}/>;
+	const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
+
+	return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} />;
 }