k4rli/fauxjira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced React.Fragment shorthands with elements

Browse Source
This commit is contained in:
ireic
2020-01-23 20:16:18 +01:00
parent fffb0fed4f
commit 5566618c47
17 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/.eslintrc.json
View File

@@ -29,6 +29,7 @@
"react/no-array-index-key": 0, "react/no-array-index-key": 0,
"react/forbid-prop-types": 0, "react/forbid-prop-types": 0,
"react/prop-types": [2, { "skipUndeclared": true }], "react/prop-types": [2, { "skipUndeclared": true }],
"react/jsx-fragments": [2, "element"],
"react/state-in-constructor": 0, "react/state-in-constructor": 0,
"react/jsx-props-no-spreading": 0, "react/jsx-props-no-spreading": 0,
"jsx-a11y/click-events-have-key-events": 0 "jsx-a11y/click-events-have-key-events": 0

6
client/src/App/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import NormalizeStyles from './NormalizeStyles'; import NormalizeStyles from './NormalizeStyles';
import BaseStyles from './BaseStyles'; import BaseStyles from './BaseStyles';
@@ -11,12 +11,12 @@ import Routes from './Routes';
import './fontStyles.css'; import './fontStyles.css';
const App = () => ( const App = () => (
<> <Fragment>
<NormalizeStyles /> <NormalizeStyles />
<BaseStyles /> <BaseStyles />
<Toast /> <Toast />
<Routes /> <Routes />
</> </Fragment>
); );
export default App; export default App;

6
client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Avatar, Select, Icon } from 'shared/components'; 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 })); const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
return ( return (
<> <Fragment>
<SectionTitle>Assignees</SectionTitle> <SectionTitle>Assignees</SectionTitle>
<Select <Select
isMulti isMulti
@@ -49,7 +49,7 @@ const ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, project
renderValue={({ value: userId }) => renderUser(getUserById(userId), true)} renderValue={({ value: userId }) => renderUser(getUserById(userId), true)}
renderOption={({ value: userId }) => renderUser(getUserById(userId))} renderOption={({ value: userId }) => renderUser(getUserById(userId))}
/> />
</> </Fragment>
); );
}; };

6
client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useRef } from 'react'; import React, { Fragment, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Textarea } from 'shared/components'; import { Textarea } from 'shared/components';
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
}; };
return ( return (
<> <Fragment>
<Textarea <Textarea
autoFocus autoFocus
placeholder="Add a comment..." placeholder="Add a comment..."
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
Cancel Cancel
</FormButton> </FormButton>
</Actions> </Actions>
</> </Fragment>
); );
}; };

6
client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import api from 'shared/utils/api'; import api from 'shared/utils/api';
@@ -65,7 +65,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
onCancel={() => setFormOpen(false)} onCancel={() => setFormOpen(false)}
/> />
) : ( ) : (
<> <Fragment>
<Body>{comment.body}</Body> <Body>{comment.body}</Body>
<EditLink onClick={() => setFormOpen(true)}>Edit</EditLink> <EditLink onClick={() => setFormOpen(true)}>Edit</EditLink>
<ConfirmModal <ConfirmModal
@@ -75,7 +75,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
onConfirm={handleCommentDelete} onConfirm={handleCommentDelete}
renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>} renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>}
/> />
</> </Fragment>
)} )}
</Content> </Content>
</Comment> </Comment>

6
client/src/Project/Board/IssueDetails/Comments/Create/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import api from 'shared/utils/api'; import api from 'shared/utils/api';
@@ -47,10 +47,10 @@ const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
onCancel={() => setFormOpen(false)} onCancel={() => setFormOpen(false)}
/> />
) : ( ) : (
<> <Fragment>
<FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea> <FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
<ProTip setFormOpen={setFormOpen} /> <ProTip setFormOpen={setFormOpen} />
</> </Fragment>
)} )}
</Right> </Right>
</Create> </Create>

