Progress

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

@@ -0,0 +1,78 @@
+
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
+import { makeGetAccount } from '../../../selectors';
+import Avatar from '../../../components/avatar';
+import DisplayName from '../../../components/display_name';
+import IconButton from '../../../components/icon_button';
+
+const messages = defineMessages({
+  remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
+  add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
+});
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId, added }) => ({
+    account: getAccount(state, accountId),
+    added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added,
+  });
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { accountId }) => ({
+  onRemove: () => dispatch(removeFromListEditor(accountId)),
+  onAdd: () => dispatch(addToListEditor(accountId)),
+});
+
+export default
+@connect(makeMapStateToProps, mapDispatchToProps)
+@injectIntl
+class Account extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    added: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  render () {
+    const { account, 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='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 className='account__relationship'>
+            {button}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/list_edit/components/edit_list_form/edit_list_form.js

@@ -0,0 +1,48 @@
+import { defineMessages, injectIntl } from 'react-intl';
+import { changeListEditorTitle, submitListEditor } from '../../../../actions/lists';
+import ColumnInlineForm from '../../../../components/column_inline_form';
+
+const messages = defineMessages({
+  title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
+  save: { id: 'lists.new.save_title', defaultMessage: 'Save Title' },
+});
+
+const mapStateToProps = state => ({
+  value: state.getIn(['listEditor', 'title']),
+  disabled: !state.getIn(['listEditor', 'isChanged']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChange: value => dispatch(changeListEditorTitle(value)),
+  onSubmit: () => dispatch(submitListEditor(false)),
+});
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListForm extends PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  render () {
+    const { value, disabled, intl, onSubmit, onChange } = this.props;
+
+    return (
+      <ColumnInlineForm
+        value={value}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        label={intl.formatMessage(messages.title)}
+        btnTitle={intl.formatMessage(messages.save)}
+        disabled={disabled}
+      />
+    );
+  }
+
+}

app/javascript/gabsocial/features/list_edit/components/edit_list_form/index.js

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

app/javascript/gabsocial/features/list_edit/components/list_editor_search/index.js

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

app/javascript/gabsocial/features/list_edit/components/list_editor_search/list_editor_search.js

@@ -0,0 +1,68 @@
+import { defineMessages, injectIntl } from 'react-intl';
+import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../../actions/lists';
+import Search from '../../../../components/search';
+
+const messages = defineMessages({
+  search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
+  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+});
+
+const mapStateToProps = state => ({
+  value: state.getIn(['listEditor', 'suggestions', 'value']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onSubmit: value => dispatch(fetchListSuggestions(value)),
+  onClear: () => dispatch(clearListSuggestions()),
+  onChange: value => dispatch(changeListSuggestions(value)),
+});
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListEditorSearch extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+  };
+
+  handleChange = e => {
+    this.props.onChange(e.target.value);
+  }
+
+  handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      this.props.onSubmit(this.props.value);
+    }
+  }
+
+  handleSubmit = () => {
+    this.props.onSubmit(this.props.value);
+  }
+
+  handleClear = () => {
+    this.props.onClear();
+  }
+
+  render () {
+    const { value, intl } = this.props;
+
+    return (
+      <Search
+        className='list-editor-search'
+        placeholder={intl.formatMessage(messages.search)}
+        value={value}
+        onChange={this.handleChange}
+        onKeyUp={this.handleKeyUp}
+        handleSubmit={this.handleSubmit}
+        handleClear={this.handleClear}
+        searchTitle={intl.formatMessage(messages.searchTitle)}
+      />
+    )
+  }
+
+}

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

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

app/javascript/gabsocial/features/list_edit/list_edit.js

@@ -0,0 +1,101 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { injectIntl, defineMessages } from 'react-intl';
+import { setupListEditor, resetListEditor } from '../../actions/lists';
+import Account from './components/account';
+import ListEditorSearch from './components/list_editor_search';
+import EditListForm from './components/edit_list_form/edit_list_form';
+import IconButton from '../../components/icon_button';
+import Input from '../../components/input'
+
+const mapStateToProps = state => ({
+  accountIds: state.getIn(['listEditor', 'accounts', 'items']),
+  searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onInitialize: listId => dispatch(setupListEditor(listId)),
+  onReset: () => dispatch(resetListEditor()),
+});
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  changeTitle: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
+  addToList: { id: 'lists.account.add', defaultMessage: 'Add to list' },
+  removeFromList: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
+  editList: { id: 'lists.edit', defaultMessage: 'Edit list' },
+});
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListEdit extends ImmutablePureComponent {
+
+  static propTypes = {
+    listId: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    onInitialize: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list.isRequired,
+    searchAccountIds: ImmutablePropTypes.list.isRequired,
+  };
+
+  componentDidMount() {
+    const { onInitialize, listId } = this.props;
+    if (listId) onInitialize(listId);
+  }
+
+  componentWillUnmount() {
+    this.props.onReset();
+  }
+
+  onClickClose = () => {
+    this.props.onClose('LIST_ADDER');
+  };
+
+  render() {
+    const { accountIds, searchAccountIds, intl } = this.props;
+
+    return (
+      <div>
+        <Input
+          title={intl.formatMessage(messages.editList)}
+        />
+      </div>
+    )
+
+    // return (
+    //   <div className='modal-root__modal compose-modal'>
+    //     <div className='compose-modal__header'>
+    //       <h3 className='compose-modal__header__title'>
+    //         {intl.formatMessage(messages.editList)}
+    //       </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-editor'>
+    //         <EditListForm />
+    //         <br />
+
+    //         {
+    //           accountIds.size > 0 &&
+    //           <div>
+    //             <div className='list-editor__accounts'>
+    //               {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
+    //             </div>
+    //           </div>
+    //         }
+
+    //         <br />
+    //         <ListEditorSearch />
+    //         <div className='list-editor__accounts'>
+    //           {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
+    //         </div>
+    //       </div>
+    //     </div>
+    //   </div>
+    // );
+  }
+
+}