Refactor conditional element syntax

This commit is contained in:
Gregory Schier 2017-05-17 09:30:03 -07:00
parent 6aecf5d764
commit 184d9a203a
14 changed files with 105 additions and 108 deletions

View File

@ -54,13 +54,13 @@ class EnvironmentsDropdown extends PureComponent {
<Dropdown {...other} className={classnames(className, 'wide')}> <Dropdown {...other} className={classnames(className, 'wide')}>
<DropdownButton className="btn btn--super-compact no-wrap"> <DropdownButton className="btn btn--super-compact no-wrap">
<div className="sidebar__menu__thing"> <div className="sidebar__menu__thing">
{!activeEnvironment && subEnvironments.length ? ( {(!activeEnvironment && subEnvironments.length) && (
<Tooltip message="No environments active. Please select one to use." <Tooltip message="No environments active. Please select one to use."
className="space-right" className="space-right"
position="right"> position="right">
<i className="fa fa-exclamation-triangle notice"/> <i className="fa fa-exclamation-triangle notice"/>
</Tooltip> </Tooltip>
) : null } )}
<div className="sidebar__menu__thing__text"> <div className="sidebar__menu__thing__text">
{description} {description}
</div> </div>

View File

@ -136,23 +136,21 @@ class WorkspaceDropdown extends PureComponent {
{/* Not Logged In */} {/* Not Logged In */}
{!this.state.loggedIn ? ( {!this.state.loggedIn && (
<DropdownItem key="login" onClick={this._handleShowLogin}> <DropdownItem key="login" onClick={this._handleShowLogin}>
<i className="fa fa-sign-in"/> Log In <i className="fa fa-sign-in"/> Log In
</DropdownItem> </DropdownItem>
) : null )}
}
{!this.state.loggedIn ? ( {!this.state.loggedIn && (
<DropdownItem key="invite" <DropdownItem key="invite"
buttonClass={Link} buttonClass={Link}
href="https://insomnia.rest/pricing/" href="https://insomnia.rest/pricing/"
button> button>
<i className="fa fa-users"/> Upgrade to Plus <i className="fa fa-users"/> Upgrade to Plus
<i className="fa fa-star notice fa-outline txt-lg"/> <i className="fa fa-star notice fa-outline txt-lg"/>
</DropdownItem> </DropdownItem>
) : null )}
}
</Dropdown> </Dropdown>
); );
} }

View File

@ -319,30 +319,30 @@ class OAuth2 extends PureComponent {
<div className="pad-top-sm"> <div className="pad-top-sm">
{/* Handle major errors */} {/* Handle major errors */}
{error ? ( {error && (
<p className="notice warning margin-bottom"> <p className="notice warning margin-bottom">
{error} {error}
</p> </p>
) : null} )}
{/* Handle minor errors */} {/* Handle minor errors */}
{tok && tok.error ? ( {(tok && tok.error) && (
<div className="notice error margin-bottom"> <div className="notice error margin-bottom">
<h2 className="no-margin-top txt-lg force-wrap"> <h2 className="no-margin-top txt-lg force-wrap">
{tok.error} {tok.error}
</h2> </h2>
<p> <p>
{tok.errorDescription || 'no description provided'} {tok.errorDescription || 'no description provided'}
{tok.errorUri ? ( {tok.errorUri && (
<span>&nbsp; <span>&nbsp;
<Link href={tok.errorUri} title={tok.errorUri}> <Link href={tok.errorUri} title={tok.errorUri}>
<i className="fa fa-question-circle"/> <i className="fa fa-question-circle"/>
</Link> </Link>
</span> </span>
) : null} )}
</p> </p>
</div> </div>
) : null} )}
<div className="form-control form-control--outlined"> <div className="form-control form-control--outlined">
<label> <label>
<small> <small>
@ -364,11 +364,11 @@ class OAuth2 extends PureComponent {
</label> </label>
</div> </div>
<div className="pad-top text-right"> <div className="pad-top text-right">
{tok ? ( {tok && (
<button className="btn btn--clicky" onClick={this._handleClearTokens}> <button className="btn btn--clicky" onClick={this._handleClearTokens}>
Clear Tokens Clear Tokens
</button> </button>
) : null} )}
&nbsp;&nbsp; &nbsp;&nbsp;
<button className="btn btn--clicky" <button className="btn btn--clicky"
onClick={this._handleRefreshToken} onClick={this._handleRefreshToken}

View File

@ -83,19 +83,19 @@ class CookiesEditor extends PureComponent {
})} })}
</tbody> </tbody>
</table> </table>
{cookies.length === 0 ? ( {cookies.length === 0 && (
<div className="pad faint italic text-center"> <div className="pad faint italic text-center">
<p> <p>
I couldn't find any cookies for you. I couldn't find any cookies for you.
</p> </p>
<p> <p>
<button className="btn btn--clicky" <button className="btn btn--clicky"
onClick={e => this._handleCookieAdd()}> onClick={e => this._handleCookieAdd()}>
Add Cookie <i className="fa fa-plus-circle"></i> Add Cookie <i className="fa fa-plus-circle"></i>
</button> </button>
</p> </p>
</div> </div>
) : null} )}
</div> </div>
); );
} }

