From 30812acd952583d3455307c63c0392da52499ebc Mon Sep 17 00:00:00 2001 From: sundasnoreen12 Date: Wed, 27 Dec 2023 21:26:29 +0500 Subject: [PATCH] refactor:fixed naming convention and combine useeffects --- .env | 2 +- src/courseware/course/Course.jsx | 6 +-- .../course/new-sidebar/NewSidebarIcon.jsx | 41 ------------------- .../new-sidebar/SidebarContextProvider.jsx | 9 +--- .../course/new-sidebar/SidebarIcon.jsx | 23 +++++++++++ ...wSidebarTrigger.jsx => SidebarTrigger.jsx} | 17 ++++---- .../course/new-sidebar/SidebarTriggers.jsx | 4 +- ...debarFilled.jsx => RightSidebarFilled.jsx} | 4 +- ...rOutlined.jsx => RightSidebarOutlined.jsx} | 4 +- .../course/new-sidebar/icons/index.js | 4 +- src/courseware/course/sequence/Sequence.jsx | 2 +- .../UpgradeNotification.jsx | 2 +- .../UpgradeNotification.scss | 4 -- src/index.jsx | 2 +- 14 files changed, 46 insertions(+), 78 deletions(-) delete mode 100644 src/courseware/course/new-sidebar/NewSidebarIcon.jsx create mode 100644 src/courseware/course/new-sidebar/SidebarIcon.jsx rename src/courseware/course/new-sidebar/{NewSidebarTrigger.jsx => SidebarTrigger.jsx} (89%) rename src/courseware/course/new-sidebar/icons/{SvgRightSidebarFilled.jsx => RightSidebarFilled.jsx} (79%) rename src/courseware/course/new-sidebar/icons/{SvgRightSidebarOutlined.jsx => RightSidebarOutlined.jsx} (79%) diff --git a/.env b/.env index 684025852e..d930d83b79 100644 --- a/.env +++ b/.env @@ -47,4 +47,4 @@ TWITTER_HASHTAG='' TWITTER_URL='' USER_INFO_COOKIE_NAME='' OPTIMIZELY_FULL_STACK_SDK_KEY='' -ENABLE_SIDEBAR_NEW_VIEW='false' +ENABLE_NEW_SIDEBAR='false' diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index 08f996781b..7a193f5002 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -36,7 +36,7 @@ const Course = ({ } = useModel('courseHomeMeta', courseId); const sequence = useModel('sequences', sequenceId); const section = useModel('sections', sequence ? sequence.sectionId : null); - const showSidebarNewView = getConfig().ENABLE_SIDEBAR_NEW_VIEW; + const showNewSidebar = getConfig().ENABLE_NEW_SIDEBAR; const pageTitleBreadCrumbs = [ sequence, @@ -67,7 +67,7 @@ const Course = ({ )); }, [sequenceId]); - const SidebarProviderComponent = showSidebarNewView === 'true' ? NewSidebarProvider : SidebarProvider; + const SidebarProviderComponent = showNewSidebar === 'true' ? NewSidebarProvider : SidebarProvider; return ( @@ -91,7 +91,7 @@ const Course = ({ courseId={courseId} contentToolsEnabled={course.showCalculator || course.notes.enabled} /> - { showSidebarNewView === 'true' ? : } + { showNewSidebar === 'true' ? : } )} diff --git a/src/courseware/course/new-sidebar/NewSidebarIcon.jsx b/src/courseware/course/new-sidebar/NewSidebarIcon.jsx deleted file mode 100644 index 9d31d7a05a..0000000000 --- a/src/courseware/course/new-sidebar/NewSidebarIcon.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Icon } from '@edx/paragon'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React, { useContext } from 'react'; -import { RightSidebarFilled, RightSidebarOutlined } from './icons/index'; -import SidebarContext from './SidebarContext'; -import messages from '../messages'; - -const SidebarIcon = ({ - intl, - status, - sidebarColor, -}) => { - const { currentSidebar } = useContext(SidebarContext); - return ( - <> - - {status === 'active' - ? ( - - ) - : null} - - ); -}; - -SidebarIcon.propTypes = { - intl: intlShape.isRequired, - status: PropTypes.string.isRequired, - sidebarColor: PropTypes.string.isRequired, -}; - -export default injectIntl(SidebarIcon); diff --git a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx b/src/courseware/course/new-sidebar/SidebarContextProvider.jsx index 6ad30eb40b..383a0a1ec9 100644 --- a/src/courseware/course/new-sidebar/SidebarContextProvider.jsx +++ b/src/courseware/course/new-sidebar/SidebarContextProvider.jsx @@ -37,10 +37,7 @@ const SidebarProvider = ({ setIsDiscussionbarAvailable(true); setHideDiscussionbar(false); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [topic]); - useEffect(() => { if (isEmpty(verifiedMode)) { setIsNotificationbarAvailable(false); setHideNotificationbar(true); @@ -48,15 +45,11 @@ const SidebarProvider = ({ setIsNotificationbarAvailable(true); setHideNotificationbar(false); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [verifiedMode]); - useEffect(() => { setCurrentSidebar(SidebarID); if (isDiscussionbarAvailable) { setHideDiscussionbar(false); } else { setHideDiscussionbar(true); } if (isNotificationbarAvailable) { setHideNotificationbar(false); } else { setHideNotificationbar(true); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [unitId, isDiscussionbarAvailable, isNotificationbarAvailable]); + }, [unitId, topic, verifiedMode, isDiscussionbarAvailable, isNotificationbarAvailable]); const onNotificationSeen = useCallback(() => { setNotificationStatus('inactive'); diff --git a/src/courseware/course/new-sidebar/SidebarIcon.jsx b/src/courseware/course/new-sidebar/SidebarIcon.jsx new file mode 100644 index 0000000000..92a0e2648e --- /dev/null +++ b/src/courseware/course/new-sidebar/SidebarIcon.jsx @@ -0,0 +1,23 @@ +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Icon } from '@edx/paragon'; +import React, { useContext } from 'react'; +import { RightSidebarFilled, RightSidebarOutlined } from './icons'; +import SidebarContext from './SidebarContext'; +import messages from '../messages'; + +const SidebarIcon = () => { + const intl = useIntl(); + const { currentSidebar } = useContext(SidebarContext); + + return ( + + ); +}; + +SidebarIcon.propTypes = { }; + +export default SidebarIcon; diff --git a/src/courseware/course/new-sidebar/NewSidebarTrigger.jsx b/src/courseware/course/new-sidebar/SidebarTrigger.jsx similarity index 89% rename from src/courseware/course/new-sidebar/NewSidebarTrigger.jsx rename to src/courseware/course/new-sidebar/SidebarTrigger.jsx index 32bcb19f2d..fb1c0949fd 100644 --- a/src/courseware/course/new-sidebar/NewSidebarTrigger.jsx +++ b/src/courseware/course/new-sidebar/SidebarTrigger.jsx @@ -1,4 +1,4 @@ -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import PropTypes from 'prop-types'; import React, { useContext, useEffect, useMemo } from 'react'; import { useDispatch } from 'react-redux'; @@ -10,12 +10,9 @@ import SidebarTriggerBase from './common/TriggerBase'; import SidebarContext from './SidebarContext'; import { useModel } from '../../../generic/model-store'; import { getCourseDiscussionTopics } from '../../data/thunks'; -import NewSidebarIcon from './NewSidebarIcon'; +import SidebarIcon from './SidebarIcon'; -const NewSideBarTrigger = ({ - intl, - onClick, -}) => { +const SideBarTrigger = ({ onClick }) => { const { courseId, notificationStatus, @@ -26,6 +23,7 @@ const NewSideBarTrigger = ({ } = useContext(SidebarContext); const dispatch = useDispatch(); + const intl = useIntl(); const { tabs } = useModel('courseHomeMeta', courseId); const baseUrl = getConfig().DISCUSSIONS_MFE_BASE_URL; const edxProvider = useMemo( @@ -78,14 +76,13 @@ const NewSideBarTrigger = ({ return ( - + ); }; -NewSideBarTrigger.propTypes = { - intl: intlShape.isRequired, +SideBarTrigger.propTypes = { onClick: PropTypes.func.isRequired, }; -export default injectIntl(NewSideBarTrigger); +export default SideBarTrigger; diff --git a/src/courseware/course/new-sidebar/SidebarTriggers.jsx b/src/courseware/course/new-sidebar/SidebarTriggers.jsx index e1ce390b2b..c73d05a1f2 100644 --- a/src/courseware/course/new-sidebar/SidebarTriggers.jsx +++ b/src/courseware/course/new-sidebar/SidebarTriggers.jsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React, { useContext } from 'react'; import SidebarContext from './SidebarContext'; -import NewSidebarTrigger from './NewSidebarTrigger'; +import SidebarTrigger from './SidebarTrigger'; import { SidebarID } from './constants'; const SidebarTriggers = () => { @@ -17,7 +17,7 @@ const SidebarTriggers = () => { style={{ borderBottom: isActive ? '2px solid' : null }} key={SidebarID} > - toggleSidebar(SidebarID)} key={SidebarID} /> + toggleSidebar(SidebarID)} key={SidebarID} /> ); diff --git a/src/courseware/course/new-sidebar/icons/SvgRightSidebarFilled.jsx b/src/courseware/course/new-sidebar/icons/RightSidebarFilled.jsx similarity index 79% rename from src/courseware/course/new-sidebar/icons/SvgRightSidebarFilled.jsx rename to src/courseware/course/new-sidebar/icons/RightSidebarFilled.jsx index ef84288de1..d510f32139 100644 --- a/src/courseware/course/new-sidebar/icons/SvgRightSidebarFilled.jsx +++ b/src/courseware/course/new-sidebar/icons/RightSidebarFilled.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -const SvgRightSidebarFilled = (props) => ( +const RightSidebarFilled = (props) => ( ( /> ); -export default SvgRightSidebarFilled; +export default RightSidebarFilled; diff --git a/src/courseware/course/new-sidebar/icons/SvgRightSidebarOutlined.jsx b/src/courseware/course/new-sidebar/icons/RightSidebarOutlined.jsx similarity index 79% rename from src/courseware/course/new-sidebar/icons/SvgRightSidebarOutlined.jsx rename to src/courseware/course/new-sidebar/icons/RightSidebarOutlined.jsx index 9188e093f7..5a39aa3c39 100644 --- a/src/courseware/course/new-sidebar/icons/SvgRightSidebarOutlined.jsx +++ b/src/courseware/course/new-sidebar/icons/RightSidebarOutlined.jsx @@ -1,6 +1,6 @@ import * as React from 'react'; -const SvgRightSidebarOutlined = (props) => ( +const RightSidebarOutlined = (props) => ( ( /> ); -export default SvgRightSidebarOutlined; +export default RightSidebarOutlined; diff --git a/src/courseware/course/new-sidebar/icons/index.js b/src/courseware/course/new-sidebar/icons/index.js index a87bf7ebdb..808ee27104 100644 --- a/src/courseware/course/new-sidebar/icons/index.js +++ b/src/courseware/course/new-sidebar/icons/index.js @@ -1,2 +1,2 @@ -export { default as RightSidebarFilled } from './SvgRightSidebarFilled'; -export { default as RightSidebarOutlined } from './SvgRightSidebarOutlined'; +export { default as RightSidebarFilled } from './RightSidebarFilled'; +export { default as RightSidebarOutlined } from './RightSidebarOutlined'; diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index 2f1b2464c0..5194e84f09 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/src/courseware/course/sequence/Sequence.jsx @@ -47,7 +47,7 @@ const Sequence = ({ const sequenceStatus = useSelector(state => state.courseware.sequenceStatus); const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit); const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth; - const showSidebarNewView = getConfig().ENABLE_SIDEBAR_NEW_VIEW; + const showSidebarNewView = getConfig().ENABLE_NEW_SIDEBAR; const handleNext = () => { const nextIndex = sequence.unitIds.indexOf(unitId) + 1; diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx index 97868f9c3e..afefd0e5ee 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.jsx +++ b/src/generic/upgrade-notification/UpgradeNotification.jsx @@ -503,7 +503,7 @@ const UpgradeNotification = ({ iconAs={Icon} onClick={() => toggleSidebar(sidebarId, tabId)} variant="light" - className="text-black" + className="text-primary-500" /> )} diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss index 018248fdd3..afb93b428e 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.scss +++ b/src/generic/upgrade-notification/UpgradeNotification.scss @@ -45,7 +45,3 @@ .font-size-18 { font-size: 18px !important; } - -.text-black { - color: black !important -} diff --git a/src/index.jsx b/src/index.jsx index f5a580a16d..2412e3fbdf 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -172,7 +172,7 @@ initialize({ PROCTORED_EXAM_RULES_URL: process.env.PROCTORED_EXAM_RULES_URL || null, CHAT_RESPONSE_URL: process.env.CHAT_RESPONSE_URL || null, PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null, - ENABLE_SIDEBAR_NEW_VIEW: process.env.ENABLE_SIDEBAR_NEW_VIEW || false, + ENABLE_NEW_SIDEBAR: process.env.ENABLE_NEW_SIDEBAR || false, }, 'LearnerAppConfig'); }, },