[SUGGESTION]: Improve ESLint configs to sort props (#377)

xgeekshq · Aug 2, 2022 · 9e423dd · 9e423dd
1 parent c42fad6
commit 9e423dd
Show file tree

Hide file tree

Showing 91 changed files with 982 additions and 971 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -45,6 +45,15 @@ module.exports = {
 			}
 		],
 		'react/jsx-props-no-spreading': 'off',
+		'react/jsx-sort-props': [
+			'error',
+			{
+				callbacksLast: true,
+				shorthandFirst: true,
+				reservedFirst: ['key'],
+				multiline: 'last'
+			}
+		],
 		'no-underscore-dangle': 'off',
 		'no-param-reassign': 'off',
 		'react/function-component-definition': 'off',

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -178,10 +178,10 @@ const AddCard = React.memo<AddCardProps>(
 		return (
 			<StyledForm
 				{...props}
-				direction="column"
 				align="center"
-				justify="center"
+				direction="column"
 				gap="8"
+				justify="center"
 				tabIndex={0}
 				onSubmit={methods.handleSubmit(({ text }) => {
 					if (isCard) {
@@ -202,23 +202,23 @@ const AddCard = React.memo<AddCardProps>(
 			>
 				<FormProvider {...methods}>
 					<TextArea
-						id="text"
-						// variant={!isEmpty(cardText) ? default : undefined} }
 						floatPlaceholder={false}
+						// variant={!isEmpty(cardText) ? default : undefined} }
+						id="text"
 						placeholder="Write your comment here..."
 					/>
-					<Flex justify="end" gap="4" css={{ width: '100%' }}>
+					<Flex css={{ width: '100%' }} gap="4" justify="end">
 						{!isEditing && (
 							<Checkbox
-								setCheckedTerms={handleIsAnonymous}
 								id="anonymous"
 								label="Post anonymously"
+								setCheckedTerms={handleIsAnonymous}
 								size="16"
 							/>
 						)}
 						<ActionButton
-							size="sm"
 							css={{ width: '$48', height: '$36' }}
+							size="sm"
 							variant={!isUpdate && isCard ? 'lightOutline' : 'primaryOutline'}
 							onClick={handleClear}
 						>

diff --git a/frontend/src/components/Board/Card/CardBoard.tsx b/frontend/src/components/Board/Card/CardBoard.tsx
@@ -106,26 +106,26 @@ const CardBoard = React.memo<CardBoardProps>(
 						>
 							{editing && !isSubmited && (
 								<AddCardOrComment
-									isEditing
 									isCard
+									isEditing
 									isUpdate
-									colId={colId}
 									boardId={boardId}
-									socketId={socketId}
+									cancelUpdate={handleEditing}
 									cardId={card._id}
 									cardItemId={card.items[0]._id}
 									cardText={card.text}
-									cancelUpdate={handleEditing}
+									colId={colId}
+									socketId={socketId}
 								/>
 							)}
 							{!editing && (
 								<Flex direction="column">
 									{isCardGroup && (
-										<Flex justify="between" css={{ py: '$8' }}>
-											<Flex gap="4" align="center">
+										<Flex css={{ py: '$8' }} justify="between">
+											<Flex align="center" gap="4">
 												<Icon
-													name="merge"
 													css={{ width: '$14', height: '$14' }}
+													name="merge"
 												/>
 												<Text size="xxs" weight="medium">
 													{card.items.length} merged cards
@@ -135,8 +135,8 @@ const CardBoard = React.memo<CardBoardProps>(
 									)}
 									{!isCardGroup && (
 										<Flex
-											justify="between"
 											css={{ mb: '$14', '& > div': { zIndex: 2 } }}
+											justify="between"
 										>
 											<Text
 												size="md"
@@ -154,61 +154,61 @@ const CardBoard = React.memo<CardBoardProps>(
 											</Text>
 											{isSubmited && (
 												<Icon
-													name="menu-dots"
 													css={{ width: '$20', height: '$20' }}
+													name="menu-dots"
 												/>
 											)}
 
 											{!isSubmited && userId === card?.createdBy?._id && (
 												<PopoverCardSettings
-													firstOne={false}
-													isItem={false}
-													columnId={colId}
 													boardId={boardId}
-													socketId={socketId}
 													cardGroupId={card._id}
-													itemId={card.items[0]._id}
-													newPosition={0}
-													handleEditing={handleEditing}
+													columnId={colId}
+													firstOne={false}
 													handleDeleteCard={handleDeleting}
+													handleEditing={handleEditing}
 													hideCards={hideCards}
-													userId={userId}
+													isItem={false}
 													item={card}
+													itemId={card.items[0]._id}
+													newPosition={0}
+													socketId={socketId}
+													userId={userId}
 												/>
 											)}
 										</Flex>
 									)}
 									{card.items && isCardGroup && (
 										<CardItemList
-											items={card.items}
-											color={color}
-											submitedByTeam={card?.createdByTeam}
-											columnId={colId}
 											boardId={boardId}
 											cardGroupId={card._id}
-											socketId={socketId}
 											cardGroupPosition={index}
-											userId={userId}
+											color={color}
+											columnId={colId}
+											hideCards={hideCards}
 											isMainboard={isMainboard}
 											isSubmited={isSubmited}
-											hideCards={hideCards}
+											items={card.items}
+											socketId={socketId}
+											submitedByTeam={card?.createdByTeam}
+											userId={userId}
 										/>
 									)}
 									<CardFooter
-										boardId={boardId}
-										socketId={socketId}
-										userId={userId}
 										anonymous={card.items[card.items.length - 1 || 0].anonymous}
+										boardId={boardId}
+										boardUser={boardUser}
 										card={card}
-										teamName={card?.createdByTeam}
-										isItem={false}
-										isMainboard={isMainboard}
 										comments={comments}
-										setOpenComments={handleOpenComments}
+										hideCards={hideCards}
 										isCommentsOpened={isCommentsOpened}
-										boardUser={boardUser}
+										isItem={false}
+										isMainboard={isMainboard}
 										maxVotes={maxVotes}
-										hideCards={hideCards}
+										setOpenComments={handleOpenComments}
+										socketId={socketId}
+										teamName={card?.createdByTeam}
+										userId={userId}
 									/>
 								</Flex>
 							)}
@@ -217,20 +217,20 @@ const CardBoard = React.memo<CardBoardProps>(
 									boardId={boardId}
 									cardId={card._id}
 									cardTitle={card.text}
-									socketId={socketId}
 									handleClose={handleDeleting}
+									socketId={socketId}
 								/>
 							)}
 						</Container>
 						{isCommentsOpened && (
 							<Comments
-								comments={comments}
-								cardId={card._id}
 								boardId={boardId}
-								socketId={socketId}
+								cardId={card._id}
 								cardItems={card.items}
-								isSubmited={isSubmited}
+								comments={comments}
 								hideCards={hideCards}
+								isSubmited={isSubmited}
+								socketId={socketId}
 								userId={userId}
 							/>
 						)}

diff --git a/frontend/src/components/Board/Card/CardFooter.tsx b/frontend/src/components/Board/Card/CardFooter.tsx
@@ -132,21 +132,21 @@ const CardFooter = React.memo<FooterProps>(
 		};
 
 		return (
-			<Flex align="center" justify={!anonymous ? 'between' : 'end'} gap="6">
+			<Flex align="center" gap="6" justify={!anonymous ? 'between' : 'end'}>
 				{!anonymous && !teamName && (
 					<Flex
-						gap="4"
 						align="center"
+						gap="4"
 						css={{
 							filter: cardBlur(hideCards, card as CardType, userId)
 						}}
 					>
 						<Avatar
-							size={20}
-							fallbackText={`${createdBy?.firstName[0]}${createdBy?.lastName[0]}`}
 							isBoardPage
+							fallbackText={`${createdBy?.firstName[0]}${createdBy?.lastName[0]}`}
 							id={createdBy?._id}
 							isDefaultColor={createdBy?._id === userId}
+							size={20}
 						/>
 						<Text size="xs">
 							{createdBy?.firstName} {createdBy?.lastName}
@@ -159,7 +159,7 @@ const CardFooter = React.memo<FooterProps>(
 					</Text>
 				)}
 				{!isItem && comments && (
-					<Flex gap="10" align="center">
+					<Flex align="center" gap="10">
 						<Flex
 							align="center"
 							gap="2"
@@ -168,8 +168,8 @@ const CardFooter = React.memo<FooterProps>(
 							}}
 						>
 							<StyledButtonIcon
-								onClick={handleAddVote}
 								disabled={!isMainboard || actualBoardVotes === maxVotes}
+								onClick={handleAddVote}
 							>
 								<Icon name="thumbs-up" />
 							</StyledButtonIcon>
@@ -193,8 +193,8 @@ const CardFooter = React.memo<FooterProps>(
 							}}
 						>
 							<StyledButtonIcon
-								onClick={handleDeleteVote}
 								disabled={!isMainboard || votesOfUserInThisCard === 0}
+								onClick={handleDeleteVote}
 							>
 								<Icon name="thumbs-down" />
 							</StyledButtonIcon>
@@ -219,8 +219,8 @@ const CardFooter = React.memo<FooterProps>(
 								/>
 							</StyledButtonIcon>
 							<Text
-								size="xs"
 								css={{ visibility: comments.length > 0 ? 'visible' : 'hidden' }}
+								size="xs"
 							>
 								{comments.length}
 							</Text>

diff --git a/frontend/src/components/Board/Card/CardItem/CardItem.tsx b/frontend/src/components/Board/Card/CardItem/CardItem.tsx
@@ -66,16 +66,16 @@ const CardItem: React.FC<CardItemProps> = React.memo(
 		};
 		return (
 			<Container
-				gap="10"
-				direction="column"
 				css={{ backgroundColor: color }}
+				direction="column"
+				gap="10"
 				justify="between"
 			>
 				{!editing && (
 					<Flex direction="column">
 						<Flex
-							justify="between"
 							css={{ '& > div': { zIndex: 2 }, mb: lastOne ? 0 : '$12' }}
+							justify="between"
 						>
 							<Text
 								size="sm"
@@ -108,60 +108,60 @@ const CardItem: React.FC<CardItemProps> = React.memo(
 							)}
 							{!isSubmited && userId === item?.createdBy?._id && (
 								<PopoverCardSettings
-									firstOne={firstOne}
-									columnId={columnId}
+									isItem
 									boardId={boardId}
 									cardGroupId={cardGroupId}
-									socketId={socketId}
-									itemId={item._id}
-									newPosition={cardGroupPosition}
-									isItem
-									handleEditing={handleEditing}
+									columnId={columnId}
+									firstOne={firstOne}
 									handleDeleteCard={handleDeleting}
-									item={item}
+									handleEditing={handleEditing}
 									hideCards={hideCards}
+									item={item}
+									itemId={item._id}
+									newPosition={cardGroupPosition}
+									socketId={socketId}
 									userId={userId}
 								/>
 							)}
 						</Flex>
 
 						{!lastOne && (
 							<CardFooter
-								card={item}
-								teamName={teamName}
 								isItem
+								anonymous={anonymous}
 								boardId={boardId}
+								card={item}
+								hideCards={hideCards}
+								isMainboard={isMainboard}
 								socketId={socketId}
+								teamName={teamName}
 								userId={userId}
-								anonymous={anonymous}
-								isMainboard={isMainboard}
-								hideCards={hideCards}
 							/>
 						)}
 					</Flex>
 				)}
 				{editing && !isSubmited && (
 					<AddCardOrComment
-						isEditing
 						isCard
+						isEditing
 						isUpdate
-						colId={columnId}
 						boardId={boardId}
-						socketId={socketId}
+						cancelUpdate={handleEditing}
 						cardId={cardGroupId}
 						cardItemId={item._id}
 						cardText={item.text}
-						cancelUpdate={handleEditing}
+						colId={columnId}
+						socketId={socketId}
 					/>
 				)}
 				{deleting && (
 					<DeleteCard
-						cardTitle={item.text}
 						boardId={boardId}
 						cardId={cardGroupId}
-						socketId={socketId}
 						cardItemId={item._id}
+						cardTitle={item.text}
 						handleClose={handleDeleting}
+						socketId={socketId}
 					/>
 				)}
 			</Container>