From 2cfd3907b74dfeefd5e210f59fe2fcb8ec3c20c6 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 24 Apr 2023 15:58:21 +0200
Subject: [PATCH] :sparkles: Disable arrows when nothing previous/next

---
 .../Folder/ViewDocuments/classes.module.scss  |  7 +-
 .../Layouts/Folder/ViewDocuments/index.tsx    | 76 ++++++++++++-------
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
index 752f6dcc..61d7d101 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
@@ -15,9 +15,14 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		
+
 		.arrow-container{
 			cursor: pointer;
+
+			&[data-disabled="true"]{
+				opacity: 0.3;
+				cursor: not-allowed;
+			}
 		}
 
 		.file-container{
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 50e1ad52..27b7209e 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -1,5 +1,6 @@
 import "reflect-metadata";
-
+import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
+import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
@@ -17,13 +18,11 @@ import React from "react";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 
-import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
-import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 
 type IProps = {};
 type IPropsClass = {
 	documentsList: Document[];
-	selectedDocument:  Document | null;
+	selectedDocument: Document | null;
 	router: NextRouter;
 	folderUid: string;
 };
@@ -47,7 +46,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			refuseText: "",
 			hasValidateAnchoring: false,
 			selectedDocument: null,
-			selectedDocumentIndex: -1
+			selectedDocumentIndex: -1,
 		};
 
 		this.closeModals = this.closeModals.bind(this);
@@ -55,6 +54,11 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.openRefuseModal = this.openRefuseModal.bind(this);
 		this.onRefuseTextChange = this.onRefuseTextChange.bind(this);
 		this.validateAnchoring = this.validateAnchoring.bind(this);
+		this.goToNext = this.goToNext.bind(this);
+		this.goToPrevious = this.goToPrevious.bind(this);
+
+		this.hasPrevious = this.hasPrevious.bind(this);
+		this.hasNext = this.hasNext.bind(this);
 	}
 
 	public override render(): JSX.Element | null {
@@ -69,17 +73,21 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							{this.state.selectedDocument.document_type.name}
 						</Typography>
 						<div className={classes["document-container"]}>
-							<div className={classes["arrow-container"]} onClick={this.goToPrevious()}>
-								<Image src={LeftArrowIcon} alt="left arrow" />
-							</div>
+							{this.props.documentsList.length > 1 && (
+								<div className={classes["arrow-container"]} onClick={this.goToPrevious} data-disabled={(!this.hasPrevious()).toString()}>
+									<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>
+							{this.props.documentsList.length > 1 && (
+								<div className={classes["arrow-container"]} onClick={this.goToNext} data-disabled={(!this.hasNext()).toString()}>
+									<Image src={RightArrowIcon} alt="right arrow" />
+								</div>
+							)}
 						</div>
 						<div className={classes["buttons-container"]}>
 							<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
@@ -148,7 +156,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	}
 
 	override componentDidMount(): void {
-		if(!this.props.selectedDocument) return;
+		if (!this.props.selectedDocument) return;
 		this.setState({
 			selectedDocument: this.props.selectedDocument,
 			selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
@@ -163,27 +171,33 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			});
 		}
 	}
-	
+
 	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}`)
-		};
+		if (this.hasPrevious()) {
+			this.props.router.push(
+				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.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}`)
+		if (this.hasNext()) {
+			this.props.router.push(
+				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
+			);
 		}
 	}
 
+	private hasPrevious() {
+		const index = this.state.selectedDocumentIndex - 1;
+		return index >= 0;
+	}
+
+	private hasNext() {
+		const index = this.state.selectedDocumentIndex + 1;
+		return index < this.props.documentsList.length;
+	}
+
 	private validateAnchoring() {
 		this.setState({
 			hasValidateAnchoring: true,
@@ -224,5 +238,13 @@ export default function ViewDocuments(props: IProps) {
 	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}
+			documentsList={documents}
+			selectedDocument={selectedDocument}
+			router={router}
+			folderUid={folderUid as string}
+		/>
+	);
 }