Added bookmarks

• Added:
- bookmarks for GabPRO members only
- migration for creation of StatusBookmarks
- all necessary routes, controllers
- redux for adding, removing, fetching and displaying bookmarks
- bookmark icon
- doorkeeper scopes
- backend and frontend support

Bookmarks behave like likes/favorites, except they aren't shared with other users and do not have an associated counter.

dfea7368c9

app/javascript/gabsocial/actions/bookmarks.js

@@ -0,0 +1,98 @@
+import api, { getLinks } from '../api'
+import { importFetchedStatuses } from './importer'
+import { me } from '../initial_state'
+
+export const BOOKMARKED_STATUSES_FETCH_REQUEST = 'BOOKMARKED_STATUSES_FETCH_REQUEST'
+export const BOOKMARKED_STATUSES_FETCH_SUCCESS = 'BOOKMARKED_STATUSES_FETCH_SUCCESS'
+export const BOOKMARKED_STATUSES_FETCH_FAIL = 'BOOKMARKED_STATUSES_FETCH_FAIL'
+
+export const BOOKMARKED_STATUSES_EXPAND_REQUEST = 'BOOKMARKED_STATUSES_EXPAND_REQUEST'
+export const BOOKMARKED_STATUSES_EXPAND_SUCCESS = 'BOOKMARKED_STATUSES_EXPAND_SUCCESS'
+export const BOOKMARKED_STATUSES_EXPAND_FAIL = 'BOOKMARKED_STATUSES_EXPAND_FAIL'
+
+export function fetchBookmarkedStatuses() {
+  return (dispatch, getState) => {
+    if (!me) return
+
+    if (getState().getIn(['status_lists', 'bookmarks', 'isLoading'])) {
+      return
+    }
+
+    dispatch(fetchBookmarkedStatusesRequest())
+
+    api(getState).get('/api/v1/bookmarks').then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next')
+      dispatch(importFetchedStatuses(response.data))
+      dispatch(fetchBookmarkedStatusesSuccess(response.data, next ? next.uri : null))
+    }).catch(error => {
+      dispatch(fetchBookmarkedStatusesFail(error))
+    })
+  }
+}
+
+export function fetchBookmarkedStatusesRequest() {
+  return {
+    type: BOOKMARKED_STATUSES_FETCH_REQUEST,
+    skipLoading: true,
+  }
+}
+
+export function fetchBookmarkedStatusesSuccess(statuses, next) {
+  return {
+    type: BOOKMARKED_STATUSES_FETCH_SUCCESS,
+    statuses,
+    next,
+    skipLoading: true,
+  }
+}
+
+export function fetchBookmarkedStatusesFail(error) {
+  return {
+    type: BOOKMARKED_STATUSES_FETCH_FAIL,
+    error,
+    skipLoading: true,
+  }
+}
+
+export function expandBookmarkedStatuses() {
+  return (dispatch, getState) => {
+    if (!me) return
+
+    const url = getState().getIn(['status_lists', 'bookmarks', 'next'], null)
+
+    if (url === null || getState().getIn(['status_lists', 'bookmarks', 'isLoading'])) {
+      return
+    }
+
+    dispatch(expandBookmarkedStatusesRequest())
+
+    api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next')
+      dispatch(importFetchedStatuses(response.data))
+      dispatch(expandBookmarkedStatusesSuccess(response.data, next ? next.uri : null))
+    }).catch(error => {
+      dispatch(expandBookmarkedStatusesFail(error))
+    })
+  }
+}
+
+export function expandBookmarkedStatusesRequest() {
+  return {
+    type: BOOKMARKED_STATUSES_EXPAND_REQUEST,
+  }
+}
+
+export function expandBookmarkedStatusesSuccess(statuses, next) {
+  return {
+    type: BOOKMARKED_STATUSES_EXPAND_SUCCESS,
+    statuses,
+    next,
+  }
+}
+
+export function expandBookmarkedStatusesFail(error) {
+  return {
+    type: BOOKMARKED_STATUSES_EXPAND_FAIL,
+    error,
+  }
+}

app/javascript/gabsocial/actions/interactions.js

@@ -30,6 +30,14 @@ export const UNPIN_REQUEST = 'UNPIN_REQUEST';
 export const UNPIN_SUCCESS = 'UNPIN_SUCCESS';
 export const UNPIN_FAIL    = 'UNPIN_FAIL';
 
