Skip to content

Commit

Permalink
return fragments in favor of arrays (#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Forfold
Forfold authored Jul 17, 2019
1 parent 0ee1621 commit aa5432b
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 206 deletions.
104 changes: 52 additions & 52 deletions web/src/app/alerts/components/AlertsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,61 +296,61 @@ export default class AlertsList extends Component {
const showFavoritesWarning =
snackbarOpen && noFavorites && !allServices && !serviceID && !isFirstLogin

return [
<CheckedAlertsFormControl
key='alerts-form-control'
data={data}
refetch={this.refetch}
/>,
<Snackbar
key='snackbar'
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={showFavoritesWarning}
onClose={this.handleCloseSnackbar}
>
<SnackbarContent
className={classes.snackbar}
aria-describedby='client-snackbar'
message={
<span id='client-snackbar' className={classes.snackbarMessage}>
<InfoIcon className={classes.snackbarIcon} />
It looks like you have no favorited services. Visit your most used
services to set them as a favorite, or enable the filter to view
alerts for all services.
</span>
}
return (
<React.Fragment>
<CheckedAlertsFormControl data={data} refetch={this.refetch} />
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={showFavoritesWarning}
onClose={this.handleCloseSnackbar}
>
<SnackbarContent
className={classes.snackbar}
aria-describedby='client-snackbar'
message={
<span id='client-snackbar' className={classes.snackbarMessage}>
<InfoIcon className={classes.snackbarIcon} />
It looks like you have no favorited services. Visit your most
used services to set them as a favorite, or enable the filter to
view alerts for all services.
</span>
}
/>
</Snackbar>
<CreateAlertFab
showFavoritesWarning={showFavoritesWarning}
serviceID={serviceID}
transition={fullScreen && (showFavoritesWarning || actionComplete)}
/>
</Snackbar>,
<CreateAlertFab
key='create-alert'
showFavoritesWarning={showFavoritesWarning}
serviceID={serviceID}
transition={fullScreen && (showFavoritesWarning || actionComplete)}
/>,
<Grid item container key='content'>
<Grid item container>
<Card key='data-card' style={{ width: '100%' }}>
<Hidden mdDown>
<AlertsListControls />
</Hidden>
<List id='alerts-list' style={{ padding: 0 }} data-cy='alerts-list'>
<InfiniteScroll
next={() => loadMore(this.getQueryData(offset))}
dataLength={len}
hasMore={hasMore}
loader={null}
scrollThreshold={(len - 20) / len}
style={{ overflow: 'hidden' }}
<Grid item container>
<Card style={{ width: '100%' }}>
<Hidden mdDown>
<AlertsListControls />
</Hidden>
<List
id='alerts-list'
style={{ padding: 0 }}
data-cy='alerts-list'
>
{content}
</InfiniteScroll>
</List>
</Card>
<InfiniteScroll
next={() => loadMore(this.getQueryData(offset))}
dataLength={len}
hasMore={hasMore}
loader={null}
scrollThreshold={(len - 20) / len}
style={{ overflow: 'hidden' }}
>
{content}
</InfiniteScroll>
</List>
</Card>
</Grid>
</Grid>
</Grid>,
]
</React.Fragment>
)
}
}
69 changes: 35 additions & 34 deletions web/src/app/alerts/components/AlertsListFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,37 +157,39 @@ export default class AlertsListFilter extends Component {
)

// renders a popover on desktop, and a swipeable drawer on mobile devices
return [
<Hidden key='desktop-filter' smDown>
<Popover
anchorEl={() => this.state.anchorEl}
open={!!this.state.anchorEl && this.state.show}
onClose={this.handleCloseFilters}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
{content}
</Popover>
</Hidden>,
<Hidden key='mobile-filter' mdUp>
<SwipeableDrawer
anchor='top'
disableDiscovery
disableSwipeToOpen
open={this.state.show}
onClose={this.handleCloseFilters}
onOpen={this.handleOpenFilters}
>
{content}
</SwipeableDrawer>
</Hidden>,
]
return (
<React.Fragment>
<Hidden smDown>
<Popover
anchorEl={() => this.state.anchorEl}
open={!!this.state.anchorEl && this.state.show}
onClose={this.handleCloseFilters}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
{content}
</Popover>
</Hidden>
<Hidden mdUp>
<SwipeableDrawer
anchor='top'
disableDiscovery
disableSwipeToOpen
open={this.state.show}
onClose={this.handleCloseFilters}
onOpen={this.handleOpenFilters}
>
{content}
</SwipeableDrawer>
</Hidden>
</React.Fragment>
)
}

/*
Expand All @@ -197,17 +199,16 @@ export default class AlertsListFilter extends Component {
*/
render() {
return (
<div>
<React.Fragment>
<IconButton
key='filter'
aria-label='Filter Alerts'
color='inherit'
onClick={this.handleOpenFilters}
>
<FilterList />
</IconButton>
{this.renderFilters()}
</div>
</React.Fragment>
)
}
}
81 changes: 41 additions & 40 deletions web/src/app/alerts/components/CheckedAlertsFormControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,46 +348,47 @@ export default class CheckedAlertsFormControl extends Component {
containerClass = classnames(classes.stickyLarge)
}

