[FEATURE]: add get team endpoint (#592)

* fix: fix returned information and attribute name * fix: remove link to boards page/change blob color * fix: fix members list layout * feat: add animation to tooltip * feat: add getTeam query as hook * fix: resolve requested changes
xgeekshq · Nov 18, 2022 · 9c37ca3 · 9c37ca3
1 parent a22c24e
commit 9c37ca3
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 58 deletions.
diff --git a/backend/src/modules/teams/schemas/team.user.schema.ts b/backend/src/modules/teams/schemas/team.user.schema.ts
@@ -22,7 +22,7 @@ export default class TeamUser {
 		type: Boolean,
 		nullable: false
 	})
-	isNewbie!: boolean;
+	isNewJoiner!: boolean;
 
 	@Prop({ type: SchemaTypes.ObjectId, ref: 'User', nullable: false })
 	user!: User | ObjectId;

diff --git a/backend/src/modules/teams/services/get.team.service.ts b/backend/src/modules/teams/services/get.team.service.ts
@@ -40,7 +40,7 @@ export default class GetTeamService implements GetTeamServiceInterface {
 			teamModel
 				.populate({
 					path: 'users',
-					select: 'user role',
+					select: 'user role isNewJoiner',
 					...teamUserRoleFilter,
 					populate: {
 						path: 'user',
@@ -52,7 +52,18 @@ export default class GetTeamService implements GetTeamServiceInterface {
 			teamModel.lean();
 		}
 
-		return teamModel.exec();
+		return teamModel
+			.select('_id name')
+			.populate({
+				path: 'users',
+				select: 'user role isNewJoiner',
+				populate: {
+					path: 'user',
+					select: '_id firstName lastName email joinedAt'
+				}
+			})
+			.lean()
+			.exec();
 	}
 
 	async getTeamsOfUser(userId: string) {

diff --git a/backend/src/modules/users/controller/users.controller.ts b/backend/src/modules/users/controller/users.controller.ts
@@ -43,7 +43,7 @@ export default class UsersController {
 		type: InternalServerErrorResponse
 	})
 	@Get()
-	getAllTeams() {
+	getAllUsers() {
 		return this.getUserApp.getAllUsers();
 	}
 }
diff --git a/frontend/src/api/teamService.tsx b/frontend/src/api/teamService.tsx
@@ -14,3 +14,7 @@ export const getTeamsOfUser = (context?: GetServerSidePropsContext): Promise<Tea
 export const createTeamRequest = (newTeam: CreateTeamDto): Promise<Team> => {
 	return fetchData(`/teams`, { method: 'POST', data: newTeam });
 };
+
+export const getTeamRequest = (id: string, context?: GetServerSidePropsContext): Promise<Team> => {
+	return fetchData(`/teams/${id}`, { context, serverSide: !!context });
+};
diff --git a/frontend/src/components/Primitives/Tooltip/styles.tsx b/frontend/src/components/Primitives/Tooltip/styles.tsx
@@ -2,6 +2,13 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { styled } from 'styles/stitches/stitches.config';
 
+import {
+	slideDownAndFade,
+	slideLeftAndFade,
+	slideRightAndFade,
+	slideUpAndFade
+} from '../../../animations/Slide';
+
 const StyledContent = styled(TooltipPrimitive.Content, {
 	variants: {
 		color: {
@@ -34,12 +41,22 @@ const StyledContent = styled(TooltipPrimitive.Content, {
 
 	p: '$8',
 	borderRadius: '$12',
-	maxWidth: '260px',
+	maxWidth: '$260',
 	fontSize: '$12',
 	lineHeight: '$16',
 	textAlign: 'center',
 	border: 'none',
-	minWidth: '141px'
+	minWidth: '$141',
+	userSelect: 'none',
+	animationDuration: '400ms',
+	animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+	willChange: 'transform, opacity',
+	'&[data-state="delayed-open"]': {
+		'&[data-side="top"]': { animationName: slideDownAndFade },
+		'&[data-side="right"]': { animationName: slideLeftAndFade },
+		'&[data-side="bottom"]': { animationName: slideUpAndFade },
+		'&[data-side="left"]': { animationName: slideRightAndFade }
+	}
 });
 
 const StyledArrow = styled(TooltipPrimitive.Arrow, {

diff --git a/frontend/src/components/Teams/CreateTeam/ListMembers/index.tsx b/frontend/src/components/Teams/CreateTeam/ListMembers/index.tsx
@@ -150,29 +150,28 @@ const ListMembers = ({ isOpen, setIsOpen }: Props) => {
 						Teams
 					</Text>
 					<ScrollableContent direction="column" justify="start" ref={scrollRef}>
-						<Flex
-							css={{ flex: '1 1', px: '$32', width: '80%' }}
-							direction="column"
-							gap={16}
-						>
+						<Flex css={{ flex: '1 1', px: '$32' }} direction="column" gap={16}>
 							{filteredList?.map((user) => (
 								<Flex key={user._id} align="center" justify="between">
-									<Checkbox
-										checked={user.isChecked}
-										disabled={user._id === session?.user.id}
-										handleChange={handleChecked}
-										id={user._id}
-										label={`${user.firstName} ${user.lastName}`}
-										size="16"
-									/>
-
-									<Text
-										color="primary300"
-										css={{ textAlign: 'left', width: '50%' }}
-										size="sm"
-									>
-										{user.email}
-									</Text>
+									<Flex css={{ width: '50%' }}>
+										<Checkbox
+											checked={user.isChecked}
+											disabled={user._id === session?.user.id}
+											handleChange={handleChecked}
+											id={user._id}
+											label={`${user.firstName} ${user.lastName}`}
+											size="16"
+										/>
+									</Flex>
+									<Flex css={{ width: '50%' }}>
+										<Text
+											color="primary300"
+											css={{ textAlign: 'left', width: '50%' }}
+											size="sm"
+										>
+											{user.email}
+										</Text>
+									</Flex>
 								</Flex>
 							))}
 						</Flex>

diff --git a/frontend/src/components/Teams/MyTeams/partials/CardTeam/BoardsInfo.tsx b/frontend/src/components/Teams/MyTeams/partials/CardTeam/BoardsInfo.tsx
@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 import Icon from 'components/icons/Icon';
 import Flex from 'components/Primitives/Flex';
 import Text from 'components/Primitives/Text';
@@ -16,24 +14,21 @@ const BoardsInfo = ({ userSAdmin, teamAdmin, team }: BoardsInfoProps) => {
 		return (
 			<Flex css={{ ml: '$20', display: 'flex', alignItems: 'center' }}>
 				{(userSAdmin || teamAdmin) && (
-					<Link href="/boards/new">
-						<a style={{ textDecoration: 'none' }}>
-							<Flex css={{ alignItems: 'center' }}>
-								<Icon
-									name="plus"
-									css={{
-										width: '$16',
-										height: '$32',
-										marginRight: '$5'
-									}}
-								/>
-								<Text css={{ ml: '$8' }} size="sm" weight="medium">
-									{' '}
-									Create first team board
-								</Text>
-							</Flex>
-						</a>
-					</Link>
+					// <Link href="/boards/new">
+					<Flex css={{ alignItems: 'center' }}>
+						<Icon
+							name="plus"
+							css={{
+								width: '$16',
+								height: '$32',
+								marginRight: '$5'
+							}}
+						/>
+						<Text css={{ ml: '$8' }} size="sm" weight="medium">
+							Create first team board
+						</Text>
+					</Flex>
+					// </Link>
 				)}
 				{!teamAdmin && (
 					<Text css={{ ml: '$14' }} size="sm" weight="medium">
@@ -46,11 +41,11 @@ const BoardsInfo = ({ userSAdmin, teamAdmin, team }: BoardsInfoProps) => {
 
 	return (
 		<Flex css={{ ml: '$20', display: 'flex', alignItems: 'center' }}>
-			<Link href="boards/">
-				<Text css={{ ml: '$14' }} size="sm" weight="medium">
-					{team.boardsCount} team boards
-				</Text>
-			</Link>
+			{/* <Link href="boards/"> */}
+			<Text css={{ ml: '$14' }} size="sm" weight="medium">
+				{team.boardsCount} team boards
+			</Text>
+			{/* </Link> */}
 		</Flex>
 	);
 };

diff --git a/frontend/src/components/icons/Sprite.tsx b/frontend/src/components/icons/Sprite.tsx
@@ -337,7 +337,7 @@ const Sprite = () => (
 			<path
 				clipRule="evenodd"
 				d="M6.36621 30.2746C14.1157 34.7636 25.2683 29.9783 28.9954 21.8554C32.7226 13.7325 30.8344 7.60134 23.0849 3.11237C15.3354 -1.37661 6.20395 -1.62868 2.47678 6.4942C-1.25039 14.6171 -1.3833 25.7857 6.36621 30.2746Z"
-				fill="#F3FD58"
+				fill="#CF97FF"
 				fillRule="evenodd"
 			/>
 			<path

diff --git a/frontend/src/hooks/useTeam.tsx b/frontend/src/hooks/useTeam.tsx
@@ -1,17 +1,17 @@
 import { useMutation, useQuery } from 'react-query';
-import { useSetRecoilState } from 'recoil';
 
 import { ToastStateEnum } from 'utils/enums/toast-types';
-import { createTeamRequest, getAllTeams, getTeamsOfUser } from '../api/teamService';
-import { toastState } from '../store/toast/atom/toast.atom';
+import { createTeamRequest, getAllTeams, getTeamRequest, getTeamsOfUser } from '../api/teamService';
 import UseTeamType from '../types/team/useTeam';
+import useTeamUtils from './useTeamUtils';
 
 interface AutoFetchProps {
 	autoFetchTeam: boolean;
 }
 
 const useTeam = ({ autoFetchTeam = false }: AutoFetchProps): UseTeamType => {
-	const setToastState = useSetRecoilState(toastState);
+	const { teamId, setToastState } = useTeamUtils();
+
 	const fetchAllTeams = useQuery(['allTeams'], () => getAllTeams(), {
 		enabled: autoFetchTeam,
 		refetchOnWindowFocus: false,
@@ -24,6 +24,25 @@ const useTeam = ({ autoFetchTeam = false }: AutoFetchProps): UseTeamType => {
 		}
 	});
 
+	const fetchTeam = useQuery(
+		['team', teamId],
+		() => {
+			if (typeof teamId === 'string') return getTeamRequest(teamId);
+			return undefined;
+		},
+		{
+			enabled: autoFetchTeam,
+			refetchOnWindowFocus: false,
+			onError: () => {
+				setToastState({
+					open: true,
+					content: 'Error getting the team',
+					type: ToastStateEnum.ERROR
+				});
+			}
+		}
+	);
+
 	const fetchTeamsOfUser = useQuery(['teams'], () => getTeamsOfUser(), {
 		enabled: autoFetchTeam,
 		refetchOnWindowFocus: false,
@@ -56,7 +75,8 @@ const useTeam = ({ autoFetchTeam = false }: AutoFetchProps): UseTeamType => {
 	return {
 		fetchAllTeams,
 		fetchTeamsOfUser,
-		createTeam
+		createTeam,
+		fetchTeam
 	};
 };
 

diff --git a/frontend/src/hooks/useTeamUtils.tsx b/frontend/src/hooks/useTeamUtils.tsx
@@ -0,0 +1,40 @@
+import { QueryClient, useQueryClient } from 'react-query';
+import { NextRouter, useRouter } from 'next/router';
+import { useSession } from 'next-auth/react';
+import { SetterOrUpdater, useSetRecoilState } from 'recoil';
+
+import { toastState } from 'store/toast/atom/toast.atom';
+import { ToastStateEnum } from '../utils/enums/toast-types';
+
+type TeamUtilsType = {
+	userId: string;
+	teamId: string | string[] | undefined;
+	queryClient: QueryClient;
+	setToastState: SetterOrUpdater<{ open: boolean; type: ToastStateEnum; content: string }>;
+	router: NextRouter;
+};
+
+const useTeamUtils = (): TeamUtilsType => {
+	const router = useRouter();
+	const { data: session } = useSession({ required: false });
+
+	const queryClient = useQueryClient();
+
+	let userId = '';
+
+	if (session) userId = session.user.id;
+
+	const setToastState = useSetRecoilState(toastState);
+
+	const { teamId } = router.query;
+
+	return {
+		userId,
+		teamId,
+		queryClient,
+		setToastState,
+		router
+	};
+};
+
+export default useTeamUtils;
diff --git a/frontend/src/styles/stitches/partials/sizes.ts b/frontend/src/styles/stitches/partials/sizes.ts
@@ -33,12 +33,14 @@ const sizes = {
 	100: '6.25rem',
 	127: '7.938rem',
 	130: '8.125rem',
+	141: '9.188rem',
 	147: '9.188rem',
 	160: '10rem',
 	206: '12.875rem',
 	220: '13.75rem',
 	226: '14.125rem',
 	237: '14.813rem',
+	260: '16.25rem',
 	300: '18.75rem',
 	353: '22.063rem',
 	360: '22.5rem',

diff --git a/frontend/src/types/team/useTeam.ts b/frontend/src/types/team/useTeam.ts
@@ -6,4 +6,5 @@ export default interface UseTeamType {
 	createTeam: UseMutationResult<Team, unknown, CreateTeamDto, unknown>;
 	fetchAllTeams: UseQueryResult<Team[] | null, unknown>;
 	fetchTeamsOfUser: UseQueryResult<Team[] | null, unknown>;
+	fetchTeam: UseQueryResult<Team | null | undefined, unknown>;
 }