View File

@ -213,7 +213,7 @@ class KeyValueEditorRow extends PureComponent {
)} )}
</div> </div>
{multipart ? ( {multipart && (
!hideButtons ? ( !hideButtons ? (
<Dropdown right> <Dropdown right>
<DropdownButton className="tall"> <DropdownButton className="tall">
@ -231,8 +231,7 @@ class KeyValueEditorRow extends PureComponent {
<i className="fa fa-empty"/> <i className="fa fa-empty"/>
</button> </button>
) )
) : null )}
}
{!hideButtons ? ( {!hideButtons ? (
<Button onClick={this._handleDisableChange} <Button onClick={this._handleDisableChange}
@ -247,7 +246,7 @@ class KeyValueEditorRow extends PureComponent {
<button><i className="fa fa-empty"/></button> <button><i className="fa fa-empty"/></button>
)} )}
{!noDelete ? ( {!noDelete && (
!hideButtons ? ( !hideButtons ? (
<PromptButton key={Math.random()} <PromptButton key={Math.random()}
tabIndex={-1} tabIndex={-1}
@ -262,7 +261,7 @@ class KeyValueEditorRow extends PureComponent {
<i className="fa fa-empty"/> <i className="fa fa-empty"/>
</button> </button>
) )
) : null} )}
</div> </div>
</li> </li>
); );

View File

@ -118,7 +118,7 @@ class RequestCreateModal extends PureComponent {
onChange={this._handleChangeSelectedMethod} onChange={this._handleChangeSelectedMethod}
/> />
</div> </div>
{!this._shouldNotHaveBody() ? ( {!this._shouldNotHaveBody() && (
<div className="form-control form-control--no-label" style={{width: 'auto'}}> <div className="form-control form-control--no-label" style={{width: 'auto'}}>
<ContentTypeDropdown className="btn btn--clicky no-wrap" <ContentTypeDropdown className="btn btn--clicky no-wrap"
right right
@ -130,7 +130,7 @@ class RequestCreateModal extends PureComponent {
<i className="fa fa-caret-down"></i> <i className="fa fa-caret-down"></i>
</ContentTypeDropdown> </ContentTypeDropdown>
</div> </div>
) : null} )}
</div> </div>
</form> </form>
</ModalBody> </ModalBody>

View File

@ -51,12 +51,12 @@ class RequestRenderErrorModal extends PureComponent {
Failed to render <strong>{fullPath}</strong> prior to sending Failed to render <strong>{fullPath}</strong> prior to sending
</p> </p>
<div className="pad-top-sm"> <div className="pad-top-sm">
{error.path.match(/^body/) ? ( {error.path.match(/^body/) && (
<button className="btn btn--clicky margin-right-sm" <button className="btn btn--clicky margin-right-sm"
onClick={this._handleShowRequestSettings}> onClick={this._handleShowRequestSettings}>
Adjust Render Settings Adjust Render Settings
</button> </button>
) : null} )}
<Link button <Link button
href="https://insomnia.rest/documentation/templating/" href="https://insomnia.rest/documentation/templating/"
className="btn btn--clicky"> className="btn btn--clicky">

View File

@ -246,13 +246,13 @@ class RequestSwitcherModal extends PureComponent {
return ( return (
<li key={r._id}> <li key={r._id}>
<Button onClick={this._activateRequest} value={r} className={buttonClasses}> <Button onClick={this._activateRequest} value={r} className={buttonClasses}>
{requestGroup ? ( {requestGroup && (
<div className="pull-right faint italic"> <div className="pull-right faint italic">
{requestGroup.name} {requestGroup.name}
&nbsp;&nbsp; &nbsp;&nbsp;
<i className="fa fa-folder-o"></i> <i className="fa fa-folder-o"></i>
</div> </div>
) : null} )}
<MethodTag method={r.method}/> <MethodTag method={r.method}/>
<strong>{r.name}</strong> <strong>{r.name}</strong>
</Button> </Button>
@ -260,10 +260,11 @@ class RequestSwitcherModal extends PureComponent {
); );
})} })}
{matchedRequests.length && matchedWorkspaces.length {matchedRequests.length && matchedWorkspaces.length && (
? <div className="pad-left pad-right"><hr/></div> <div className="pad-left pad-right">
: null <hr/>
} </div>
)}
{matchedWorkspaces.map((w, i) => { {matchedWorkspaces.map((w, i) => {
const buttonClasses = classnames( const buttonClasses = classnames(
@ -283,19 +284,19 @@ class RequestSwitcherModal extends PureComponent {
})} })}
</ul> </ul>
{!matchedRequests.length && !matchedWorkspaces.length ? ( {(!matchedRequests.length && !matchedWorkspaces.length) && (
<div className="text-center"> <div className="text-center">
<p> <p>
No matches found for <strong>{searchString}</strong> No matches found for <strong>{searchString}</strong>
</p> </p>
<button className="btn btn--outlined btn--compact" <button className="btn btn--outlined btn--compact"
disabled={!searchString} disabled={!searchString}
onClick={this._activateCurrentIndex}> onClick={this._activateCurrentIndex}>
Create a request named {searchString} Create a request named {searchString}
</button> </button>
</div> </div>
) : null} )}
</ModalBody> </ModalBody>
</Modal> </Modal>
); );

View File

@ -244,13 +244,13 @@ class WorkspaceEnvironmentsEditModal extends PureComponent {
onSubmit={name => this._handleChangeEnvironmentName(activeEnvironment, name)} onSubmit={name => this._handleChangeEnvironmentName(activeEnvironment, name)}
value={activeEnvironment ? activeEnvironment.name : ''}/> value={activeEnvironment ? activeEnvironment.name : ''}/>
</h1> </h1>
{rootEnvironment !== activeEnvironment ? ( {rootEnvironment !== activeEnvironment && (
<PromptButton className="btn btn--clicky" <PromptButton className="btn btn--clicky"
confirmMessage="Confirm" confirmMessage="Confirm"
onClick={this._handleDeleteEnvironment}> onClick={this._handleDeleteEnvironment}>
<i className="fa fa-trash-o"/> Delete <i className="fa fa-trash-o"/> Delete
</PromptButton> </PromptButton>
) : null} )}
</div> </div>
<div className="env-modal__editor"> <div className="env-modal__editor">
<EnvironmentEditor <EnvironmentEditor

View File

@ -23,9 +23,11 @@ class WorkspaceShareSettingsModal extends PureComponent {
_handleSubmit (e) { _handleSubmit (e) {
e.preventDefault(); e.preventDefault();
} }
_handleClose () { _handleClose () {
this.hide(); this.hide();
} }
_setModalRef (n) { _setModalRef (n) {
this.modal = n; this.modal = n;
} }
@ -129,36 +131,36 @@ class WorkspaceShareSettingsModal extends PureComponent {
<Dropdown outline> <Dropdown outline>
<DropdownDivider>Teams</DropdownDivider> <DropdownDivider>Teams</DropdownDivider>
{!loading ? ( {!loading ? (
resourceGroup && resourceGroup.teamId ? ( resourceGroup && resourceGroup.teamId ? (
<DropdownButton className="btn btn--clicky">
<i className="fa fa-users"/> Shared with
{' '}
<strong>{resourceGroup.teamName}</strong>
{' '}
<i className="fa fa-caret-down"/>
</DropdownButton>
) : (
<DropdownButton className="btn btn--clicky">
<i className="fa fa-lock"/> Private <i className="fa fa-caret-down"/>
</DropdownButton>
)
) : (
<DropdownButton className="btn btn--clicky"> <DropdownButton className="btn btn--clicky">
<i className="fa fa-spin fa-refresh"/> Loading... <i className="fa fa-users"/> Shared with
{' '}
<strong>{resourceGroup.teamName}</strong>
{' '} {' '}
<i className="fa fa-caret-down"/> <i className="fa fa-caret-down"/>
</DropdownButton> </DropdownButton>
)} ) : (
<DropdownButton className="btn btn--clicky">
<i className="fa fa-lock"/> Private <i className="fa fa-caret-down"/>
</DropdownButton>
)
) : (
<DropdownButton className="btn btn--clicky">
<i className="fa fa-spin fa-refresh"/> Loading...
{' '}
<i className="fa fa-caret-down"/>
</DropdownButton>
)}
{teams.map(team => ( {teams.map(team => (
<DropdownItem key={team.id} value={team} onClick={this._handleShareWithTeam}> <DropdownItem key={team.id} value={team} onClick={this._handleShareWithTeam}>
<i className="fa fa-users"/> Share with <strong>{team.name}</strong> <i className="fa fa-users"/> Share with <strong>{team.name}</strong>
</DropdownItem> </DropdownItem>
))} ))}
{teams.length === 0 ? ( {teams.length === 0 && (
<DropdownItem disabled onClick={this._handleShareWithTeam}> <DropdownItem disabled onClick={this._handleShareWithTeam}>
<i className="fa fa-warning"/> You have no teams <i className="fa fa-warning"/> You have no teams
</DropdownItem> </DropdownItem>
) : null} )}
<DropdownDivider>Other</DropdownDivider> <DropdownDivider>Other</DropdownDivider>
<DropdownItem addIcon buttonClass={PromptButton} <DropdownItem addIcon buttonClass={PromptButton}
confirmMessage="Really make private?" confirmMessage="Really make private?"

View File

@ -259,11 +259,11 @@ class ResponsePane extends PureComponent {
<span className="bubble">{cookieHeaders.length}</span>) : null} <span className="bubble">{cookieHeaders.length}</span>) : null}
</Button> </Button>
</Tab> </Tab>
{response.timeline && response.timeline.length ? ( {response.timeline && response.timeline.length && (
<Tab> <Tab>
<Button onClick={this._trackTab} value="Timeline">Timeline</Button> <Button onClick={this._trackTab} value="Timeline">Timeline</Button>
</Tab> </Tab>
) : null} )}
</TabList> </TabList>
<TabPanel> <TabPanel>
<ResponseViewer <ResponseViewer
@ -305,7 +305,7 @@ class ResponsePane extends PureComponent {
/> />
</div> </div>
</TabPanel> </TabPanel>
{response.timeline && response.timeline.length ? ( {(response.timeline && response.timeline.length) && (
<TabPanel> <TabPanel>
<ResponseTimelineViewer <ResponseTimelineViewer
key={response._id} key={response._id}
@ -315,7 +315,7 @@ class ResponsePane extends PureComponent {
editorIndentSize={editorIndentSize} editorIndentSize={editorIndentSize}
/> />
</TabPanel> </TabPanel>
) : null } )}
</Tabs> </Tabs>
<ResponseTimer <ResponseTimer
handleCancel={cancelCurrentRequest} handleCancel={cancelCurrentRequest}

View File

@ -103,7 +103,7 @@ class TagEditor extends PureComponent {
</select> </select>
</label> </label>
</div> </div>
{(!isFound || isFlexible) ? ( {(!isFound || isFlexible) && (
<div className="form-control form-control--outlined"> <div className="form-control form-control--outlined">
<Input <Input
key={selectValue} key={selectValue}
@ -114,7 +114,7 @@ class TagEditor extends PureComponent {
onChange={this._update} onChange={this._update}
/> />
</div> </div>
) : null} )}
<div className="form-control form-control--outlined"> <div className="form-control form-control--outlined">
<label>Live Preview <label>Live Preview
{error {error

View File

@ -82,7 +82,7 @@ class VariableEditor extends PureComponent {
</select> </select>
</label> </label>
</div> </div>
{isOther ? ( {isOther && (
<div className="form-control form-control--outlined"> <div className="form-control form-control--outlined">
<Input <Input
forceEditor forceEditor
@ -92,7 +92,7 @@ class VariableEditor extends PureComponent {
onChange={this._update} onChange={this._update}
/> />
</div> </div>
) : null} )}
<div className="form-control form-control--outlined"> <div className="form-control form-control--outlined">
<label>Live Preview <label>Live Preview
{error {error

View File

@ -36,13 +36,13 @@ class ResponseCookiesViewer extends PureComponent {
return ( return (
<div> <div>
{noticeMessage ? ( {noticeMessage && (
<div className="notice info margin-bottom no-margin-top"> <div className="notice info margin-bottom no-margin-top">
<p> <p>
Automatic {noticeMessage} of cookies was disabled at the time this request was made Automatic {noticeMessage} of cookies was disabled at the time this request was made
</p> </p>
</div> </div>
) : null} )}
<table className="table--fancy table--striped"> <table className="table--fancy table--striped">
<thead> <thead>
@ -52,10 +52,7 @@ class ResponseCookiesViewer extends PureComponent {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{!headers.length {!headers.length ? this.renderRow(null, -1) : headers.map(this.renderRow)}
? this.renderRow(null, -1)
: headers.map(this.renderRow)
}
</tbody> </tbody>
</table> </table>
<p className="pad-top"> <p className="pad-top">