fixup! feat: notification count from notification plugin in course outline

Author: navinkarkera

src/course-outline/CourseOutline.tsx

@@ -344,7 +344,6 @@ const CourseOutline = () => {
                 courseId={courseId}
                 isLoading={isLoading}
                 statusBarData={statusBarData}
-                notificationCount={3}
               />
             ) : (
               <LegacyStatusBar

src/course-outline/status-bar/NotificationStatusIcon.tsx

@@ -21,16 +21,16 @@ function useDynamicHookShim() {
 
     async function load() {
       try {
-        const module = await import("@edx/frontend-plugin-notifications");
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        const module = await import('@edx/frontend-plugin-notifications');
         const hookFn = module.useAppNotifications ?? module.default;
         if (!cancelled) {
           // `module.useAppNotifications` is itself a hook
           setHook(() => hookFn);
         }
       } catch (err: any) {
-        // If the module cannot be found, just keep `hook` as null.
-        console.error("Failed to load notifications plugin:", err);
-        // No hook – the UI will fall back to the placeholder.
+        // eslint-disable-next-line no-console
+        console.error('Failed to load notifications plugin:', err);
       }
     }
 
@@ -45,7 +45,7 @@ function useDynamicHookShim() {
 }
 
 // Component that actually calls the loaded hook
-function NotificationHookConsumer({ hook }: { hook: () => HooKType }) {
+const NotificationHookConsumer = ({ hook }: { hook: () => HooKType }) => {
   // The hook is now called on **every** render of this component
   const { notificationAppData } = hook();
 
@@ -63,7 +63,7 @@ function NotificationHookConsumer({ hook }: { hook: () => HooKType }) {
       />
     </small>
   );
-}
+};
 
 // Main component
 export const NotificationStatusIcon = () => {
@@ -76,4 +76,3 @@ export const NotificationStatusIcon = () => {
   // Once loaded, delegate to a component that calls the hook
   return <NotificationHookConsumer hook={loadedHook} />;
 };
-

src/course-outline/status-bar/StatusBar.tsx

@@ -5,7 +5,7 @@ import { Badge, Icon, Stack } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
 import { CourseOutlineStatusBar } from '@src/course-outline/data/types';
-import { ChecklistRtl, NotificationsNone } from '@openedx/paragon/icons';
+import { ChecklistRtl } from '@openedx/paragon/icons';
 import messages from './messages';
 import { useWaffleFlags } from '../../data/apiHooks';
 import { NotificationStatusIcon } from './NotificationStatusIcon';
@@ -89,14 +89,12 @@ export interface StatusBarProps {
   courseId: string;
   isLoading: boolean;
   statusBarData: CourseOutlineStatusBar;
-  notificationCount?: number;
 }
 
 export const StatusBar = ({
   statusBarData,
   isLoading,
   courseId,
-  notificationCount,
 }: StatusBarProps) => {
   const intl = useIntl();
   const waffleFlags = useWaffleFlags(courseId);

src/stubs/empty-notifications-plugin.tsx

@@ -1,11 +1,9 @@
-export const useAppNotifications = () => {
-  return {
-    notificationAppData: {
-      tabsCount: {
-        count: 0,
-      }
-    }
-  };
-};
+export const useAppNotifications = () => ({
+  notificationAppData: {
+    tabsCount: {
+      count: 0,
+    },
+  },
+});
 
-export const NotificationsTray = () => <></>;
+export const NotificationsTray = () => null;

webpack.dev.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
 const webpack = require('webpack');
 
 const config = createConfig('webpack-dev', {
@@ -25,9 +26,10 @@ const config = createConfig('webpack-dev', {
           require.resolve('@edx/frontend-plugin-notifications');
         } catch (e) {
           // Package not found → point to the stub we created.
+          // eslint-disable-next-line no-param-reassign
           resource.request = path.resolve(__dirname, 'src/stubs/empty-notifications-plugin.tsx');
         }
-      }
+      },
     ),
   ],
 });

webpack.prod.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
 const webpack = require('webpack');
 
 const config = createConfig('webpack-prod', {
@@ -25,9 +26,10 @@ const config = createConfig('webpack-prod', {
           require.resolve('@edx/frontend-plugin-notifications');
         } catch (e) {
           // Package not found → point to the stub we created.
+          // eslint-disable-next-line no-param-reassign
           resource.request = path.resolve(__dirname, 'src/stubs/empty-notifications-plugin.tsx');
         }
-      }
+      },
     ),
   ],
 });