Wip: bookmark statuses view and adder

app/javascript/mastodon/features/bookmark_categories/index.jsx

@@ -17,11 +17,12 @@ import ScrollableList from 'mastodon/components/scrollable_list';
 import ColumnLink from 'mastodon/features/ui/components/column_link';
 import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
 
-import NewListForm from './components/new_list_form';
+import NewListForm from './components/new_bookmark_category_form';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmark_categories', defaultMessage: 'Bookmark categories' },
-  subheading: { id: 'bookmark_categories_ex.subheading', defaultMessage: 'Your categories' },
+  subheading: { id: 'bookmark_categories.subheading', defaultMessage: 'Your categories' },
+  allBookmarks: { id: 'bookmark_categories.all_bookmarks', defaultMessage: 'All bookmarks' },
 });
 
 const getOrderedCategories = createSelector([state => state.get('bookmark_categories')], categories => {
@@ -69,6 +70,7 @@ class BookmarkCategories extends ImmutablePureComponent {
 
         <NewListForm />
 
+        <ColumnLink to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.allBookmarks)} />,
         <ScrollableList
           scrollKey='bookmark_categories'
           emptyMessage={emptyMessage}

app/javascript/mastodon/features/bookmark_category_adder/components/account.jsx

@@ -0,0 +1,43 @@
+import { injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { Avatar } from '../../../components/avatar';
+import { DisplayName } from '../../../components/display_name';
+import { makeGetAccount } from '../../../selectors';
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId }) => ({
+    account: getAccount(state, accountId),
+  });
+
+  return mapStateToProps;
+};
+
+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>
+    );
+  }
+
+}
+
+export default connect(makeMapStateToProps)(injectIntl(Account));

