Andal.LND/frontend-component-header
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: integrated notifications tray with backend apis (#363)

Browse Source 
* feat: integrated notifications tray with backend apis

* test: updates test cases

* refactor: loader added and resolves minor nits

* test: fixes test cases related to pagination

* refactor: moved pagination to normalised data
This commit is contained in:
ayesha waris
2023-07-10 13:18:44 +05:00
committed by GitHub
parent 42e831a693
commit 0ce451cfd2
15 changed files with 146 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Notifications/NotificationSections.jsx
View File

@@ -1,21 +1,24 @@
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import { Button } from '@edx/paragon'; import { Button, Spinner } from '@edx/paragon';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { useIntl } from '@edx/frontend-platform/i18n'; import { useIntl } from '@edx/frontend-platform/i18n';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import messages from './messages'; import messages from './messages';
import NotificationRowItem from './NotificationRowItem'; import NotificationRowItem from './NotificationRowItem';
import { markAllNotificationsAsRead } from './data/thunks'; import { markAllNotificationsAsRead } from './data/thunks';
import { selectNotificationsByIds, selectPaginationData, selectSelectedAppName } from './data/selectors'; import {
selectNotificationsByIds, selectPaginationData, selectSelectedAppName, selectNotificationStatus,
} from './data/selectors';
import { splitNotificationsByTime } from './utils'; import { splitNotificationsByTime } from './utils';
import { updatePaginationRequest } from './data/slice'; import { updatePaginationRequest, RequestStatus } from './data/slice';
const NotificationSections = () => { const NotificationSections = () => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useDispatch(); const dispatch = useDispatch();
const selectedAppName = useSelector(selectSelectedAppName()); const selectedAppName = useSelector(selectSelectedAppName());
const notificationRequestStatus = useSelector(selectNotificationStatus());
const notifications = useSelector(selectNotificationsByIds(selectedAppName)); const notifications = useSelector(selectNotificationsByIds(selectedAppName));
const { currentPage, numPages } = useSelector(selectPaginationData()); const { hasMorePages } = useSelector(selectPaginationData());
const { today = [], earlier = [] } = useMemo( const { today = [], earlier = [] } = useMemo(
() => splitNotificationsByTime(notifications), () => splitNotificationsByTime(notifications),
[notifications], [notifications],
@@ -70,15 +73,21 @@ const NotificationSections = () => {
<div className="mt-4 px-4" data-testid="notification-tray-section"> <div className="mt-4 px-4" data-testid="notification-tray-section">
{renderNotificationSection('today', today)} {renderNotificationSection('today', today)}
{renderNotificationSection('earlier', earlier)} {renderNotificationSection('earlier', earlier)}
{currentPage < numPages && ( {hasMorePages && notificationRequestStatus === RequestStatus.IN_PROGRESS ? (
<Button <div className="d-flex justify-content-center p-4">
variant="primary" <Spinner animation="border" variant="primary" size="lg" />
className="w-100 bg-primary-500" </div>
onClick={updatePagination} ) : (hasMorePages && notificationRequestStatus === RequestStatus.SUCCESSFUL
data-testid="load-more-notifications" && (
> <Button
{intl.formatMessage(messages.loadMoreNotifications)} variant="primary"
</Button> className="w-100 bg-primary-500"
onClick={updatePagination}
data-testid="load-more-notifications"
>
{intl.formatMessage(messages.loadMoreNotifications)}
</Button>
)
)} )}
</div> </div>
); );

2
src/Notifications/NotificationTabs.jsx
View File

@@ -17,7 +17,7 @@ const NotificationTabs = () => {
const { currentPage } = useSelector(selectPaginationData()); const { currentPage } = useSelector(selectPaginationData());
useEffect(() => { useEffect(() => {
dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage, pageSize: 10 })); dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage }));
if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); } if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); }
}, [currentPage, selectedAppName]); }, [currentPage, selectedAppName]);

15
src/Notifications/data/__factories__/notifications.factory.js
View File

@@ -4,7 +4,7 @@ Factory.define('notificationsCount')
.attr('count', 45) .attr('count', 45)
.attr('countByAppName', { .attr('countByAppName', {
reminders: 10, reminders: 10,
discussions: 20, discussion: 20,
grades: 10, grades: 10,
authoring: 5, authoring: 5,
}) })
@@ -13,10 +13,19 @@ Factory.define('notificationsCount')
Factory.define('notification') Factory.define('notification')
.sequence('id') .sequence('id')
.attr('type', 'post') .attr('type', 'post')
.sequence('content', ['id'], (idx, notificationId) => `<p><b>User ${idx}</b> posts <b>Hello and welcome to SC0x .sequence('content', ['id'], (idx, notificationId) => `<p><strong>User ${idx}</strong> posts <strong>Hello and welcome to SC0x
${notificationId}!</b></p>`) ${notificationId}!</strong></p>`)
.attr('course_name', 'Supply Chain Analytics') .attr('course_name', 'Supply Chain Analytics')
.sequence('content_url', (idx) => `https://example.com/${idx}`) .sequence('content_url', (idx) => `https://example.com/${idx}`)
.attr('last_read', null) .attr('last_read', null)
.attr('last_seen', null) .attr('last_seen', null)
.sequence('created_at', ['createdDate'], (idx, date) => date); .sequence('created_at', ['createdDate'], (idx, date) => date);
Factory.define('notificationsList')
.attr('next', null)
.attr('previous', null)
.attr('count', null, 2)
.attr('num_pages', null, 1)
.attr('current_page', null, 1)
.attr('start', null, 0)
.attr('results', ['results'], (results) => results || Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() }));