+export const BOOKMARK_REQUEST = 'BOOKMARK_REQUEST'
+export const BOOKMARK_SUCCESS = 'BOOKMARK_SUCCESS'
+export const BOOKMARK_FAIL    = 'BOOKMARK_FAIL'
+
+export const UNBOOKMARK_REQUEST = 'UNBOOKMARK_REQUEST'
+export const UNBOOKMARK_SUCCESS = 'UNBOOKMARK_SUCCESS'
+export const UNBOOKMARK_FAIL    = 'UNBOOKMARK_FAIL'
+
 export const LIKES_FETCH_REQUEST = 'LIKES_FETCH_REQUEST';
 export const LIKES_FETCH_SUCCESS = 'LIKES_FETCH_SUCCESS';
 export const LIKES_FETCH_FAIL    = 'LIKES_FETCH_FAIL';
@@ -346,4 +354,76 @@ export function fetchLikesFail(id, error) {
     type: LIKES_FETCH_FAIL,
     error,
   };
-};
+};
+
+export function bookmark(status) {
+  return function (dispatch, getState) {
+    dispatch(bookmarkRequest(status));
+
+    api(getState).post(`/api/v1/statuses/${status.get('id')}/bookmark`).then(function (response) {
+      dispatch(importFetchedStatus(response.data));
+      dispatch(bookmarkSuccess(status, response.data));
+    }).catch(function (error) {
+      dispatch(bookmarkFail(status, error))
+    })
+  }
+}
+
+export function unbookmark(status) {
+  return (dispatch, getState) => {
+    dispatch(unbookmarkRequest(status))
+
+    api(getState).post(`/api/v1/statuses/${status.get('id')}/unbookmark`).then(response => {
+      dispatch(importFetchedStatus(response.data))
+      dispatch(unbookmarkSuccess(status, response.data))
+    }).catch(error => {
+      dispatch(unbookmarkFail(status, error))
+    })
+  }
+}
+
+export function bookmarkRequest(status) {
+  return {
+    type: BOOKMARK_REQUEST,
+    status: status,
+  }
+}
+
+export function bookmarkSuccess(status, response) {
+  return {
+    type: BOOKMARK_SUCCESS,
+    status: status,
+    response: response,
+  }
+}
+
+export function bookmarkFail(status, error) {
+  return {
+    type: BOOKMARK_FAIL,
+    status: status,
+    error: error,
+  }
+}
+
+export function unbookmarkRequest(status) {
+  return {
+    type: UNBOOKMARK_REQUEST,
+    status: status,
+  }
+}
+
+export function unbookmarkSuccess(status, response) {
+  return {
+    type: UNBOOKMARK_SUCCESS,
+    status: status,
+    response: response,
+  }
+}
+
+export function unbookmarkFail(status, error) {
+  return {
+    type: UNBOOKMARK_FAIL,
+    status: status,
+    error: error,
+  }
+}

app/javascript/gabsocial/assets/bookmark_icon.js

