qpp-style 9.33.2 → 9.33.4

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 
-import { sideNavExpandedStorage } from '../helpers';
+import { setSideNavExpanded, isSideNavExpanded } from '../helpers';
 import { LevelOneContent } from '../Content';
 import {
   NavLinkContainer,
@@ -11,23 +12,45 @@ import {
 } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
 import { PracticeDetails, IndividualDetails } from '../Details';
-import ScoreChart from '../Chart';
 import SanitizedContent from '../../SanitizedContent';
 import * as SvgComponents from '../../../lib/SvgComponents.jsx';
 import CmsSwitchLink from '../Links/CmsSwitchLink';
-import axios from 'axios';
 import defaultMarkup from './default-markup';
 
+// TODO: For an SSR version of the SideNavUI we would need to have
+// the whole SideNav markup render on the server. Less reliance on
+// window and document.
+// We can have an API created where we send it certain parameters
+// like items. All of the markup is then returned. The SideNav can
+// just render the markup provided by the Frontend Server.
+// The only code left behind would be triggers to respond to
+// toggling the sidenav's expand state
+// Things to consider when implmenting an SSR version:
+// 1. any buttons will need event listeners to trigger actions.
+// 2. we need a feature flag to roll this out since it will be
+//    a breaking change.
+// 3. we may want to consider creating a web component since they
+//    are server friendly. https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/
+// 4. If you do use web components be sure to come up with a
+//    strategy to register the web component before React loads
+//    the markup on the page. Then the web component renders
+//    immediately.
 const SideNavUI = ({
   config,
   isAltStyle,
+  isExpanded,
   items,
   onCollapsed,
   onExpanded,
-  performanceYear,
 }) => {
-  const [isExpandedState, setIsExpandedState] = useState(true);
-  const [sideNavContent, setSideNavContent] = useState({});
+  const isExpandedPropSet = isExpanded !== undefined;
+  const [isExpandedState, setIsExpandedState] = useState(() => {
+    if (isExpandedPropSet) {
+      return isExpanded;
+    }
+    return isSideNavExpanded(window.document);
+  });
+  const [sideNavContent, setSideNavContent] = useState('<nav></nav>');
 
   const collapseRef = useRef(null);
 
@@ -38,7 +61,7 @@ const SideNavUI = ({
   };
 
   const expand = () => {
-    sideNavExpandedStorage.toggle();
+    setSideNavExpanded(window.document, 'true');
     setIsExpandedState(true);
     changeExpandedClass('animation-group-exit', 'animation-group-enter');
     if (onExpanded) {
@@ -47,7 +70,7 @@ const SideNavUI = ({
   };
 
   const collapse = () => {
-    sideNavExpandedStorage.toggle();
+    setSideNavExpanded(window.document, 'false');
     setIsExpandedState(false);
     changeExpandedClass('animation-group-enter', 'animation-group-exit');
     if (onCollapsed) {
@@ -60,6 +83,22 @@ const SideNavUI = ({
   };
 
   useEffect(() => {
+    // some applications use the isExpanded prop instead of reading the cookie
+    // this will ensure the application ignores the cookie
+    if (isExpandedPropSet) {
+      if (isExpanded) {
+        changeExpandedClass('animation-group-exit', 'animation-group-enter');
+      } else {
+        changeExpandedClass('animation-group-enter', 'animation-group-exit');
+      }
+      setIsExpandedState(isExpanded);
+    } else {
+      isSideNavExpanded(window.document);
+    }
+  }, [isExpanded, isExpandedPropSet]);
+
+  useEffect(() => {
+    const initialExpandedState = isSideNavExpanded(window.document);
     let cancelRequest = false;
     const { origin } = window.location;
     const isRunningLocally = origin.includes('localhost');
@@ -77,7 +116,24 @@ const SideNavUI = ({
         }
       }
       if (!cancelRequest) {
-        setSideNavContent(sideNavMenuItems);
+        const realInitialState = isExpandedPropSet
+          ? isExpanded
+          : initialExpandedState;
+        if (realInitialState) {
+          setSideNavContent(sideNavMenuItems);
+        } else {
+          // TODO: we are replacing the class here because the server does not take into account the
+          // initial expand/collapse state of the sidenav.
+          // Once we have confirmation that everyone has installed this version of QPP-Style we can
+          // remove this if/else block (assuming the server has been updated to read the cookie and
+          // render the appropriate class for each link)
+          setSideNavContent(
+            sideNavMenuItems.replaceAll(
+              'animation-group-enter',
+              'animation-group-exit',
+            ),
+          );
+        }
       }
     }
     getSideNavConfig();
@@ -201,15 +257,6 @@ const SideNavUI = ({
               />
             </AnimationGroup>
           ),
-          chart: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <ScoreChart
-                chartData={item.chartData}
-                linkCallback={linkCallback}
-                performanceYear={performanceYear}
-              />
-            </AnimationGroup>
-          ),
           switchLink: (
             <AnimationGroup display={isExpandedState} key={key}>
               <CmsSwitchLink
@@ -252,11 +299,6 @@ const SideNavUI = ({
     }
   };
 
-  // Set side nav expanded state in localStorage on initial render
-  useEffect(() => {
-    sideNavExpandedStorage.init();
-  }, []);
-
   const content = !items?.length ? (
     <LevelOneContent
       levelOneContent={sideNavContent}
@@ -290,27 +332,21 @@ const SideNavUI = ({
 };
 
 SideNavUI.propTypes = {
-  currentLevel: PropTypes.number,
-  onExpanded: PropTypes.func,
-  onCollapsed: PropTypes.func,
-  chartData: PropTypes.object,
   config: PropTypes.object,
-  items: PropTypes.object,
   isAltStyle: PropTypes.bool,
-  showReportingLinks: PropTypes.bool,
-  performanceYear: PropTypes.string,
+  isExpanded: PropTypes.bool,
+  items: PropTypes.object,
+  onCollapsed: PropTypes.func,
+  onExpanded: PropTypes.func,
 };
 
 SideNavUI.defaultProps = {
-  currentLevel: 1,
-  onExpanded: () => {},
-  onCollapsed: () => {},
-  chartData: {},
   config: {},
-  items: null,
   isAltStyle: false,
-  showReportingLinks: false,
-  performanceYear: '2017',
+  isExpanded: undefined,
+  items: null,
+  onCollapsed: () => {},
+  onExpanded: () => {},
 };
 
 export default SideNavUI;

package/components/SideNav/helpers.js

@@ -347,34 +347,27 @@ const isImpersonationLink = (docCookie, linkLabel) => {
 };
 
 /**
- * Set SideNav expanded state as qpp_side_nav_expanded in localStorage
+ * Sets the qpp_side_nav_expanded cookie value
+ * @param {Document} document object
+ * @param {string} value
+ * @returns {void}
  */
-const sideNavExpandedStorage = {
-  isNullOrUndefined: function () {
-    const sideNavExpandedValue = localStorage.getItem('qpp_side_nav_expanded');
-    return sideNavExpandedValue === null || sideNavExpandedValue === undefined;
-  },
-  init: function () {
-    if (this.isNullOrUndefined()) {
-      localStorage.setItem('qpp_side_nav_expanded', true);
-    }
-  },
-  toggle: function () {
-    const isSideNavExpanded = JSON.parse(
-      localStorage.getItem('qpp_side_nav_expanded'),
-    );
-    if (!isSideNavExpanded) {
-      localStorage.setItem('qpp_side_nav_expanded', true);
-    } else {
-      localStorage.setItem('qpp_side_nav_expanded', false);
-    }
-  },
-  get: function () {
-    return JSON.parse(localStorage.getItem('qpp_side_nav_expanded'));
-  },
-  remove: function () {
-    localStorage.removeItem('qpp_side_nav_expanded');
-  },
+const setSideNavExpanded = (_document, value) => {
+  _document.cookie = cookie.serialize('qpp_side_nav_expanded', value);
+};
+
+/**
+ * Check if sidenav is expanded
+ * @param {Document} document object
+ * @returns {boolean}
+ */
+const isSideNavExpanded = (_document) => {
+  const parsedCookies = cookie.parse(_document.cookie);
+  if (parsedCookies.qpp_side_nav_expanded === undefined) {
+    setSideNavExpanded(_document, 'true');
+    return true;
+  }
+  return parsedCookies.qpp_side_nav_expanded === 'true';
 };
 
 module.exports = {
@@ -397,5 +390,6 @@ module.exports = {
   isImpersonating,
   isImpersonationLink,
   loadSideNavContent,
-  sideNavExpandedStorage,
+  setSideNavExpanded,
+  isSideNavExpanded,
 };

package/components/SideNav/index.js

@@ -4,48 +4,26 @@ import { SideNavUI } from './UI';
 
 const SideNav = (options = {}) => {
   const {
-    rootElement,
-    onExpanded,
-    onCollapsed,
-    chartData,
-    currentLevel,
     config,
-    feedbackPerformanceYear,
-    fbpPerformanceYear,
-    showDevPreDfpLink,
-    showPhysicianCompareLink,
-    showFacilityBasedPreviewLink,
-    showSelfNomination,
-    showApmIncentivePaymentLink,
-    items,
     isAltStyle,
-    showReportsPortal,
-    showTargetedReviewLink,
+    isExpanded,
+    items,
+    onCollapsed,
+    onExpanded,
+    rootElement,
   } = options;
 
-  const { expand, collapse } = render(
+  return render(
     <SideNavUI
       onExpanded={onExpanded}
       onCollapsed={onCollapsed}
-      chartData={chartData}
-      currentLevel={currentLevel}
+      isExpanded={isExpanded}
       config={config}
-      feedbackPerformanceYear={feedbackPerformanceYear}
-      fbpPerformanceYear={fbpPerformanceYear}
-      showDevPreDfpLink={showDevPreDfpLink}
-      showPhysicianCompareLink={showPhysicianCompareLink}
-      showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-      showSelfNomination={showSelfNomination}
-      showApmIncentivePaymentLink={showApmIncentivePaymentLink}
       items={items}
       isAltStyle={isAltStyle}
-      showReportsPortal={showReportsPortal}
-      showTargetedReviewLink={showTargetedReviewLink}
     />,
     rootElement,
   );
-
-  return { expand, collapse };
 };
 
 export default SideNav;