From 5566618c470848fe56edbd28ee07c7907f74c6bc Mon Sep 17 00:00:00 2001
From: ireic <ivor.reic@gmail.com>
Date: Thu, 23 Jan 2020 20:16:18 +0100
Subject: [PATCH] Replaced React.Fragment shorthands with elements

---
 client/.eslintrc.json                              |  1 +
 client/src/App/index.jsx                           |  6 +++---
 .../Board/IssueDetails/AssigneesReporter/index.jsx |  6 +++---
 .../Board/IssueDetails/Comments/BodyForm/index.jsx |  6 +++---
 .../Board/IssueDetails/Comments/Comment/index.jsx  |  6 +++---
 .../Board/IssueDetails/Comments/Create/index.jsx   |  6 +++---
 .../Board/IssueDetails/Description/index.jsx       | 14 +++++++-------
 .../Board/IssueDetails/EstimateTracking/index.jsx  |  6 +++---
 .../Project/Board/IssueDetails/Priority/index.jsx  |  6 +++---
 .../Project/Board/IssueDetails/Status/index.jsx    |  6 +++---
 .../src/Project/Board/IssueDetails/Title/index.jsx |  6 +++---
 client/src/Project/Board/IssueDetails/index.jsx    |  6 +++---
 client/src/Project/Board/index.jsx                 |  6 +++---
 client/src/Project/IssueSearch/index.jsx           | 10 +++++-----
 .../src/shared/components/ConfirmModal/index.jsx   |  6 +++---
 client/src/shared/components/Modal/index.jsx       |  6 +++---
 client/src/shared/components/Tooltip/index.jsx     |  6 +++---
 17 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index 902e319..16afce3 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -29,6 +29,7 @@
     "react/no-array-index-key": 0,
     "react/forbid-prop-types": 0,
     "react/prop-types": [2, { "skipUndeclared": true }],
+    "react/jsx-fragments": [2, "element"],
     "react/state-in-constructor": 0,
     "react/jsx-props-no-spreading": 0,
     "jsx-a11y/click-events-have-key-events": 0
diff --git a/client/src/App/index.jsx b/client/src/App/index.jsx
index ca099ca..0a57edf 100644
--- a/client/src/App/index.jsx
+++ b/client/src/App/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
@@ -11,12 +11,12 @@ import Routes from './Routes';
 import './fontStyles.css';
 
 const App = () => (
-  <>
+  <Fragment>
     <NormalizeStyles />
     <BaseStyles />
     <Toast />
     <Routes />
-  </>
+  </Fragment>
 );
 
 export default App;
diff --git a/client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx b/client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx
index 8208942..1b7d1da 100644
--- a/client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx
+++ b/client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { Avatar, Select, Icon } from 'shared/components';
@@ -18,7 +18,7 @@ const ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, project
   const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
 
   return (
-    <>
+    <Fragment>
       <SectionTitle>Assignees</SectionTitle>
       <Select
         isMulti
@@ -49,7 +49,7 @@ const ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, project
         renderValue={({ value: userId }) => renderUser(getUserById(userId), true)}
         renderOption={({ value: userId }) => renderUser(getUserById(userId))}
       />
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx b/client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx
index fe3dd7c..3c6e9b6 100644
--- a/client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { Textarea } from 'shared/components';
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
   };
 
   return (
-    <>
+    <Fragment>
       <Textarea
         autoFocus
         placeholder="Add a comment..."
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
           Cancel
         </FormButton>
       </Actions>
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx b/client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx
index 69f85d7..c1cb46f 100644
--- a/client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import api from 'shared/utils/api';
@@ -65,7 +65,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
             onCancel={() => setFormOpen(false)}
           />
         ) : (
-          <>
+          <Fragment>
             <Body>{comment.body}</Body>
             <EditLink onClick={() => setFormOpen(true)}>Edit</EditLink>
             <ConfirmModal
@@ -75,7 +75,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
               onConfirm={handleCommentDelete}
               renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>}
             />
-          </>
+          </Fragment>
         )}
       </Content>
     </Comment>
