diff --git a/app/controllers/api/v1/announcements_controller.rb b/app/controllers/api/v1/announcements_controller.rb
index 6724fac2ec..1e692ff751 100644
--- a/app/controllers/api/v1/announcements_controller.rb
+++ b/app/controllers/api/v1/announcements_controller.rb
@@ -19,11 +19,7 @@ class Api::V1::AnnouncementsController < Api::BaseController
def set_announcements
@announcements = begin
- scope = Announcement.published
-
- scope.merge!(Announcement.without_muted(current_account)) unless truthy_param?(:with_dismissed)
-
- scope.chronological
+ Announcement.published.chronological
end
end
diff --git a/app/javascript/mastodon/actions/announcements.js b/app/javascript/mastodon/actions/announcements.js
index f072a407f9..1bdea909f7 100644
--- a/app/javascript/mastodon/actions/announcements.js
+++ b/app/javascript/mastodon/actions/announcements.js
@@ -7,6 +7,10 @@ export const ANNOUNCEMENTS_FETCH_FAIL = 'ANNOUNCEMENTS_FETCH_FAIL';
export const ANNOUNCEMENTS_UPDATE = 'ANNOUNCEMENTS_UPDATE';
export const ANNOUNCEMENTS_DELETE = 'ANNOUNCEMENTS_DELETE';
+export const ANNOUNCEMENTS_DISMISS_REQUEST = 'ANNOUNCEMENTS_DISMISS_REQUEST';
+export const ANNOUNCEMENTS_DISMISS_SUCCESS = 'ANNOUNCEMENTS_DISMISS_SUCCESS';
+export const ANNOUNCEMENTS_DISMISS_FAIL = 'ANNOUNCEMENTS_DISMISS_FAIL';
+
export const ANNOUNCEMENTS_REACTION_ADD_REQUEST = 'ANNOUNCEMENTS_REACTION_ADD_REQUEST';
export const ANNOUNCEMENTS_REACTION_ADD_SUCCESS = 'ANNOUNCEMENTS_REACTION_ADD_SUCCESS';
export const ANNOUNCEMENTS_REACTION_ADD_FAIL = 'ANNOUNCEMENTS_REACTION_ADD_FAIL';
@@ -56,6 +60,32 @@ export const updateAnnouncements = announcement => ({
announcement: normalizeAnnouncement(announcement),
});
+export const dismissAnnouncement = announcementId => (dispatch, getState) => {
+ dispatch(dismissAnnouncementRequest(announcementId));
+
+ api(getState).post(`/api/v1/announcements/${announcementId}/dismiss`).then(() => {
+ dispatch(dismissAnnouncementSuccess(announcementId));
+ }).catch(error => {
+ dispatch(dismissAnnouncementFail(announcementId, error));
+ });
+};
+
+export const dismissAnnouncementRequest = announcementId => ({
+ type: ANNOUNCEMENTS_DISMISS_REQUEST,
+ id: announcementId,
+});
+
+export const dismissAnnouncementSuccess = announcementId => ({
+ type: ANNOUNCEMENTS_DISMISS_SUCCESS,
+ id: announcementId,
+});
+
+export const dismissAnnouncementFail = (announcementId, error) => ({
+ type: ANNOUNCEMENTS_DISMISS_FAIL,
+ id: announcementId,
+ error,
+});
+
export const addReaction = (announcementId, name) => (dispatch, getState) => {
const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId);
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index cf2abdd768..91cf6215e6 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -302,10 +302,23 @@ class Announcement extends ImmutablePureComponent {
addReaction: PropTypes.func.isRequired,
removeReaction: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
+ selected: PropTypes.bool,
};
+ state = {
+ unread: !this.props.announcement.get('read'),
+ };
+
+ componentDidUpdate () {
+ const { selected, announcement } = this.props;
+ if (!selected && this.state.unread !== !announcement.get('read')) {
+ this.setState({ unread: !announcement.get('read') });
+ }
+ }
+
render () {
const { announcement } = this.props;
+ const { unread } = this.state;
const startsAt = announcement.get('starts_at') && new Date(announcement.get('starts_at'));
const endsAt = announcement.get('ends_at') && new Date(announcement.get('ends_at'));
const now = new Date();
@@ -330,6 +343,8 @@ class Announcement extends ImmutablePureComponent {
removeReaction={this.props.removeReaction}
emojiMap={this.props.emojiMap}
/>
+
+ {unread && }
);
}
@@ -342,6 +357,7 @@ class Announcements extends ImmutablePureComponent {
static propTypes = {
announcements: ImmutablePropTypes.list,
emojiMap: ImmutablePropTypes.map.isRequired,
+ dismissAnnouncement: PropTypes.func.isRequired,
addReaction: PropTypes.func.isRequired,
removeReaction: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
@@ -351,6 +367,21 @@ class Announcements extends ImmutablePureComponent {
index: 0,
};
+ componentDidMount () {
+ this._markAnnouncementAsRead();
+ }
+
+ componentDidUpdate () {
+ this._markAnnouncementAsRead();
+ }
+
+ _markAnnouncementAsRead () {
+ const { dismissAnnouncement, announcements } = this.props;
+ const { index } = this.state;
+ const announcement = announcements.get(index);
+ if (!announcement.get('read')) dismissAnnouncement(announcement.get('id'));
+ }
+
handleChangeIndex = index => {
this.setState({ index: index % this.props.announcements.size });
}
@@ -377,7 +408,7 @@ class Announcements extends ImmutablePureComponent {
- {announcements.map(announcement => (
+ {announcements.map((announcement, idx) => (
))}
diff --git a/app/javascript/mastodon/features/getting_started/containers/announcements_container.js b/app/javascript/mastodon/features/getting_started/containers/announcements_container.js
index 8c3fc2e6b5..9d03ad6f78 100644
--- a/app/javascript/mastodon/features/getting_started/containers/announcements_container.js
+++ b/app/javascript/mastodon/features/getting_started/containers/announcements_container.js
@@ -1,5 +1,5 @@
import { connect } from 'react-redux';
-import { addReaction, removeReaction } from 'mastodon/actions/announcements';
+import { addReaction, removeReaction, dismissAnnouncement } from 'mastodon/actions/announcements';
import Announcements from '../components/announcements';
import { createSelector } from 'reselect';
import { Map as ImmutableMap } from 'immutable';
@@ -12,6 +12,7 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
+ dismissAnnouncement: id => dispatch(dismissAnnouncement(id)),
addReaction: (id, name) => dispatch(addReaction(id, name)),
removeReaction: (id, name) => dispatch(removeReaction(id, name)),
});
diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js
index 2bad22bc1d..577ff33bb0 100644
--- a/app/javascript/mastodon/features/home_timeline/index.js
+++ b/app/javascript/mastodon/features/home_timeline/index.js
@@ -24,7 +24,7 @@ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(),
- unreadAnnouncements: state.getIn(['announcements', 'unread']).size,
+ unreadAnnouncements: state.getIn(['announcements', 'items']).count(item => !item.get('read')),
showAnnouncements: state.getIn(['announcements', 'show']),
});
diff --git a/app/javascript/mastodon/reducers/announcements.js b/app/javascript/mastodon/reducers/announcements.js
index 1653318ce2..34e08eac88 100644
--- a/app/javascript/mastodon/reducers/announcements.js
+++ b/app/javascript/mastodon/reducers/announcements.js
@@ -10,14 +10,14 @@ import {
ANNOUNCEMENTS_REACTION_REMOVE_FAIL,
ANNOUNCEMENTS_TOGGLE_SHOW,
ANNOUNCEMENTS_DELETE,
+ ANNOUNCEMENTS_DISMISS_SUCCESS,
} from '../actions/announcements';
-import { Map as ImmutableMap, List as ImmutableList, Set as ImmutableSet, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
const initialState = ImmutableMap({
items: ImmutableList(),
isLoading: false,
show: false,
- unread: ImmutableSet(),
});
const updateReaction = (state, id, name, updater) => state.update('items', list => list.map(announcement => {
@@ -42,24 +42,11 @@ const addReaction = (state, id, name) => updateReaction(state, id, name, x => x.
const removeReaction = (state, id, name) => updateReaction(state, id, name, x => x.set('me', false).update('count', y => y - 1));
-const addUnread = (state, items) => {
- if (state.get('show')) {
- return state;
- }
-
- const newIds = ImmutableSet(items.map(x => x.get('id')));
- const oldIds = ImmutableSet(state.get('items').map(x => x.get('id')));
-
- return state.update('unread', unread => unread.union(newIds.subtract(oldIds)));
-};
-
const sortAnnouncements = list => list.sortBy(x => x.get('starts_at') || x.get('published_at'));
const updateAnnouncement = (state, announcement) => {
const idx = state.get('items').findIndex(x => x.get('id') === announcement.get('id'));
- state = addUnread(state, [announcement]);
-
if (idx > -1) {
// Deep merge is used because announcements from the streaming API do not contain
// personalized data about which reactions have been selected by the given user,
@@ -74,7 +61,6 @@ export default function announcementsReducer(state = initialState, action) {
switch(action.type) {
case ANNOUNCEMENTS_TOGGLE_SHOW:
return state.withMutations(map => {
- if (!map.get('show')) map.set('unread', ImmutableSet());
map.set('show', !map.get('show'));
});
case ANNOUNCEMENTS_FETCH_REQUEST:
@@ -83,10 +69,6 @@ export default function announcementsReducer(state = initialState, action) {
return state.withMutations(map => {
const items = fromJS(action.announcements);
- map.set('unread', ImmutableSet());
-
- addUnread(map, items);
-
map.set('items', items);
map.set('isLoading', false);
});
@@ -102,8 +84,10 @@ export default function announcementsReducer(state = initialState, action) {
case ANNOUNCEMENTS_REACTION_REMOVE_REQUEST:
case ANNOUNCEMENTS_REACTION_ADD_FAIL:
return removeReaction(state, action.id, action.name);
+ case ANNOUNCEMENTS_DISMISS_SUCCESS:
+ return updateAnnouncement(state, fromJS({ 'id': action.id, 'read': true }));
case ANNOUNCEMENTS_DELETE:
- return state.update('unread', set => set.delete(action.id)).update('items', list => {
+ return state.update('items', list => {
const idx = list.findIndex(x => x.get('id') === action.id);
if (idx > -1) {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7c09780b4f..d90d9734dc 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6694,6 +6694,18 @@ noscript {
font-weight: 500;
margin-bottom: 10px;
}
+
+ &__unread {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ display: inline-block;
+ background: $highlight-text-color;
+ border-radius: 50%;
+ width: 0.625rem;
+ height: 0.625rem;
+ margin: 0 .15em;
+ }
}
&__pagination {
diff --git a/app/serializers/rest/announcement_serializer.rb b/app/serializers/rest/announcement_serializer.rb
index ae962aa1de..ae72f9aceb 100644
--- a/app/serializers/rest/announcement_serializer.rb
+++ b/app/serializers/rest/announcement_serializer.rb
@@ -4,15 +4,25 @@ class REST::AnnouncementSerializer < ActiveModel::Serializer
attributes :id, :content, :starts_at, :ends_at, :all_day,
:published_at, :updated_at
+ attribute :read, if: :current_user?
+
has_many :mentions
has_many :tags, serializer: REST::StatusSerializer::TagSerializer
has_many :emojis, serializer: REST::CustomEmojiSerializer
has_many :reactions, serializer: REST::ReactionSerializer
+ def current_user?
+ !current_user.nil?
+ end
+
def id
object.id.to_s
end
+ def read
+ object.announcement_mutes.where(account: current_user.account).exists?
+ end
+
def content
Formatter.instance.linkify(object.text)
end