refactor:fixed naming convention and combine useeffects

.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'

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 (
     <SidebarProviderComponent courseId={courseId} unitId={unitId}>
@@ -91,7 +91,7 @@ const Course = ({
               courseId={courseId}
               contentToolsEnabled={course.showCalculator || course.notes.enabled}
             />
-            { showSidebarNewView === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers /> }
+            { showNewSidebar === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers /> }
           </>
         )}
       </div>

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

@@ -37,26 +37,19 @@ const SidebarProvider = ({
       setIsDiscussionbarAvailable(true);
       setHideDiscussionbar(false);
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [topic]);
 
-  useEffect(() => {
     if (isEmpty(verifiedMode)) {
       setIsNotificationbarAvailable(false);
       setHideNotificationbar(true);
     } else {
       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');

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 (
+    <Icon
+      src={currentSidebar ? RightSidebarFilled : RightSidebarOutlined}
+      className="m-0 m-auto"
+      alt={intl.formatMessage(messages.openNotificationTrigger)}
+    />
+  );
+};
+
+SidebarIcon.propTypes = { };
+
+export default SidebarIcon;

src/courseware/course/new-sidebar/NewSidebarTrigger.jsx → 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 (
     <SidebarTriggerBase onClick={handleClick} ariaLabel={intl.formatMessage(messages.openSidebarTrigger)}>
-      <NewSidebarIcon status={notificationStatus} sidebarColor="bg-danger-500" />
+      <SidebarIcon status={notificationStatus} />
     </SidebarTriggerBase>
   );
 };
 
-NewSideBarTrigger.propTypes = {
-  intl: intlShape.isRequired,
+SideBarTrigger.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-export default injectIntl(NewSideBarTrigger);
+export default SideBarTrigger;

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}
       >
-        <NewSidebarTrigger onClick={() => toggleSidebar(SidebarID)} key={SidebarID} />
+        <SidebarTrigger onClick={() => toggleSidebar(SidebarID)} key={SidebarID} />
       </div>
     </div>
   );

src/courseware/course/new-sidebar/icons/SvgRightSidebarFilled.jsx → src/courseware/course/new-sidebar/icons/RightSidebarFilled.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const SvgRightSidebarFilled = (props) => (
+const RightSidebarFilled = (props) => (
   <svg
     width={24}
     height={24}
@@ -17,4 +17,4 @@ const SvgRightSidebarFilled = (props) => (
     />
   </svg>
 );
-export default SvgRightSidebarFilled;
+export default RightSidebarFilled;

src/courseware/course/new-sidebar/icons/SvgRightSidebarOutlined.jsx → src/courseware/course/new-sidebar/icons/RightSidebarOutlined.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const SvgRightSidebarOutlined = (props) => (
+const RightSidebarOutlined = (props) => (
   <svg
     width={24}
     height={24}
@@ -17,4 +17,4 @@ const SvgRightSidebarOutlined = (props) => (
     />
   </svg>
 );
-export default SvgRightSidebarOutlined;
+export default RightSidebarOutlined;

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';

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;

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"
             />
           </div>
           )}

src/generic/upgrade-notification/UpgradeNotification.scss

@@ -45,7 +45,3 @@
 .font-size-18 {
   font-size: 18px !important;
 }
-
-.text-black {
-  color: black !important
-}

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');
     },
   },