-
+ const {
+ location, project, user
+ } = this.props;
+ const {
+ error, expanded, loading, notifications
+ } = this.state;
+
+ let groupedNotifications = {};
+ let groupedNotificationsIDs = [];
+ if (notifications?.length > 0) {
+ groupedNotifications = this.groupNotifications(notifications);
+ groupedNotificationsIDs = Object.keys(groupedNotifications);
+ if (groupedNotificationsIDs.includes('zooniverse')) {
+ groupedNotificationsIDs.splice(groupedNotificationsIDs.indexOf('zooniverse'), 1);
+ groupedNotificationsIDs.unshift('zooniverse');
+ }
+ }
+
+ const headerStyle = project ? 'notifications-title talk-module' : 'notifications-title';
+
+ let content = '';
+ if (!user) {
+ content = (
+
+ );
+ } else if (error) {
+ content = (
+
{error.message}
+ );
+ } else if (loading) {
+ content = (
+
+ );
+ } else if (notifications?.length === 0) {
+ content = (
+
+
+ {' '}
+
);
}
return (
-
+
+ {content ? (
+
+ {content}
+
+ ) : (
+
+
+ {groupedNotificationsIDs.map((notificationSectionID) => {
+ const opened = notificationSectionID === expanded || groupedNotificationsIDs.length === 1;
- {signedIn}
+ const slug = groupedNotifications[notificationSectionID][0].project_slug;
+
+ const sectionNotifications = groupedNotifications[notificationSectionID] || [];
+ const uniqueNotifications = sectionNotifications.filter((notification, index, self) => (
+ index === self.findIndex((t) => t.id === notification.id)
+ ));
+
+ return (
+ {
+ const section = expanded === notificationSectionID ? false : notificationSectionID;
+ this.handleExpand(section);
+ }}
+ expanded={opened}
+ section={notificationSectionID}
+ >
+
+
+ );
+ })}
+
+
+ )}
);
}
}
+NotificationsPage.defaultProps = {
+ location: {
+ query: {
+ page: '1'
+ }
+ },
+ project: null,
+ user: null
+};
+
NotificationsPage.propTypes = {
- location: PropTypes.shape({
- query: PropTypes.object
+ location: shape({
+ query: shape({
+ page: string
+ })
}),
- project: PropTypes.shape({
- id: PropTypes.string
+ project: shape({
+ id: string
}),
- user: PropTypes.shape({
- display_name: PropTypes.string,
- login: PropTypes.string
+ user: shape({
+ display_name: string,
+ login: string
})
-};
\ No newline at end of file
+};
diff --git a/app/pages/notifications/index.spec.js b/app/pages/notifications/index.spec.js
index 5882c4fdd0..2e742360c8 100644
--- a/app/pages/notifications/index.spec.js
+++ b/app/pages/notifications/index.spec.js
@@ -1,82 +1,145 @@
-// These tests are skipped until a solution can be found for cjsx imports with the coffee-script test compiler
+/* eslint-disable func-names, prefer-arrow-callback, react/jsx-filename-extension */
import React from 'react';
import assert from 'assert';
-import Notifications from './index';
import { mount, shallow } from 'enzyme';
import sinon from 'sinon';
+import talkClient from 'panoptes-client/lib/talk-client';
+
+import Loading from '../../components/loading-indicator';
+import NotificationsPage from './index';
+
const testNotifications = [
- { id: '123',
- section: 'project-4321'
+ {
+ id: '123',
+ project_id: '4321',
+ section: 'project-4321',
+ getMeta: () => ({ next_page: null })
},
- { id: '124',
- section: 'project-1234'
+ {
+ id: '124',
+ project_id: '1234',
+ section: 'project-1234',
+ getMeta: () => ({ next_page: null })
},
- { id: '125',
- section: 'zooniverse'
+ {
+ id: '125',
+ project_id: '',
+ section: 'zooniverse',
+ getMeta: () => ({ next_page: null })
},
- { id: '126',
- section: 'project-4321'
+ {
+ id: '126',
+ project_id: '4321',
+ section: 'project-4321',
+ getMeta: () => ({ next_page: null })
}
];
-describe('Notifications', function() {
- let wrapper;
- let notifications;
+describe('NotificationsPage', function () {
+ describe('without a user', function () {
+ let wrapper;
- describe('it will display according to user', function() {
- it('will ask user to sign in', function() {
- wrapper = mount(
);
- assert.equal(wrapper.find('.talk-module').text(), 'You\'re not signed in.');
+ before(function () {
+ wrapper = mount(
);
});
- it('will notify when no notifications present', function() {
- const stub = sinon.stub(Notifications.prototype, 'componentDidMount');
- wrapper = mount(
);
- assert(wrapper.contains(
You have no notifications.));
- stub.restore();
+ it('should render not signed in message', function () {
+ assert.equal(wrapper.find('.centering').text(), 'You\'re not signed in.');
});
});
- describe('it correctly display projects', function() {
- beforeEach(function () {
- wrapper = shallow(
-
,
- { disableLifecycleMethods: true }
- );
- wrapper.instance().groupNotifications(testNotifications);
- notifications = shallow(wrapper.instance().renderNotifications());
- });
+ describe('with a user', function () {
+ describe('with an error', function () {
+ let wrapper;
+ const testError = new Error('Test error');
- it('will place zooniverse section first', function() {
- assert.equal(notifications.find('.list').childAt(0).prop('section'), 'zooniverse');
- });
+ before(function () {
+ sinon.stub(talkClient, 'request').callsFake(() => Promise.reject(testError));
+
+ wrapper = mount(
);
+ });
- it('will display correct number of sections', function() {
- assert.equal(notifications.find('.list').children().length, 3);
+ after(function () {
+ talkClient.request.restore();
+ });
+
+ it('should render an error message', function () {
+ assert.equal(wrapper.find('.centering').text(), 'Test error');
+ });
});
- });
- describe('will open sections correctly', function() {
- beforeEach(function () {
- wrapper = shallow(
-
,
- { disableLifecycleMethods: true }
- );
- wrapper.setState({ expanded: 'project-1234' });
- wrapper.instance().groupNotifications(testNotifications);
- notifications = shallow(wrapper.instance().renderNotifications());
+ describe('while loading', function () {
+ let wrapper;
+
+ before(function () {
+ sinon.stub(talkClient, 'request').callsFake(() => Promise.resolve(null));
+
+ wrapper = mount(
);
+ });
+
+ after(function () {
+ talkClient.request.restore();
+ });
+
+ it('should render a loading message', function () {
+ assert.equal(wrapper.find(Loading).length, 1);
+ });
});
- it('will open the active project', function() {
- const activeProject = notifications.find('CollapsableSection').filterWhere(n => n.prop('section') === 'project-1234');
- assert.equal(activeProject.prop('expanded'), true);
+ describe('without notifications', function () {
+ let wrapper;
+
+ before(function () {
+ sinon.stub(talkClient, 'request').callsFake(() => Promise.resolve([]));
+
+ wrapper = mount(
);
+ });
+
+ after(function () {
+ talkClient.request.restore();
+ });
+
+ it('should render a no notifications message', function () {
+ assert.equal(wrapper.find('.centering').text(), 'You have no notifications. You can receive notifications by participating in Talk, following discussions, and receiving messages.');
+ });
});
- it('will keep other projects closed', function() {
- const activeProject = notifications.find('CollapsableSection').filterWhere(n => n.prop('section') === 'project-4321');
- assert.equal(activeProject.prop('expanded'), false);
+ describe('with notifications', function () {
+ let wrapper;
+
+ before(function () {
+ wrapper = shallow(
+
,
+ { disableLifecycleMethods: true }
+ );
+ wrapper.setState({
+ expanded: '1234',
+ notifications: testNotifications
+ });
+ });
+
+ it('will display correct number of sections', function () {
+ assert.equal(wrapper.find('CollapsableSection').length, 3);
+ });
+
+ it('will place Zooniverse section first', function () {
+ assert.equal(wrapper.find('CollapsableSection').at(0).prop('section'), 'zooniverse');
+ });
+
+ it('will open the active project', function () {
+ assert.equal(wrapper.find('CollapsableSection').at(1).prop('expanded'), true);
+ assert.equal(wrapper.find('CollapsableSection').at(1).prop('section'), '1234');
+ });
+
+ it('will keep other projects closed', function () {
+ assert.equal(wrapper.find('CollapsableSection').at(0).prop('expanded'), false);
+ assert.equal(wrapper.find('CollapsableSection').at(2).prop('expanded'), false);
+ });
});
});
});
diff --git a/app/pages/notifications/notification-section.jsx b/app/pages/notifications/notification-section.jsx
index d5b320c54b..11d06174b5 100644
--- a/app/pages/notifications/notification-section.jsx
+++ b/app/pages/notifications/notification-section.jsx
@@ -1,223 +1,222 @@
import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
import apiClient from 'panoptes-client/lib/api-client';
import talkClient from 'panoptes-client/lib/talk-client';
import { Link } from 'react-router';
+
import Notification from './notification.cjsx';
-import Paginator from '../../talk/lib/paginator.cjsx';
-import ZooniverseLogo from '../../partials/zooniverse-logo.cjsx';
-import getNotificationData from '../../lib/get-notification-data';
import Loading from '../../components/loading-indicator';
+import getNotificationData from '../../lib/get-notification-data';
+import ZooniverseLogo from '../../partials/zooniverse-logo.cjsx';
+import Paginator from '../../talk/lib/paginator.cjsx';
export default class NotificationSection extends Component {
constructor(props) {
super(props);
this.state = {
- currentMeta: { },
error: null,
- firstMeta: { },
- lastMeta: { },
loading: false,
+ name: '',
notificationData: [],
- notificationsMap: { },
- page: 1,
project: null
};
this.markAllRead = this.markAllRead.bind(this);
this.markAsRead = this.markAsRead.bind(this);
}
- componentWillMount() {
- if (this.props.section === 'zooniverse') {
- this.setState({
- name: 'Zooniverse'
- });
+ componentDidMount() {
+ const {
+ expanded,
+ location,
+ notifications,
+ section
+ } = this.props;
+
+ if (section === 'zooniverse') {
+ this.setState({ name: 'Zooniverse' });
} else {
- apiClient.type('projects').get(this.props.projectID, { include: 'avatar' })
- .catch((error) => {
- this.setState({ error });
- })
- .then((project) => {
- this.setState({ project })
- if (project.links.avatar) {
- apiClient.type('avatars').get(project.links.avatar.id)
- .then((avatar) => {
- this.setState({
- name: project.display_name,
- avatar: avatar.src
- });
- })
- .catch(() => {
- this.setState({
- name: project.display_name
- });
- });
- } else {
- this.setState({
- name: project.display_name
- });
- }
- });
+ this.fetchProjectData(section);
}
- }
- componentDidMount() {
- this.getUnreadCount();
+ const page = parseInt(location.query.page, 10) || 1;
+
+ if (expanded) {
+ this.fetchNotificationData(notifications, page);
+ }
}
- componentWillReceiveProps(nextProps) {
- const pageChanged = nextProps.location.query.page !== this.state.page;
- const userChanged = nextProps.user && nextProps.user !== this.props.user;
- if ((pageChanged || userChanged) && nextProps.expanded) {
- this.getNotifications(nextProps.location.query.page);
+ componentDidUpdate(prevProps) {
+ const {
+ expanded,
+ location,
+ notifications,
+ section
+ } = this.props;
+
+ if (section !== prevProps.section) {
+ if (section === 'zooniverse') {
+ this.setState({ name: 'Zooniverse' });
+ } else {
+ this.fetchProjectData(section);
+ }
+ }
+
+ const page = parseInt(location.query.page, 10) || 1;
+ const prevPage = parseInt(prevProps.location.query.page, 10) || 1;
+
+ if (expanded && !prevProps.expanded) {
+ this.fetchNotificationData(notifications, page);
+ }
+
+ if (page !== prevPage) {
+ this.fetchNotificationData(notifications, page);
}
}
- getNotifications(page) {
+ fetchNotificationData(notifications, page = 1) {
this.setState({ loading: true });
- let firstMeta;
- let lastMeta;
- return talkClient.type('notifications').get({ page, page_size: 5, section: this.props.section })
- .then((newNotifications) => {
- const meta = newNotifications[0] ? newNotifications[0].getMeta() : { };
- const notificationsMap = this.state.notificationsMap;
- firstMeta = this.state.firstMeta;
- lastMeta = this.state.lastMeta;
-
- meta.notificationIds = [];
- newNotifications.forEach((notification, i) => {
- notificationsMap[notification.id] = notification;
- meta.notificationIds.push(newNotifications[i].id);
- });
-
- if (meta.page > this.state.lastMeta.page) {
- lastMeta = meta;
- } else if (meta.page < this.state.firstMeta.page) {
- firstMeta = meta;
- } else {
- firstMeta = lastMeta = meta;
- }
- getNotificationData(newNotifications).then((notificationData) => {
- this.setState({ notificationData, loading: false });
- });
-
- this.setState({
- notifications: newNotifications,
- currentMeta: meta,
- firstMeta,
- lastMeta,
- notificationsMap,
- page
- });
- this.getUnreadCount();
+ const activeNotifications = notifications.slice((page - 1) * 5, page * 5);
+
+ getNotificationData(activeNotifications)
+ .then((notificationData) => {
+ this.setState({ notificationData, loading: false });
});
}
- getUnreadCount() {
- return talkClient.type('notifications').get({ page: 1, page_size: 1, delivered: false, section: this.props.section })
- .catch((error) => {
- this.setState({ error });
- })
- .then(([project]) => {
- if (project) {
- const count = project.getMeta().count || 0;
- this.setState({ unread: count });
- } else {
- this.setState({ unread: 0 });
- }
- });
+ fetchProjectData(projectID) {
+ apiClient.type('projects')
+ .get(projectID, { include: 'avatar' })
+ .catch((error) => {
+ this.setState({ error });
+ })
+ .then((project) => {
+ this.setState({ project });
+ if (project.links.avatar) {
+ apiClient.type('avatars')
+ .get(project.links.avatar.id)
+ .then((avatar) => {
+ this.setState({
+ name: project.display_name,
+ avatar: avatar.src
+ });
+ })
+ .catch(() => {
+ this.setState({
+ name: project.display_name
+ });
+ });
+ } else {
+ this.setState({
+ name: project.display_name
+ });
+ }
+ });
}
markAllRead() {
- this.state.notificationData.forEach((data) => {
+ const { notificationsCounter } = this.context;
+ const { section, toggleSection } = this.props;
+ const { notificationData } = this.state;
+
+ const requestSection = section === 'zooniverse' ? 'zooniverse' : `project-${section}`;
+
+ notificationData.forEach((data) => {
data.notification.update({ delivered: true });
});
- this.setState({ unread: 0 });
- return talkClient.put('/notifications/read', { section: this.props.section }).then(() => {
- return talkClient.type('notifications').get({ page_size: 1, delivered: false }).then(([notification]) => {
- const count = notification ? notification.getMeta().count : 0;
- if (count === 0) this.context.notificationsCounter.setUnread(0);
- });
- });
+ return talkClient
+ .put('/notifications/read', { section: requestSection })
+ .then(() => talkClient
+ .type('notifications')
+ .get({ page_size: 1, delivered: false })
+ .then(([notification]) => {
+ const count = notification ? notification.getMeta().count : 0;
+ if (count === 0) notificationsCounter.setUnread(0);
+ toggleSection(false);
+ }));
}
markAsRead(readNotification) {
const { notificationsCounter } = this.context;
- const { user } = this.props;
- const { notifications } = this.state;
- const relatedNotifications = notifications.filter(notification => (
+ const { notifications, user } = this.props;
+ const relatedNotifications = notifications.filter((notification) => (
notification.delivered === false
&& (notification.id === readNotification.id
|| notification.source.discussion_id === readNotification.source.discussion_id)
));
const notificationPromises = relatedNotifications
- .map((relatedNotification) => {
- return relatedNotification
- .update({ delivered: true })
- .save()
- .catch((error) => {
- console.warn(error);
- return {};
- });
- });
+ .map((relatedNotification) => relatedNotification
+ .update({ delivered: true })
+ .save()
+ .catch((error) => {
+ console.warn(error);
+ return {};
+ }));
Promise.all(notificationPromises).then(() => notificationsCounter.update(user));
}
- avatarFor() {
- const src = this.state.avatar || '/assets/simple-avatar.jpg';
- let avatar;
+ avatarFor(unread) {
+ const { slug } = this.props;
+ const { avatar, name } = this.state;
- if (this.state.unread > 0) return this.unreadCircle();
+ const src = avatar || '/assets/simple-avatar.jpg';
+ let sectionAvatar;
- if (this.state.name === 'Zooniverse') {
- avatar =
;
+ if (unread > 0) return this.unreadCircle(unread);
+
+ if (name === 'Zooniverse') {
+ sectionAvatar =
;
} else {
- avatar =
;
+ sectionAvatar =
;
}
return (
-
- {avatar}
+
+ {sectionAvatar}
);
}
- unreadCircle() {
+ unreadCircle(unread) {
let centerNum = '40%';
- if (this.state.unread > 99) {
+ if (unread > 99) {
centerNum = '20%';
- } else if (this.state.unread > 9) {
+ } else if (unread > 9) {
centerNum = '30%';
}
- const unreadNotifications = this.state.unread > 99 ? '99+' : this.state.unread;
+ const unreadNotifications = unread > 99 ? '99+' : unread;
return (
);
}
- renderHeader() {
- const buttonType = this.props.expanded ? 'fa fa-chevron-up fa-lg' : 'fa fa-chevron-down fa-lg';
+ renderHeader(unread) {
+ const { expanded, toggleSection } = this.props;
+ const { name } = this.state;
+
+ const buttonType = expanded ? 'fa fa-chevron-up fa-lg' : 'fa fa-chevron-down fa-lg';
return (
-
+
- {this.avatarFor()}
+ {this.avatarFor(unread)}
-
{this.state.name}
+ {name}
-
@@ -226,71 +225,95 @@ export default class NotificationSection extends Component {
);
}
- renderError(item) {
- return (
-
- {item.error}
-
- );
- }
-
render() {
- const l = this.state.currentMeta;
- const firstNotification = (l.page * l.page_size) - (l.page_size - 1) || 0;
- const lastNotification = Math.min(l.page_size * l.page, l.count) || 0;
+ const {
+ expanded, location, notifications, user
+ } = this.props;
+ const {
+ error, loading, notificationData, project
+ } = this.state;
+
+ const unread = notifications.filter((notification) => notification.delivered === false).length;
+
+ const page = parseInt(location.query.page, 10) || 1;
+ const pageCount = Math.ceil(notifications.length / 5);
+ const firstNotification = (page - 1) * 5 + 1;
+ const lastNotification = Math.min(page * 5, notifications.length);
return (
- {this.renderHeader()}
+ {this.renderHeader(unread)}
- {!!this.state.error && (
+ {!!error && (
- {this.state.error.toString()}
+ {error.toString()}
)}
- {this.state.loading && (
+ {loading && (
)}
- {(this.props.expanded && this.state.unread > 0) && (
-