🐛 Fixing office page

package-lock.json

@@ -22,7 +22,7 @@
 				"eslint-config-next": "13.2.4",
 				"form-data": "^4.0.0",
 				"jwt-decode": "^3.1.2",
-				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.83",
+				"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.84",
 				"next": "13.2.4",
 				"prettier": "^2.8.7",
 				"react": "18.2.0",

src/front/Components/Layouts/Offices/OfficeInformations/index.tsx

@@ -3,7 +3,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard";
 import User, { Office } from "le-coffre-resources/dist/SuperAdmin";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 
@@ -13,6 +13,8 @@ export default function OfficeInformations(props: IProps) {
 	let { officeUid } = router.query;
 
 	const [officeSelected, setOfficeSelected] = useState<Office | null>(null);
+	const [adminUsers, setAdminUsers] = useState<User[]>([]);
+	const [collaboratorUsers, setCollaboratorUsers] = useState<User[]>([]);
 
 	useEffect(() => {
 		async function getOffice() {
@@ -31,54 +33,87 @@ export default function OfficeInformations(props: IProps) {
 			});
 			if (!office) return;
 			setOfficeSelected(office);
+
+			const adminUsers = office.users?.filter((user) => {
+				if (user.office_role && user.office_role.name === "admin") {
+					return true;
+				}
+				if (!user.office_role && user.role?.name === "admin") {
+					return true;
+				}
+				if (!user.office_role && user.role?.name === "super-admin") {
+					return true;
+				}
+				return false;
+			});
+
+			const collaboratorUsers = office.users?.filter((user) => {
+				if (user.office_role && user.office_role.name === "admin") {
+					return false;
+				}
+				if (!user.office_role && user.role?.name === "admin") {
+					return false;
+				}
+				if (!user.office_role && user.role?.name === "super-admin") {
+					return false;
+				}
+				return true;
+			});
+
+			setAdminUsers(adminUsers!);
+			setCollaboratorUsers(collaboratorUsers!);
 		}
 
 		getOffice();
 	}, [officeUid]);
 
-	const renderUser = (user: User) => (
+	const renderUser = useCallback(
-		<>
+		(user: User) => (
-			<div key={user.uid} className={classes["user-line-desktop"]}>
+			<>
-				<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
+				<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
-				<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
-				<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
-				<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
-				<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
-			</div>
-			<div key={user.uid} className={classes["user-line-mobile"]}>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
-						Nom
-					</Typography>
 					<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
-						Prénom
-					</Typography>
 					<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
-						E-mail
-					</Typography>
 					<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
-				</div>
-				<div className={classes["line"]}>
-					<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
-						Téléphone
-					</Typography>
 					<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+					<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : "Utilisateur restreint"}</Typography>
 				</div>
-				<div className={classes["line"]}>
+				<div key={user.uid} className={classes["user-line-mobile"]}>
-					<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+					<div className={classes["line"]}>
-						Rôle
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
-					</Typography>
+							Nom
-					<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
+						</Typography>
+						<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
+					</div>
+					<div className={classes["line"]}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+							Prénom
+						</Typography>
+						<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
+					</div>
+					<div className={classes["line"]}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+							E-mail
+						</Typography>
+						<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
+					</div>
+					<div className={classes["line"]}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+							Téléphone
+						</Typography>
+						<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+					</div>
+					<div className={classes["line"]}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+							Rôle
+						</Typography>
+						<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
+					</div>
 				</div>
-			</div>
+			</>
-		</>
+		),
+		[officeUid],
 	);
+
 	return (
 		<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
 			<div className={classes["root"]}>
@@ -134,22 +169,9 @@ export default function OfficeInformations(props: IProps) {
 									Rôle
 								</Typography>
 							</div>
-							{officeSelected?.users
+							{adminUsers.map((user) => {
-								?.filter((user) => {
+								return renderUser(user);
-									if (user.office_role && user.office_role.name === "admin") {
+							})}
-										return true;
-									}
-									if (!user.office_role && user.role?.name === "admin") {
-										return true;
-									}
-									if (!user.office_role && user.role?.name === "super-admin") {
-										return true;
-									}
-									return false;
-								})
-								.map((user) => {
-									return renderUser(user);
-								})}
 						</div>
 					</div>
 					<div className={classes["users"]}>
@@ -174,22 +196,9 @@ export default function OfficeInformations(props: IProps) {
 									Rôle
 								</Typography>
 							</div>
-							{officeSelected?.users
+							{collaboratorUsers.map((user) => {
-								?.filter((user) => {
+								return renderUser(user);
-									if (user.office_role && user.office_role.name === "admin") {
+							})}
-										return false;
-									}
-									if (!user.office_role && user.role?.name === "admin") {
-										return false;
-									}
-									if (!user.office_role && user.role?.name === "super-admin") {
-										return false;
-									}
-									return true;
-								})
-								.map((user) => {
-									return renderUser(user);
-								})}
 						</div>
 					</div>
 				</div>