@@ -0,0 +1,24 @@
+const BookmarkIcon = ({
+  className = '',
+  size = '16px',
+  title = 'Bookmark',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d='M 39.06 0 L 8.94 0 C 8.16 0 7.53 0.63 7.53 1.41 L 7.53 46.59 C 7.53 47.16 7.88 47.68 8.4 47.89 C 8.57 47.96 8.76 48 8.94 48 C 9.3 48 9.66 47.86 9.93 47.59 L 24 33.52 L 38.07 47.59 C 38.47 47.99 39.07 48.11 39.6 47.89 C 40.13 47.68 40.47 47.16 40.47 46.59 L 40.47 1.41 C 40.47 0.63 39.84 0 39.06 0 Z M 39.06 0' />
+    </g>
+  </svg>
+)
+
+export default BookmarkIcon

app/javascript/gabsocial/components/icon.js

@@ -11,6 +11,7 @@ import BackIcon from '../assets/back_icon'
 import BlockIcon from '../assets/block_icon'
 import BlockquoteIcon from '../assets/blockquote_icon'
 import BoldIcon from '../assets/bold_icon'
+import BookmarkIcon from '../assets/bookmark_icon'
 import CalendarIcon from '../assets/calendar_icon'
 import ChatIcon from '../assets/chat_icon'
 import CheckIcon from '../assets/check_icon'
@@ -93,6 +94,7 @@ const ICONS = {
   'block': BlockIcon,
   'blockquote': BlockquoteIcon,
   'bold': BoldIcon,
+  'bookmark': BookmarkIcon,
   'calendar': CalendarIcon,
   'chat': ChatIcon,
   'check': CheckIcon,

app/javascript/gabsocial/components/popover/status_options_popover.js

@@ -7,6 +7,8 @@ import {
   unrepost,
   pin,
   unpin,
+  bookmark,
+  unbookmark,
 } from '../../actions/interactions';
 import {
   muteStatus,
@@ -24,7 +26,10 @@ import { initMuteModal } from '../../actions/mutes'
 import { initReport } from '../../actions/reports'
 import { openModal } from '../../actions/modal'
 import { closePopover } from '../../actions/popover'
-import { MODAL_EMBED } from '../../constants'
+import {
+  MODAL_EMBED,
+  MODAL_PRO_UPGRADE,
+} from '../../constants'
 import PopoverLayout from './popover_layout'
 import List from '../list'
 
@@ -49,6 +54,8 @@ const messages = defineMessages({
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
   pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
   unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
+  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark status' },
+  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
   group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
@@ -68,6 +75,7 @@ const mapStateToProps = (state, { status }) => {
   return {
     groupId,
     groupRelationships,
+    isPro: state.getIn(['accounts', me, 'is_pro']),
   }
 }
 
@@ -93,6 +101,16 @@ const mapDispatchToProps = (dispatch) => ({
     }
   },
 
+  onBookmark(status) {
+    dispatch(closePopover())
+
+    if (status.get('bookmarked')) {
+      dispatch(unbookmark(status))
+    } else {
+      dispatch(bookmark(status))
+    }
+  },
+
   onQuote(status, router) {
     dispatch(closePopover())
 
@@ -186,6 +204,11 @@ const mapDispatchToProps = (dispatch) => ({
     }))
   },
 
+  onOpenProUpgradeModal() {
+    dispatch(closePopover())
+    dispatch(openModal(MODAL_PRO_UPGRADE))
+  },
+
   onClosePopover: () => dispatch(closePopover()),
 })
 
@@ -213,8 +236,10 @@ class StatusOptionsPopover extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     onFetchGroupRelationships: PropTypes.func.isRequired,
     onOpenEmbedModal: PropTypes.func.isRequired,
+    onOpenProUpgradeModal: PropTypes.func.isRequired,
     onClosePopover: PropTypes.func.isRequired,
     isXS: PropTypes.bool,
+    isPro: PropTypes.bool,
   }
 
   updateOnProps = [
@@ -261,6 +286,14 @@ class StatusOptionsPopover extends ImmutablePureComponent {
     this.props.onPin(this.props.status)
   }
 
+  handleBookmarkClick = () => {
+    if (this.props.isPro) {
+      this.props.onBookmark(this.props.status)
+    } else {
+      this.props.onOpenProUpgradeModal()
+    }
+  }
+
   handleDeleteClick = () => {
     this.props.onDelete(this.props.status)
   }
@@ -346,6 +379,13 @@ class StatusOptionsPopover extends ImmutablePureComponent {
         })
       }
 
