[Glitch] Change how unread announcements are handled

Port 3adc722d1c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1274/head
ThibG 2020-02-03 01:53:09 +01:00 committed by Thibaut Girka
parent dd6149ca0b
commit 3dcb279da3
6 changed files with 83 additions and 24 deletions

View File

@ -7,6 +7,10 @@ export const ANNOUNCEMENTS_FETCH_FAIL = 'ANNOUNCEMENTS_FETCH_FAIL';
export const ANNOUNCEMENTS_UPDATE = 'ANNOUNCEMENTS_UPDATE'; export const ANNOUNCEMENTS_UPDATE = 'ANNOUNCEMENTS_UPDATE';
export const ANNOUNCEMENTS_DELETE = 'ANNOUNCEMENTS_DELETE'; 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_REQUEST = 'ANNOUNCEMENTS_REACTION_ADD_REQUEST';
export const ANNOUNCEMENTS_REACTION_ADD_SUCCESS = 'ANNOUNCEMENTS_REACTION_ADD_SUCCESS'; export const ANNOUNCEMENTS_REACTION_ADD_SUCCESS = 'ANNOUNCEMENTS_REACTION_ADD_SUCCESS';
export const ANNOUNCEMENTS_REACTION_ADD_FAIL = 'ANNOUNCEMENTS_REACTION_ADD_FAIL'; export const ANNOUNCEMENTS_REACTION_ADD_FAIL = 'ANNOUNCEMENTS_REACTION_ADD_FAIL';
@ -56,6 +60,32 @@ export const updateAnnouncements = announcement => ({
announcement: normalizeAnnouncement(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) => { export const addReaction = (announcementId, name) => (dispatch, getState) => {
const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId); const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId);

View File

@ -302,10 +302,23 @@ class Announcement extends ImmutablePureComponent {
addReaction: PropTypes.func.isRequired, addReaction: PropTypes.func.isRequired,
removeReaction: PropTypes.func.isRequired, removeReaction: PropTypes.func.isRequired,
intl: PropTypes.object.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 () { render () {
const { announcement } = this.props; const { announcement } = this.props;
const { unread } = this.state;
const startsAt = announcement.get('starts_at') && new Date(announcement.get('starts_at')); 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 endsAt = announcement.get('ends_at') && new Date(announcement.get('ends_at'));
const now = new Date(); const now = new Date();
@ -330,6 +343,8 @@ class Announcement extends ImmutablePureComponent {
removeReaction={this.props.removeReaction} removeReaction={this.props.removeReaction}
emojiMap={this.props.emojiMap} emojiMap={this.props.emojiMap}
/> />
{unread && <span className='announcements__item__unread' />}
</div> </div>
); );
} }
@ -342,6 +357,7 @@ class Announcements extends ImmutablePureComponent {
static propTypes = { static propTypes = {
announcements: ImmutablePropTypes.list, announcements: ImmutablePropTypes.list,
emojiMap: ImmutablePropTypes.map.isRequired, emojiMap: ImmutablePropTypes.map.isRequired,
dismissAnnouncement: PropTypes.func.isRequired,
addReaction: PropTypes.func.isRequired, addReaction: PropTypes.func.isRequired,
removeReaction: PropTypes.func.isRequired, removeReaction: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
@ -351,6 +367,21 @@ class Announcements extends ImmutablePureComponent {
index: 0, 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 => { handleChangeIndex = index => {
this.setState({ index: index % this.props.announcements.size }); this.setState({ index: index % this.props.announcements.size });
} }
@ -377,7 +408,7 @@ class Announcements extends ImmutablePureComponent {
<div className='announcements__container'> <div className='announcements__container'>
<ReactSwipeableViews animateHeight={!reduceMotion} adjustHeight={reduceMotion} index={index} onChangeIndex={this.handleChangeIndex}> <ReactSwipeableViews animateHeight={!reduceMotion} adjustHeight={reduceMotion} index={index} onChangeIndex={this.handleChangeIndex}>
{announcements.map(announcement => ( {announcements.map((announcement, idx) => (
<Announcement <Announcement
key={announcement.get('id')} key={announcement.get('id')}
announcement={announcement} announcement={announcement}
@ -385,6 +416,7 @@ class Announcements extends ImmutablePureComponent {
addReaction={this.props.addReaction} addReaction={this.props.addReaction}
removeReaction={this.props.removeReaction} removeReaction={this.props.removeReaction}
intl={intl} intl={intl}
selected={index === idx}
/> />
))} ))}
</ReactSwipeableViews> </ReactSwipeableViews>

View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { addReaction, removeReaction } from 'flavours/glitch/actions/announcements'; import { addReaction, removeReaction, dismissAnnouncement } from 'flavours/glitch/actions/announcements';
import Announcements from '../components/announcements'; import Announcements from '../components/announcements';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
@ -12,6 +12,7 @@ const mapStateToProps = state => ({
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
dismissAnnouncement: id => dispatch(dismissAnnouncement(id)),
addReaction: (id, name) => dispatch(addReaction(id, name)), addReaction: (id, name) => dispatch(addReaction(id, name)),
removeReaction: (id, name) => dispatch(removeReaction(id, name)), removeReaction: (id, name) => dispatch(removeReaction(id, name)),
}); });

View File

@ -24,7 +24,7 @@ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
isPartial: state.getIn(['timelines', 'home', 'isPartial']), isPartial: state.getIn(['timelines', 'home', 'isPartial']),
hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(), 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']), showAnnouncements: state.getIn(['announcements', 'show']),
}); });

View File

@ -10,14 +10,14 @@ import {
ANNOUNCEMENTS_REACTION_REMOVE_FAIL, ANNOUNCEMENTS_REACTION_REMOVE_FAIL,
ANNOUNCEMENTS_TOGGLE_SHOW, ANNOUNCEMENTS_TOGGLE_SHOW,
ANNOUNCEMENTS_DELETE, ANNOUNCEMENTS_DELETE,
ANNOUNCEMENTS_DISMISS_SUCCESS,
} from '../actions/announcements'; } 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({ const initialState = ImmutableMap({
items: ImmutableList(), items: ImmutableList(),
isLoading: false, isLoading: false,
show: false, show: false,
unread: ImmutableSet(),
}); });
const updateReaction = (state, id, name, updater) => state.update('items', list => list.map(announcement => { 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 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 sortAnnouncements = list => list.sortBy(x => x.get('starts_at') || x.get('published_at'));
const updateAnnouncement = (state, announcement) => { const updateAnnouncement = (state, announcement) => {
const idx = state.get('items').findIndex(x => x.get('id') === announcement.get('id')); const idx = state.get('items').findIndex(x => x.get('id') === announcement.get('id'));
state = addUnread(state, [announcement]);
if (idx > -1) { if (idx > -1) {
// Deep merge is used because announcements from the streaming API do not contain // 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, // 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) { switch(action.type) {
case ANNOUNCEMENTS_TOGGLE_SHOW: case ANNOUNCEMENTS_TOGGLE_SHOW:
return state.withMutations(map => { return state.withMutations(map => {
if (!map.get('show')) map.set('unread', ImmutableSet());
map.set('show', !map.get('show')); map.set('show', !map.get('show'));
}); });
case ANNOUNCEMENTS_FETCH_REQUEST: case ANNOUNCEMENTS_FETCH_REQUEST:
@ -83,10 +69,6 @@ export default function announcementsReducer(state = initialState, action) {
return state.withMutations(map => { return state.withMutations(map => {
const items = fromJS(action.announcements); const items = fromJS(action.announcements);
map.set('unread', ImmutableSet());
addUnread(map, items);
map.set('items', items); map.set('items', items);
map.set('isLoading', false); map.set('isLoading', false);
}); });
@ -102,8 +84,10 @@ export default function announcementsReducer(state = initialState, action) {
case ANNOUNCEMENTS_REACTION_REMOVE_REQUEST: case ANNOUNCEMENTS_REACTION_REMOVE_REQUEST:
case ANNOUNCEMENTS_REACTION_ADD_FAIL: case ANNOUNCEMENTS_REACTION_ADD_FAIL:
return removeReaction(state, action.id, action.name); return removeReaction(state, action.id, action.name);
case ANNOUNCEMENTS_DISMISS_SUCCESS:
return updateAnnouncement(state, fromJS({ 'id': action.id, 'read': true }));
case ANNOUNCEMENTS_DELETE: 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); const idx = list.findIndex(x => x.get('id') === action.id);
if (idx > -1) { if (idx > -1) {

View File

@ -81,6 +81,18 @@
font-weight: 500; font-weight: 500;
margin-bottom: 10px; 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 { &__pagination {