From 8d6475ab208410baaa5bd70f5a3ba9a16c9a3be2 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 2 May 2022 21:22:42 +0200
Subject: [PATCH] create RestrictMenuItem and add team assign link

---
 src/components/Navigation/MainMenu.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Navigation/MainMenu.tsx b/src/components/Navigation/MainMenu.tsx
index 5449514..f0d36b2 100644
--- a/src/components/Navigation/MainMenu.tsx
+++ b/src/components/Navigation/MainMenu.tsx
@@ -1,8 +1,9 @@
 import { FC, useCallback, useState } from "react"
 import { useSelector } from "react-redux"
 import classnames from "classnames"
-import { isUserConnected, routerSelector } from "../../store/auth"
+import { isUserConnected, routerSelector, selectUserRoles } from "../../store/auth"
 import styles from "./styles.module.scss"
+import ROLES from "../../utils/roles.constants"
 
 interface MenuItemProps {
     name: string
@@ -19,6 +20,15 @@ const MenuItem: FC<MenuItemProps> = ({ name, pathname }): JSX.Element => {
     )
 }
 
+interface RestrictMenuItemProps extends MenuItemProps {
+    role: string
+}
+
+const RestrictMenuItem: FC<RestrictMenuItemProps> = ({ name, pathname, role }): JSX.Element => {
+    const roles = useSelector(selectUserRoles)
+    return roles.includes(role) ? <MenuItem name={name} pathname={pathname} /> : <div />
+}
+
 const MainMenu: FC = (): JSX.Element => {
     const connected = useSelector(isUserConnected)
     const [opened, setOpened] = useState(false)
@@ -42,6 +52,11 @@ const MainMenu: FC = (): JSX.Element => {
                 <MenuItem name="Questions" pathname="/" />
                 <MenuItem name="Annonces" pathname="/annonces" />
                 <MenuItem name="Mon profil" pathname="/profil" />
+                <RestrictMenuItem
+                    role={ROLES.ASSIGNER}
+                    name="Gestion équipes"
+                    pathname="/team-assign"
+                />
                 <button type="button" className={styles.close} onClick={onClose}>
                     ×
                 </button>