return [
<UpdateAlertsSnackbar
key='action-complete-snackbar'
errorMessage={errorMessage}
numberChecked={this.checkedAlertIDs().length}
onClose={() => this.props.setAlertsActionComplete(false)}
onExited={() => {
this.setState({ errorMessage: '', updateMessage: '' })
}}
open={actionComplete}
updateMessage={updateMessage}
/>,
<Grid key='form-control' item container className={containerClass}>
<Grid item className={classes.whitespace} />
<Grid item>
<Checkbox
checked={!this.areNoneChecked()}
data-cy='select-all'
indeterminate={!this.areNoneChecked() && !this.areAllChecked()}
tabIndex={-1}
onChange={this.toggleCheckbox}
/>
</Grid>
<Grid
item
className={classnames(classes.hover, classes.icon)}
data-cy='checkboxes-menu'
>
<OtherActions
icon={
<Icon>
<ArrowDropDown />
</Icon>
}
actions={this.getSelectOptions()}
placement='right'
/>
return (
<React.Fragment>
<UpdateAlertsSnackbar
errorMessage={errorMessage}
numberChecked={this.checkedAlertIDs().length}
onClose={() => this.props.setAlertsActionComplete(false)}
onExited={() => {
this.setState({ errorMessage: '', updateMessage: '' })
}}
open={actionComplete}
updateMessage={updateMessage}
/>
<Grid item container className={containerClass}>
<Grid item className={classes.whitespace} />
<Grid item>
<Checkbox
checked={!this.areNoneChecked()}
data-cy='select-all'
indeterminate={!this.areNoneChecked() && !this.areAllChecked()}
tabIndex={-1}
onChange={this.toggleCheckbox}
/>
</Grid>
<Grid
item
className={classnames(classes.hover, classes.icon)}
data-cy='checkboxes-menu'
>
<OtherActions
icon={
<Icon>
<ArrowDropDown />
</Icon>
}
actions={this.getSelectOptions()}
placement='right'
/>
</Grid>
{this.renderActionButtons()}
</Grid>
{this.renderActionButtons()}
</Grid>,
]
</React.Fragment>
)
}
}
34 changes: 17 additions & 17 deletions web/src/app/alerts/components/CreateAlertFab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,22 +65,22 @@ export default class CreateAlertFab extends Component {

const transitionClass = transition ? fabOpen : classes.fabClose

return [
<Fab
key='create-button'
data-cy='page-fab'
className={classnames(classes.fab, transitionClass)}
color='primary'
onClick={() => this.handleShowForm(true)}
>
<AddIcon />
</Fab>,
<AlertForm
key='alert-form'
open={this.state.showForm}
handleRequestClose={() => this.handleShowForm(false)}
serviceID={this.props.serviceID}
/>,
]
return (
<React.Fragment>
<Fab
data-cy='page-fab'
className={classnames(classes.fab, transitionClass)}
color='primary'
onClick={() => this.handleShowForm(true)}
>
<AddIcon />
</Fab>
<AlertForm
open={this.state.showForm}
handleRequestClose={() => this.handleShowForm(false)}
serviceID={this.props.serviceID}
/>
</React.Fragment>
)
}
}
44 changes: 22 additions & 22 deletions web/src/app/contact-methods/components/ContactMethodForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ class ContactMethodForm extends Component {
renderVerificationForm = () =>
this.state.showVerifyForm && (
<UserContactMethodVerificationDialog
key='verify-dialog'
onClose={() => this.setState({ showVerifyForm: false })}
contactMethodID={this.state.contactMethod.id}
/>
Expand Down Expand Up @@ -378,27 +377,28 @@ class ContactMethodForm extends Component {
title = 'Edit Contact Method'
}

return [
<ApolloFormDialog
key='Create Contact Method'
allowEdits={() => this.setState({ readOnly: false })}
caption={newUser ? newUserCaption : null}
disableCancel={newUser}
fields={this.renderFields()}
getVariables={this.getVariables}
mutation={
id ? updateContactmethodMutation : createContactMethodMutation
}
onRequestClose={this.props.handleRequestClose}
onSuccess={this.onCreateCMSuccess}
open={open}
resetForm={this.resetForm}
shouldSubmit={this.shouldSubmit}
subtitle={newUser ? newUserText : null}
title={title}
/>,
this.renderVerificationForm(),
]
return (
<React.Fragment>
<ApolloFormDialog
allowEdits={() => this.setState({ readOnly: false })}
caption={newUser ? newUserCaption : null}
disableCancel={newUser}
fields={this.renderFields()}
getVariables={this.getVariables}
mutation={
id ? updateContactmethodMutation : createContactMethodMutation
}
onRequestClose={this.props.handleRequestClose}
onSuccess={this.onCreateCMSuccess}
open={open}
resetForm={this.resetForm}
shouldSubmit={this.shouldSubmit}
subtitle={newUser ? newUserText : null}
title={title}
/>
{this.renderVerificationForm()}
</React.Fragment>
)
}
}

Expand Down
Loading

0 comments on commit aa5432b

Please sign in to comment.