Add front-end support for bookmarks
This commit is contained in:
parent
4add879757
commit
04c114866f
90
app/javascript/mastodon/actions/bookmarks.js
Normal file
90
app/javascript/mastodon/actions/bookmarks.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
import api, { getLinks } from '../api';
|
||||||
|
import { importFetchedStatuses } from './importer';
|
||||||
|
|
||||||
|
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 (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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function fetchBookmarkedStatusesSuccess(statuses, next) {
|
||||||
|
return {
|
||||||
|
type: BOOKMARKED_STATUSES_FETCH_SUCCESS,
|
||||||
|
statuses,
|
||||||
|
next,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function fetchBookmarkedStatusesFail(error) {
|
||||||
|
return {
|
||||||
|
type: BOOKMARKED_STATUSES_FETCH_FAIL,
|
||||||
|
error,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function expandBookmarkedStatuses() {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
};
|
@ -33,6 +33,14 @@ export const UNPIN_REQUEST = 'UNPIN_REQUEST';
|
|||||||
export const UNPIN_SUCCESS = 'UNPIN_SUCCESS';
|
export const UNPIN_SUCCESS = 'UNPIN_SUCCESS';
|
||||||
export const UNPIN_FAIL = 'UNPIN_FAIL';
|
export const UNPIN_FAIL = 'UNPIN_FAIL';
|
||||||
|
|
||||||
|
export const BOOKMARK_REQUEST = 'BOOKMARK_REQUEST';
|
||||||
|
export const BOOKMARK_SUCCESS = 'BOOKMARKED_SUCCESS';
|
||||||
|
export const BOOKMARK_FAIL = 'BOOKMARKED_FAIL';
|
||||||
|
|
||||||
|
export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
|
||||||
|
export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
|
||||||
|
export const UNBOOKMARK_FAIL = 'UNBOOKMARKED_FAIL';
|
||||||
|
|
||||||
export function reblog(status) {
|
export function reblog(status) {
|
||||||
return function (dispatch, getState) {
|
return function (dispatch, getState) {
|
||||||
dispatch(reblogRequest(status));
|
dispatch(reblogRequest(status));
|
||||||
@ -187,6 +195,76 @@ export function unfavouriteFail(status, 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(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(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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
export function fetchReblogs(id) {
|
export function fetchReblogs(id) {
|
||||||
return (dispatch, getState) => {
|
return (dispatch, getState) => {
|
||||||
dispatch(fetchReblogsRequest(id));
|
dispatch(fetchReblogsRequest(id));
|
||||||
|
@ -23,6 +23,7 @@ const messages = defineMessages({
|
|||||||
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
|
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
|
||||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
||||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||||
|
bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
|
||||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||||
@ -65,6 +66,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
onEmbed: PropTypes.func,
|
onEmbed: PropTypes.func,
|
||||||
onMuteConversation: PropTypes.func,
|
onMuteConversation: PropTypes.func,
|
||||||
onPin: PropTypes.func,
|
onPin: PropTypes.func,
|
||||||
|
onBookmark: PropTypes.func,
|
||||||
withDismiss: PropTypes.bool,
|
withDismiss: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
@ -93,6 +95,10 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
this.props.onFavourite(this.props.status);
|
this.props.onFavourite(this.props.status);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleBookmarkClick = () => {
|
||||||
|
this.props.onBookmark(this.props.status);
|
||||||
|
}
|
||||||
|
|
||||||
handleReblogClick = (e) => {
|
handleReblogClick = (e) => {
|
||||||
this.props.onReblog(this.props.status, e);
|
this.props.onReblog(this.props.status, e);
|
||||||
}
|
}
|
||||||
@ -215,6 +221,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||||
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||||
{shareButton}
|
{shareButton}
|
||||||
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
||||||
|
|
||||||
<div className='status__action-bar-dropdown'>
|
<div className='status__action-bar-dropdown'>
|
||||||
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
|
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
|
||||||
|
@ -10,8 +10,10 @@ import {
|
|||||||
import {
|
import {
|
||||||
reblog,
|
reblog,
|
||||||
favourite,
|
favourite,
|
||||||
|
bookmark,
|
||||||
unreblog,
|
unreblog,
|
||||||
unfavourite,
|
unfavourite,
|
||||||
|
unbookmark,
|
||||||
pin,
|
pin,
|
||||||
unpin,
|
unpin,
|
||||||
} from '../actions/interactions';
|
} from '../actions/interactions';
|
||||||
@ -91,6 +93,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onBookmark (status) {
|
||||||
|
if (status.get('bookmarked')) {
|
||||||
|
dispatch(unbookmark(status));
|
||||||
|
} else {
|
||||||
|
dispatch(bookmark(status));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
onPin (status) {
|
onPin (status) {
|
||||||
if (status.get('pinned')) {
|
if (status.get('pinned')) {
|
||||||
dispatch(unpin(status));
|
dispatch(unpin(status));
|
||||||
|
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../../actions/bookmarks';
|
||||||
|
import Column from '../ui/components/column';
|
||||||
|
import ColumnHeader from '../../components/column_header';
|
||||||
|
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
||||||
|
import StatusList from '../../components/status_list';
|
||||||
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
statusIds: state.getIn(['status_lists', 'bookmarks', 'items']),
|
||||||
|
isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
|
||||||
|
hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
|
||||||
|
});
|
||||||
|
|
||||||
|
@connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
export default class Bookmarks extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
statusIds: ImmutablePropTypes.list.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
columnId: PropTypes.string,
|
||||||
|
multiColumn: PropTypes.bool,
|
||||||
|
hasMore: PropTypes.bool,
|
||||||
|
isLoading: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
componentWillMount () {
|
||||||
|
this.props.dispatch(fetchBookmarkedStatuses());
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePin = () => {
|
||||||
|
const { columnId, dispatch } = this.props;
|
||||||
|
|
||||||
|
if (columnId) {
|
||||||
|
dispatch(removeColumn(columnId));
|
||||||
|
} else {
|
||||||
|
dispatch(addColumn('BOOKMARKS', {}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMove = (dir) => {
|
||||||
|
const { columnId, dispatch } = this.props;
|
||||||
|
dispatch(moveColumn(columnId, dir));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleHeaderClick = () => {
|
||||||
|
this.column.scrollTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
setRef = c => {
|
||||||
|
this.column = c;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLoadMore = debounce(() => {
|
||||||
|
this.props.dispatch(expandBookmarkedStatuses());
|
||||||
|
}, 300, { leading: true })
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
|
||||||
|
const pinned = !!columnId;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column ref={this.setRef}>
|
||||||
|
<ColumnHeader
|
||||||
|
icon='bookmark'
|
||||||
|
title={intl.formatMessage(messages.heading)}
|
||||||
|
onPin={this.handlePin}
|
||||||
|
onMove={this.handleMove}
|
||||||
|
onClick={this.handleHeaderClick}
|
||||||
|
pinned={pinned}
|
||||||
|
multiColumn={multiColumn}
|
||||||
|
showBackButton
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatusList
|
||||||
|
trackScroll={!pinned}
|
||||||
|
statusIds={statusIds}
|
||||||
|
scrollKey={`bookmarked_statuses-${columnId}`}
|
||||||
|
hasMore={hasMore}
|
||||||
|
isLoading={isLoading}
|
||||||
|
onLoadMore={this.handleLoadMore}
|
||||||
|
/>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -20,6 +20,7 @@ const messages = defineMessages({
|
|||||||
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
|
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
|
||||||
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
|
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
|
||||||
direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
|
direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
|
||||||
|
bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
|
||||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||||
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
|
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
|
||||||
@ -115,6 +116,7 @@ class GettingStarted extends ImmutablePureComponent {
|
|||||||
|
|
||||||
navItems.push(
|
navItems.push(
|
||||||
<ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
|
<ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
|
||||||
|
<ColumnLink key={i++} icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />,
|
||||||
<ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
<ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
|
||||||
<ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
|
<ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
|
||||||
);
|
);
|
||||||
|
@ -17,6 +17,7 @@ const messages = defineMessages({
|
|||||||
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
|
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
|
||||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
||||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||||
|
bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
|
||||||
mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
|
mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
|
||||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||||
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
||||||
@ -42,6 +43,7 @@ class ActionBar extends React.PureComponent {
|
|||||||
onReply: PropTypes.func.isRequired,
|
onReply: PropTypes.func.isRequired,
|
||||||
onReblog: PropTypes.func.isRequired,
|
onReblog: PropTypes.func.isRequired,
|
||||||
onFavourite: PropTypes.func.isRequired,
|
onFavourite: PropTypes.func.isRequired,
|
||||||
|
onBookmark: PropTypes.func.isRequired,
|
||||||
onDelete: PropTypes.func.isRequired,
|
onDelete: PropTypes.func.isRequired,
|
||||||
onDirect: PropTypes.func.isRequired,
|
onDirect: PropTypes.func.isRequired,
|
||||||
onMention: PropTypes.func.isRequired,
|
onMention: PropTypes.func.isRequired,
|
||||||
@ -66,6 +68,10 @@ class ActionBar extends React.PureComponent {
|
|||||||
this.props.onFavourite(this.props.status);
|
this.props.onFavourite(this.props.status);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleBookmarkClick = (e) => {
|
||||||
|
this.props.onBookmark(this.props.status, e);
|
||||||
|
}
|
||||||
|
|
||||||
handleDeleteClick = () => {
|
handleDeleteClick = () => {
|
||||||
this.props.onDelete(this.props.status, this.context.router.history);
|
this.props.onDelete(this.props.status, this.context.router.history);
|
||||||
}
|
}
|
||||||
@ -177,6 +183,7 @@ class ActionBar extends React.PureComponent {
|
|||||||
<div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
|
<div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
|
||||||
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
|
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
|
||||||
{shareButton}
|
{shareButton}
|
||||||
|
<div className='detailed-status__button'><IconButton active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
|
||||||
|
|
||||||
<div className='detailed-status__action-bar-dropdown'>
|
<div className='detailed-status__action-bar-dropdown'>
|
||||||
<DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
|
<DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
|
||||||
|
@ -12,6 +12,8 @@ import Column from '../ui/components/column';
|
|||||||
import {
|
import {
|
||||||
favourite,
|
favourite,
|
||||||
unfavourite,
|
unfavourite,
|
||||||
|
bookmark,
|
||||||
|
unbookmark,
|
||||||
reblog,
|
reblog,
|
||||||
unreblog,
|
unreblog,
|
||||||
pin,
|
pin,
|
||||||
@ -191,6 +193,14 @@ class Status extends ImmutablePureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleBookmarkClick = (status) => {
|
||||||
|
if (status.get('bookmarked')) {
|
||||||
|
this.props.dispatch(unbookmark(status));
|
||||||
|
} else {
|
||||||
|
this.props.dispatch(bookmark(status));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleDeleteClick = (status, history, withRedraft = false) => {
|
handleDeleteClick = (status, history, withRedraft = false) => {
|
||||||
const { dispatch, intl } = this.props;
|
const { dispatch, intl } = this.props;
|
||||||
|
|
||||||
@ -448,6 +458,7 @@ class Status extends ImmutablePureComponent {
|
|||||||
onReply={this.handleReplyClick}
|
onReply={this.handleReplyClick}
|
||||||
onFavourite={this.handleFavouriteClick}
|
onFavourite={this.handleFavouriteClick}
|
||||||
onReblog={this.handleReblogClick}
|
onReblog={this.handleReblogClick}
|
||||||
|
onBookmark={this.handleBookmarkClick}
|
||||||
onDelete={this.handleDeleteClick}
|
onDelete={this.handleDeleteClick}
|
||||||
onDirect={this.handleDirectClick}
|
onDirect={this.handleDirectClick}
|
||||||
onMention={this.handleMentionClick}
|
onMention={this.handleMentionClick}
|
||||||
|
@ -12,7 +12,7 @@ import BundleContainer from '../containers/bundle_container';
|
|||||||
import ColumnLoading from './column_loading';
|
import ColumnLoading from './column_loading';
|
||||||
import DrawerLoading from './drawer_loading';
|
import DrawerLoading from './drawer_loading';
|
||||||
import BundleColumnError from './bundle_column_error';
|
import BundleColumnError from './bundle_column_error';
|
||||||
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components';
|
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, BookmarkedStatuses, ListTimeline } from '../../ui/util/async-components';
|
||||||
|
|
||||||
import detectPassiveEvents from 'detect-passive-events';
|
import detectPassiveEvents from 'detect-passive-events';
|
||||||
import { scrollRight } from '../../../scroll';
|
import { scrollRight } from '../../../scroll';
|
||||||
@ -26,6 +26,7 @@ const componentMap = {
|
|||||||
'HASHTAG': HashtagTimeline,
|
'HASHTAG': HashtagTimeline,
|
||||||
'DIRECT': DirectTimeline,
|
'DIRECT': DirectTimeline,
|
||||||
'FAVOURITES': FavouritedStatuses,
|
'FAVOURITES': FavouritedStatuses,
|
||||||
|
'BOOKMARKS': BookmarkedStatuses,
|
||||||
'LIST': ListTimeline,
|
'LIST': ListTimeline,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -39,6 +39,7 @@ import {
|
|||||||
FollowRequests,
|
FollowRequests,
|
||||||
GenericNotFound,
|
GenericNotFound,
|
||||||
FavouritedStatuses,
|
FavouritedStatuses,
|
||||||
|
BookmarkedStatuses,
|
||||||
ListTimeline,
|
ListTimeline,
|
||||||
Blocks,
|
Blocks,
|
||||||
DomainBlocks,
|
DomainBlocks,
|
||||||
@ -157,6 +158,7 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||||||
|
|
||||||
<WrappedRoute path='/notifications' component={Notifications} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
<WrappedRoute path='/notifications' component={Notifications} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
||||||
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
<WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
||||||
|
<WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
|
||||||
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} componentParams={{ shouldUpdateScroll: this.shouldUpdateScroll }} />
|
||||||
|
|
||||||
<WrappedRoute path='/search' component={Compose} content={children} componentParams={{ isSearchPage: true }} />
|
<WrappedRoute path='/search' component={Compose} content={children} componentParams={{ isSearchPage: true }} />
|
||||||
|
@ -90,6 +90,10 @@ export function FavouritedStatuses () {
|
|||||||
return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
|
return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function BookmarkedStatuses () {
|
||||||
|
return import(/* webpackChunkName: "features/bookmarked_statuses" */'../../bookmarked_statuses');
|
||||||
|
}
|
||||||
|
|
||||||
export function Blocks () {
|
export function Blocks () {
|
||||||
return import(/* webpackChunkName: "features/blocks" */'../../blocks');
|
return import(/* webpackChunkName: "features/blocks" */'../../blocks');
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,14 @@ import {
|
|||||||
FAVOURITED_STATUSES_EXPAND_SUCCESS,
|
FAVOURITED_STATUSES_EXPAND_SUCCESS,
|
||||||
FAVOURITED_STATUSES_EXPAND_FAIL,
|
FAVOURITED_STATUSES_EXPAND_FAIL,
|
||||||
} from '../actions/favourites';
|
} from '../actions/favourites';
|
||||||
|
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 {
|
import {
|
||||||
PINNED_STATUSES_FETCH_SUCCESS,
|
PINNED_STATUSES_FETCH_SUCCESS,
|
||||||
} from '../actions/pin_statuses';
|
} from '../actions/pin_statuses';
|
||||||
@ -13,6 +21,8 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
|||||||
import {
|
import {
|
||||||
FAVOURITE_SUCCESS,
|
FAVOURITE_SUCCESS,
|
||||||
UNFAVOURITE_SUCCESS,
|
UNFAVOURITE_SUCCESS,
|
||||||
|
BOOKMARK_SUCCESS,
|
||||||
|
UNBOOKMARK_SUCCESS,
|
||||||
PIN_SUCCESS,
|
PIN_SUCCESS,
|
||||||
UNPIN_SUCCESS,
|
UNPIN_SUCCESS,
|
||||||
} from '../actions/interactions';
|
} from '../actions/interactions';
|
||||||
@ -23,6 +33,11 @@ const initialState = ImmutableMap({
|
|||||||
loaded: false,
|
loaded: false,
|
||||||
items: ImmutableList(),
|
items: ImmutableList(),
|
||||||
}),
|
}),
|
||||||
|
bookmarks: ImmutableMap({
|
||||||
|
next: null,
|
||||||
|
loaded: false,
|
||||||
|
items: ImmutableList(),
|
||||||
|
}),
|
||||||
pins: ImmutableMap({
|
pins: ImmutableMap({
|
||||||
next: null,
|
next: null,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
@ -71,10 +86,24 @@ export default function statusLists(state = initialState, action) {
|
|||||||
return normalizeList(state, 'favourites', action.statuses, action.next);
|
return normalizeList(state, 'favourites', action.statuses, action.next);
|
||||||
case FAVOURITED_STATUSES_EXPAND_SUCCESS:
|
case FAVOURITED_STATUSES_EXPAND_SUCCESS:
|
||||||
return appendToList(state, 'favourites', action.statuses, action.next);
|
return appendToList(state, 'favourites', action.statuses, action.next);
|
||||||
|
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 FAVOURITE_SUCCESS:
|
case FAVOURITE_SUCCESS:
|
||||||
return prependOneToList(state, 'favourites', action.status);
|
return prependOneToList(state, 'favourites', action.status);
|
||||||
case UNFAVOURITE_SUCCESS:
|
case UNFAVOURITE_SUCCESS:
|
||||||
return removeOneFromList(state, 'favourites', action.status);
|
return removeOneFromList(state, 'favourites', action.status);
|
||||||
|
case BOOKMARK_SUCCESS:
|
||||||
|
return prependOneToList(state, 'bookmarks', action.status);
|
||||||
|
case UNBOOKMARK_SUCCESS:
|
||||||
|
return removeOneFromList(state, 'bookmarks', action.status);
|
||||||
case PINNED_STATUSES_FETCH_SUCCESS:
|
case PINNED_STATUSES_FETCH_SUCCESS:
|
||||||
return normalizeList(state, 'pins', action.statuses, action.next);
|
return normalizeList(state, 'pins', action.statuses, action.next);
|
||||||
case PIN_SUCCESS:
|
case PIN_SUCCESS:
|
||||||
|
@ -3,6 +3,8 @@ import {
|
|||||||
REBLOG_FAIL,
|
REBLOG_FAIL,
|
||||||
FAVOURITE_REQUEST,
|
FAVOURITE_REQUEST,
|
||||||
FAVOURITE_FAIL,
|
FAVOURITE_FAIL,
|
||||||
|
BOOKMARK_REQUEST,
|
||||||
|
BOOKMARK_FAIL,
|
||||||
} from '../actions/interactions';
|
} from '../actions/interactions';
|
||||||
import {
|
import {
|
||||||
STATUS_MUTE_SUCCESS,
|
STATUS_MUTE_SUCCESS,
|
||||||
@ -39,6 +41,10 @@ export default function statuses(state = initialState, action) {
|
|||||||
return state.setIn([action.status.get('id'), 'favourited'], true);
|
return state.setIn([action.status.get('id'), 'favourited'], true);
|
||||||
case FAVOURITE_FAIL:
|
case FAVOURITE_FAIL:
|
||||||
return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
|
return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
|
||||||
|
case BOOKMARK_REQUEST:
|
||||||
|
return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], true);
|
||||||
|
case BOOKMARK_FAIL:
|
||||||
|
return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], false);
|
||||||
case REBLOG_REQUEST:
|
case REBLOG_REQUEST:
|
||||||
return state.setIn([action.status.get('id'), 'reblogged'], true);
|
return state.setIn([action.status.get('id'), 'reblogged'], true);
|
||||||
case REBLOG_FAIL:
|
case REBLOG_FAIL:
|
||||||
|
Loading…
Reference in New Issue
Block a user