Fix frontend crash when deleting announcements (#13283)

This two-line change fixes a crash in the front end that occurred
under the following circumstances:
 *  A server had more than one announcement,
 *  A user was displaying the announcements, and
 *  An announcement was deleted (or unpublished, which amounts to
    the same thing.)

As might be expected, the bug was caused by attempting to access a
notification using an index value outside the bounds of the existing
announcements.  Specifically, in two places.  First,
`_markAnnouncementAsRead` attempts to modify announcements based on
the current index.  This is what caused the front end crash.  Second,
when rendering the `Announcements` component, the code paginates the
announcements and displays the current one.  This did not cause a
crash, but caused the front end to confusingly display a blank
announcement (in situations that would have caused a crash) with no
way for the user to navigate back to previous announcements.

This commit fixes both issues by adding a check to ensure that the
code never attempts to access an announcement with an index greater
than or equal to the number of announcements present.
This commit is contained in:
Daniel Sockwell 2020-03-20 22:10:42 -04:00 committed by GitHub
parent b5dace62b0
commit 8758221e73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -389,7 +389,7 @@ class Announcements extends ImmutablePureComponent {
_markAnnouncementAsRead () { _markAnnouncementAsRead () {
const { dismissAnnouncement, announcements } = this.props; const { dismissAnnouncement, announcements } = this.props;
const { index } = this.state; const { index } = this.state;
const announcement = announcements.get(index); const announcement = announcements.get(index) || announcements.get(index - 1);
if (!announcement.get('read')) dismissAnnouncement(announcement.get('id')); if (!announcement.get('read')) dismissAnnouncement(announcement.get('id'));
} }
@ -407,7 +407,7 @@ class Announcements extends ImmutablePureComponent {
render () { render () {
const { announcements, intl } = this.props; const { announcements, intl } = this.props;
const { index } = this.state; const index = this.state.index < announcements.size ? this.state.index : announcements.size - 1;
if (announcements.isEmpty()) { if (announcements.isEmpty()) {
return null; return null;