Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change how unread announcements are handled (#13020)

Browse source 
* Change meaning of /api/v1/announcements/:id/dismiss to mark an announcement as read

* Change how unread announcements are counted in UI

* Add unread marker to announcements and mark announcements as unread as they are displayed

* Fixups
This commit is contained in:
ThibG 2020-02-03 01:53:09 +01:00 • committed by GitHub
parent 61a7390b66
commit 3adc722d1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 94 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/javascript/mastodon/features/getting_started/components/announcements.js
View file

@ -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 && <span className='announcements__item__unread' />}
</div>
);
}
@ -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 {
<div className='announcements__container'>
<ReactSwipeableViews animateHeight={!reduceMotion} adjustHeight={reduceMotion} index={index} onChangeIndex={this.handleChangeIndex}>
{announcements.map(announcement => (
{announcements.map((announcement, idx) => (
<Announcement
key={announcement.get('id')}
announcement={announcement}
@ -385,6 +416,7 @@ class Announcements extends ImmutablePureComponent {
addReaction={this.props.addReaction}
removeReaction={this.props.removeReaction}
intl={intl}
selected={index === idx}
/>
))}
</ReactSwipeableViews>