[FEATURE]: get all users

backend/src/modules/users/applications/get.user.application.ts

@@ -18,4 +18,8 @@ export class GetUserApplicationImpl implements GetUserApplication {
 	countUsers() {
 		return this.getUserService.countUsers();
 	}
+
+	getAllUsers() {
+		return this.getUserService.getAllUsers();
+	}
 }

backend/src/modules/users/controller/users.controller.ts

@@ -0,0 +1,49 @@
+import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
+import {
+	ApiBadRequestResponse,
+	ApiBearerAuth,
+	ApiInternalServerErrorResponse,
+	ApiOkResponse,
+	ApiOperation,
+	ApiTags,
+	ApiUnauthorizedResponse
+} from '@nestjs/swagger';
+
+import JwtAuthenticationGuard from 'libs/guards/jwtAuth.guard';
+import { BadRequestResponse } from 'libs/swagger/errors/bad-request.swagger';
+import { InternalServerErrorResponse } from 'libs/swagger/errors/internal-server-error.swagger';
+import { UnauthorizedResponse } from 'libs/swagger/errors/unauthorized.swagger';
+
+import UserDto from '../dto/user.dto';
+import { GetUserApplication } from '../interfaces/applications/get.user.application.interface';
+import { TYPES } from '../interfaces/types';
+
+@ApiBearerAuth('access-token')
+@ApiTags('Users')
+@UseGuards(JwtAuthenticationGuard)
+@Controller('users')
+export default class UsersController {
+	constructor(
+		@Inject(TYPES.applications.GetUserApplication)
+		private getUserApp: GetUserApplication
+	) {}
+
+	@ApiOperation({ summary: 'Retrieve a list of existing users' })
+	@ApiOkResponse({ description: 'Users successfully retrieved!', type: UserDto, isArray: true })
+	@ApiUnauthorizedResponse({
+		description: 'Unauthorized',
+		type: UnauthorizedResponse
+	})
+	@ApiBadRequestResponse({
+		description: 'Bad Request',
+		type: BadRequestResponse
+	})
+	@ApiInternalServerErrorResponse({
+		description: 'Internal Server Error',
+		type: InternalServerErrorResponse
+	})
+	@Get()
+	getAllUsers() {
+		return this.getUserApp.getAllUsers();
+	}
+}

backend/src/modules/users/interfaces/applications/get.user.application.interface.ts

@@ -6,4 +6,6 @@ export interface GetUserApplication {
 	getByEmail(email: string): Promise<LeanDocument<UserDocument> | null>;
 
 	countUsers(): Promise<number>;
+
+	getAllUsers(): Promise<LeanDocument<UserDocument>[]>;
 }

backend/src/modules/users/interfaces/services/get.user.service.interface.ts

@@ -13,4 +13,6 @@ export interface GetUserService {
 	): Promise<LeanDocument<UserDocument> | false>;
 
 	countUsers(): Promise<number>;
+
+	getAllUsers(): Promise<LeanDocument<UserDocument>[]>;
 }

backend/src/modules/users/services/get.user.service.ts

@@ -35,4 +35,8 @@ export default class GetUserServiceImpl implements GetUserService {
 	countUsers() {
 		return this.userModel.countDocuments().exec();
 	}
+
+	getAllUsers() {
+		return this.userModel.find().select('-password -currentHashedRefreshToken').lean().exec();
+	}
 }

backend/src/modules/users/users.module.ts

@@ -3,6 +3,7 @@ import { Module } from '@nestjs/common';
 import { mongooseResetModule, mongooseUserModule } from 'infrastructure/database/mongoose.module';
 import TeamsModule from 'modules/teams/teams.module';
 
+import UsersController from './controller/users.controller';
 import {
 	createUserService,
 	getUserApplication,
@@ -20,6 +21,7 @@ import {
 		updateUserApplication,
 		getUserApplication
 	],
+	controllers: [UsersController],
 	exports: [
 		createUserService,
 		getUserService,

frontend/src/api/userService.tsx

@@ -0,0 +1,8 @@
+import { GetServerSidePropsContext } from 'next';
+
+import fetchData from 'utils/fetchData';
+import { User } from '../types/user/user';
+
+export const getAllUsers = (context?: GetServerSidePropsContext): Promise<User[]> => {
+	return fetchData(`/users`, { context, serverSide: !!context });
+};

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}>

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'}>

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 />;
 

frontend/src/pages/users/index.tsx

@@ -0,0 +1,62 @@
+import { ReactElement, Suspense } from 'react';
+import { dehydrate, QueryClient, useQuery } from 'react-query';
+import { GetServerSideProps, GetServerSidePropsContext } from 'next';
+import { useSession } from 'next-auth/react';
+import { useSetRecoilState } from 'recoil';
+
+import QueryError from 'components/Errors/QueryError';
+import Layout from 'components/layouts/Layout';
+import LoadingPage from 'components/loadings/LoadingPage';
+import Flex from 'components/Primitives/Flex';
+import { getAllUsers } from '../../api/userService';
+import requireAuthentication from '../../components/HOC/requireAuthentication';
+import { toastState } from '../../store/toast/atom/toast.atom';
+import { ToastStateEnum } from '../../utils/enums/toast-types';
+
+const Users = () => {
+	const { data: session } = useSession({ required: true });
+	const setToastState = useSetRecoilState(toastState);
+
+	const { data } = useQuery(['users'], () => getAllUsers(), {
+		enabled: true,
+		refetchOnWindowFocus: false,
+		onError: () => {
+			setToastState({
+				open: true,
+				content: 'Error getting the users',
+				type: ToastStateEnum.ERROR
+			});
+		}
+	});
+
+	if (!session || !data) return null;
+
+	return (
+		<Flex direction="column">
+			<Suspense fallback={<LoadingPage />}>
+				<QueryError>
+					{data.map((user) => (
+						<h2>{user.email}</h2>
+					))}
+				</QueryError>
+			</Suspense>
+		</Flex>
+	);
+};
+
+Users.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
+
+export default Users;
+
+export const getServerSideProps: GetServerSideProps = requireAuthentication(
+	async (context: GetServerSidePropsContext) => {
+		const queryClient = new QueryClient();
+		await queryClient.prefetchQuery('users', () => getAllUsers(context));
+
+		return {
+			props: {
+				dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient)))
+			}
+		};
+	}
+);

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 => {