Permalink
Browse files

Add a "never ask me again" to Clear Notifications modal

This adds a "Never ask me again" checkbox to the notification
confirmation clear modal. When the user checks the box (regardless of
whether they confirm the actual clearing), a variable is stored in
LocalStorage that remembers it was checked (or subsequently unchecked).
If the box is checked and the variable in LocalStorage is `true`, then
the modal won't appear the next time the user hits "Clear
Notifications".

This means that it's possible to get in a weird place where you select
the checkbox, cancel the modal, but still never see the modal again. I'm
okay with this. You may not be.

Requested by @Li@friend.camp
  • Loading branch information...
dariusk committed Aug 22, 2018
1 parent aa52255 commit 6761fcebaeb3c8f77c201473337f0248ef845092
@@ -0,0 +1,55 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class Checkbox extends React.PureComponent {
constructor() {
super();
this.state = {isChecked: false};
this.handleChecked = this.handleChecked.bind(this);
}
static propTypes = {
text: PropTypes.node,
onChange: PropTypes.func,
disabled: PropTypes.bool,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node,
};
handleChecked = () => {
let fcLocal = JSON.parse(localStorage.getItem('friend-camp')) || {};
fcLocal.confirmClearNotificationsNeverAsk = !this.state.isChecked;
localStorage.setItem('friend-camp', JSON.stringify(fcLocal));
this.setState({isChecked: !this.state.isChecked});
}
setRef = (c) => {
this.node = c;
}
render () {
const style = {
...this.props.style,
};
const className = classNames('fc-checkbox', this.props.className);
return (
<label
className={className}
>
<input
disabled={this.props.disabled}
type="checkbox"
onChange={this.handleChecked}
ref={this.setRef}
style={style}
/>
{this.props.text || this.props.children}
</label>
);
}
}
@@ -27,11 +27,18 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
onClear () {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.clearMessage),
confirm: intl.formatMessage(messages.clearConfirm),
onConfirm: () => dispatch(clearNotifications()),
}));
let fcLocal = JSON.parse(localStorage.getItem('friend-camp'));
if (fcLocal && fcLocal.confirmClearNotificationsNeverAsk) {
dispatch(clearNotifications());
}
else {
dispatch(openModal('CONFIRM', {
fcNeverAsk: true,
message: intl.formatMessage(messages.clearMessage),
confirm: intl.formatMessage(messages.clearConfirm),
onConfirm: () => dispatch(clearNotifications()),
}));
}
},
});
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage } from 'react-intl';
import Button from '../../../components/button';
import Checkbox from '../../../components/checkbox';
@injectIntl
export default class ConfirmationModal extends React.PureComponent {
@@ -12,6 +13,7 @@ export default class ConfirmationModal extends React.PureComponent {
onClose: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
fcNeverAsk: PropTypes.bool
};
componentDidMount() {
@@ -38,6 +40,17 @@ export default class ConfirmationModal extends React.PureComponent {
<div className='modal-root__modal confirmation-modal'>
<div className='confirmation-modal__container'>
{message}
{
this.props.fcNeverAsk ?
<p className="fc-never-ask">
<Checkbox>Never ask me again.</Checkbox>
</p>
:
<span></span>
}
</div>
<div className='confirmation-modal__action-bar'>
@@ -7,3 +7,8 @@
color: $highlight-text-color;
}
}
.fc-never-ask {
font-size: 0.8em;
margin-top: 5px;
}

0 comments on commit 6761fce

Please sign in to comment.