feat: added notification APIs

src/Notifications/data/api.js

@@ -1,4 +1,9 @@
-import { camelCaseObject } from '@edx/frontend-platform';
+import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+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();
@@ -11,7 +16,12 @@ const parseNotificationList = (notificationList) => {
   });
   return { today, earlier };
 };
-export async function getNotifications(notificationType, notificationCount) {
+
+export async function getNotifications(appName, notificationCount, page, pageSize) {
+  const params = snakeCaseObject({ page, pageSize });
+
+  let { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params });
+
   const notificationData = [
     {
       type: 'post',
@@ -194,8 +204,7 @@ export async function getNotifications(notificationType, notificationCount) {
   ];
 
   const { today, earlier } = parseNotificationList(camelCaseObject(notificationData));
-
-  const data = {
+  data = {
     discussions: {
       TODAY: today,
       EARLIER: earlier,
@@ -205,7 +214,8 @@ export async function getNotifications(notificationType, notificationCount) {
       EARLIER: earlier,
     },
   };
-  const notifications = data[notificationType];
+
+  const notifications = data[appName];
   const { TODAY = [], EARLIER = [] } = notifications || [];
   let todayNotifications = TODAY;
   let earlierNotifications = [];
@@ -225,7 +235,8 @@ export async function getNotifications(notificationType, notificationCount) {
 }
 
 export async function getNotificationCounts() {
-  const data = {
+  let { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl());
+  data = {
     count: 25,
     count_by_app_name: {
       reminders: 10,
@@ -236,3 +247,9 @@ export async function getNotificationCounts() {
   };
   return camelCaseObject(data);
 }
+
+export async function markNotificationSeen(appName) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(`${markNotificationsSeenApiUrl(appName)}`);
+  return camelCaseObject(data);
+}

src/Notifications/data/selectors.js

@@ -1,4 +1,4 @@
 export const getNotificationStatus = () => state => state.notifications.notificationStatus;
 export const getNotificationTotalUnseenCounts = () => state => state.notifications.totalUnseenCounts;
 export const getNotifications = () => state => state.notifications.notifications;
-export const getSelectedNotificationType = () => state => state.notifications.notificationType;
+export const getSelectedAppName = () => state => state.notifications.appName;

src/Notifications/data/slice.js

@@ -12,19 +12,19 @@ const slice = createSlice({
     notificationStatus: 'idle',
     notifications: {},
     totalUnseenCounts: {},
-    notificationType: '',
+    appName: '',
   },
   reducers: {
     fetchNotificationDenied: (state, { payload }) => {
-      state.notificationType = payload.notificationType;
+      state.appName = payload.appName;
       state.notificationStatus = DENIED;
     },
     fetchNotificationFailure: (state, { payload }) => {
-      state.notificationType = payload.notificationType;
+      state.appName = payload.appName;
       state.notificationStatus = FAILED;
     },
     fetchNotificationRequest: (state, { payload }) => {
-      state.notificationType = payload.notificationType;
+      state.appName = payload.appName;
       state.notificationStatus = LOADING;
     },
     fetchNotificationSuccess: (state, { payload }) => {
@@ -45,6 +45,18 @@ const slice = createSlice({
       state.notificationStatus = LOADED;
       state.totalUnseenCounts = payload;
     },
+    markNotificationsAsSeenRequest: (state) => {
+      state.notificationStatus = LOADING;
+    },
+    markNotificationsAsSeenSuccess: (state) => {
+      state.notificationStatus = LOADED;
+    },
+    markNotificationsAsSeenDenied: (state) => {
+      state.notificationStatus = DENIED;
+    },
+    markNotificationsAsSeenFailure: (state) => {
+      state.notificationStatus = FAILED;
+    },
   },
 });
 
@@ -57,6 +69,10 @@ export const {
   fetchNotificationsCountFailure,
   fetchNotificationsCountRequest,
   fetchNotificationsCountSuccess,
+  markNotificationsAsSeenRequest,
+  markNotificationsAsSeenSuccess,
+  markNotificationsAsSeenFailure,
+  markNotificationsAsSeenDenied,
 } = slice.actions;
 
 export const notificationsReducer = slice.reducer;

src/Notifications/data/thunks.js

@@ -5,20 +5,26 @@ import {
   fetchNotificationsCountFailure,
   fetchNotificationsCountRequest,
   fetchNotificationsCountSuccess,
+  markNotificationsAsSeenRequest,
+  markNotificationsAsSeenSuccess,
+  markNotificationsAsSeenFailure,
 } from './slice';
 import {
   getNotifications,
   getNotificationCounts,
+  markNotificationSeen,
 } from './api';
 
-export const fetchNotificationList = ({ notificationType, notificationCount }) => (
+export const fetchNotificationList = ({
+  appName, notificationCount, page, pageSize,
+}) => (
   async (dispatch) => {
     try {
-      dispatch(fetchNotificationRequest({ notificationType }));
-      const data = await getNotifications(notificationType, notificationCount);
+      dispatch(fetchNotificationRequest({ appName }));
+      const data = await getNotifications(appName, notificationCount, page, pageSize);
       dispatch(fetchNotificationSuccess(data));
     } catch (errors) {
-      dispatch(fetchNotificationFailure({ notificationType }));
+      dispatch(fetchNotificationFailure({ appName }));
     }
   }
 );
@@ -34,3 +40,15 @@ export const fetchNotificationsCountsList = () => (
     }
   }
 );
+
+export const markNotificationsAsSeen = (appName) => (
+  async (dispatch) => {
+    try {
+      dispatch(markNotificationsAsSeenRequest({ appName }));
+      const data = await markNotificationSeen(appName);
+      dispatch(markNotificationsAsSeenSuccess(data));
+    } catch (errors) {
+      dispatch(markNotificationsAsSeenFailure({ appName }));
+    }
+  }
+);