+      menu.push({
+        icon: 'bookmark',
+        hideArrow: true,
+        title: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
+        onClick: this.handleBookmarkClick,
+      })
+      
       if (status.getIn(['account', 'id']) === me) {
         if (publicStatus) {
           menu.push({
@@ -355,7 +395,7 @@ class StatusOptionsPopover extends ImmutablePureComponent {
             onClick: this.handlePinClick,
           })
         }
-        
+
         menu.push({
           icon: 'trash',
           hideArrow: true,

app/javascript/gabsocial/features/bookmarked_statuses.js

@@ -0,0 +1,59 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { FormattedMessage } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import debounce from 'lodash.debounce'
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../actions/bookmarks'
+import { meUsername } from '../initial_state'
+import StatusList from '../components/status_list'
+import ColumnIndicator from '../components/column_indicator'
+
+const mapStateToProps = (state, { params: { username } }) => {
+  return {
+    isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
+    statusIds: state.getIn(['status_lists', 'bookmarks', 'items']),
+    isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
+    hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
+  }
+}
+
+export default
+@connect(mapStateToProps)
+class BookmarkedStatuses extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isMyAccount: PropTypes.bool.isRequired,
+  }
+
+  componentWillMount() {
+    this.props.dispatch(fetchBookmarkedStatuses())
+  }
+
+  handleLoadMore = debounce(() => {
+    this.props.dispatch(expandBookmarkedStatuses())
+  }, 300, { leading: true })
+
+  render() {
+    const { statusIds, hasMore, isLoading, isMyAccount } = this.props
+
+    if (!isMyAccount) {
+      return <ColumnIndicator type='missing' />
+    }
+
+    return (
+      <StatusList
+        statusIds={statusIds}
+        scrollKey='bookmarked_statuses'
+        hasMore={hasMore}
+        isLoading={isLoading}
+        onLoadMore={this.handleLoadMore}
+        emptyMessage={<FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked gabs yet. If you are GabPRO, when you bookmark one, it will show up here." />}
+      />
+    )
+  }
+
+}
+

app/javascript/gabsocial/features/ui/ui.js

@@ -48,6 +48,7 @@ import {
   AccountTimeline,
   BlockedAccounts,
   BlockedDomains,
+  BookmarkedStatuses,
   CommunityTimeline,
   Compose,
   DMCA,
@@ -228,6 +229,9 @@ class SwitchingArea extends PureComponent {
         <Redirect from='/@:username/likes' to='/:username/likes' />
         <WrappedRoute path='/:username/likes' page={ProfilePage} component={LikedStatuses} content={children} />
 
+        <Redirect from='/@:username/bookmarks' to='/:username/bookmarks' />
+        <WrappedRoute path='/:username/bookmarks' page={ProfilePage} component={BookmarkedStatuses} content={children} />
+
         <Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
         <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status', page: 'status' }} />
 

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -3,6 +3,7 @@ export function AccountTimeline() { return import(/* webpackChunkName: "features
 export function AccountGallery() { return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery') }
 export function BlockAccountModal() { return import(/* webpackChunkName: "components/block_account_modal" */'../../../components/modal/block_account_modal') }
 export function BlockedAccounts() { return import(/* webpackChunkName: "features/blocked_accounts" */'../../blocked_accounts') }
+export function BookmarkedStatuses() { return import(/* webpackChunkName: "features/bookmarked_statuses" */'../../bookmarked_statuses') }
 export function BoostModal() { return import(/* webpackChunkName: "components/boost_modal" */'../../../components/modal/boost_modal') }
 export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
 export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }

app/javascript/gabsocial/reducers/status_lists.js

@@ -6,15 +6,30 @@ import {
   FAVORITED_STATUSES_EXPAND_SUCCESS,
   FAVORITED_STATUSES_EXPAND_FAIL,
 } from '../actions/favorites';
+import {
+  BOOKMARKED_STATUSES_FETCH_REQUEST,
+  BOOKMARKED_STATUSES_FETCH_SUCCESS,
+  BOOKMARKED_STATUSES_FETCH_FAIL,
+  BOOKMARKED_STATUSES_EXPAND_REQUEST,
+  BOOKMARKED_STATUSES_EXPAND_SUCCESS,
+  BOOKMARKED_STATUSES_EXPAND_FAIL,
+} from '../actions/bookmarks'
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import {
   FAVORITE_SUCCESS,
   UNFAVORITE_SUCCESS,
   PIN_SUCCESS,
   UNPIN_SUCCESS,
+  BOOKMARK_SUCCESS,
+  UNBOOKMARK_SUCCESS,
 } from '../actions/interactions';
 
 const initialState = ImmutableMap({
+  bookmarks: ImmutableMap({
+    next: null,
+    loaded: false,
+    items: ImmutableList(),
+  }),
   favorites: ImmutableMap({
     next: null,
     loaded: false,
@@ -57,7 +72,17 @@ const removeOneFromList = (state, listType, status) => {
 };
 
 export default function statusLists(state = initialState, action) {
-  switch(action.type) {
+  switch (action.type) {
+  case BOOKMARKED_STATUSES_FETCH_REQUEST:
+  case BOOKMARKED_STATUSES_EXPAND_REQUEST:
+    return state.setIn(['bookmarks', 'isLoading'], true);
+  case BOOKMARKED_STATUSES_FETCH_FAIL:
+  case BOOKMARKED_STATUSES_EXPAND_FAIL:
+    return state.setIn(['bookmarks', 'isLoading'], false);
+  case BOOKMARKED_STATUSES_FETCH_SUCCESS:
+    return normalizeList(state, 'bookmarks', action.statuses, action.next);
+  case BOOKMARKED_STATUSES_EXPAND_SUCCESS:
+    return appendToList(state, 'bookmarks', action.statuses, action.next);
   case FAVORITED_STATUSES_FETCH_REQUEST:
   case FAVORITED_STATUSES_EXPAND_REQUEST:
     return state.setIn(['favorites', 'isLoading'], true);
@@ -76,6 +101,10 @@ export default function statusLists(state = initialState, action) {
     return prependOneToList(state, 'pins', action.status);
   case UNPIN_SUCCESS:
     return removeOneFromList(state, 'pins', action.status);
+  case BOOKMARK_SUCCESS:
+    return prependOneToList(state, 'bookmarks', action.status);
+  case UNBOOKMARK_SUCCESS:
+    return removeOneFromList(state, 'bookmarks', action.status);
   default:
     return state;
   }