diff --git a/client/src/Project/Board/IssueDetails/Comments/Create/index.jsx b/client/src/Project/Board/IssueDetails/Comments/Create/index.jsx
index a443a3c..0eacd05 100644
--- a/client/src/Project/Board/IssueDetails/Comments/Create/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Comments/Create/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import api from 'shared/utils/api';
@@ -47,10 +47,10 @@ const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
             onCancel={() => setFormOpen(false)}
           />
         ) : (
-          <>
+          <Fragment>
             <FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
             <ProTip setFormOpen={setFormOpen} />
-          </>
+          </Fragment>
         )}
       </Right>
     </Create>
diff --git a/client/src/Project/Board/IssueDetails/Description/index.jsx b/client/src/Project/Board/IssueDetails/Description/index.jsx
index efb4f55..2340fde 100644
--- a/client/src/Project/Board/IssueDetails/Description/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Description/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { getTextContentsFromHtmlString } from 'shared/utils/browser';
@@ -23,10 +23,10 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
   const isDescriptionEmpty = getTextContentsFromHtmlString(description).trim().length === 0;
 
   return (
-    <>
+    <Fragment>
       <Title>Description</Title>
       {isEditing ? (
-        <>
+        <Fragment>
           <TextEditor
             placeholder="Describe the issue"
             defaultValue={description}
@@ -40,17 +40,17 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
               Cancel
             </Button>
           </Actions>
-        </>
+        </Fragment>
       ) : (
-        <>
+        <Fragment>
           {isDescriptionEmpty ? (
             <EmptyLabel onClick={() => setEditing(true)}>Add a description...</EmptyLabel>
           ) : (
             <TextEditedContent content={description} onClick={() => setEditing(true)} />
           )}
-        </>
+        </Fragment>
       )}
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx b/client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx
index 296f5f0..cc03e67 100644
--- a/client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx
+++ b/client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { isNil } from 'lodash';
 
@@ -22,7 +22,7 @@ const propTypes = {
 };
 
 const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
-  <>
+  <Fragment>
     <SectionTitle>Original Estimate (hours)</SectionTitle>
     {renderHourInput('estimate', issue, updateIssue)}
 
@@ -57,7 +57,7 @@ const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
         </ModalContents>
       )}
     />
-  </>
+  </Fragment>
 );
 
 const renderHourInput = (fieldName, issue, updateIssue) => (
diff --git a/client/src/Project/Board/IssueDetails/Priority/index.jsx b/client/src/Project/Board/IssueDetails/Priority/index.jsx
index fef14ff..1f03361 100644
--- a/client/src/Project/Board/IssueDetails/Priority/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Priority/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
 };
 
 const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
-  <>
+  <Fragment>
     <SectionTitle>Priority</SectionTitle>
     <Select
       variant="empty"
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
       renderValue={({ value: priority }) => renderPriorityItem(priority, true)}
       renderOption={({ value: priority }) => renderPriorityItem(priority)}
     />
-  </>
+  </Fragment>
 );
 
 const renderPriorityItem = (priority, isValue) => (
diff --git a/client/src/Project/Board/IssueDetails/Status/index.jsx b/client/src/Project/Board/IssueDetails/Status/index.jsx
index bba590d..177d7e3 100644
--- a/client/src/Project/Board/IssueDetails/Status/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Status/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
 };
 
 const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
-  <>
+  <Fragment>
     <SectionTitle>Status</SectionTitle>
     <Select
       variant="empty"
@@ -36,7 +36,7 @@ const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
         <Status color={status}>{IssueStatusCopy[status]}</Status>
       )}
     />
-  </>
+  </Fragment>
 );
 
 ProjectBoardIssueDetailsStatus.propTypes = propTypes;
