Large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*

app/javascript/gabsocial/components/column_header/column_header.js

@@ -0,0 +1,125 @@
+import { Fragment } from 'react';
+import classNames from 'classnames';
+import { injectIntl, defineMessages } from 'react-intl';
+import Icon from '../icon';
+
+import './column_header.scss';
+
+const messages = defineMessages({
+  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+});
+
+export default @injectIntl
+class ColumnHeader extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    title: PropTypes.node,
+    icon: PropTypes.string,
+    active: PropTypes.bool,
+    children: PropTypes.node,
+  };
+
+  state = {
+    collapsed: true,
+  };
+
+  historyBack = () => {
+    if (window.history && window.history.length === 1) {
+      this.context.router.history.push('/home'); // homehack
+    } else {
+      this.context.router.history.goBack();
+    }
+  }
+
+  handleToggleClick = (e) => {
+    e.stopPropagation();
+    this.setState({
+      collapsed: !this.state.collapsed,
+    });
+  }
+
+  handleBackClick = () => {
+    this.historyBack();
+  }
+
+  render () {
+    const { title, icon, active, children, intl: { formatMessage } } = this.props;
+    const { collapsed } = this.state;
+
+    const wrapperClassName = classNames('column-header__wrapper', {
+      'column-header__wrapper--active': active,
+    });
+
+    const buttonClassName = classNames('column-header', {
+      'column-header--active': active,
+    });
+
+    const btnTitle = formatMessage(collapsed ? messages.show : messages.hide);
+    const hasTitle = icon && title;
+    const hasChildren = !!children;
+
+    if (!hasChildren && !hasTitle) {
+      return null;
+    } else if (!hasChildren && hasTitle) {
+      return (
+        <div className={wrapperClassName}>
+          <h1 className={buttonClassName}>
+            <Icon id={icon} fixedWidth className='column-header__icon' />
+            {title}
+          </h1>
+        </div>
+      );
+    }
+
+    const collapsibleClassName = classNames('column-header__collapsible', {
+      'column-header__collapsible--collapsed': collapsed,
+    });
+
+    const collapsibleButtonClassName = classNames('column-header__button', {
+      'column-header__button--active': !collapsed,
+    });
+
+    return (
+      <div className={wrapperClassName}>
+        <h1 className={buttonClassName}>
+          {
+            hasTitle && (
+              <Fragment>
+                <Icon id={icon} fixedWidth className='column-header__icon' />
+                {title}
+              </Fragment>
+            )
+          }
+
+          <button
+            className={collapsibleButtonClassName}
+            title={btnTitle}
+            aria-label={btnTitle}
+            aria-pressed={!collapsed}
+            onClick={this.handleToggleClick}
+          >
+            <Icon id='sliders' />
+          </button>
+        </h1>
+
+        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null}>
+          <div className='column-header__collapsible-inner'>
+            {
+              !collapsed &&
+              <div key='extra-content' className='column-header__collapsible__extra'>
+                {children}
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/components/column_header/column_header.scss

@@ -35,7 +35,6 @@
 
     &--active {
       &::before {
-        margin: 0 auto;
         pointer-events: none;
         z-index: 1;
         background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
@@ -43,6 +42,7 @@
         @include pseudo;
         @include size(60%, 28px);
         @include abs-position(35px, 0, auto, 0, false);
+        @include margin-center;
       }
     }
   }

app/javascript/gabsocial/components/column_header/home_column_header.js

@@ -7,7 +7,7 @@ import { createSelector } from 'reselect';
 import Icon from '../icon';
 import { fetchLists } from '../../actions/lists';
 
-import './index.scss';
+import './column_header.scss';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
@@ -31,7 +31,9 @@ const mapStateToProps = state => {
   };
 };
 
-class ColumnHeader extends ImmutablePureComponent {
+export default @connect(mapStateToProps)
+@injectIntl
+class HomeColumnHeader extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -165,6 +167,4 @@ class ColumnHeader extends ImmutablePureComponent {
     );
   }
 
-}
-
-export default injectIntl(connect(mapStateToProps)(ColumnHeader));
+}

app/javascript/gabsocial/components/column_header/index.js

@@ -1,125 +1,7 @@
-import { Fragment } from 'react';
-import classNames from 'classnames';
-import { injectIntl, defineMessages } from 'react-intl';
-import Icon from '../icon';
+import ColumnHeader from './column_header';
+import HomeColumnHeader from './home_column_header';
 
-import './index.scss';
-
-const messages = defineMessages({
-  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
-  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
-});
-
-export default @injectIntl
-class ColumnHeader extends PureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    title: PropTypes.node,
-    icon: PropTypes.string,
-    active: PropTypes.bool,
-    children: PropTypes.node,
-  };
-
-  state = {
-    collapsed: true,
-  };
-
-  historyBack = () => {
-    if (window.history && window.history.length === 1) {
-      this.context.router.history.push('/home'); // homehack
-    } else {
-      this.context.router.history.goBack();
-    }
-  }
-
-  handleToggleClick = (e) => {
-    e.stopPropagation();
-    this.setState({
-      collapsed: !this.state.collapsed,
-    });
-  }
-
-  handleBackClick = () => {
-    this.historyBack();
-  }
-
-  render () {
-    const { title, icon, active, children, intl: { formatMessage } } = this.props;
-    const { collapsed } = this.state;
-
-    const wrapperClassName = classNames('column-header__wrapper', {
-      'column-header__wrapper--active': active,
-    });
-
-    const buttonClassName = classNames('column-header', {
-      'column-header--active': active,
-    });
-
-    const btnTitle = formatMessage(collapsed ? messages.show : messages.hide);
-    const hasTitle = icon && title;
-    const hasChildren = !!children;
-
-    if (!hasChildren && !hasTitle) {
-      return null;
-    } else if (!hasChildren && hasTitle) {
-      return (
-        <div className={wrapperClassName}>
-          <h1 className={buttonClassName}>
-            <Icon id={icon} fixedWidth className='column-header__icon' />
-            {title}
-          </h1>
-        </div>
-      );
-    }
-
-    const collapsibleClassName = classNames('column-header__collapsible', {
-      'column-header__collapsible--collapsed': collapsed,
-    });
-
-    const collapsibleButtonClassName = classNames('column-header__button', {
-      'column-header__button--active': !collapsed,
-    });
-
-    return (
-      <div className={wrapperClassName}>
-        <h1 className={buttonClassName}>
-          {
-            hasTitle && (
-              <Fragment>
-                <Icon id={icon} fixedWidth className='column-header__icon' />
-                {title}
-              </Fragment>
-            )
-          }
-
-          <button
-            className={collapsibleButtonClassName}
-            title={btnTitle}
-            aria-label={btnTitle}
-            aria-pressed={!collapsed}
-            onClick={this.handleToggleClick}
-          >
-            <Icon id='sliders' />
-          </button>
-        </h1>
-
-        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null}>
-          <div className='column-header__collapsible-inner'>
-            {
-              !collapsed &&
-              <div key='extra-content' className='column-header__collapsible__extra'>
-                {children}
-              </div>
-            }
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
+export {
+  ColumnHeader,
+  HomeColumnHeader,
+}