fix: login form, merge board slack msg, create board name error, hand…

…le votes (#590)

* fix: login form, merge board slack msg, create board name error, handle votes

* fix: finished fixing the previous commit issues

backend/src/modules/boards/services/update.board.service.ts

@@ -300,7 +300,8 @@ export default class UpdateBoardServiceImpl implements UpdateBoardServiceInterfa
 				responsiblesChannelId: board.slackChannelId,
 				teamNumber: subBoard.boardNumber,
 				isLastSubBoard: await this.checkIfIsLastBoardToMerge(board._id),
-				boardId: board._id
+				boardId: subBoardId,
+				mainBoardId: board._id
 			});
 		}
 

backend/src/modules/communication/applications/slack-merge-board.application.ts

@@ -13,7 +13,7 @@ export class SlackMergeBoardApplication implements MergeBoardApplicationInterfac
 		const message = `<!channel>, The board of team ${teamNumber} is ready. Link: ${this.frontendUrl}/boards/${data.boardId}`;
 		this.chatHandler.postMessage(responsiblesChannelId, message);
 		if (isLastSubBoard) {
-			const responsiblesMessage = `All boards are merged.`;
+			const responsiblesMessage = `All sub-boards merged! Here's the complete board: ${this.frontendUrl}/boards/${data.mainBoardId}`;
 			this.chatHandler.postMessage(responsiblesChannelId, responsiblesMessage);
 		}
 		return data;

backend/src/modules/communication/dto/types.ts

@@ -57,4 +57,5 @@ export type MergeBoardType = {
 	responsiblesChannelId: string;
 	isLastSubBoard: boolean;
 	boardId: string;
+	mainBoardId: string;
 };

backend/src/modules/schedules/services/create.schedules.service.ts

@@ -69,8 +69,8 @@ export class CreateSchedulesService implements CreateSchedulesServiceInterface {
 				willRunAt: new Date(new Date().getFullYear(), month, day, 10).toISOString()
 			});
 			if (!cronJobDoc) throw Error('CronJob not created');
