Another 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 group page components.

app/javascript/gabsocial/features/list_adder/components/account.js

@@ -1,41 +0,0 @@
-import { makeGetAccount } from '../../../selectors';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
-import { injectIntl } from 'react-intl';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { accountId }) => ({
-    account: getAccount(state, accountId),
-  });
-
-  return mapStateToProps;
-};
-
-
-export default @connect(makeMapStateToProps)
-@injectIntl
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-  };
-
-  render () {
-    const { account } = this.props;
-    return (
-      <div className='account'>
-        <div className='account__wrapper'>
-          <div className='account__display-name'>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-            <DisplayName account={account} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

app/javascript/gabsocial/features/list_adder/components/list/index.js

@@ -0,0 +1 @@
+export { default } from './list';

app/javascript/gabsocial/features/list_adder/components/list/list.js

@@ -1,9 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from '../../../components/icon_button';
-import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import Icon from '../../../components/icon';
+import IconButton from '../../../../components/icon_button';
+import { removeFromListAdder, addToListAdder } from '../../../../actions/lists';
+import Icon from '../../../../components/icon';
+
+import './list.scss';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -39,24 +41,21 @@ class List extends ImmutablePureComponent {
   render () {
     const { list, intl, onRemove, onAdd, added } = this.props;
 
-    let button;
-
-    if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
-    } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
-    }
-
     return (
       <div className='list'>
         <div className='list__wrapper'>
-          <div className='list__display-name'>
-            <Icon id='list-ul' className='column-link__icon' fixedWidth />
+          <div className='list__name'>
+            <Icon id='list-ul' className='list__name-icon' fixedWidth />
             {list.get('title')}
           </div>
 
-          <div className='account__relationship'>
-            {button}
+          <div className='list__btn-block'>
+            {
+              added ?
+                <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />
+                :
+                <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />
+            }
           </div>
         </div>
       </div>

app/javascript/gabsocial/features/list_adder/components/list/list.scss

@@ -0,0 +1,31 @@
+.list {
+  padding: 4px;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &__wrapper {
+    display: flex;
+
+    .account__relationship {
+      padding: 8px 5px 0 5px;
+    }
+  }
+
+  &__name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-decoration: none;
+    font-size: 16px;
+    padding: 10px;
+  }
+
+  &__name-icon {
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+  &__btn-block {
+    height: auto;
+    position: relative;
+    padding: 0 0 0 5px;
+  }
+}

app/javascript/gabsocial/features/list_adder/index.js

@@ -1,101 +1 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { createSelector } from 'reselect';
-import { setupListAdder, resetListAdder } from '../../actions/lists';
-import List from './components/list';
-import Account from './components/account';
-import IconButton from '../../components/icon_button';
-import NewListForm from '../lists/components/new_list_form';
-import ColumnSubheading from '../../components/column_subheading/column_subheading';
-// hack
-
-const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-});
-
-const mapStateToProps = (state, {accountId}) => ({
-  listIds: getOrderedLists(state).map(list=>list.get('id')),
-  account: state.getIn(['accounts', accountId]),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onInitialize: accountId => dispatch(setupListAdder(accountId)),
-  onReset: () => dispatch(resetListAdder()),
-});
-
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
-  add: { id: 'lists.new.create', defaultMessage: 'Add List' },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class ListAdder extends ImmutablePureComponent {
-
-  static propTypes = {
-    accountId: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    onInitialize: PropTypes.func.isRequired,
-    onReset: PropTypes.func.isRequired,
-    listIds: ImmutablePropTypes.list.isRequired,
-    account: ImmutablePropTypes.map,
-  };
-
-  componentDidMount () {
-    const { onInitialize, accountId } = this.props;
-    onInitialize(accountId);
-  }
-
-  componentWillUnmount () {
-    const { onReset } = this.props;
-    onReset();
-  }
-
-  onClickClose = () => {
-    this.props.onClose('LIST_ADDER');
-  };
-
-  render () {
-    const { accountId, listIds, intl, onClose, account } = this.props;
-
-    const displayNameHtml = account ? { __html: account.get('display_name_html') } : '';
-
-    return (
-      <div className='modal-root__modal compose-modal'>
-        <div className='compose-modal__header'>
-          <h3 className='compose-modal__header__title'>
-            <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
-          </h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
-        </div>
-        <div className='compose-modal__content'>
-          <div className='list-adder'>
-            <div className='list-adder__account'>
-              <Account accountId={accountId} />
-            </div>
-
-            <br/>
-
-            <ColumnSubheading text={intl.formatMessage(messages.add)} />
-            <NewListForm />
-
-            <br/>
-
-            <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
-            <div className='list-adder__lists'>
-              {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
+export { default } from './list_adder';

app/javascript/gabsocial/features/list_adder/list_adder.js

@@ -0,0 +1,99 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import { createSelector } from 'reselect';
+import { setupListAdder, resetListAdder } from '../../actions/lists';
+import List from './components/list';
+import Account from '../../components/account';
+import IconButton from '../../components/icon_button';
+import NewListForm from '../lists/components/new_list_form';
+import ColumnSubheading from '../../components/column_subheading/column_subheading';
+
+import './list_adder.scss';
+
+const getOrderedLists = createSelector([state => state.get('lists')], lists => {
+  if (!lists) {
+    return lists;
+  }
+
+  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = (state, { accountId }) => ({
+  listIds: getOrderedLists(state).map(list => list.get('id')),
+  account: state.getIn(['accounts', accountId]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onInitialize: accountId => dispatch(setupListAdder(accountId)),
+  onReset: () => dispatch(resetListAdder()),
+});
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
+  add: { id: 'lists.new.create', defaultMessage: 'Add List' },
+  headerTitle: { id: 'list_adder.header_title', defaultMessage: 'Add or Remove from Lists' },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListAdder extends ImmutablePureComponent {
+
+  static propTypes = {
+    accountId: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    onInitialize: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    listIds: ImmutablePropTypes.list.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
+  };
+
+  componentDidMount() {
+    const { onInitialize, accountId } = this.props;
+    onInitialize(accountId);
+  }
+
+  componentWillUnmount() {
+    const { onReset } = this.props;
+    onReset();
+  }
+
+  onClickClose = () => {
+    this.props.onClose('LIST_ADDER');
+  };
+
+  render() {
+    const { listIds, intl, account } = this.props;
+
+    return (
+      <div className='modal-root__modal compose-modal'>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'>{intl.formatMessage(messages.headerTitle)}</h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+        </div>
+        <div className='compose-modal__content'>
+          <div className='list-adder'>
+            <div className='list-adder__account'>
+              <Account account={account} displayOnly/>
+            </div>
+
+            <br />
+
+            <ColumnSubheading text={intl.formatMessage(messages.add)} />
+            <NewListForm />
+
+            <br />
+
+            <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
+            <div className='list-adder__lists'>
+              {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/list_adder/list_adder.scss

@@ -0,0 +1,20 @@
+.list-adder {
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: scroll;
+
+  @include size(100%);
+
+  @media screen and (max-width: 420px) {
+    width: 90%;
+  }
+
+  &__account {
+    background: lighten($ui-base-color, 13%);
+    border-radius: 4px;
+  }
+
+  &__lists {
+    background: lighten($ui-base-color, 13%);
+  }
+}