From 02994a29591fbb9cc1b6a65cc8783ecd308b8956 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:37:22 +0200
Subject: [PATCH] :sparkles: New left nav everywhere + fix button

---
 .../FolderArchivedListContainer/index.tsx     | 33 +---------
 .../SearchBlockList/BlockList/Block/index.tsx |  4 +-
 .../SearchBlockList/classes.module.scss       |  1 -
 .../DesignSystem/SearchBlockList/index.tsx    | 17 +++--
 .../DesignSystem/Typography/index.tsx         |  1 +
 .../CollaboratorListContainer/index.tsx       | 57 ++++-------------
 .../DeedTypeListContainer/index.tsx           |  2 +-
 .../DocumentTypeListContainer/index.tsx       | 53 +++++----------
 .../OfficeListContainer/index.tsx             | 44 ++++---------
 .../RoleListContainer/index.tsx               | 64 ++++++-------------
 .../UserListContainer/index.tsx               | 45 ++++---------
 11 files changed, 93 insertions(+), 228 deletions(-)

diff --git a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
index c77c890c..30f9824b 100644
--- a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
@@ -1,17 +1,12 @@
 import Module from "@Front/Config/Module";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
-import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
-import Button from "../Button";
-import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
-import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
-import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
 import { IBlock } from "../SearchBlockList/BlockList/Block";
