Re-add clear notifications button (#3708)

* Re-add clear notifications button

* remove connect() in column_settings

* one line

* remove unused props

app/javascript/mastodon/features/notifications/components/clear_column_button.js

@@ -1,28 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-
-const messages = defineMessages({
-  clear: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
-});
+import { FormattedMessage } from 'react-intl';
 
 class ClearColumnButton extends React.Component {
 
   static propTypes = {
     onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
   };
 
   render () {
-    const { intl } = this.props;
-
     return (
-      <div role='button' title={intl.formatMessage(messages.clear)} className='column-icon column-icon-clear' tabIndex='0' onClick={this.props.onClick}>
-        <i className='fa fa-eraser' />
-      </div>
+      <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fa fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
     );
   }
 
 }
 
-export default injectIntl(ClearColumnButton);
+export default ClearColumnButton;

app/javascript/mastodon/features/notifications/components/column_settings.js

@@ -1,27 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import ColumnCollapsable from '../../../components/column_collapsable';
+import ClearColumnButton from './clear_column_button';
 import SettingToggle from './setting_toggle';
 
-const messages = defineMessages({
-  settings: { id: 'notifications.settings', defaultMessage: 'Column settings' },
-});
-
 class ColumnSettings extends React.PureComponent {
 
   static propTypes = {
     settings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
     onSave: PropTypes.func.isRequired,
-    intl: PropTypes.shape({
-      formatMessage: PropTypes.func.isRequired,
-    }).isRequired,
+    onClear: PropTypes.func.isRequired,
   };
 
   render () {
-    const { settings, intl, onChange, onSave } = this.props;
+    const { settings, onChange, onSave, onClear } = this.props;
 
     const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
     const showStr  = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
@@ -29,6 +24,10 @@ class ColumnSettings extends React.PureComponent {
 
     return (
       <div>
+        <div className='column-settings__row'>
+          <ClearColumnButton onClick={onClear} />
+        </div>
+
         <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
 
         <div className='column-settings__row'>
@@ -66,4 +65,4 @@ class ColumnSettings extends React.PureComponent {
 
 }
 
-export default injectIntl(ColumnSettings);
+export default ColumnSettings;

app/javascript/mastodon/features/notifications/containers/column_settings_container.js

@@ -1,12 +1,20 @@
 import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
 import ColumnSettings from '../components/column_settings';
 import { changeSetting, saveSettings } from '../../../actions/settings';
+import { clearNotifications } from '../../../actions/notifications';
+import { openModal } from '../../../actions/modal';
+
+const messages = defineMessages({
+  clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
+  clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
+});
 
 const mapStateToProps = state => ({
   settings: state.getIn(['settings', 'notifications']),
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onChange (key, checked) {
     dispatch(changeSetting(['notifications', ...key], checked));
@@ -16,6 +24,14 @@ const mapDispatchToProps = dispatch => ({
     dispatch(saveSettings());
   },
 
+  onClear () {
+    dispatch(openModal('CONFIRM', {
+      message: intl.formatMessage(messages.clearMessage),
+      confirm: intl.formatMessage(messages.clearConfirm),
+      onConfirm: () => dispatch(clearNotifications()),
+    }));
+  },
+
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ColumnSettings));

app/javascript/mastodon/features/notifications/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
-import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications';
+import { expandNotifications, scrollTopNotifications } from '../../actions/notifications';
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import NotificationContainer from './containers/notification_container';
 import { ScrollContainer } from 'react-router-scroll';
@@ -13,13 +13,9 @@ import ColumnSettingsContainer from './containers/column_settings_container';
 import { createSelector } from 'reselect';
 import Immutable from 'immutable';
 import LoadMore from '../../components/load_more';
-import ClearColumnButton from './components/clear_column_button';
-import { openModal } from '../../actions/modal';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
-  clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
-  clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
 });
 
 const getNotifications = createSelector([
@@ -79,16 +75,6 @@ class Notifications extends React.PureComponent {
     this.props.dispatch(expandNotifications());
   }
 
-  handleClear = () => {
-    const { dispatch, intl } = this.props;
-
-    dispatch(openModal('CONFIRM', {
-      message: intl.formatMessage(messages.clearMessage),
-      confirm: intl.formatMessage(messages.clearConfirm),
-      onConfirm: () => dispatch(clearNotifications()),
-    }));
-  }
-
   handlePin = () => {
     const { columnId, dispatch } = this.props;