21
src/Notifications/data/api.js
View File

@@ -2,19 +2,14 @@ import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
export const getNotificationsCountApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/count/`; export const getNotificationsCountApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/count/`;
export const getNotificationsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`; export const getNotificationsListApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`;
export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-unseen/${appName}/`; export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-seen/${appName}/`;
export const markNotificationAsReadApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/read/`; export const markNotificationAsReadApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/read/`;
export async function getNotifications(appName, page, pageSize) { export async function getNotificationsList(appName, page) {
const params = snakeCaseObject({ page, pageSize }); const params = snakeCaseObject({ appName, page });
const { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params }); const { data } = await getAuthenticatedHttpClient().get(getNotificationsListApiUrl(), { params });
return data;
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
const notifications = data.slice(startIndex, endIndex);
return { notifications, numPages: 2, currentPage: page };
} }
export async function getNotificationCounts() { export async function getNotificationCounts() {
@@ -31,14 +26,14 @@ export async function markNotificationSeen(appName) {
export async function markAllNotificationRead(appName) { export async function markAllNotificationRead(appName) {
const params = snakeCaseObject({ appName }); const params = snakeCaseObject({ appName });
const { data } = await getAuthenticatedHttpClient().put(markNotificationAsReadApiUrl(), { params }); const { data } = await getAuthenticatedHttpClient().patch(markNotificationAsReadApiUrl(), params);
return data; return data;
} }
export async function markNotificationRead(notificationId) { export async function markNotificationRead(notificationId) {
const params = snakeCaseObject({ notificationId }); const params = snakeCaseObject({ notificationId });
const { data } = await getAuthenticatedHttpClient().put(markNotificationAsReadApiUrl(), { params }); const { data } = await getAuthenticatedHttpClient().patch(markNotificationAsReadApiUrl(), params);
return { data, id: notificationId }; return { data, id: notificationId };
} }

37
src/Notifications/data/api.test.js
View File

@@ -5,15 +5,15 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { initializeMockApp } from '@edx/frontend-platform/testing'; import { initializeMockApp } from '@edx/frontend-platform/testing';
import { import {
getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl, getNotificationsListApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
getNotificationCounts, getNotifications, markNotificationSeen, markAllNotificationRead, markNotificationRead, getNotificationCounts, getNotificationsList, markNotificationSeen, markAllNotificationRead, markNotificationRead,
} from './api'; } from './api';
import './__factories__'; import './__factories__';
const notificationCountsApiUrl = getNotificationsCountApiUrl(); const notificationCountsApiUrl = getNotificationsCountApiUrl();
const notificationsApiUrl = getNotificationsApiUrl(); const notificationsApiUrl = getNotificationsListApiUrl();
const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions'); const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussion');
const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl(); const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
let axiosMock = null; let axiosMock = null;
@@ -43,7 +43,7 @@ describe('Notifications API', () => {
expect(count).toEqual(45); expect(count).toEqual(45);
expect(countByAppName.reminders).toEqual(10); expect(countByAppName.reminders).toEqual(10);
expect(countByAppName.discussions).toEqual(20); expect(countByAppName.discussion).toEqual(20);
expect(countByAppName.grades).toEqual(10); expect(countByAppName.grades).toEqual(10);
expect(countByAppName.authoring).toEqual(5); expect(countByAppName.authoring).toEqual(5);
}); });
@@ -62,14 +62,11 @@ describe('Notifications API', () => {
}); });
it('Successfully get notifications.', async () => { it('Successfully get notifications.', async () => {
axiosMock.onGet(notificationsApiUrl).reply( axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.build('notificationsList')));
200,
(Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
);
const { notifications } = await getNotifications('discussions', 1, 10); const notifications = await getNotificationsList('discussion', 1);
expect(notifications).toHaveLength(2); expect(notifications.results).toHaveLength(2);
}); });
it.each([ it.each([
@@ -78,7 +75,7 @@ describe('Notifications API', () => {
])('%s for notification API.', async ({ statusCode, message }) => { ])('%s for notification API.', async ({ statusCode, message }) => {
axiosMock.onGet(notificationsApiUrl).reply(statusCode, { message }); axiosMock.onGet(notificationsApiUrl).reply(statusCode, { message });
try { try {
await getNotifications({ page: 1, pageSize: 10 }); await getNotificationsList('discussion', 1);
} catch (error) { } catch (error) {
expect(error.response.status).toEqual(statusCode); expect(error.response.status).toEqual(statusCode);
expect(error.response.data.message).toEqual(message); expect(error.response.data.message).toEqual(message);
@@ -88,7 +85,7 @@ describe('Notifications API', () => {
it('Successfully marked all notifications as seen for selected app.', async () => { it('Successfully marked all notifications as seen for selected app.', async () => {
axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200, { message: 'Notifications marked seen.' }); axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200, { message: 'Notifications marked seen.' });
const { message } = await markNotificationSeen('discussions'); const { message } = await markNotificationSeen('discussion');
expect(message).toEqual('Notifications marked seen.'); expect(message).toEqual('Notifications marked seen.');
}); });
@@ -99,7 +96,7 @@ describe('Notifications API', () => {
])('%s for notification mark as seen API.', async ({ statusCode, message }) => { ])('%s for notification mark as seen API.', async ({ statusCode, message }) => {
axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode, { message }); axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode, { message });
try { try {
await markNotificationSeen('discussions'); await markNotificationSeen('discussion');
} catch (error) { } catch (error) {
expect(error.response.status).toEqual(statusCode); expect(error.response.status).toEqual(statusCode);
expect(error.response.data.message).toEqual(message); expect(error.response.data.message).toEqual(message);
@@ -107,9 +104,9 @@ describe('Notifications API', () => {
}); });
it('Successfully marked all notifications as read for selected app.', async () => { it('Successfully marked all notifications as read for selected app.', async () => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' }); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
const { message } = await markAllNotificationRead('discussions'); const { message } = await markAllNotificationRead('discussion');
expect(message).toEqual('Notifications marked read.'); expect(message).toEqual('Notifications marked read.');
}); });
@@ -118,9 +115,9 @@ describe('Notifications API', () => {
{ statusCode: 404, message: 'Failed to mark all notifications as read for selected app.' }, { statusCode: 404, message: 'Failed to mark all notifications as read for selected app.' },
{ statusCode: 403, message: 'Denied to mark all notifications as read for selected app.' }, { statusCode: 403, message: 'Denied to mark all notifications as read for selected app.' },
])('%s for notification mark all as read API.', async ({ statusCode, message }) => { ])('%s for notification mark all as read API.', async ({ statusCode, message }) => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message }); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
try { try {
await markAllNotificationRead('discussions'); await markAllNotificationRead('discussion');
} catch (error) { } catch (error) {
expect(error.response.status).toEqual(statusCode); expect(error.response.status).toEqual(statusCode);
expect(error.response.data.message).toEqual(message); expect(error.response.data.message).toEqual(message);
@@ -128,7 +125,7 @@ describe('Notifications API', () => {
}); });
it('Successfully marked notification as read.', async () => { it('Successfully marked notification as read.', async () => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notification marked read.' }); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
const { data } = await markNotificationRead(1); const { data } = await markNotificationRead(1);
@@ -139,7 +136,7 @@ describe('Notifications API', () => {
{ statusCode: 404, message: 'Failed to mark notification as read.' }, { statusCode: 404, message: 'Failed to mark notification as read.' },
{ statusCode: 403, message: 'Denied to mark notification as read.' }, { statusCode: 403, message: 'Denied to mark notification as read.' },
])('%s for notification mark as read API.', async ({ statusCode, message }) => { ])('%s for notification mark as read API.', async ({ statusCode, message }) => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message }); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode, { message });
try { try {
await markAllNotificationRead(1); await markAllNotificationRead(1);
} catch (error) { } catch (error) {

43
src/Notifications/data/redux.test.js
View File

@@ -6,8 +6,9 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
import { initializeStore } from '../../store'; import { initializeStore } from '../../store';
import executeThunk from '../../test-utils'; import executeThunk from '../../test-utils';
import mockNotificationsResponse from '../test-utils';
import { import {
getNotificationsApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl, getNotificationsListApiUrl, getNotificationsCountApiUrl, markNotificationAsReadApiUrl, markNotificationsSeenApiUrl,
} from './api'; } from './api';
import { import {
fetchAppsNotificationCount, fetchNotificationList, markNotificationsAsRead, markAllNotificationsAsRead, fetchAppsNotificationCount, fetchNotificationList, markNotificationsAsRead, markAllNotificationsAsRead,
@@ -17,9 +18,9 @@ import {
import './__factories__'; import './__factories__';
const notificationCountsApiUrl = getNotificationsCountApiUrl(); const notificationCountsApiUrl = getNotificationsCountApiUrl();
const notificationsApiUrl = getNotificationsApiUrl(); const notificationsListApiUrl = getNotificationsListApiUrl();
const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl(); const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussions'); const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussion');
let axiosMock; let axiosMock;
let store; let store;
@@ -38,13 +39,7 @@ describe('Notification Redux', () => {
Factory.resetAll(); Factory.resetAll();
store = initializeStore(); store = initializeStore();
axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount'))); ({ store, axiosMock } = await mockNotificationsResponse());
axiosMock.onGet(notificationsApiUrl).reply(
200,
(Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
);
await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
}); });
afterEach(() => { afterEach(() => {
@@ -57,30 +52,26 @@ describe('Notification Redux', () => {
const { notifications } = store.getState(); const { notifications } = store.getState();
expect(notifications.notificationStatus).toEqual('idle'); expect(notifications.notificationStatus).toEqual('idle');
expect(notifications.appName).toEqual('discussions'); expect(notifications.appName).toEqual('discussion');
expect(notifications.appsId).toHaveLength(0); expect(notifications.appsId).toHaveLength(0);
expect(notifications.apps).toEqual({}); expect(notifications.apps).toEqual({});
expect(notifications.notifications).toEqual({}); expect(notifications.notifications).toEqual({});
expect(notifications.tabsCount).toEqual({}); expect(notifications.tabsCount).toEqual({});
expect(notifications.showNotificationsTray).toEqual(false); expect(notifications.showNotificationsTray).toEqual(false);
expect(notifications.pagination.count).toEqual(10); expect(notifications.pagination).toEqual({});
expect(notifications.pagination.numPages).toEqual(1);
expect(notifications.pagination.currentPage).toEqual(1);
expect(notifications.pagination.nextPage).toBeNull();
}); });
it('Successfully loaded notifications list in the redux.', async () => { it('Successfully loaded notifications list in the redux.', async () => {
const { notifications: { notifications } } = store.getState(); const { notifications: { notifications } } = store.getState();
expect(Object.keys(notifications)).toHaveLength(10);
expect(Object.keys(notifications)).toHaveLength(2);
}); });
it.each([ it.each([
{ statusCode: 404, status: 'failed' }, { statusCode: 404, status: 'failed' },
{ statusCode: 403, status: 'denied' }, { statusCode: 403, status: 'denied' },
])('%s to load notifications list in the redux.', async ({ statusCode, status }) => { ])('%s to load notifications list in the redux.', async ({ statusCode, status }) => {
axiosMock.onGet(notificationsApiUrl).reply(statusCode); axiosMock.onGet(notificationsListApiUrl).reply(statusCode);
await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState); await executeThunk(fetchNotificationList({ page: 1 }), store.dispatch, store.getState);
const { notifications: { notificationStatus } } = store.getState(); const { notifications: { notificationStatus } } = store.getState();
@@ -92,7 +83,7 @@ describe('Notification Redux', () => {
expect(tabsCount.count).toEqual(25); expect(tabsCount.count).toEqual(25);
expect(tabsCount.reminders).toEqual(10); expect(tabsCount.reminders).toEqual(10);
expect(tabsCount.discussions).toEqual(0); expect(tabsCount.discussion).toEqual(0);
expect(tabsCount.grades).toEqual(10); expect(tabsCount.grades).toEqual(10);
expect(tabsCount.authoring).toEqual(5); expect(tabsCount.authoring).toEqual(5);
}); });
@@ -111,7 +102,7 @@ describe('Notification Redux', () => {
it('Successfully marked all notifications as seen for selected app.', async () => { it('Successfully marked all notifications as seen for selected app.', async () => {
axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200); axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200);
await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState); await executeThunk(markNotificationsAsSeen('discussion'), store.dispatch, store.getState);
expect(store.getState().notifications.notificationStatus).toEqual('successful'); expect(store.getState().notifications.notificationStatus).toEqual('successful');
}); });
@@ -121,7 +112,7 @@ describe('Notification Redux', () => {
{ statusCode: 403, status: 'denied' }, { statusCode: 403, status: 'denied' },
])('%s to mark all notifications as seen for selected app.', async ({ statusCode, status }) => { ])('%s to mark all notifications as seen for selected app.', async ({ statusCode, status }) => {
axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode); axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(statusCode);
await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState); await executeThunk(markNotificationsAsSeen('discussion'), store.dispatch, store.getState);
const { notifications: { notificationStatus } } = store.getState(); const { notifications: { notificationStatus } } = store.getState();
@@ -129,8 +120,8 @@ describe('Notification Redux', () => {
}); });
it('Successfully marked all notifications as read for selected app in the redux.', async () => { it('Successfully marked all notifications as read for selected app in the redux.', async () => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200);
await executeThunk(markAllNotificationsAsRead('discussions'), store.dispatch, store.getState); await executeThunk(markAllNotificationsAsRead('discussion'), store.dispatch, store.getState);
const { notifications: { notificationStatus, notifications } } = store.getState(); const { notifications: { notificationStatus, notifications } } = store.getState();
const firstNotification = Object.values(notifications)[0]; const firstNotification = Object.values(notifications)[0];
@@ -140,7 +131,7 @@ describe('Notification Redux', () => {
}); });
it('Successfully marked notification as read in the redux.', async () => { it('Successfully marked notification as read in the redux.', async () => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200);
await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState); await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
const { notifications: { notificationStatus, notifications } } = store.getState(); const { notifications: { notificationStatus, notifications } } = store.getState();
@@ -154,7 +145,7 @@ describe('Notification Redux', () => {
{ statusCode: 404, status: 'failed' }, { statusCode: 404, status: 'failed' },
{ statusCode: 403, status: 'denied' }, { statusCode: 403, status: 'denied' },
])('%s to marked notification as read in the redux.', async ({ statusCode, status }) => { ])('%s to marked notification as read in the redux.', async ({ statusCode, status }) => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(statusCode); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(statusCode);
await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState); await executeThunk(markNotificationsAsRead(1), store.dispatch, store.getState);
const { notifications: { notificationStatus } } = store.getState(); const { notifications: { notificationStatus } } = store.getState();

31
src/Notifications/data/selector.test.jsx
View File

@@ -5,8 +5,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { initializeMockApp } from '@edx/frontend-platform/testing'; import { initializeMockApp } from '@edx/frontend-platform/testing';
import { initializeStore } from '../../store'; import { initializeStore } from '../../store';
import executeThunk from '../../test-utils'; import mockNotificationsResponse from '../test-utils';
import { getNotificationsApiUrl, getNotificationsCountApiUrl } from './api';
import { import {
selectNotifications, selectNotifications,
selectNotificationsByIds, selectNotificationsByIds,
@@ -18,13 +17,9 @@ import {
selectSelectedAppNotificationIds, selectSelectedAppNotificationIds,
selectShowNotificationTray, selectShowNotificationTray,
} from './selectors'; } from './selectors';
import { fetchAppsNotificationCount, fetchNotificationList } from './thunks';
import './__factories__'; import './__factories__';
const notificationCountsApiUrl = getNotificationsCountApiUrl();
const notificationsApiUrl = getNotificationsApiUrl();
let axiosMock; let axiosMock;
let store; let store;
@@ -42,13 +37,7 @@ describe('Notification Selectors', () => {
Factory.resetAll(); Factory.resetAll();
store = initializeStore(); store = initializeStore();
axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount'))); ({ store, axiosMock } = await mockNotificationsResponse());
axiosMock.onGet(notificationsApiUrl).reply(
200,
(Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
);
await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
}); });
afterEach(() => { afterEach(() => {
@@ -68,7 +57,7 @@ describe('Notification Selectors', () => {
expect(tabsCount.count).toEqual(25); expect(tabsCount.count).toEqual(25);
expect(tabsCount.reminders).toEqual(10); expect(tabsCount.reminders).toEqual(10);
expect(tabsCount.discussions).toEqual(0); expect(tabsCount.discussion).toEqual(0);
expect(tabsCount.grades).toEqual(10); expect(tabsCount.grades).toEqual(10);
expect(tabsCount.authoring).toEqual(5); expect(tabsCount.authoring).toEqual(5);
}); });
@@ -82,9 +71,9 @@ describe('Notification Selectors', () => {
it('Should return selected app notification ids.', async () => { it('Should return selected app notification ids.', async () => {
const state = store.getState(); const state = store.getState();
const notificationIds = selectSelectedAppNotificationIds('discussions')(state); const notificationIds = selectSelectedAppNotificationIds('discussion')(state);
expect(notificationIds).toHaveLength(2); expect(notificationIds).toHaveLength(10);
}); });
it('Should return show notification tray status.', async () => { it('Should return show notification tray status.', async () => {
@@ -98,29 +87,29 @@ describe('Notification Selectors', () => {
const state = store.getState(); const state = store.getState();
const notifications = selectNotifications()(state); const notifications = selectNotifications()(state);
expect(Object.keys(notifications)).toHaveLength(2); expect(Object.keys(notifications)).toHaveLength(10);
}); });
it('Should return notifications from Ids.', async () => { it('Should return notifications from Ids.', async () => {
const state = store.getState(); const state = store.getState();
const notifications = selectNotificationsByIds('discussions')(state); const notifications = selectNotificationsByIds('discussion')(state);
expect(notifications).toHaveLength(2); expect(notifications).toHaveLength(10);
}); });
it('Should return selected app name.', async () => { it('Should return selected app name.', async () => {
const state = store.getState(); const state = store.getState();
const appName = selectSelectedAppName()(state); const appName = selectSelectedAppName()(state);
expect(appName).toEqual('discussions'); expect(appName).toEqual('discussion');
}); });
it('Should return pagination data.', async () => { it('Should return pagination data.', async () => {
const state = store.getState(); const state = store.getState();
const paginationData = selectPaginationData()(state); const paginationData = selectPaginationData()(state);
expect(paginationData.count).toEqual(10);
expect(paginationData.currentPage).toEqual(1); expect(paginationData.currentPage).toEqual(1);
expect(paginationData.numPages).toEqual(2); expect(paginationData.numPages).toEqual(2);
expect(paginationData.hasMorePages).toEqual(true);
}); });
}); });

41
src/Notifications/data/slice.js
View File

@@ -3,26 +3,21 @@ import { createSlice } from '@reduxjs/toolkit';
export const RequestStatus = { export const RequestStatus = {
IDLE: 'idle', IDLE: 'idle',
LOADING: 'in-progress', IN_PROGRESS: 'in-progress',
LOADED: 'successful', SUCCESSFUL: 'successful',
FAILED: 'failed', FAILED: 'failed',
DENIED: 'denied', DENIED: 'denied',
}; };
const initialState = { const initialState = {
notificationStatus: 'idle', notificationStatus: RequestStatus.IDLE,
appName: 'discussions', appName: 'discussion',
appsId: [], appsId: [],
apps: {}, apps: {},
notifications: {}, notifications: {},
tabsCount: {}, tabsCount: {},
showNotificationsTray: false, showNotificationsTray: false,
pagination: { pagination: {},
count: 10,
numPages: 1,
currentPage: 1,
nextPage: null,
},
}; };
const slice = createSlice({ const slice = createSlice({
name: 'notifications', name: 'notifications',
@@ -35,21 +30,19 @@ const slice = createSlice({
state.notificationStatus = RequestStatus.FAILED; state.notificationStatus = RequestStatus.FAILED;
}, },
fetchNotificationRequest: (state) => { fetchNotificationRequest: (state) => {
state.notificationStatus = RequestStatus.LOADING; state.notificationStatus = RequestStatus.IN_PROGRESS;
}, },
fetchNotificationSuccess: (state, { payload }) => { fetchNotificationSuccess: (state, { payload }) => {
const { const {
newNotificationIds, notificationsKeyValuePair, numPages, currentPage, newNotificationIds, notificationsKeyValuePair, pagination,
} = payload; } = payload;
const existingNotificationIds = state.apps[state.appName]; const existingNotificationIds = state.apps[state.appName];
state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds])); state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
state.notifications = { ...state.notifications, ...notificationsKeyValuePair }; state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
state.tabsCount.count -= state.tabsCount[state.appName]; state.tabsCount.count -= state.tabsCount[state.appName];
state.tabsCount[state.appName] = 0; state.tabsCount[state.appName] = 0;
state.notificationStatus = RequestStatus.LOADED; state.notificationStatus = RequestStatus.SUCCESSFUL;
state.pagination.numPages = numPages; state.pagination = pagination;
state.pagination.currentPage = currentPage;
}, },
fetchNotificationsCountDenied: (state) => { fetchNotificationsCountDenied: (state) => {
state.notificationStatus = RequestStatus.DENIED; state.notificationStatus = RequestStatus.DENIED;
@@ -58,7 +51,7 @@ const slice = createSlice({
state.notificationStatus = RequestStatus.FAILED; state.notificationStatus = RequestStatus.FAILED;
}, },
fetchNotificationsCountRequest: (state) => { fetchNotificationsCountRequest: (state) => {
state.notificationStatus = RequestStatus.LOADING; state.notificationStatus = RequestStatus.IN_PROGRESS;
}, },
fetchNotificationsCountSuccess: (state, { payload }) => { fetchNotificationsCountSuccess: (state, { payload }) => {
const { const {
@@ -68,13 +61,13 @@ const slice = createSlice({
state.appsId = appIds; state.appsId = appIds;
state.apps = apps; state.apps = apps;
state.showNotificationsTray = showNotificationsTray; state.showNotificationsTray = showNotificationsTray;
state.notificationStatus = RequestStatus.LOADED; state.notificationStatus = RequestStatus.SUCCESSFUL;
}, },
markNotificationsAsSeenRequest: (state) => { markNotificationsAsSeenRequest: (state) => {
state.notificationStatus = RequestStatus.LOADING; state.notificationStatus = RequestStatus.IN_PROGRESS;
}, },
markNotificationsAsSeenSuccess: (state) => { markNotificationsAsSeenSuccess: (state) => {
state.notificationStatus = RequestStatus.LOADED; state.notificationStatus = RequestStatus.SUCCESSFUL;
}, },
markNotificationsAsSeenDenied: (state) => { markNotificationsAsSeenDenied: (state) => {
state.notificationStatus = RequestStatus.DENIED; state.notificationStatus = RequestStatus.DENIED;
@@ -83,7 +76,7 @@ const slice = createSlice({
state.notificationStatus = RequestStatus.FAILED; state.notificationStatus = RequestStatus.FAILED;
}, },
markAllNotificationsAsReadRequest: (state) => { markAllNotificationsAsReadRequest: (state) => {
state.notificationStatus = RequestStatus.LOADING; state.notificationStatus = RequestStatus.IN_PROGRESS;
}, },
markAllNotificationsAsReadSuccess: (state) => { markAllNotificationsAsReadSuccess: (state) => {
const updatedNotifications = Object.fromEntries( const updatedNotifications = Object.fromEntries(
@@ -92,7 +85,7 @@ const slice = createSlice({
]), ]),
); );
state.notifications = updatedNotifications; state.notifications = updatedNotifications;
state.notificationStatus = RequestStatus.LOADED; state.notificationStatus = RequestStatus.SUCCESSFUL;
}, },
markAllNotificationsAsReadDenied: (state) => { markAllNotificationsAsReadDenied: (state) => {
state.notificationStatus = RequestStatus.DENIED; state.notificationStatus = RequestStatus.DENIED;
@@ -101,12 +94,12 @@ const slice = createSlice({
state.notificationStatus = RequestStatus.FAILED; state.notificationStatus = RequestStatus.FAILED;
}, },
markNotificationsAsReadRequest: (state) => { markNotificationsAsReadRequest: (state) => {
state.notificationStatus = RequestStatus.LOADING; state.notificationStatus = RequestStatus.IN_PROGRESS;
}, },
markNotificationsAsReadSuccess: (state, { payload }) => { markNotificationsAsReadSuccess: (state, { payload }) => {
const date = new Date().toISOString(); const date = new Date().toISOString();
state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date }; state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
state.notificationStatus = RequestStatus.LOADED; state.notificationStatus = RequestStatus.SUCCESSFUL;
}, },
markNotificationsAsReadDenied: (state) => { markNotificationsAsReadDenied: (state) => {
state.notificationStatus = RequestStatus.DENIED; state.notificationStatus = RequestStatus.DENIED;

21
src/Notifications/data/thunks.js
View File

@@ -23,7 +23,7 @@ import {
markNotificationsAsReadFailure, markNotificationsAsReadFailure,
} from './slice'; } from './slice';
import { import {
getNotifications, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead, getNotificationsList, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
} from './api'; } from './api';
import { getHttpErrorStatus } from '../utils'; import { getHttpErrorStatus } from '../utils';
@@ -35,21 +35,26 @@ const normalizeNotificationCounts = ({ countByAppName, count, showNotificationsT
}; };
}; };
const normalizeNotifications = ({ notifications }) => { const normalizeNotifications = (data) => {
const newNotificationIds = notifications.map(notification => notification.id.toString()); const newNotificationIds = data.results.map(notification => notification.id.toString());
const notificationsKeyValuePair = notifications.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {}); const notificationsKeyValuePair = data.results.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
const pagination = {
numPages: data.numPages,
currentPage: data.currentPage,
hasMorePages: !!data.next,
};
return { return {
newNotificationIds, notificationsKeyValuePair, newNotificationIds, notificationsKeyValuePair, pagination,
}; };
}; };
export const fetchNotificationList = ({ appName, page, pageSize }) => ( export const fetchNotificationList = ({ appName, page }) => (
async (dispatch) => { async (dispatch) => {
try { try {
dispatch(fetchNotificationRequest({ appName })); dispatch(fetchNotificationRequest({ appName }));
const data = await getNotifications(appName, page, pageSize); const data = await getNotificationsList(appName, page);
const normalisedData = normalizeNotifications((camelCaseObject(data))); const normalisedData = normalizeNotifications((camelCaseObject(data)));
dispatch(fetchNotificationSuccess({ ...normalisedData, numPages: data.numPages, currentPage: data.currentPage })); dispatch(fetchNotificationSuccess({ ...normalisedData }));
} catch (error) { } catch (error) {
if (getHttpErrorStatus(error) === 403) { if (getHttpErrorStatus(error) === 403) {
dispatch(fetchNotificationDenied(appName)); dispatch(fetchNotificationDenied(appName));

2
src/Notifications/notificationRowItem.test.jsx
View File

@@ -73,7 +73,7 @@ describe('Notification row item test cases.', () => {
); );
it('Successfully marked notification as read.', async () => { it('Successfully marked notification as read.', async () => {
axiosMock.onPut(markedNotificationAsReadApiUrl).reply(200, { message: 'Notification marked read.' }); axiosMock.onPatch(markedNotificationAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
renderComponent(); renderComponent();
const bellIcon = screen.queryByTestId('notification-bell-icon'); const bellIcon = screen.queryByTestId('notification-bell-icon');

20
src/Notifications/notificationSections.test.jsx
View File

@@ -14,9 +14,10 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown'; import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
import { initializeStore } from '../store'; import { initializeStore } from '../store';
import { markNotificationAsReadApiUrl } from './data/api'; import { markNotificationAsReadApiUrl, markNotificationsSeenApiUrl, getNotificationsListApiUrl } from './data/api';
import mockNotificationsResponse from './test-utils'; import mockNotificationsResponse from './test-utils';
import { markNotificationsAsSeen, fetchNotificationList } from './data/thunks';
import executeThunk from '../test-utils';
import './data/__factories__'; import './data/__factories__';
const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl(); const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
@@ -69,7 +70,7 @@ describe('Notification sections test cases.', () => {
}); });
it('Successfully marked all notifications as read, removing the unread status.', async () => { it('Successfully marked all notifications as read, removing the unread status.', async () => {
axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' }); axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
renderComponent(); renderComponent();
const bellIcon = screen.queryByTestId('notification-bell-icon'); const bellIcon = screen.queryByTestId('notification-bell-icon');
@@ -83,16 +84,23 @@ describe('Notification sections test cases.', () => {
}); });
it('Successfully load more notifications by clicking on load more notification button.', async () => { it('Successfully load more notifications by clicking on load more notification button.', async () => {
axiosMock.onPut(markNotificationsSeenApiUrl('discussion')).reply(200);
await executeThunk(markNotificationsAsSeen('discussions'), store.dispatch, store.getState);
renderComponent(); renderComponent();
const bellIcon = screen.queryByTestId('notification-bell-icon'); const bellIcon = screen.queryByTestId('notification-bell-icon');
await act(async () => { fireEvent.click(bellIcon); }); await act(async () => { fireEvent.click(bellIcon); });
expect(screen.queryAllByTestId('notification-contents')).toHaveLength(10);
const loadMoreButton = screen.queryByTestId('load-more-notifications'); const loadMoreButton = screen.queryByTestId('load-more-notifications');
expect(screen.queryAllByTestId('notification-contents')).toHaveLength(10); axiosMock.onGet(getNotificationsListApiUrl()).reply(
await act(async () => { fireEvent.click(loadMoreButton); }); 200,
(Factory.build('notificationsList', { num_pages: 2, current_page: 2 })),
);
await executeThunk(fetchNotificationList({ appName: 'discussion', page: 2 }), store.dispatch, store.getState);
expect(screen.queryAllByTestId('notification-contents')).toHaveLength(16); await act(async () => { fireEvent.click(loadMoreButton); });
expect(screen.queryAllByTestId('notification-contents')).toHaveLength(12);
}); });
}); });

2
src/Notifications/notificationTabs.test.jsx
View File

@@ -59,7 +59,7 @@ describe('Notification Tabs test cases.', () => {
const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true'); const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
expect(tabs.length).toEqual(5); expect(tabs.length).toEqual(5);
expect(within(selectedTab).queryByText('discussions')).toBeInTheDocument(); expect(within(selectedTab).queryByText('discussion')).toBeInTheDocument();
expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument(); expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument();
}); });

21
src/Notifications/test-utils.js
View File

@@ -5,27 +5,28 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { initializeStore } from '../store'; import { initializeStore } from '../store';
import executeThunk from '../test-utils'; import executeThunk from '../test-utils';
import { getNotificationsApiUrl, getNotificationsCountApiUrl } from './data/api'; import { getNotificationsListApiUrl, getNotificationsCountApiUrl } from './data/api';
import { fetchAppsNotificationCount, fetchNotificationList } from './data/thunks'; import { fetchAppsNotificationCount, fetchNotificationList } from './data/thunks';
import './data/__factories__'; import './data/__factories__';
const notificationCountsApiUrl = getNotificationsCountApiUrl(); const notificationCountsApiUrl = getNotificationsCountApiUrl();
const notificationsApiUrl = getNotificationsApiUrl(); const notificationsApiUrl = getNotificationsListApiUrl();
export default async function mockNotificationsResponse() { export default async function mockNotificationsResponse() {
const store = initializeStore(); const store = initializeStore();
const axiosMock = new MockAdapter(getAuthenticatedHttpClient()); const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
const notifications = (Factory.buildList('notification', 8, null, { createdDate: new Date().toISOString() }).concat(
Factory.buildList('notification', 2, null, { createdDate: '2023-06-01T00:46:11.979531Z' }),
));
axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount'))); axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
axiosMock.onGet(notificationsApiUrl).reply( axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.build('notificationsList', {
200, results: notifications,
(Factory.buildList('notification', 8, null, { createdDate: new Date().toISOString() }).concat( num_pages: 2,
Factory.buildList('notification', 8, null, { createdDate: '2023-06-01T00:46:11.979531Z' }), next: `${notificationsApiUrl}?app_name=discussion&page=2`,
)), })));
);
await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState); await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState); await executeThunk(fetchNotificationList({ appName: 'discussion', page: 1 }), store.dispatch, store.getState);
return { store, axiosMock }; return { store, axiosMock };
} }

2
src/index.scss
View File

@@ -123,7 +123,7 @@ $white: #fff;
} }
.content { .content {
b { strong {
color: #00262B !important; color: #00262B !important;
font-weight: 500 !important; font-weight: 500 !important;
} }

2
src/learning-header/AuthenticatedUserDropdown.jsx
View File

@@ -24,7 +24,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
dispatch(fetchAppsNotificationCount()); dispatch(fetchAppsNotificationCount());
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [notificationStatus]); }, []);
const dashboardMenuItem = ( const dashboardMenuItem = (
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}> <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>