diff --git a/client/src/Project/Board/IssueDetails/Title/index.jsx b/client/src/Project/Board/IssueDetails/Title/index.jsx
index 6ad869a..d569f24 100644
--- a/client/src/Project/Board/IssueDetails/Title/index.jsx
+++ b/client/src/Project/Board/IssueDetails/Title/index.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { KeyCodes } from 'shared/constants/keyCodes';
@@ -31,7 +31,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
   };
 
   return (
-    <>
+    <Fragment>
       <TitleTextarea
         minRows={1}
         placeholder="Short summary"
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
         }}
       />
       {error && <ErrorText>{error}</ErrorText>}
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/Board/IssueDetails/index.jsx b/client/src/Project/Board/IssueDetails/index.jsx
index 2111457..bf708fb 100644
--- a/client/src/Project/Board/IssueDetails/index.jsx
+++ b/client/src/Project/Board/IssueDetails/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import api from 'shared/utils/api';
@@ -55,7 +55,7 @@ const ProjectBoardIssueDetails = ({
   };
 
   return (
-    <>
+    <Fragment>
       <TopActions>
         <Type issue={issue} updateIssue={updateIssue} />
         <TopActionsRight>
@@ -85,7 +85,7 @@ const ProjectBoardIssueDetails = ({
           <Dates issue={issue} />
         </Right>
       </Content>
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/Board/index.jsx b/client/src/Project/Board/index.jsx
index c8acfd8..31e8da7 100644
--- a/client/src/Project/Board/index.jsx
+++ b/client/src/Project/Board/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Route, useRouteMatch, useHistory } from 'react-router-dom';
 
@@ -30,7 +30,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
   const [filters, mergeFilters] = useMergeState(defaultFilters);
 
   return (
-    <>
+    <Fragment>
       <Breadcrumbs items={['Projects', project.name, 'Kanban Board']} />
       <Header />
       <Filters
@@ -65,7 +65,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
           />
         )}
       />
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/Project/IssueSearch/index.jsx b/client/src/Project/IssueSearch/index.jsx
index f9f8315..aeaeb22 100644
--- a/client/src/Project/IssueSearch/index.jsx
+++ b/client/src/Project/IssueSearch/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { get } from 'lodash';
@@ -60,17 +60,17 @@ const ProjectIssueSearch = ({ project }) => {
       </SearchInputCont>
 
       {isSearchTermEmpty && recentIssues.length > 0 && (
-        <>
+        <Fragment>
           <SectionTitle>Recent Issues</SectionTitle>
           {recentIssues.map(renderIssue)}
-        </>
+        </Fragment>
       )}
 
       {!isSearchTermEmpty && matchingIssues.length > 0 && (
-        <>
+        <Fragment>
           <SectionTitle>Matching Issues</SectionTitle>
           {matchingIssues.map(renderIssue)}
-        </>
+        </Fragment>
       )}
 
       {!isSearchTermEmpty && !isLoading && matchingIssues.length === 0 && (
diff --git a/client/src/shared/components/ConfirmModal/index.jsx b/client/src/shared/components/ConfirmModal/index.jsx
index 5605d01..81e14b8 100644
--- a/client/src/shared/components/ConfirmModal/index.jsx
+++ b/client/src/shared/components/ConfirmModal/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { StyledConfirmModal, Title, Message, Actions, StyledButton } from './Styles';
@@ -52,7 +52,7 @@ const ConfirmModal = ({
       withCloseIcon={false}
       renderLink={renderLink}
       renderContent={modal => (
-        <>
+        <Fragment>
           <Title>{title}</Title>
           {message && <Message>{message}</Message>}
           <Actions>
@@ -67,7 +67,7 @@ const ConfirmModal = ({
               {cancelText}
             </StyledButton>
           </Actions>
-        </>
+        </Fragment>
       )}
     />
   );
diff --git a/client/src/shared/components/Modal/index.jsx b/client/src/shared/components/Modal/index.jsx
index 6e7a6d9..3b7c84c 100644
--- a/client/src/shared/components/Modal/index.jsx
+++ b/client/src/shared/components/Modal/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { Fragment, useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
@@ -68,7 +68,7 @@ const Modal = ({
   }, [isOpen]);
 
   return (
-    <>
+    <Fragment>
       {!isControlled && renderLink({ open: () => setStateOpen(true) })}
 
       {isOpen &&
@@ -89,7 +89,7 @@ const Modal = ({
           </ScrollOverlay>,
           $root,
         )}
-    </>
+    </Fragment>
   );
 };
 
diff --git a/client/src/shared/components/Tooltip/index.jsx b/client/src/shared/components/Tooltip/index.jsx
index 8f90f5d..d16aaf0 100644
--- a/client/src/shared/components/Tooltip/index.jsx
+++ b/client/src/shared/components/Tooltip/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { Fragment, useState, useRef, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
@@ -58,7 +58,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
   }, [isOpen, offset, placement]);
 
   return (
-    <>
+    <Fragment>
       {renderLink({ ref: $linkRef, onClick: isOpen ? closeTooltip : openTooltip })}
 
       {isOpen &&
@@ -68,7 +68,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
           </StyledTooltip>,
           $root,
         )}
-    </>
+    </Fragment>
   );
 };