-import BlockList from "../SearchBlockList/BlockList";
+import SearchBlockList from "../SearchBlockList";
 
 type IProps = {
 	folders: OfficeFolder[];
@@ -45,33 +40,9 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
 	}
 
 	public override render(): JSX.Element {
-		const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
 		return (
 			<div className={classes["root"]}>
-				<div className={classes["header"]}>
-					<div className={classes["searchbar"]}>
-						<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
-					</div>
-					<div className={classes["folderlist-container"]}>
-						<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
-					</div>
-				</div>
-				{!this.props.isArchived && (
-					<div>
-						<Rules
-							mode={RulesMode.NECESSARY}
-							rules={[
-								{
-									action: AppRuleActions.create,
-									name: AppRuleNames.officeFolders,
-								},
-							]}>
-							<Link href={navigatePath}>
-								<Button fullwidth={true}>Créer un dossier</Button>
-							</Link>
-						</Rules>
-					</div>
-				)}
+				<SearchBlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
 			</div>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
index c9914f64..19ec5787 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
@@ -29,7 +29,9 @@ export default function Block(props: IProps) {
 					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
 						{secondaryText}
 					</Typography>
-					<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					<Typography
+						typo={ETypo.TEXT_MD_BOLD}
+						color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
 						{primaryText}
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
index 9f53834d..e7bcaa27 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
@@ -24,6 +24,5 @@
 
 	.bottom-container {
 		margin-top: auto;
-		width: 336px;
 	}
 }
diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
index 46434edd..3dd43a52 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
@@ -4,7 +4,7 @@ import { IBlock } from "./BlockList/Block";
 import classes from "./classes.module.scss";
 import SearchBar from "../SearchBar";
 import Button from "../Button";
-import Link from "next/link";
+import { useRouter } from "next/router";
 
 type IProps = {
 	blocks: IBlock[];
@@ -17,6 +17,8 @@ type IProps = {
 export default function SearchBlockList(props: IProps) {
 	const { blocks, onSelectedBlock, bottomButton } = props;
 
+	const router = useRouter();
+
 	const [blocksShowing, setBlocksShowing] = useState<IBlock[]>(blocks);
 	const bottomButtonRef = useRef<HTMLAnchorElement>(null);
 	const searchBarRef = useRef<HTMLDivElement>(null);
@@ -47,6 +49,11 @@ export default function SearchBlockList(props: IProps) {
 		};
 	}, [bottomButton]);
 
+	const redirectOnBottomButtonClick = useCallback(() => {
+		if (!bottomButton) return;
+		router.push(bottomButton.link);
+	}, [bottomButton, router]);
+
 	useEffect(() => {
 		setBlocksShowing(blocks);
 	}, [blocks]);
@@ -60,9 +67,11 @@ export default function SearchBlockList(props: IProps) {
 				<BlockList blocks={blocksShowing} onSelectedBlock={onSelectedBlock} />
 			</div>
 			{bottomButton && (
-				<Link href={bottomButton.link} className={classes["bottom-container"]} ref={bottomButtonRef}>
-					<Button fullwidth>{bottomButton.text}</Button>
-				</Link>
+				<div className={classes["bottom-container"]}>
+					<Button fullwidth onClick={redirectOnBottomButtonClick}>
+						{bottomButton.text}
+					</Button>
+				</div>
 			)}
 		</div>
 	);
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 17db7964..fd0d019f 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -154,6 +154,7 @@ export enum ETypoColor {
 	CONTRAST_HOVERED = "--contrast-hovered",
 	ERROR_WEAK_CONTRAST = "--error-weak-contrast",
 	NAVIGATION_BUTTON_CONTRAST_DEFAULT = "--navigation-button-contrast-default",
+	NAVIGATION_BUTTON_CONTRAST_ACTIVE = "--navigation-button-contrast-active",
 }
 
 export default function Typography(props: IProps) {
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index 9df33274..eee22e10 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import User from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
 import Module from "@Front/Config/Module";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	collaborators: User[];
@@ -15,22 +14,9 @@ type IProps = {
 };
 
 export default function CollaboratorListContainer(props: IProps) {
-	const [filteredUsers, setFilteredUsers] = useState<User[]>(props.collaborators);
 	const router = useRouter();
 
 	const { collaboratorUid } = router.query;
-	const filterUsers = useCallback(
-		(input: string) => {
-			const filteredUsers = props.collaborators.filter((user) => {
-				return (
-					user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
-					user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredUsers(filteredUsers);
-		},
-		[props.collaborators],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -43,35 +29,16 @@ export default function CollaboratorListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterUsers} placeholder="Chercher un collaborateur" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredUsers.map((user) => {
-							return {
-								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
-								id: user.uid!,
-								selected: user.uid === collaboratorUid,
-								rightIcon: user.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) ? (
-									<div
-										style={{
-											height: "12px",
-											width: "12px",
-											borderRadius: "100px",
-											backgroundColor: "var(--color-success-600)",
-										}}
-									/>
-								) : (
-									<></>
-								),
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.collaborators.map((user) => {
+					return {
+						primaryText: user.contact?.first_name + " " + user.contact?.last_name,
+						id: user.uid!,
+						isActive: user.uid === collaboratorUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
index 4386d52d..fd94a36d 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
@@ -34,7 +34,7 @@ export default function DeedListContainer(props: IProps) {
 					return {
 						primaryText: deed.name,
 						id: deed.uid!,
-						selected: deedTypeUid === deed.uid,
+						isActive: deedTypeUid === deed.uid,
 					};
 				})}
 				onSelectedBlock={onSelectedBlock}
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
index 3e41b785..da7fb26f 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
@@ -1,14 +1,11 @@
-import Button from "@Front/Components/DesignSystem/Button";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { DocumentType } from "le-coffre-resources/dist/SuperAdmin";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	documentTypes: DocumentType[];
@@ -17,19 +14,9 @@ type IProps = {
 };
 
 export default function DocumentTypeListContainer(props: IProps) {
-	const [filteredDocumentTypes, setFilteredDocumentTypes] = useState<DocumentType[]>(props.documentTypes);
 	const router = useRouter();
 
 	const { documentTypeUid } = router.query;
-	const filterDocumentTypes = useCallback(
-		(input: string) => {
-			const filteredDocumentTypes = props.documentTypes.filter((documentType) => {
-				return documentType.name.toLowerCase().includes(input.toLowerCase());
-			});
-			setFilteredDocumentTypes(filteredDocumentTypes);
-		},
-		[props.documentTypes],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -42,28 +29,20 @@ export default function DocumentTypeListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterDocumentTypes} placeholder="Chercher un document" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredDocumentTypes.map((documentType) => {
-							return {
-								primaryText: documentType.name,
-								id: documentType.uid!,
-								selected: documentType.uid === documentTypeUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
-			<div className={classes["create-container"]}>
-				<Link href={Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path}>
-					<Button fullwidth={true}>Créer un type de document</Button>
-				</Link>
-			</div>
+			<SearchBlockList
+				blocks={props.documentTypes.map((documentType) => {
+					return {
+						primaryText: documentType.name,
+						id: documentType.uid!,
+						isActive: documentType.uid === documentTypeUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
+					text: "Créer un type de document",
+				}}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
index b6db9a28..b3c92662 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
@@ -1,12 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { Office } from "le-coffre-resources/dist/SuperAdmin";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	offices: Office[];
@@ -15,21 +14,9 @@ type IProps = {
 };
 
 export default function OfficeListContainer(props: IProps) {
-	const [filteredOffices, setFilteredOffices] = useState<Office[]>(props.offices);
 	const router = useRouter();
 
 	const { officeUid } = router.query;
-	const filterOffices = useCallback(
-		(input: string) => {
-			const filteredOffices = props.offices.filter((office) => {
-				return (
-					office.name.toLowerCase().includes(input.toLowerCase()) || office.crpcen?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredOffices(filteredOffices);
-		},
-		[props.offices],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -42,23 +29,16 @@ export default function OfficeListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterOffices} placeholder="Chercher un office" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredOffices.map((office) => {
-							return {
-								primaryText: office.crpcen + " - " + office.name,
-								id: office.uid!,
-								selected: office.uid === officeUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.offices.map((office) => {
+					return {
+						primaryText: office.crpcen + " - " + office.name,
+						id: office.uid!,
+						isActive: office.uid === officeUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
index 1ee4c395..b02309c9 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
@@ -1,14 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { OfficeRole } from "le-coffre-resources/dist/Admin";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import Link from "next/link";
-import Button from "@Front/Components/DesignSystem/Button";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	roles: OfficeRole[];
@@ -17,21 +14,10 @@ type IProps = {
 };
 
 export default function RoleListContainer(props: IProps) {
-	const [filteredRoles, setFilteredRoles] = useState<OfficeRole[]>(props.roles);
 	const router = useRouter();
 
 	const { roleUid } = router.query;
 
-	const filterRoles = useCallback(
-		(input: string) => {
-			const filteredRoles = props.roles.filter((role) => {
-				return role.name?.toLowerCase().includes(input.toLowerCase());
-			});
-			setFilteredRoles(filteredRoles);
-		},
-		[props.roles],
-	);
-
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
 			props.onCloseLeftSide && props.onCloseLeftSide();
@@ -43,33 +29,25 @@ export default function RoleListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterRoles} placeholder="Chercher un rôle" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredRoles
-							.filter((role) => {
-								if (role.name === "admin") return false;
-								return true;
-							})
-							.map((role) => {
-								return {
-									primaryText: role.name,
-									id: role.uid!,
-									selected: role.uid === roleUid,
-								};
-							})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
-			<div className={classes["create-container"]}>
-				<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
-					<Button fullwidth={true}>Créer un rôle</Button>
-				</Link>
-			</div>
+			<SearchBlockList
+				blocks={props.roles
+					.filter((role) => {
+						if (role.name === "admin") return false;
+						return true;
+					})
+					.map((role) => {
+						return {
+							primaryText: role.name,
+							id: role.uid!,
+							isActive: role.uid === roleUid,
+						};
+					})}
+				onSelectedBlock={onSelectedBlock}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
+					text: "Créer un rôle",
+				}}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
index f543cba6..0842539d 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
@@ -1,12 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import User from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	users: User[];
@@ -15,22 +14,9 @@ type IProps = {
 };
 
 export default function UserListContainer(props: IProps) {
-	const [filteredUsers, setFilteredUsers] = useState<User[]>(props.users);
 	const router = useRouter();
 
 	const { userUid } = router.query;
-	const filterUsers = useCallback(
-		(input: string) => {
-			const filteredUsers = props.users.filter((user) => {
-				return (
-					user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
-					user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredUsers(filteredUsers);
-		},
-		[props.users],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -43,23 +29,16 @@ export default function UserListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterUsers} placeholder="Chercher un utilisateur" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredUsers.map((user) => {
-							return {
-								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
-								id: user.uid!,
-								selected: user.uid === userUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.users.map((user) => {
+					return {
+						primaryText: user.contact?.first_name + " " + user.contact?.last_name,
+						id: user.uid!,
+						isActive: user.uid === userUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }