fix: redux structure updates

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) => (
     <Tab
       eventKey={option.key}
       title={option.title}

src/Notifications/data/api.js

@@ -1,209 +1,19 @@
 import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { splitNotificationsByTime } from '../utils';
+
+import notificationsList from './notifications.json';
 
 export const getNotificationsCountApiUrl = () => `${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);
 }

src/Notifications/data/notifications.json

@@ -0,0 +1,94 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "type": "post",
+      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
+      "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": "<p><b>MITx_Learner</b> asked <b>What grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
+      "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": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
+      "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": "<p><b>MITx_Learner</b> responded <b>Can't find linear regression in section 3 review</b></p>",
+      "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": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b> response on a post your following <b>Can't find linear regression in section 3 review</b></p>",
+      "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": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
+      "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": "<p><b>MITx_Expert</b> answered <b>Examples of quadratic equations in supply chains</b></p>",
+      "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": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
+      "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": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b>what grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    }
+  ]
+}

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;

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());
     }

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;
+};