diff --git a/src/Notifications/NotificationTabs.jsx b/src/Notifications/NotificationTabs.jsx index 4e9cdd2..43d0e8e 100644 --- a/src/Notifications/NotificationTabs.jsx +++ b/src/Notifications/NotificationTabs.jsx @@ -33,7 +33,7 @@ const NotificationTabs = () => { setPage(page + 1); }, [page]); - const tabArray = useMemo(() => notificationTabsOptions.map((option) => ( + const tabArray = useMemo(() => notificationTabsOptions?.map((option) => ( `${getConfig().LMS_BASE_URL}/api/notifications/count/`; export const getNotificationsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`; export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-unseen/${appName}/`; -const parseNotificationList = (notificationList) => { - const currentTime = Date.now(); - const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000); - const today = []; - const earlier = []; - notificationList.forEach(obj => { - const objectTime = obj.time; - if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) { today.push(obj); } else { earlier.push(obj); } - }); - return { today, earlier }; -}; - export async function getNotifications(appName, notificationCount, page, pageSize) { - const params = snakeCaseObject({ page, pageSize }); + // const params = snakeCaseObject({ page, pageSize }); + // const { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params }); + const data = notificationsList.notifications; - let { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params }); - - const notificationData = [ - { - type: 'post', - responding_user: 'SCM_Lead', - notification_content: 'Hello and welcome to SC0x!', - target_user: '', - course_name: 'Supply Chain Analytics', - content_content_url: '', - is_read: false, - is_seen: false, - time: '1685361282018', - }, - { - type: 'help', - responding_user: 'MITx_Learner', - notification_content: 'What grade does a student need to get in order to pass the course and earn a certificate?', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685361282018', - }, - { - type: 'post', - responding_user: 'SCM_Lead', - notification_content: 'Hello and welcome to SC0x!', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1684253634808', - author: '', - }, - { - type: 'help', - responding_user: 'MITx_Learner', - notification_content: 'What grade does a student need to get in order to pass the course and earn a certificate?', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1684253736371', - author: '', - }, - { - type: 'respond', - responding_user: 'MITx_Learner', - notification_content: 'Can’t find linear regression in section 3 review', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1684253736371', - author: '', - }, - { - type: 'comment', - responding_user: 'MITx_Learner', - notification_content: 'Can’t find linear regression in section 3 review', - target_user: 'MITx_Expert’s ', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1684253736371', - author: '', - }, - { - type: 'question', - responding_user: 'MITx_Learner', - notification_content: 'Examples of quadratic equations in supply chains', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1684253736371', - author: '', - }, - { - type: 'comment', - responding_user: 'MITx_Learner', - notification_content: 'What grade does a student need to get in order to pass the course and earn a certificate?', - target_user: 'MITx_Expert’s ', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - time: '1684253736371', - is_seen: false, - author: 'testuser', - }, - { - type: 'comment', - responding_user: 'MITx_Learner', - notification_content: 'Convexity of f(x)=1/x , x>1', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - time: '1684253736371', - is_seen: false, - author: 'testuser', - }, - { - type: 'answer', - responding_user: 'SCM_Lead', - notification_content: 'Quiz in section 3 - Please explain the F-Significance value', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - time: '1685096268835', - is_seen: false, - author: 'testuser', - }, - { - type: 'endorsed', - responding_user: '', - notification_content: 'Quiz in section 3 - Please explain the F-Significance value', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685096268835', - author: 'testuser', - }, - { - type: 'reported', - responding_user: 'MITx Learner’s', - notification_content: '“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685212056931', - author: '', - }, - { - type: 'postLiked', - responding_user: 'SCM_Lead', - notification_content: 'Retaking the course', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685212056931', - author: '', - }, - { - type: 'commentLiked', - responding_user: 'MITx_Expert ', - notification_content: 'Final exam answers', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685212056931', - author: '', - }, - { - type: 'edited', - responding_user: 'MITx_Expert ', - notification_content: 'Question 1', - target_user: '', - course_name: 'Supply Chain Analytics', - content_url: '', - is_read: false, - is_seen: false, - time: '1685212056931', - author: '', - }, - ]; - - const { today, earlier } = parseNotificationList(camelCaseObject(notificationData)); + const { today, earlier } = splitNotificationsByTime(camelCaseObject(data)); data = { discussions: { TODAY: today, @@ -235,21 +45,21 @@ export async function getNotifications(appName, notificationCount, page, pageSiz } export async function getNotificationCounts() { - let { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl()); - data = { - count: 25, + // const { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl()); + const data = { + count: 40, count_by_app_name: { reminders: 10, - discussions: 5, - grades: 4, - authoring: 6, + discussions: 20, + grades: 5, + authoring: 5, }, }; - return camelCaseObject(data); + + return data; } export async function markNotificationSeen(appName) { - const { data } = await getAuthenticatedHttpClient() - .put(`${markNotificationsSeenApiUrl(appName)}`); + const { data } = await getAuthenticatedHttpClient().put(`${markNotificationsSeenApiUrl(appName)}`); return camelCaseObject(data); } diff --git a/src/Notifications/data/notifications.json b/src/Notifications/data/notifications.json new file mode 100644 index 0000000..1e7ceeb --- /dev/null +++ b/src/Notifications/data/notifications.json @@ -0,0 +1,94 @@ +{ + "data": [ + { + "id": 1, + "type": "post", + "content": "

SCM_Lead posts Hello and welcome to SC0x!

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:46:11.979531Z" + }, + { + "id": 2, + "type": "help", + "content": "

MITx_Learner asked What grade does a student need to get in order to pass the course and earn a certificate?

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 3, + "type": "post", + "content": "

SCM_Lead posts Hello and welcome to SC0x!

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:46:11.979531Z" + }, + { + "id": 4, + "type": "respond", + "content": "

MITx_Learner responded Can't find linear regression in section 3 review

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 5, + "type": "comment", + "content": "

MITx_Learner commented on MITx_Expert's response on a post your following Can't find linear regression in section 3 review

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 6, + "type": "question", + "content": "

MITx_Learner commented Examples of quadratic equations in supply chains

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 7, + "type": "answer", + "content": "

MITx_Expert answered Examples of quadratic equations in supply chains

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 8, + "type": "comment", + "content": "

MITx_Learner commented Examples of quadratic equations in supply chains

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + }, + { + "id": 9, + "type": "comment", + "content": "

MITx_Learner commented on MITx_Expert'swhat grade does a student need to get in order to pass the course and earn a certificate?

", + "course_name": "Supply Chain Analytics", + "content_content_url": "", + "last_read": null, + "last_seen": null, + "created_at": "2023-06-01T00:36:11.979531Z" + } + ] +} diff --git a/src/Notifications/data/slice.js b/src/Notifications/data/slice.js index ac0fa6c..7d92d4d 100644 --- a/src/Notifications/data/slice.js +++ b/src/Notifications/data/slice.js @@ -1,18 +1,44 @@ /* eslint-disable no-param-reassign */ import { createSlice } from '@reduxjs/toolkit'; +export const IDLE = 'idle'; export const LOADING = 'loading'; export const LOADED = 'loaded'; export const FAILED = 'failed'; export const DENIED = 'denied'; - +// today or earlier logic will shift on component level const slice = createSlice({ name: 'notifications', initialState: { notificationStatus: 'idle', - notifications: {}, - totalUnseenCounts: {}, - appName: '', + appName: 'discussions', + appsId: ['reminders', 'discussions', 'grades', 'authoring'], + apps: { + reminders: ['notification_1', 'notification_2'], + discussions: ['notification_3'], + grades: ['notification_4', 'notification_5'], + authoring: ['notification_6'], + }, + notifications: { + notification_1: {}, + notification_2: {}, + notification_3: {}, + notification_4: {}, + notification_5: {}, + notification_6: {}, + }, + tabsCount: { + reminders: 0, + discussions: 0, + grades: 0, + authoring: 0, + totalCount: 0, + }, + pagination: { + count: 90, + numPages: 9, + currentPage: 1, + }, }, reducers: { fetchNotificationDenied: (state, { payload }) => { @@ -43,7 +69,6 @@ const slice = createSlice({ fetchNotificationsCountSuccess: (state, { payload }) => { state.tabsCount = payload; state.notificationStatus = LOADED; - state.totalUnseenCounts = payload; }, markNotificationsAsSeenRequest: (state) => { state.notificationStatus = LOADING; diff --git a/src/Notifications/data/thunks.js b/src/Notifications/data/thunks.js index 4c61ee4..85bfb5a 100644 --- a/src/Notifications/data/thunks.js +++ b/src/Notifications/data/thunks.js @@ -1,3 +1,4 @@ +import { camelCaseObject } from '@edx/frontend-platform'; import { fetchNotificationSuccess, fetchNotificationRequest, @@ -9,11 +10,7 @@ import { markNotificationsAsSeenSuccess, markNotificationsAsSeenFailure, } from './slice'; -import { - getNotifications, - getNotificationCounts, - markNotificationSeen, -} from './api'; +import { getNotifications, getNotificationCounts, markNotificationSeen } from './api'; export const fetchNotificationList = ({ appName, notificationCount, page, pageSize, @@ -29,12 +26,12 @@ export const fetchNotificationList = ({ } ); -export const fetchNotificationsCountsList = () => ( +export const fetchAppsNotificationCount = () => ( async (dispatch) => { try { dispatch(fetchNotificationsCountRequest()); const data = await getNotificationCounts(); - dispatch(fetchNotificationsCountSuccess(data)); + dispatch(fetchNotificationsCountSuccess(camelCaseObject(data))); } catch (errors) { dispatch(fetchNotificationsCountFailure()); } diff --git a/src/Notifications/utils.js b/src/Notifications/utils.js new file mode 100644 index 0000000..dea9f30 --- /dev/null +++ b/src/Notifications/utils.js @@ -0,0 +1,24 @@ +export const splitNotificationsByTime = (notificationList) => { + const currentTime = Date.now(); + const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000); + + const { today, earlier } = notificationList.reduce( + (result, notification) => { + const objectTime = new Date(notification.createdAt).getTime(); + if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) { + result.today.push(notification); + } else { + result.earlier.push(notification); + } + return result; + }, + { today: [], earlier: [] }, + ); + + return { today, earlier }; +}; + +export const getNotificationCount = (notificationCounts, appName) => { + const { countByAppName } = notificationCounts; + return countByAppName[appName] || 0; +};