app/javascript/mastodon/features/bookmark_category_adder/components/bookmark_category.jsx

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { Icon }  from 'mastodon/components/icon';
+
+import { removeFromBookmarkCategoryAdder, addToBookmarkCategoryAdder } from '../../../actions/bookmark_categories';
+import { IconButton }  from '../../../components/icon_button';
+
+const messages = defineMessages({
+  remove: { id: 'bookmark_categories.status.remove', defaultMessage: 'Remove from bookmark category' },
+  add: { id: 'bookmark_categories.status.add', defaultMessage: 'Add to bookmark category' },
+});
+
+const MapStateToProps = (state, { bookmarkCategoryId, added }) => ({
+  bookmarkCategory: state.get('bookmark_categories').get(bookmarkCategoryId),
+  added: typeof added === 'undefined' ? state.getIn(['bookmarkCategoryAdder', 'bookmarkCategories', 'items']).includes(bookmarkCategoryId) : added,
+});
+
+const mapDispatchToProps = (dispatch, { bookmarkCategoryId }) => ({
+  onRemove: () => dispatch(removeFromBookmarkCategoryAdder(bookmarkCategoryId)),
+  onAdd: () => dispatch(addToBookmarkCategoryAdder(bookmarkCategoryId)),
+});
+
+class BookmarkCategory extends ImmutablePureComponent {
+
+  static propTypes = {
+    bookmarkCategory: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onRemove: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    added: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  render () {
+    const { bookmarkCategory, 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='user-bookmarkCategory' className='column-link__icon' fixedWidth />
+            {bookmarkCategory.get('title')}
+          </div>
+
+          <div className='account__relationship'>
+            {button}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(MapStateToProps, mapDispatchToProps)(injectIntl(BookmarkCategory));

app/javascript/mastodon/features/bookmark_category_adder/index.jsx

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+
+import { injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { setupBookmarkCategoryAdder, resetBookmarkCategoryAdder } from '../../actions/bookmark_categories';
+import NewBookmarkCategoryForm from '../bookmark_categories/components/new_bookmark_category_form';
+
+// import Account from './components/account';
+import BookmarkCategory from './components/bookmark_category';
+
+const getOrderedBookmarkCategories = createSelector([state => state.get('bookmark_categories')], bookmarkCategories => {
+  if (!bookmarkCategories) {
+    return bookmarkCategories;
+  }
+
+  return bookmarkCategories.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
+});
+
+const mapStateToProps = state => ({
+  bookmarkCategoryIds: getOrderedBookmarkCategories(state).map(bookmarkCategory=>bookmarkCategory.get('id')),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onInitialize: statusId => dispatch(setupBookmarkCategoryAdder(statusId)),
+  onReset: () => dispatch(resetBookmarkCategoryAdder()),
+});
+
+class BookmarkCategoryAdder extends ImmutablePureComponent {
+
+  static propTypes = {
+    statusId: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    onInitialize: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    bookmarkCategoryIds: ImmutablePropTypes.list.isRequired,
+  };
+
+  componentDidMount () {
+    const { onInitialize, statusId } = this.props;
+    onInitialize(statusId);
+  }
+
+  componentWillUnmount () {
+    const { onReset } = this.props;
+    onReset();
+  }
+
+  render () {
+    const { bookmarkCategoryIds } = this.props;
+
+    return (
+      <div className='modal-root__modal list-adder'>
+        {/*
+        <div className='list-adder__account'>
+          <Account accountId={accountId} />
+        </div>
+        */}
+
+        <NewBookmarkCategoryForm />
+
+
+        <div className='list-adder__lists'>
+          {bookmarkCategoryIds.map(BookmarkCategoryId => <BookmarkCategory key={BookmarkCategoryId} bookmarkCategoryId={BookmarkCategoryId} />)}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(BookmarkCategoryAdder));

app/javascript/mastodon/features/bookmark_category_statuses/index.jsx

@@ -99,8 +99,8 @@ class BookmarkCategoryStatuses extends ImmutablePureComponent {
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.heading)}>
         <ColumnHeader
-          icon='bookmark_ex'
-          title={intl.formatMessage(messages.heading)}
+          icon='bookmark'
+          title={bookmarkCategory.get('title')}
           onPin={this.handlePin}
           onMove={this.handleMove}
           onClick={this.handleHeaderClick}

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -72,6 +72,7 @@ class ActionBar extends PureComponent {
     onEmojiReact: PropTypes.func.isRequired,
     onReference: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
+    onBookmarkCategoryAdder: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
     onEdit: PropTypes.func.isRequired,
     onDirect: PropTypes.func.isRequired,

app/javascript/mastodon/features/status/index.jsx

@@ -374,6 +374,15 @@ class Status extends ImmutablePureComponent {
     }
   };
 
+  handleBookmarkCategoryAdderClick = (status) => {
+    this.props.dispatch(openModal({
+      modalType: 'BOOKMARK_CATEGORY_ADDER',
+      modalProps: {
+        statusId: status.get('id'),
+      },
+    }));
+  };
+
   handleDeleteClick = (status, history, withRedraft = false) => {
     const { dispatch, intl } = this.props;
 
@@ -737,6 +746,7 @@ class Status extends ImmutablePureComponent {
                   onReblogForceModal={this.handleReblogForceModalClick}
                   onReference={this.handleReference}
                   onBookmark={this.handleBookmarkClick}
+                  onBookmarkCategoryAdder={this.handleBookmarkCategoryAdderClick}
                   onDelete={this.handleDeleteClick}
                   onEdit={this.handleEditClick}
                   onDirect={this.handleDirectClick}

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -15,6 +15,7 @@ import {
   AntennaAdder,
   CircleEditor,
   CircleAdder,
+  BookmarkCategoryAdder,
   CompareHistoryModal,
   FilterModal,
   InteractionModal,
@@ -55,6 +56,7 @@ export const MODAL_COMPONENTS = {
   'LIST_ADDER': ListAdder,
   'ANTENNA_ADDER': AntennaAdder,
   'CIRCLE_ADDER': CircleAdder,
+  'BOOKMARK_CATEGORY_ADDER': BookmarkCategoryAdder,
   'COMPARE_HISTORY': CompareHistoryModal,
   'FILTER': FilterModal,
   'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,

app/javascript/mastodon/features/ui/util/async-components.js

@@ -130,6 +130,10 @@ export function BookmarkCategoryStatuses () {
   return import(/* webpackChunkName: "features/bookmark_category_statuses" */'../../bookmark_category_statuses');
 }
 
+export function BookmarkCategoryAdder () {
+  return import(/* webpackChunkName: "features/bookmark_category_adder" */'../../bookmark_category_adder');
+}
+
 export function Blocks () {
   return import(/* webpackChunkName: "features/blocks" */'../../blocks');
 }