Refactor notifications cleaning mode

5 years ago · 8924743349
parent 3591621edc
commit 8924743349
2 changed files with 55 additions and 57 deletions
--- a/app/javascript/flavours/glitch/components/column_header.js
+++ b/app/javascript/flavours/glitch/components/column_header.js
@ -2,18 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import Icon from 'flavours/glitch/components/icon';

-import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
-
 const messages = defineMessages({
  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
  moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
-  enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
 });

 export default @injectIntl
@ -28,27 +24,21 @@ class ColumnHeader extends React.PureComponent {
    title: PropTypes.node,
    icon: PropTypes.string,
    active: PropTypes.bool,
-    localSettings : ImmutablePropTypes.map,
    multiColumn: PropTypes.bool,
    extraButton: PropTypes.node,
    showBackButton: PropTypes.bool,
-    notifCleaning: PropTypes.bool, // true only for the notification column
-    notifCleaningActive: PropTypes.bool,
-    onEnterCleaningMode: PropTypes.func,
    children: PropTypes.node,
    pinned: PropTypes.bool,
    placeholder: PropTypes.bool,
    onPin: PropTypes.func,
    onMove: PropTypes.func,
    onClick: PropTypes.func,
-    intl: PropTypes.object.isRequired,
    appendContent: PropTypes.node,
  };

  state = {
    collapsed: true,
    animating: false,
-    animatingNCD: false,
  };

  historyBack = (skip) => {
@ -90,10 +80,6 @@ class ColumnHeader extends React.PureComponent {
    this.setState({ animating: false });
  }

-  handleTransitionEndNCD = () => {
-    this.setState({ animatingNCD: false });
-  }
-
  handlePin = () => {
    if (!this.props.pinned) {
      this.historyBack();
@ -101,16 +87,9 @@ class ColumnHeader extends React.PureComponent {
    this.props.onPin();
  }

-  onEnterCleaningMode = () => {
-    this.setState({ animatingNCD: true });
-    this.props.onEnterCleaningMode(!this.props.notifCleaningActive);
-  }
-
  render () {
-    const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder, appendContent } = this.props;
-    const { collapsed, animating, animatingNCD } = this.state;
-
-    let title = this.props.title;
+    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props;
+    const { collapsed, animating } = this.state;

    const wrapperClassName = classNames('column-header__wrapper', {
      'active': active,
@ -129,20 +108,8 @@ class ColumnHeader extends React.PureComponent {
      'active': !collapsed,
    });

-    const notifCleaningButtonClassName = classNames('column-header__button', {
-      'active': notifCleaningActive,
-    });
-
-    const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', {
-      'collapsed': !notifCleaningActive,
-      'animating': animatingNCD,
-    });
-
    let extraContent, pinButton, moveButtons, backButton, collapseButton;

-    //*glitch
-    const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning);
-
    if (children) {
      extraContent = (
        <div key='extra-content' className='column-header__collapsible__extra'>
@ -203,28 +170,10 @@ class ColumnHeader extends React.PureComponent {
          <div className='column-header__buttons'>
            {hasTitle && backButton}
            {extraButton}
-            { notifCleaning ? (
-              <button
-                aria-label={msgEnterNotifCleaning}
-                title={msgEnterNotifCleaning}
-                onClick={this.onEnterCleaningMode}
-                className={notifCleaningButtonClassName}
-              >
-                <Icon id='eraser' />
-              </button>
-            ) : null}
            {collapseButton}
          </div>
        </h1>

-        { notifCleaning ? (
-          <div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}>
-            <div className='column-header__collapsible-inner nopad-drawer'>
-              {(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null }
-            </div>
-          </div>
-        ) : null}
-
        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
          <div className='column-header__collapsible-inner'>
            {(!collapsed || animating) && collapsedContent}
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from 'flavours/glitch/components/column';
@ -22,9 +23,13 @@ import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import LoadGap from 'flavours/glitch/components/load_gap';
+import Icon from 'flavours/glitch/components/icon';
+
+import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';

 const messages = defineMessages({
  title: { id: 'column.notifications', defaultMessage: 'Notifications' },
+  enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
 });

 const getNotifications = createSelector([
@ -94,6 +99,10 @@ class Notifications extends React.PureComponent {
    trackScroll: true,
  };

+  state = {
+    animatingNCD: false,
+  };
+
  handleLoadGap = (maxId) => {
    this.props.dispatch(expandNotifications({ maxId }));
  };
@ -176,8 +185,19 @@ class Notifications extends React.PureComponent {
    }
  }

+  handleTransitionEndNCD = () => {
+    this.setState({ animatingNCD: false });
+  }
+
+  onEnterCleaningMode = () => {
+    this.setState({ animatingNCD: true });
+    this.props.onEnterCleaningMode(!this.props.notifCleaningActive);
+  }
+
  render () {
    const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar } = this.props;
+    const { notifCleaning, notifCleaningActive } = this.props;
+    const { animatingNCD } = this.state;
    const pinned = !!columnId;
    const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;

@ -232,6 +252,36 @@ class Notifications extends React.PureComponent {
      </ScrollableList>
    );

+    const notifCleaningButtonClassName = classNames('column-header__button', {
+      'active': notifCleaningActive,
+    });
+
+    const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', {
+      'collapsed': !notifCleaningActive,
+      'animating': animatingNCD,
+    });
+
+    const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning);
+
+    const notifCleaningButton = (
+      <button
+        aria-label={msgEnterNotifCleaning}
+        title={msgEnterNotifCleaning}
+        onClick={this.onEnterCleaningMode}
+        className={notifCleaningButtonClassName}
+      >
+        <Icon id='eraser' />
+      </button>
+    );
+
+    const notifCleaningDrawer = (
+      <div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}>
+        <div className='column-header__collapsible-inner nopad-drawer'>
+          {(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null }
+        </div>
+      </div>
+    );
+
    return (
      <Column
        bindToDocument={!multiColumn}
@ -250,9 +300,8 @@ class Notifications extends React.PureComponent {
          pinned={pinned}
          multiColumn={multiColumn}
          localSettings={this.props.localSettings}
-          notifCleaning
-          notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text
-          onEnterCleaningMode={this.props.onEnterCleaningMode}
+          extraButton={notifCleaningButton}
+          appendContent={notifCleaningDrawer}
        >
          <ColumnSettingsContainer />
        </ColumnHeader>