Progress

app/javascript/gabsocial/features/list_create-old/components/list/index.js

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

app/javascript/gabsocial/features/list_create-old/components/list/list.js

@@ -0,0 +1,64 @@
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { removeFromListAdder, addToListAdder } from '../../../../actions/lists';
+import IconButton from '../../../../components/icon_button';
+import Icon from '../../../../components/icon';
+
+const messages = defineMessages({
+  remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
+  add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
+});
+
+const MapStateToProps = (state, { listId, added }) => ({
+  list: state.get('lists').get(listId),
+  added: typeof added === 'undefined' ? state.getIn(['listAdder', 'lists', 'items']).includes(listId) : added,
+});
+
+const mapDispatchToProps = (dispatch, { listId }) => ({
+  onRemove: () => dispatch(removeFromListAdder(listId)),
+  onAdd: () => dispatch(addToListAdder(listId)),
+});
+
+export default
+@connect(MapStateToProps, mapDispatchToProps)
+@injectIntl
+class List extends ImmutablePureComponent {
+
+  static propTypes = {
+    list: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    added: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  render () {
+    const { list, intl, onRemove, onAdd, added } = this.props;
+
+    return (
+      <div className='list'>
+        <div className='list__wrapper'>
+          <div className='list__name'>
+            <Icon id='list-ul' className='list__name-icon' fixedWidth />
+            {list.get('title')}
+          </div>
+
+          <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_create-old/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_create-old/index.js

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

app/javascript/gabsocial/features/list_create-old/list_adder.js

@@ -0,0 +1,98 @@
+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_directory/components/new_list_form';
+
+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() {
+    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 />
+
+            { /* <NewListForm /> */ }
+
+            <br />
+
+            <div className='list-adder__lists'>
+              {
+                listIds.map(ListId => <List key={ListId} listId={ListId} />)
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}