14
client/src/Project/Board/IssueDetails/Description/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { getTextContentsFromHtmlString } from 'shared/utils/browser'; import { getTextContentsFromHtmlString } from 'shared/utils/browser';
@@ -23,10 +23,10 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
const isDescriptionEmpty = getTextContentsFromHtmlString(description).trim().length === 0; const isDescriptionEmpty = getTextContentsFromHtmlString(description).trim().length === 0;
return ( return (
<> <Fragment>
<Title>Description</Title> <Title>Description</Title>
{isEditing ? ( {isEditing ? (
<> <Fragment>
<TextEditor <TextEditor
placeholder="Describe the issue" placeholder="Describe the issue"
defaultValue={description} defaultValue={description}
@@ -40,17 +40,17 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
Cancel Cancel
</Button> </Button>
</Actions> </Actions>
</> </Fragment>
) : ( ) : (
<> <Fragment>
{isDescriptionEmpty ? ( {isDescriptionEmpty ? (
<EmptyLabel onClick={() => setEditing(true)}>Add a description...</EmptyLabel> <EmptyLabel onClick={() => setEditing(true)}>Add a description...</EmptyLabel>
) : ( ) : (
<TextEditedContent content={description} onClick={() => setEditing(true)} /> <TextEditedContent content={description} onClick={() => setEditing(true)} />
)} )}
</> </Fragment>
)} )}
</> </Fragment>
); );
}; };

6
client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { isNil } from 'lodash'; import { isNil } from 'lodash';
@@ -22,7 +22,7 @@ const propTypes = {
}; };
const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => ( const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
<> <Fragment>
<SectionTitle>Original Estimate (hours)</SectionTitle> <SectionTitle>Original Estimate (hours)</SectionTitle>
{renderHourInput('estimate', issue, updateIssue)} {renderHourInput('estimate', issue, updateIssue)}
@@ -57,7 +57,7 @@ const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
</ModalContents> </ModalContents>
)} )}
/> />
</> </Fragment>
); );
const renderHourInput = (fieldName, issue, updateIssue) => ( const renderHourInput = (fieldName, issue, updateIssue) => (

6
client/src/Project/Board/IssueDetails/Priority/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues'; import { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
}; };
const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => ( const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
<> <Fragment>
<SectionTitle>Priority</SectionTitle> <SectionTitle>Priority</SectionTitle>
<Select <Select
variant="empty" variant="empty"
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
renderValue={({ value: priority }) => renderPriorityItem(priority, true)} renderValue={({ value: priority }) => renderPriorityItem(priority, true)}
renderOption={({ value: priority }) => renderPriorityItem(priority)} renderOption={({ value: priority }) => renderPriorityItem(priority)}
/> />
</> </Fragment>
); );
const renderPriorityItem = (priority, isValue) => ( const renderPriorityItem = (priority, isValue) => (

6
client/src/Project/Board/IssueDetails/Status/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues'; import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
}; };
const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => ( const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
<> <Fragment>
<SectionTitle>Status</SectionTitle> <SectionTitle>Status</SectionTitle>
<Select <Select
variant="empty" variant="empty"
@@ -36,7 +36,7 @@ const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
<Status color={status}>{IssueStatusCopy[status]}</Status> <Status color={status}>{IssueStatusCopy[status]}</Status>
)} )}
/> />
</> </Fragment>
); );
ProjectBoardIssueDetailsStatus.propTypes = propTypes; ProjectBoardIssueDetailsStatus.propTypes = propTypes;

6
client/src/Project/Board/IssueDetails/Title/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react'; import React, { Fragment, useRef, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { KeyCodes } from 'shared/constants/keyCodes'; import { KeyCodes } from 'shared/constants/keyCodes';
@@ -31,7 +31,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
}; };
return ( return (
<> <Fragment>
<TitleTextarea <TitleTextarea
minRows={1} minRows={1}
placeholder="Short summary" placeholder="Short summary"
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
}} }}
/> />
{error && <ErrorText>{error}</ErrorText>} {error && <ErrorText>{error}</ErrorText>}
</> </Fragment>
); );
}; };

6
client/src/Project/Board/IssueDetails/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import api from 'shared/utils/api'; import api from 'shared/utils/api';
@@ -55,7 +55,7 @@ const ProjectBoardIssueDetails = ({
}; };
return ( return (
<> <Fragment>
<TopActions> <TopActions>
<Type issue={issue} updateIssue={updateIssue} /> <Type issue={issue} updateIssue={updateIssue} />
<TopActionsRight> <TopActionsRight>
@@ -85,7 +85,7 @@ const ProjectBoardIssueDetails = ({
<Dates issue={issue} /> <Dates issue={issue} />
</Right> </Right>
</Content> </Content>
</> </Fragment>
); );
}; };