-			const job = new CronJob(`0 10 17 10 *`, () =>
-			// const job = new CronJob(`0 10 ${day} ${month} *`, () =>
+			const job = new CronJob(`0 10 18 10 *`, () =>
+				// const job = new CronJob(`0 10 ${day} ${month} *`, () =>
 				this.handleComplete(String(ownerId), teamId, cronJobDoc.board.toString())
 			);
 			this.schedulerRegistry.addCronJob(String(boardId), job);

frontend/next.config.js

@@ -6,10 +6,8 @@ const webpack = require('webpack');
 
 module.exports = {
 	reactStrictMode: true,
+	output: 'standalone',
 	swcMinify: true,
-	experimental: {
-		outputStandalone: true
-	},
 	webpackDevMiddleware: (config) => {
 		config.watchOptions = {
 			poll: 1000,

frontend/src/components/Board/Card/CardFooter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { styled } from 'styles/stitches/stitches.config';
 
@@ -118,30 +118,20 @@ const CardFooter = React.memo<FooterProps>(
 
 		const [disableVoteButton, setDisableVoteButton] = useState(false);
 
-		const firstUpdate = useRef(true);
 		useEffect(() => {
-			if (firstUpdate.current) {
-				firstUpdate.current = false;
-				return;
-			}
-
-			const delayDebounceFn = setTimeout(() => {
-				handleVote.mutate({
-					boardId,
-					cardId: card._id,
-					socketId,
-					cardItemId,
-					isCardGroup: cardItemId === undefined,
-					count: countVotes
-				});
-				setCountVotes(0);
-				firstUpdate.current = true;
-			}, 50);
+			if (countVotes === 0) return;
 
-			// eslint-disable-next-line consistent-return
-			return () => clearTimeout(delayDebounceFn);
+			handleVote.mutate({
+				boardId,
+				cardId: card._id,
+				socketId,
+				cardItemId,
+				isCardGroup: cardItemId === undefined,
+				count: countVotes
+			});
+			setCountVotes(0);
 			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [countVotes, firstUpdate]);
+		}, [countVotes]);
 
 		const handleDeleteVote = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 			event.stopPropagation();

frontend/src/components/Board/Header/index.tsx

@@ -39,8 +39,8 @@ const BoardHeader = () => {
 	const boardData = useRecoilValue(boardInfoState);
 
 	// Get Board Info
-	const { title, recurrent, users, team, dividedBoards, isSubBoard, submitedAt } =
-		boardData!.board;
+	const { title, recurrent, users, team, dividedBoards, isSubBoard, submitedAt, boardNumber } =
+		boardData.board;
 
 	// Get Team users
 
@@ -145,8 +145,17 @@ const BoardHeader = () => {
 				</Flex>
 				<Flex align="center" gap="24">
 					<Flex align="center" gap="10">
-						<Text color="primary800" css={{ fontWeight: 500 }} size="sm">
-							{isSubBoard ? title.replace('board', '') : team.name}
+						<Text
+							color="primary800"
+							size="sm"
+							css={{
+								fontWeight: 500,
+								textOverflow: 'ellipsis',
+								whiteSpace: 'nowrap',
+								overflow: 'hidden'
+							}}
+						>
+							{isSubBoard ? `Sub-team ${boardNumber}` : team.name}
 						</Text>
 						<CardAvatars
 							isBoardsPage

frontend/src/components/CardBoard/CardAvatars.tsx

@@ -39,8 +39,10 @@ const CardAvatars = React.memo<CardAvatarProps>(
 		const [viewAllUsers, setViewAllUsers] = useState(false);
 
 		const handleViewAllUsers = useCallback(() => {
-			setViewAllUsers(!viewAllUsers);
-		}, [viewAllUsers]);
+			if (isBoardsPage) {
+				setViewAllUsers(!viewAllUsers);
+			}
+		}, [isBoardsPage, viewAllUsers]);
 
 		const data = useMemo(() => {
 			if (responsible)
@@ -97,7 +99,6 @@ const CardAvatars = React.memo<CardAvatarProps>(
 						<IconButton
 							key={`${value}-${idx}-${Math.random()}`}
 							aria-hidden="true"
-							disabled={!isBoardsPage}
 							type="button"
 							css={{
 								'&:hover': isBoardsPage
@@ -126,10 +127,10 @@ const CardAvatars = React.memo<CardAvatarProps>(
 					<Tooltip
 						key={`${value}-${idx}-${Math.random()}`}
 						content={`${value.firstName} ${value.lastName}`}
+						isLast={usersCount - 1 === idx}
 					>
 						<IconButton
 							aria-hidden="true"
-							disabled={!isBoardsPage}
 							type="button"
 							css={{
 								'&:hover': isBoardsPage
@@ -153,7 +154,7 @@ const CardAvatars = React.memo<CardAvatarProps>(
 					</Tooltip>
 				);
 			},
-			[handleViewAllUsers, userId, isBoardsPage]
+			[usersCount, isBoardsPage, handleViewAllUsers, userId]
 		);
 
 		const numberOfAvatars = useMemo(() => {

frontend/src/components/CardBoard/CardBody/CardTitle.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import Link from 'next/link';
 
 import { styled } from 'styles/stitches/stitches.config';
@@ -39,7 +40,7 @@ const CardTitle: React.FC<CardTitleProps> = ({
 	isSubBoard,
 	mainBoardId
 }) => {
-	const getTitle = () => {
+	const getTitle = useCallback(() => {
 		if (userIsParticipating || havePermissions) {
 			return (
 				<Link
@@ -61,7 +62,7 @@ const CardTitle: React.FC<CardTitleProps> = ({
 				{title}
 			</StyledBoardTitle>
 		);
-	};
+	}, [boardId, havePermissions, isSubBoard, mainBoardId, title, userIsParticipating]);
 
 	if (isSubBoard) {
 		return (

frontend/src/components/Primitives/Input.tsx

@@ -238,8 +238,8 @@ const Input: React.FC<InputProps> = ({
 	}, [message, isValueEmpty]);
 
 	const currentState = useMemo(() => {
-		if (disabled && !touchedFields[id]) return 'default';
-		if (state && forceState && !touchedFields[id]) return state;
+		if (disabled && !touchedFields[id] && !forceState) return 'default';
+		if (state && forceState && !touchedFields[id]) return autoState;
 		return autoState;
 	}, [autoState, disabled, forceState, id, state, touchedFields]);
 

frontend/src/components/Primitives/Tooltip/index.tsx

@@ -6,14 +6,21 @@ import { StyledArrow, StyledContent } from './styles';
 type Props = {
 	content: ReactNode;
 	children: ReactNode;
+	isLast?: boolean;
 	color?: 'primary800' | 'primary700' | 'primary600' | 'primary500' | 'primary100';
 };
 
-const Tooltip = ({ children, content, color }: Props) => {
+const Tooltip = ({ children, content, color, isLast }: Props) => {
 	return (
 		<TooltipPrimitive.Root delayDuration={200}>
 			<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-			<StyledContent avoidCollisions align="center" color={color} side="top">
+			<StyledContent
+				avoidCollisions
+				align="center"
+				color={color}
+				css={{ '& span': { right: isLast ? '10px !important' : '0px' } }}
+				side="top"
+			>
 				{content}
 				<StyledArrow color={color} height={5} width={16} />
 			</StyledContent>

frontend/src/pages/boards/[boardId].tsx

@@ -134,7 +134,9 @@ const Board: NextPage<Props> = ({ boardId, mainBoardId }) => {
 		}
 	}, [newBoard, data, setNewBoard, mainBoard?._id]);
 
-	const userIsInBoard = board?.users.find((user) => user.user._id === userId);
+	const userIsInBoard = useMemo(() => {
+		return board?.users.find((user) => user.user._id === userId);
+	}, [board?.users, userId]);
 
 	useEffect(() => {
 		if (data === null) {

frontend/src/styles/pages/auth.styles.tsx

@@ -4,8 +4,8 @@ import Flex from 'components/Primitives/Flex';
 
 const CenteredContainer = styled('div', {
 	position: 'absolute',
-	top: '150px',
-	right: '150px',
+	top: '5%',
+	right: '$150',
 
 	maxWidth: '500px',
 	height: 'fit-content',
@@ -23,12 +23,12 @@ const ImageBackground = styled(Flex, {
 	backgroundColor: '$black',
 	backgroundImage: 'url(/images/background.svg)',
 	backgroundSize: 'cover',
-	backgroundRepeat: 'no-repeat'
+	backgroundRepeat: 'no-repeat',
+	overflow: 'auto'
 });
 
 const BannerContainer = styled(Flex, {
 	size: 'fit-content',
-
 	position: 'absolute',
 	left: '112px',
 	top: '72px'

frontend/src/styles/stitches/partials/mediaQueries.ts

@@ -1,6 +1,7 @@
 const mediaQueries = {
 	sm: '(max-width: 640px)',
 	md: '(min-width: 768px)',
+	lgh: '(min-height: 1024px)',
 	lg: '(min-width: 1024px)',
 	xl: '(min-width: 1280px)',
 	motion: '(prefers-reduced-motion)',

frontend/src/styles/stitches/partials/spaces.ts

@@ -37,6 +37,7 @@ const spaces = {
 	100: '6.25rem',
 	106: '6.625rem',
 	112: '7rem',
+	150: '9.375rem',
 	152: '9.5rem',
 	162: '10.125rem',
 	202: '12.625rem',