From f88a513b615c33cac0424ac25bae564e0118eb39 Mon Sep 17 00:00:00 2001
From: GuiSanto <guiontheworks@gmail.com>
Date: Fri, 18 Nov 2022 14:54:13 +0000
Subject: [PATCH] feat: added users page layout

---
 .../Sidebar/partials/Content/index.tsx           | 12 ++++++------
 .../components/layouts/DashboardLayout/index.tsx |  4 +++-
 frontend/src/components/layouts/Layout/index.tsx |  6 ++++--
 frontend/src/pages/users/index.tsx               | 16 ++++++++++++++++
 frontend/src/utils/routes.ts                     |  3 ++-
 5 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/pages/users/index.tsx

diff --git a/frontend/src/components/Sidebar/partials/Content/index.tsx b/frontend/src/components/Sidebar/partials/Content/index.tsx
index e5908ba94..70c7d74b9 100644
--- a/frontend/src/components/Sidebar/partials/Content/index.tsx
+++ b/frontend/src/components/Sidebar/partials/Content/index.tsx
@@ -54,18 +54,18 @@ const SideBarContent: React.FC<SidebarContentProps> = ({ strategy }) => {
 					<StyledText>Boards</StyledText>
 				</StyledMenuItem>
 			</Link>
-			<Tooltip color="primary100" content="Coming Soon">
-				<StyledMenuItem disabled align="center" data-active={active === USERS_ROUTE}>
+			<Link href={USERS_ROUTE}>
+				<StyledMenuItem align="center" data-active={active === USERS_ROUTE}>
 					<Icon name="user" />
 					<StyledText>Users</StyledText>
 				</StyledMenuItem>
-			</Tooltip>
-			<Tooltip color="primary100" content="Coming Soon">
-				<StyledMenuItem disabled align="center" data-active={active === TEAMS_ROUTE}>
+			</Link>
+			<Link href={TEAMS_ROUTE}>
+				<StyledMenuItem align="center" data-active={active === TEAMS_ROUTE}>
 					<Icon name="team" />
 					<StyledText>Teams</StyledText>
 				</StyledMenuItem>
-			</Tooltip>
+			</Link>
 			<StyledSeparator />
 			<Tooltip color="primary100" content="Coming Soon">
 				<StyledMenuItem disabled align="center" data-active={active === ACCOUNT_ROUTE}>
diff --git a/frontend/src/components/layouts/DashboardLayout/index.tsx b/frontend/src/components/layouts/DashboardLayout/index.tsx
index 94b0d7a82..d47dcfca2 100644
--- a/frontend/src/components/layouts/DashboardLayout/index.tsx
+++ b/frontend/src/components/layouts/DashboardLayout/index.tsx
@@ -13,10 +13,11 @@ type DashboardLayoutProps = {
 	isBoards: boolean;
 	isTeams: boolean;
 	canAddBoard: boolean;
+	isUsers: boolean;
 };
 
 const DashboardLayout = (props: DashboardLayoutProps) => {
-	const { children, firstName, isDashboard, isBoards, isTeams, canAddBoard } = props;
+	const { children, firstName, isDashboard, isBoards, isTeams, canAddBoard, isUsers } = props;
 
 	return (
 		<ContentSection gap="36" justify="between">
@@ -25,6 +26,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
 					{isDashboard && <Text heading="1">Welcome, {firstName}</Text>}
 					{isBoards && <Text heading="1">Boards</Text>}
 					{isTeams && <Text heading="1">Teams</Text>}
+					{isUsers && <Text heading="1">Users</Text>}
 					{(isDashboard || isBoards) && (
 						<Link href="/boards/new">
 							<AddNewBoardButton size={isDashboard ? 'sm' : 'md'}>
diff --git a/frontend/src/components/layouts/Layout/index.tsx b/frontend/src/components/layouts/Layout/index.tsx
index cd9d7bc02..ed2589499 100644
--- a/frontend/src/components/layouts/Layout/index.tsx
+++ b/frontend/src/components/layouts/Layout/index.tsx
@@ -5,7 +5,7 @@ import { signOut, useSession } from 'next-auth/react';
 import LoadingPage from 'components/loadings/LoadingPage';
 import { Sidebar } from 'components/Sidebar';
 import { REFRESH_TOKEN_ERROR } from 'utils/constants';
-import { BOARDS_ROUTE, DASHBOARD_ROUTE, TEAMS_ROUTE } from 'utils/routes';
+import { BOARDS_ROUTE, DASHBOARD_ROUTE, TEAMS_ROUTE, USERS_ROUTE } from 'utils/routes';
 import DashboardLayout from '../DashboardLayout';
 import { Container } from './styles';
 
@@ -20,6 +20,7 @@ const Layout: React.FC<{ children: ReactNode; canAddBoard?: boolean }> = ({
 	const isDashboard = router.pathname === DASHBOARD_ROUTE;
 	const isBoards = router.pathname === BOARDS_ROUTE;
 	const isTeams = router.pathname === TEAMS_ROUTE;
+	const isUsers = router.pathname === USERS_ROUTE;
 
 	if (session?.error === REFRESH_TOKEN_ERROR) {
 		signOut({ callbackUrl: '/' });
@@ -34,11 +35,12 @@ const Layout: React.FC<{ children: ReactNode; canAddBoard?: boolean }> = ({
 				isBoards={isBoards}
 				isDashboard={isDashboard}
 				isTeams={isTeams}
+				isUsers={isUsers}
 			>
 				{children}
 			</DashboardLayout>
 		);
-	}, [children, isBoards, isDashboard, session, isTeams, canAddBoard]);
+	}, [children, isBoards, isDashboard, session, isTeams, canAddBoard, isUsers]);
 
 	if (!session) return <LoadingPage />;
 
diff --git a/frontend/src/pages/users/index.tsx b/frontend/src/pages/users/index.tsx
new file mode 100644
index 000000000..865fde040
--- /dev/null
+++ b/frontend/src/pages/users/index.tsx
@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { useSession } from 'next-auth/react';
+
+import Layout from 'components/layouts/Layout';
+import Flex from 'components/Primitives/Flex';
+
+const Users = () => {
+	const { data: session } = useSession({ required: true });
+
+	if (!session) return null; // after getUsers issue, need to add || !data to the if
+	return <Flex direction="column" />;
+};
+
+Users.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
+
+export default Users;
diff --git a/frontend/src/utils/routes.ts b/frontend/src/utils/routes.ts
index c5d05cb50..3c42f33ba 100644
--- a/frontend/src/utils/routes.ts
+++ b/frontend/src/utils/routes.ts
@@ -15,7 +15,8 @@ export const ROUTES = {
 	BoardPage: (boardId: string): string => `/boards/${boardId}`,
 	Token: RESET_PASSWORD_ROUTE,
 	TokenPage: (tokenId: string): string => `/reset-password/${tokenId}`,
-	Teams: TEAMS_ROUTE
+	Teams: TEAMS_ROUTE,
+	Users: USERS_ROUTE
 };
 
 export const GetPageTitleByUrl = (url: string): string | undefined => {