fix: fixed flicker issue of navbar width (#1364)

* fix: fixed fliker issue of navbar  width

* refactor: added hook function

* refactor: placed discussion and notification constant on common place

* refactor: moved to constant

* refactor: fixed variable rename

Author: sundasnoreen12

src/constants.js

@@ -44,3 +44,8 @@ export const VERIFIED_MODES = [
   'paid-executive-education',
   'paid-bootcamp',
 ];
+
+export const WIDGETS = {
+  DISCUSSIONS: 'DISCUSSIONS',
+  NOTIFICATIONS: 'NOTIFICATIONS',
+};

src/courseware/course/new-sidebar/SidebarContextProvider.jsx

@@ -9,7 +9,7 @@ import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import { getLocalStorage, setLocalStorage } from '../../../data/localStorage';
 import { useModel } from '../../../generic/model-store';
-import WIDGETS from './constants';
+import { WIDGETS } from '../../../constants';
 import SidebarContext from './SidebarContext';
 import { SIDEBARS } from './sidebars';
 

src/courseware/course/new-sidebar/common/SidebarBase.jsx

@@ -8,7 +8,7 @@ import { Icon, IconButton } from '@openedx/paragon';
 import { ArrowBackIos, Close } from '@openedx/paragon/icons';
 
 import { useEventListener } from '../../../../generic/hooks';
-import WIDGETS from '../constants';
+import { WIDGETS } from '../../../../constants';
 import messages from '../messages';
 import SidebarContext from '../SidebarContext';
 

src/courseware/course/new-sidebar/constants.js

@@ -3,7 +3,7 @@ import React, { useContext, useEffect, useMemo } from 'react';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useModel } from '../../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../../generic/upgrade-notification/UpgradeNotification';
-import WIDGETS from '../../../constants';
+import { WIDGETS } from '../../../../../../constants';
 import SidebarContext from '../../../SidebarContext';
 
 const NotificationsWidget = () => {

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx

@@ -1,21 +1,16 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { getConfig } from '@edx/frontend-platform';
 
 import UnitButton from './UnitButton';
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
-import { useIsOnXLDesktop } from './hooks';
-import SidebarContext from '../../sidebar/SidebarContext';
-import NewSidebarContext from '../../new-sidebar/SidebarContext';
+import { useIsOnXLDesktop, useIsSidebarOpen } from './hooks';
 
 const SequenceNavigationTabs = ({
   unitIds, unitId, showCompletion, onNavigate,
 }) => {
-  const enableNewSidebar = getConfig().ENABLE_NEW_SIDEBAR;
-  const sidebarContext = enableNewSidebar === 'true' ? NewSidebarContext : SidebarContext;
-  const { currentSidebar } = useContext(sidebarContext);
+  const isSidebarOpen = useIsSidebarOpen(unitId);
   const [
     indexOfLastVisibleChild,
     containerRef,
@@ -29,7 +24,7 @@ const SequenceNavigationTabs = ({
       <div
         ref={containerRef}
         className={classNames('sequence-navigation-tabs-container', {
-          'navigation-tab-width': isOnXLDesktop && currentSidebar,
+          'navigation-tab-width': isOnXLDesktop && isSidebarOpen,
         })}
       >
         <div

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx

@@ -1,9 +1,13 @@
-/* eslint-disable import/prefer-default-export */
-
+import { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
 import { useModel } from '../../../../generic/model-store';
 import { sequenceIdsSelector } from '../../../data';
+import SidebarContext from '../../sidebar/SidebarContext';
+import NewSidebarContext from '../../new-sidebar/SidebarContext';
+import { WIDGETS } from '../../../../constants';
 
 export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId) {
   const sequenceIds = useSelector(sequenceIdsSelector);
@@ -74,3 +78,10 @@ export function useIsOnXLDesktop() {
   const windowSize = useWindowSize();
   return windowSize.width >= breakpoints.extraLarge.minWidth;
 }
+
+export function useIsSidebarOpen(unitId) {
+  const { currentSidebar } = useContext(getConfig().ENABLE_NEW_SIDEBAR === 'true' ? NewSidebarContext : SidebarContext);
+  const topic = useModel('discussionTopics', unitId);
+  return currentSidebar === WIDGETS.NOTIFICATIONS
+    || (currentSidebar === WIDGETS.DISCUSSIONS && !!(topic?.id || topic?.enabledInContext));
+}

src/courseware/course/sequence/sequence-navigation/hooks.js

@@ -10,9 +10,10 @@ import { getCourseDiscussionTopics } from '../../../../data/thunks';
 import SidebarTriggerBase from '../../common/TriggerBase';
 import SidebarContext from '../../SidebarContext';
 import messages from './messages';
+import { WIDGETS } from '../../../../../constants';
 
 ensureConfig(['DISCUSSIONS_MFE_BASE_URL']);
-export const ID = 'DISCUSSIONS';
+export const ID = WIDGETS.DISCUSSIONS;
 
 const DiscussionsTrigger = ({
   intl,

src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx

@@ -5,10 +5,10 @@ import { getLocalStorage, setLocalStorage } from '../../../../../data/localStora
 import messages from '../../../messages';
 import SidebarTriggerBase from '../../common/TriggerBase';
 import SidebarContext from '../../SidebarContext';
-
+import { WIDGETS } from '../../../../../constants';
 import NotificationIcon from './NotificationIcon';
 
-export const ID = 'NOTIFICATIONS';
+export const ID = WIDGETS.NOTIFICATIONS;
 
 const NotificationTrigger = ({
   intl,