From b8c99eaa770c578dd2324797d69a86f673897366 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 20 Apr 2023 11:21:43 +0200
Subject: [PATCH] :sparkles: Active folder

---
 .../FolderList/classes.module.scss            |  3 +++
 .../DesignSystem/FolderList/index.tsx         | 26 +++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss
index f68b3ab0..8b1f302f 100644
--- a/src/front/Components/DesignSystem/FolderList/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderList/classes.module.scss
@@ -1,4 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
+	.active {
+		background-color: var(--grey-medium);
+	}
 }
diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx
index 8eb7f12a..f6129161 100644
--- a/src/front/Components/DesignSystem/FolderList/index.tsx
+++ b/src/front/Components/DesignSystem/FolderList/index.tsx
@@ -1,8 +1,10 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import FolderContainer from "../FolderContainer";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+
+import FolderContainer from "../FolderContainer";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folders: IDashBoardFolder[];
@@ -10,15 +12,22 @@ type IProps = {
 	onCloseLeftSide?: () => void;
 };
 
+type IPropsClass = IProps & {
+	selectedFolder: string;
+};
+
 type IState = {};
 
-export default class FolderList extends React.Component<IProps, IState> {
+class FolderListClass extends React.Component<IPropsClass, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
 				{this.props.folders.map((folder) => {
 					return (
-						<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+						<div
+							onClick={this.props.onCloseLeftSide}
+							key={folder.uid}
+							className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
 							<Link href={"/folder/".concat(folder.uid)}>
 								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
 							</Link>
@@ -30,3 +39,10 @@ export default class FolderList extends React.Component<IProps, IState> {
 		);
 	}
 }
+
+export default function FolderList(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <FolderListClass {...props} selectedFolder={folderUid} />;
+}