diff --git a/backend/src/modules/teams/schemas/team.user.schema.ts b/backend/src/modules/teams/schemas/team.user.schema.ts index fdad97999..e49b139e4 100644 --- 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 index 2db0a6a9d..6339720d2 100644 --- 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 index 4eeba46a0..6af5dd132 100644 --- 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 index bacd8e9fe..acde8c4ff 100644 --- a/frontend/src/api/teamService.tsx +++ b/frontend/src/api/teamService.tsx @@ -14,3 +14,7 @@ export const getTeamsOfUser = (context?: GetServerSidePropsContext): Promise => { return fetchData(`/teams`, { method: 'POST', data: newTeam }); }; + +export const getTeamRequest = (id: string, context?: GetServerSidePropsContext): Promise => { + 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 index cbc53eabb..a782fbf79 100644 --- 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 index ac83800e3..83e66c7db 100644 --- 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 - + {filteredList?.map((user) => ( - - - - {user.email} - + + + + + + {user.email} + + ))} diff --git a/frontend/src/components/Teams/MyTeams/partials/CardTeam/BoardsInfo.tsx b/frontend/src/components/Teams/MyTeams/partials/CardTeam/BoardsInfo.tsx index e8c6c0681..77158e318 100644 --- 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 ( {(userSAdmin || teamAdmin) && ( - - - - - - {' '} - Create first team board - - - - + // + + + + Create first team board + + + // )} {!teamAdmin && ( @@ -46,11 +41,11 @@ const BoardsInfo = ({ userSAdmin, teamAdmin, team }: BoardsInfoProps) => { return ( - - - {team.boardsCount} team boards - - + {/* */} + + {team.boardsCount} team boards + + {/* */} ); }; diff --git a/frontend/src/components/icons/Sprite.tsx b/frontend/src/components/icons/Sprite.tsx index e1cd380ab..86c75fef1 100644 --- a/frontend/src/components/icons/Sprite.tsx +++ b/frontend/src/components/icons/Sprite.tsx @@ -337,7 +337,7 @@ const Sprite = () => ( { - 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 new file mode 100644 index 000000000..66d79cddc --- /dev/null +++ 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 index a3bcc9d26..80d035afb 100644 --- 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 index f1e7ff8de..98022eebf 100644 --- a/frontend/src/types/team/useTeam.ts +++ b/frontend/src/types/team/useTeam.ts @@ -6,4 +6,5 @@ export default interface UseTeamType { createTeam: UseMutationResult; fetchAllTeams: UseQueryResult; fetchTeamsOfUser: UseQueryResult; + fetchTeam: UseQueryResult; }