qpp-style 0.0.8 → 0.0.10

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,5 +1,7 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+
+import { withGetConfig } from '../../hooks/useGetConfig';
 import { LevelOneContent, LevelTwoContent } from '../Content';
 import {
   NavLinkContainer,
@@ -9,192 +11,108 @@ import {
 } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
 import { PracticeDetails, IndividualDetails } from '../Details';
-import { ScoreChart } from '../Chart';
+import ScoreChart from '../Chart';
 import SanitizedContent from '../../SanitizedContent';
 import * as SvgComponents from '../../../lib/SvgComponents.jsx';
-import SVGIcons from '../../../lib/svg-definitions.svg';
-import SVGInline from 'react-svg-inline';
 import CmsSwitchLink from '../Links/CmsSwitchLink';
+import defaultContent from './default-content';
 
-export default class SideNavUI extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: props.isExpanded,
-      currentLevel: props.currentLevel,
-      linksTopPosition: 0,
-      items: props.items,
-    };
-    this.keys = {
-      ESC: 27,
-    };
-    this._toggleExpanded = this.toggleExpanded.bind(this);
-    this._expand = this.expand.bind(this);
-    this._collapseRef = this.collapseRef.bind(this);
-    this._getDynamicContent = this.getDynamicContent.bind(this);
-    this._getLevelContent = this.getLevelContent.bind(this);
-    this._setLinksTopPosition = this.setLinksTopPosition.bind(this);
-  }
-
-  componentDidMount() {
-    setTimeout(() => {
-      this._setLinksTopPosition();
-    }, 0);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (
-      prevState.items !== this.state.items ||
-      prevProps.currentLevel !== this.state.currentLevel
-    ) {
-      this._setLinksTopPosition();
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { isExpanded, currentLevel, items } = this.state;
-
-    if (nextProps.isExpanded !== isExpanded) {
-      this.setState({ isExpanded: nextProps.isExpanded });
-    }
+const SideNavUI = ({
+  chartData,
+  config,
+  currentLevel,
+  isAltStyle,
+  isExpanded,
+  items,
+  onCollapsed,
+  onExpanded,
+  performanceYear,
+  showReportingLinks,
+  result,
+}) => {
+  const [isExpandedState, setIsExpandedState] = useState(isExpanded);
+  const [itemsState, setItemsState] = useState(items);
+  const [currentLevelState, setCurrentLevelState] = useState(currentLevel);
 
-    if (nextProps.currentLevel !== currentLevel) {
-      this.setState({ currentLevel: nextProps.currentLevel });
-    }
+  const collapseRef = useRef(null);
 
-    if (JSON.stringify(nextProps.items) !== JSON.stringify(items)) {
-      this.setState({ items: nextProps.items });
+  const expand = () => {
+    setIsExpandedState(true);
+    if (onExpanded) {
+      onExpanded();
     }
-  }
-
-  toggleExpanded() {
-    this.state.isExpanded ? this.collapse() : this.expand();
-  }
+  };
 
-  expand() {
-    this.setState({ isExpanded: true });
-    if (this.props.onExpanded) {
-      this.props.onExpanded();
+  const collapse = () => {
+    setIsExpandedState(false);
+    if (onCollapsed) {
+      onCollapsed();
     }
-  }
+  };
 
-  collapse() {
-    this.setState({ isExpanded: false });
-    if (this.props.onCollapsed) {
-      this.props.onCollapsed();
-    }
-  }
+  const toggleExpanded = () => {
+    isExpandedState ? collapse() : expand();
+  };
 
-  collapseRef(ref) {
-    this.collapseToggle = ref;
-  }
-
-  setLinksTopPosition() {
-    // loop though children of sidebar-content and add heights, stopping at <nav>
-    const content = document.querySelector('#qppSidebar .sidebar-content');
-
-    if (content) {
-      let height = 0;
-      for (let i = 0; i < content.children.length; i++) {
-        if (content.children[i].classList.contains('animation-flat')) {
-          break;
-        }
-        height = height + content.children[i].offsetHeight;
-      }
-
-      this.setState({ linksTopPosition: height });
-    }
-  }
-
-  getLevelContent() {
-    const {
-      chartData,
-      config,
-      showDevPreDfpLink,
-      showPhysicianCompareLink,
-      showFacilityBasedPreviewLink,
-      showApmIncentivePaymentLink,
-      showReportingLinks,
-      performanceYear,
-      feedbackPerformanceYear,
-      fbpPerformanceYear,
-      showSelfNomination,
-      showReportsPortal,
-      showExceptionsApplicationLink,
-      showTargetedReviewLink,
-    } = this.props;
-
-    const { isExpanded, currentLevel, linksTopPosition } = this.state;
-    const style = { top: isExpanded ? `${linksTopPosition}px` : 0 };
-
-    switch (currentLevel) {
-      default:
-      case 1: // Home
-        return (
-          <LevelOneContent
-            performanceYear={performanceYear}
-            feedbackPerformanceYear={feedbackPerformanceYear}
-            fbpPerformanceYear={fbpPerformanceYear}
-            isExpanded={isExpanded}
-            config={config}
-            showDevPreDfpLink={showDevPreDfpLink}
-            showPhysicianCompareLink={showPhysicianCompareLink}
-            showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-            showApmIncentivePaymentLink={showApmIncentivePaymentLink}
-            showSelfNomination={showSelfNomination}
-            showReportsPortal={showReportsPortal}
-            style={style}
-            showExceptionsApplicationLink={showExceptionsApplicationLink}
-            showTargetedReviewLink={showTargetedReviewLink}
-          />
-        );
-      case 2: // Group Submission
-        return (
+  const getLevelContent = () => {
+    return (
+      {
+        2: (
           <LevelTwoContent
             showReportingLinks={showReportingLinks}
-            isExpanded={isExpanded}
+            isExpanded={isExpandedState}
             chartData={chartData}
             config={config}
-            style={style}
           />
-        );
-    }
-  }
+        ),
+      }[currentLevelState] || (
+        <LevelOneContent
+          levelOneContent={result?.content}
+          isExpanded={isExpandedState}
+          config={config}
+        />
+      )
+    );
+  };
+
+  const getDynamicContent = (contentItems, className, recursionId) => {
+    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
+      config;
+    let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
+    const containerRecursionId = recursionId || 0;
 
-  getDynamicIcon(icon) {
-    const Component = SvgComponents[icon];
-    return <Component />;
-  }
+    const getDynamicIcon = (icon) => {
+      const Component = SvgComponents[icon];
+      return Component ? <Component /> : null;
+    };
 
-  getDynamicContent(items, className) {
-    const { performanceYear } = this.props;
-    const {
-      openDrawersByDefault,
-      linkActiveFunc,
-      linkCallback,
-      animationType,
-      useTooltips,
-    } = this.props.config;
-    const { isExpanded, linksTopPosition } = this.state;
-    const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-    const style = { top: isExpanded ? `${linksTopPosition}px` : 0 };
+    const hasDarkerBackground = (darkerBackground) => {
+      return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
+    };
 
-    const itemsMarkup = items.map((item) => {
-      switch (item.type) {
-        case 'divider':
-          return (
-            <AnimationGroup display={isExpanded}>
-              <hr />
+    const itemsMarkup = (contentItems || []).map((item, index) => {
+      const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
+      return (
+        {
+          divider: (
+            <AnimationGroup
+              display={isExpandedState}
+              key={key}
+              darkerBackground={item.darkerBackground}
+            >
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
             </AnimationGroup>
-          );
-        case 'container':
-          return this.getDynamicContent(item.items, item.className);
-        case 'linkBack':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          container: getDynamicContent(
+            item.items,
+            item.className,
+            containerRecursionId + 1
+          ),
+          linkBack: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <NavLinkInline
                 className="link-back"
-                icon={this.getDynamicIcon('ChevronLeft')}
+                icon={getDynamicIcon('ChevronLeft')}
                 url={item.url}
                 label={item.label}
                 linkCallback={linkCallback}
@@ -202,13 +120,12 @@ export default class SideNavUI extends Component {
                 useTooltips={useTooltips}
               />
             </AnimationGroup>
-          );
-        case 'linkHome':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          linkHome: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <NavLinkInline
                 className="account-home-link"
-                icon={this.getDynamicIcon(item.icon)}
+                icon={getDynamicIcon(item?.icon)}
                 url={item.url}
                 label={item.label}
                 linkCallback={linkCallback}
@@ -216,10 +133,13 @@ export default class SideNavUI extends Component {
                 useTooltips={useTooltips}
               />
             </AnimationGroup>
-          );
-        case 'practiceDetails':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          practiceDetails: (
+            <AnimationGroup
+              display={isExpandedState}
+              className={'details'}
+              key={key}
+            >
               <PracticeDetails
                 practiceName={item.practiceName}
                 {...(!item.practiceTin
@@ -230,88 +150,88 @@ export default class SideNavUI extends Component {
                   : { apmEntityId: item.apmEntityId })}
                 {...(!item.vgId ? {} : { vgId: item.vgId })}
                 {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
               />
             </AnimationGroup>
-          );
-        case 'individualDetails':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          individualDetails: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <IndividualDetails
                 individualName={item.individualName}
                 individualNpi={item.individualNpi}
               />
             </AnimationGroup>
-          );
-        case 'linkDrawer':
-          return (
+          ),
+          linkDrawer: (
             <NavLinkDrawer
-              isExpanded={isExpanded}
+              key={key}
+              isExpanded={isExpandedState}
               isAlwaysOpen={item.isAlwaysOpen}
               openByDefault={openDrawersByDefault}
               rightIcon="chevron-down"
-              leftIcon={this.getDynamicIcon(item.icon)}
+              leftIcon={getDynamicIcon(item?.icon)}
               className={linkClass}
               label={item.label}
               linkActiveFunc={linkActiveFunc}
               linkCallback={linkCallback}
               listOfLinks={item.items}
               url={item.url}
-              sidebarExpand={this._expand}
+              sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
+              darkerBackground={item.darkerBackground}
+              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              hideLabelSection={item.hideLabelSection}
+              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
             />
-          );
-        case 'custom':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          custom: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <SanitizedContent
                 html={item.content}
                 customClassName={item.customClassName}
               />
             </AnimationGroup>
-          );
-        case 'chart':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          chart: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <ScoreChart
                 chartData={item.chartData}
                 linkCallback={linkCallback}
                 performanceYear={performanceYear}
               />
             </AnimationGroup>
-          );
-        case 'switchLink':
-          return (
-            <AnimationGroup display={isExpanded}>
+          ),
+          switchLink: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <CmsSwitchLink
                 linkCallback={linkCallback}
                 label={item.label}
                 url={item.url}
               />
             </AnimationGroup>
-          );
-        default:
-          return (
-            <NavLinkInline
-              icon={this.getDynamicIcon(item.icon)}
-              className={item.className ? item.className : linkClass}
-              url={item.url}
-              label={item.label}
-              linkCallback={linkCallback}
-              showLabel={isExpanded}
-              disabled={item.disabled}
-              useTooltips={useTooltips}
-              target={item.target}
-            />
-          );
-      }
+          ),
+        }[item.type] || (
+          <NavLinkInline
+            key={key}
+            icon={getDynamicIcon(item?.icon)}
+            className={item.className ? item.className : linkClass}
+            url={item.url}
+            label={item.label}
+            linkCallback={linkCallback}
+            showLabel={isExpandedState}
+            disabled={item.disabled}
+            useTooltips={useTooltips}
+            target={item.target}
+          />
+        )
+      );
     });
 
     if (className === 'link-container') {
       return (
         <div
-          style={style}
-          className={`${
-            animationType ? 'animation-' + animationType : 'animation-flat'
-          }`}
+          className="animation-flat"
+          key={`nav-link-container-${recursionId}`}
         >
           <NavLinkContainer
             listOfLinks={itemsMarkup}
@@ -322,38 +242,45 @@ export default class SideNavUI extends Component {
     } else {
       return <div className={className}>{itemsMarkup}</div>;
     }
-  }
+  };
 
-  render() {
-    const { isAltStyle, config, svgIcons } = this.props;
-    const { isExpanded, items } = this.state;
-    const content = items
-      ? this._getDynamicContent(
-          items,
-          'sidebar-content' + (isAltStyle ? ' alt-style' : '')
-        )
-      : this._getLevelContent();
+  const content = itemsState
+    ? getDynamicContent(
+        itemsState,
+        'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+      )
+    : getLevelContent();
 
-    return (
-      <aside
-        id="qppSidebar"
-        tabIndex="-1"
-        className={`${isExpanded ? 'sidebar' : 'sidebar closed'} sidebar-${
-          config.navClassName
-        }`}
-      >
-        <SVGInline svg={svgIcons} />
-        {content}
-        <NavLinkToggle
-          isAltStyle={isAltStyle}
-          collapseRef={this._collapseRef}
-          isExpanded={isExpanded}
-          onClick={this._toggleExpanded}
-        />
-      </aside>
-    );
-  }
-}
+  useEffect(() => {
+    setIsExpandedState(isExpanded);
+  }, [isExpanded]);
+
+  useEffect(() => {
+    setCurrentLevelState(currentLevel);
+  }, [currentLevel]);
+
+  useEffect(() => {
+    setItemsState(items);
+  }, [items]);
+
+  return (
+    <aside
+      id="qppSidebar"
+      tabIndex="-1"
+      className={`${isExpandedState ? 'sidebar' : 'sidebar closed'} sidebar-${
+        config.navClassName
+      }`}
+    >
+      {content}
+      <NavLinkToggle
+        isAltStyle={isAltStyle}
+        collapseRef={collapseRef}
+        isExpanded={isExpandedState}
+        onClick={toggleExpanded}
+      />
+    </aside>
+  );
+};
 
 SideNavUI.propTypes = {
   currentLevel: PropTypes.number,
@@ -362,21 +289,19 @@ SideNavUI.propTypes = {
   onCollapsed: PropTypes.func,
   chartData: PropTypes.object,
   config: PropTypes.object,
-  showDevPreDfpLink: PropTypes.bool,
   items: PropTypes.object,
   isAltStyle: PropTypes.bool,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
   showReportingLinks: PropTypes.bool,
-  showApmIncentivePaymentLink: PropTypes.bool,
   performanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  showSelfNomination: PropTypes.bool,
-  showReportsPortal: PropTypes.bool,
-  showExceptionsApplicationLink: PropTypes.bool,
-  showTargetedReviewLink: PropTypes.bool,
-  svgIcons: PropTypes.string,
+  result: PropTypes.shape({
+    content: PropTypes.shape({
+      default: PropTypes.arrayOf(PropTypes.object),
+      devPre: PropTypes.arrayOf(PropTypes.object),
+      internalReviewers: PropTypes.arrayOf(PropTypes.object),
+      viewer: PropTypes.arrayOf(PropTypes.object),
+      contentManager: PropTypes.arrayOf(PropTypes.object),
+    }),
+  }),
 };
 
 SideNavUI.defaultProps = {
@@ -386,19 +311,24 @@ SideNavUI.defaultProps = {
   onCollapsed: () => {},
   chartData: {},
   config: {},
-  showDevPreDfpLink: false,
   items: null,
   isAltStyle: false,
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  showApmIncentivePaymentLink: false,
   showReportingLinks: false,
   performanceYear: '2017',
-  feedbackPerformanceYear: null,
-  fbpPerformanceYear: null,
-  showSelfNomination: false,
-  showReportsPortal: false,
-  showExceptionsApplicationLink: false,
-  showTargetedReviewLink: false,
-  svgIcons: SVGIcons,
+  result: {
+    content: {
+      default: [],
+      devPre: [],
+      internalReviewers: [],
+      viewer: [],
+      contentManager: [],
+    },
+  },
 };
+
+export default withGetConfig(SideNavUI, {
+  timeout: 5,
+  url: '/config/side-navigation',
+  localStorageName: 'qpp_side_navigation',
+  defaultContent,
+});