refactor: removed backend api calls

Author: sundasnoreen1221

src/Notifications/NotificationTabs.jsx

@@ -30,7 +30,7 @@ const NotificationTabs = () => {
       eventKey={appName}
       title={appName}
       notification={notificationUnseenCounts[appName]}
-      tabClassName="pt-0 pb-2.5 px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
+      tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
     >
       {appName === selectedAppName && (<NotificationSections />)}
     </Tab>
@@ -41,7 +41,7 @@ const NotificationTabs = () => {
       variant="tabs"
       defaultActiveKey={selectedAppName}
       onSelect={handleActiveTab}
-      className="px-2.5 border-0 text-primary-500"
+      className="px-2.5 text-primary-500"
     >
       {tabArray}
     </Tabs>

src/Notifications/data/api.js

@@ -1,11 +1,6 @@
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
-
+import { camelCaseObject } from '@edx/frontend-platform';
 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}/`;
-
 export async function getNotifications(appName, page, pageSize) {
   const { data } = notificationsList;
   const startIndex = (page - 1) * pageSize;
@@ -24,7 +19,7 @@ export async function getNotificationCounts() {
       grades: 10,
       authoring: 5,
     },
-    show_notification_tray: true,
+    show_notification_tray: false,
   };
   return camelCaseObject(data);
 }

src/Notifications/data/slice.js

@@ -87,11 +87,11 @@ const slice = createSlice({
       state.notificationStatus = LOADING;
     },
     markAllNotificationsAsReadSuccess: (state) => {
-      const date = new Date().toISOString();
-      const updatedNotifications = Object.entries(state.notifications)
-        .filter(([key]) => state.apps[state.appName].includes(key))
-        .map(([, value]) => ({ ...value, lastRead: date }));
-
+      const updatedNotifications = Object.fromEntries(
+        Object.entries(state.notifications).map(([key, notification]) => [
+          key, { ...notification, lastRead: new Date().toISOString() },
+        ]),
+      );
       state.notifications = updatedNotifications;
       state.notificationStatus = LOADED;
     },
@@ -116,12 +116,10 @@ const slice = createSlice({
       state.notificationStatus = FAILED;
     },
     resetNotificationStateRequest: () => initialState,
-
     updateAppNameRequest: (state, { payload }) => {
       state.appName = payload.appName;
       state.pagination.currentPage = 1;
     },
-
     updatePaginationRequest: (state) => {
       state.pagination.currentPage += 1;
     },

src/index.scss

@@ -145,6 +145,9 @@ $white: #fff;
   padding-top: 10px;
   padding-bottom: 10px;
 }
+.pb-10px{
+  padding-bottom: 10px;
+}
 
 .line-height-24{
   line-height: 24px;