From bdc690600ef6d1332e700b6a3bc8e15ca598edba Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Mon, 17 Apr 2023 11:53:58 +0200
Subject: [PATCH] :art: add back arrow to folde/uid on add client page

---
 .../Components/DesignSystem/Button/index.tsx  |  5 +++-
 .../Layouts/AddClientToFolder/index.tsx       | 28 +++++++++++++++----
 .../Layouts/FolderInformation/index.tsx       |  1 +
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index d399288a..1a5af191 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -19,6 +19,7 @@ type IProps = {
 	disabled?: boolean;
 	type?: "button" | "submit";
 	isloading?: string;
+	iconPosition?: "left" | "right";
 };
 
 export default function Button(props: IProps) {
@@ -28,6 +29,7 @@ export default function Button(props: IProps) {
 		type = "button",
 		isloading = "false",
 		fullwidth = "false",
+		iconPosition = "right",
 		onClick,
 		children,
 		icon,
@@ -38,8 +40,9 @@ export default function Button(props: IProps) {
 	delete attributes.icon;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
+			{icon && iconPosition === "left" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
 			{children}
-			{icon && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconPosition === "right" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
 		</button>
 	);
 }
diff --git a/src/front/Components/Layouts/AddClientToFolder/index.tsx b/src/front/Components/Layouts/AddClientToFolder/index.tsx
index 1949bdce..d5c86ef9 100644
--- a/src/front/Components/Layouts/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/AddClientToFolder/index.tsx
@@ -10,15 +10,19 @@ import { IOption } from "@Front/Components/DesignSystem/Select";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Form from "@Front/Components/DesignSystem/Form";
 import ChevonIcon from "@Assets/icons/chevron.svg";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
-type IProps = {};
+type IProps = {
+	selectedFolderUid: string;
+};
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isExistingClientSelected: boolean;
 	isNewClientSelected: boolean;
 	hasNewClientSelected: boolean;
 };
-export default class AddClientToFolder extends BasePage<IProps, IState> {
+class AddClientToFolderClass extends BasePage<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -32,7 +36,6 @@ export default class AddClientToFolder extends BasePage<IProps, IState> {
 		this.onNewClientSelected = this.onNewClientSelected.bind(this);
 		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
 	}
-
 	public override render(): JSX.Element {
 		const selectOptions = [
 			{ value: "adazzdsqaad", label: "john Doe" },
@@ -42,9 +45,15 @@ export default class AddClientToFolder extends BasePage<IProps, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					<Button icon={ChevonIcon} variant={EButtonVariant.LINE}>
-						Retour
-					</Button>
+					<Link href={"/dossier/".concat(this.props.selectedFolderUid)}>
+						<Button
+							icon={ChevonIcon}
+							iconPosition={"left"}
+							iconStyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+							variant={EButtonVariant.LINE}>
+							Retour
+						</Button>
+					</Link>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
 					<Form>
 						<div className={classes["radiobox-container"]}>
@@ -109,3 +118,10 @@ export default class AddClientToFolder extends BasePage<IProps, IState> {
 		this.setState({ isExistingClientSelected: false, isNewClientSelected: true });
 	}
 }
+
+export default function AddClientToFolder() {
+	const router = useRouter();
+	let { uid } = router.query;
+	uid = uid as string;
+	return <AddClientToFolderClass selectedFolderUid={uid} />;
+}
diff --git a/src/front/Components/Layouts/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderInformation/index.tsx
index 55907900..ee1b6d25 100644
--- a/src/front/Components/Layouts/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderInformation/index.tsx
@@ -31,6 +31,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	}
 
 	// TODO: Message if the user has not created any folder yet
+	// TODO: get the selected folder from the api in componentDidMount
 	public override render(): JSX.Element {
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>