6
client/src/Project/Board/index.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Route, useRouteMatch, useHistory } from 'react-router-dom'; import { Route, useRouteMatch, useHistory } from 'react-router-dom';
@@ -30,7 +30,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
const [filters, mergeFilters] = useMergeState(defaultFilters); const [filters, mergeFilters] = useMergeState(defaultFilters);
return ( return (
<> <Fragment>
<Breadcrumbs items={['Projects', project.name, 'Kanban Board']} /> <Breadcrumbs items={['Projects', project.name, 'Kanban Board']} />
<Header /> <Header />
<Filters <Filters
@@ -65,7 +65,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
/> />
)} )}
/> />
</> </Fragment>
); );
}; };

10
client/src/Project/IssueSearch/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { get } from 'lodash'; import { get } from 'lodash';
@@ -60,17 +60,17 @@ const ProjectIssueSearch = ({ project }) => {
</SearchInputCont> </SearchInputCont>
{isSearchTermEmpty && recentIssues.length > 0 && ( {isSearchTermEmpty && recentIssues.length > 0 && (
<> <Fragment>
<SectionTitle>Recent Issues</SectionTitle> <SectionTitle>Recent Issues</SectionTitle>
{recentIssues.map(renderIssue)} {recentIssues.map(renderIssue)}
</> </Fragment>
)} )}
{!isSearchTermEmpty && matchingIssues.length > 0 && ( {!isSearchTermEmpty && matchingIssues.length > 0 && (
<> <Fragment>
<SectionTitle>Matching Issues</SectionTitle> <SectionTitle>Matching Issues</SectionTitle>
{matchingIssues.map(renderIssue)} {matchingIssues.map(renderIssue)}
</> </Fragment>
)} )}
{!isSearchTermEmpty && !isLoading && matchingIssues.length === 0 && ( {!isSearchTermEmpty && !isLoading && matchingIssues.length === 0 && (

6
client/src/shared/components/ConfirmModal/index.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { StyledConfirmModal, Title, Message, Actions, StyledButton } from './Styles'; import { StyledConfirmModal, Title, Message, Actions, StyledButton } from './Styles';
@@ -52,7 +52,7 @@ const ConfirmModal = ({
withCloseIcon={false} withCloseIcon={false}
renderLink={renderLink} renderLink={renderLink}
renderContent={modal => ( renderContent={modal => (
<> <Fragment>
<Title>{title}</Title> <Title>{title}</Title>
{message && <Message>{message}</Message>} {message && <Message>{message}</Message>}
<Actions> <Actions>
@@ -67,7 +67,7 @@ const ConfirmModal = ({
{cancelText} {cancelText}
</StyledButton> </StyledButton>
</Actions> </Actions>
</> </Fragment>
)} )}
/> />
); );

6
client/src/shared/components/Modal/index.jsx
View File

@@ -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 ReactDOM from 'react-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@@ -68,7 +68,7 @@ const Modal = ({
}, [isOpen]); }, [isOpen]);
return ( return (
<> <Fragment>
{!isControlled && renderLink({ open: () => setStateOpen(true) })} {!isControlled && renderLink({ open: () => setStateOpen(true) })}
{isOpen && {isOpen &&
@@ -89,7 +89,7 @@ const Modal = ({
</ScrollOverlay>, </ScrollOverlay>,
$root, $root,
)} )}
</> </Fragment>
); );
}; };

6
client/src/shared/components/Tooltip/index.jsx
View File

@@ -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 ReactDOM from 'react-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@@ -58,7 +58,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
}, [isOpen, offset, placement]); }, [isOpen, offset, placement]);
return ( return (
<> <Fragment>
{renderLink({ ref: $linkRef, onClick: isOpen ? closeTooltip : openTooltip })} {renderLink({ ref: $linkRef, onClick: isOpen ? closeTooltip : openTooltip })}
{isOpen && {isOpen &&
@@ -68,7 +68,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
</StyledTooltip>, </StyledTooltip>,
$root, $root,
)} )}
</> </Fragment>
); );
}; };