From 75f56ea4bd9baef9f78af8799510838e93afc8bf Mon Sep 17 00:00:00 2001 From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:27:16 +0500 Subject: [PATCH] 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 --- src/constants.js | 5 +++++ .../course/new-sidebar/SidebarContextProvider.jsx | 2 +- .../course/new-sidebar/common/SidebarBase.jsx | 2 +- src/courseware/course/new-sidebar/constants.js | 6 ------ .../notifications/NotificationsWidget.jsx | 2 +- .../SequenceNavigationTabs.jsx | 13 ++++--------- .../course/sequence/sequence-navigation/hooks.js | 15 +++++++++++++-- .../sidebars/discussions/DiscussionsTrigger.jsx | 3 ++- .../notifications/NotificationTrigger.jsx | 4 ++-- 9 files changed, 29 insertions(+), 23 deletions(-) delete mode 100644 src/courseware/course/new-sidebar/constants.js diff --git a/src/constants.js b/src/constants.js index 4829b607..172f8706 100644 --- a/src/constants.js +++ b/src/constants.js @@ -44,3 +44,8 @@ export const VERIFIED_MODES = [ 'paid-executive-education', 'paid-bootcamp', ]; + +export const WIDGETS = { + DISCUSSIONS: 'DISCUSSIONS', + NOTIFICATIONS: 'NOTIFICATIONS', +}; diff --git a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx b/src/courseware/course/new-sidebar/SidebarContextProvider.jsx index 54c5521a..0af0ea2b 100644 --- a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx +++ b/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'; diff --git a/src/courseware/course/new-sidebar/common/SidebarBase.jsx b/src/courseware/course/new-sidebar/common/SidebarBase.jsx index 77c09d41..9cb2e98b 100644 --- a/src/courseware/course/new-sidebar/common/SidebarBase.jsx +++ b/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'; diff --git a/src/courseware/course/new-sidebar/constants.js b/src/courseware/course/new-sidebar/constants.js deleted file mode 100644 index cc938e6e..00000000 --- a/src/courseware/course/new-sidebar/constants.js +++ /dev/null @@ -1,6 +0,0 @@ -const WIDGETS = { - DISCUSSIONS: 'DISCUSSIONS', - NOTIFICATIONS: 'NOTIFICATIONS', -}; - -export default WIDGETS; diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx index 6d124481..3f8ab62b 100644 --- a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx +++ b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx @@ -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 = () => { diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx index 2fbfed2a..0160eb90 100644 --- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx +++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.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 = ({
= 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)); +} diff --git a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx index ce173a69..32e3f50a 100644 --- a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx +++ b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx @@ -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, diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx index 55ad5522..f37f2c33 100644 --- a/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx +++ b/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.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,