Dmirano/3775 dashboard restructure

web/src/components/Section.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { titleCase } from 'title-case';
 import Instruction from './Instruction';
 import { t } from '../i18n';
-import SecondaryNav from './SecondaryNav';
+import SecondaryNav from '../layout/nav/SecondaryNav';
 
 const Section = ({ children, id, resource }) => {
   const title = t([resource, 'title'], { defaultValue: false });

web/src/components/Wrapper.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
-import Header from './Header';
-import Footer from './Footer';
+import Header from '../layout/header/Header';
+import Footer from '../layout/footer/Footer';
 import routes from '../routes';
 import SessionEndingAlert from '../containers/SessionEndingAlert';
 

web/src/containers/ApdApplication.js

@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 import TagManager from 'react-gtm-module';
 
-import Sidebar from './Sidebar';
+import Sidebar from '../layout/nav/Sidebar';
 import UnexpectedError from './UnexpectedError';
 import { setApdToSelectOnLoad, selectApd } from '../actions/app';
 

web/src/containers/ApdPageRoutes.js

@@ -7,7 +7,7 @@ import {
   useRouteMatch as actualUseRouteMatch
 } from 'react-router-dom';
 
-import ApdHeader from './ApdHeader';
+import ApdHeader from '../layout/header/ApdHeader';
 import Activities from './activity/All';
 import EntryPage from './activity/EntryPage';
 import AssurancesAndCompliance from './AssurancesAndCompliance';

web/src/containers/Dashboard.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { getIsFederal } from '../reducers/user.selector';
-import FederalDashboard from './FederalDashboard';
-import StateDashboard from './StateDashboard';
+import FederalDashboard from '../pages/dashboard/fed-dashboard/FederalDashboard';
+import StateDashboard from '../pages/dashboard/state-dashboard/StateDashboard';
 
 const Dashboard = ({ isFederal, ...rest }) =>
   isFederal ? <FederalDashboard {...rest} /> : <StateDashboard {...rest} />;

web/src/containers/activity/EntryDetails.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { titleCase } from 'title-case';
 import { selectActivityByIndex } from '../../reducers/activities.selectors';
 import { removeActivity } from '../../actions/editActivity';
-import NavLink from '../../components/NavLink';
+import NavLink from '../../layout/nav/NavLink';
 
 import { t } from '../../i18n';
 import DeleteModal from '../../components/DeleteModal';

web/src/containers/ApdHeader.js → web/src/layout/header/ApdHeader.js

@@ -3,10 +3,14 @@ import { Button, FormLabel } from '@cmsgov/design-system';
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 
-import { getAPDCreation, getAPDName, getAPDYearRange } from '../reducers/apd';
-import { setApdName } from '../actions/editApd';
+import {
+  getAPDCreation,
+  getAPDName,
+  getAPDYearRange
+} from '../../reducers/apd';
+import { setApdName } from '../../actions/editApd';
 
-import Icon, { faEdit } from '../components/Icons';
+import Icon, { faEdit } from '../../components/Icons';
 
 const ApdHeader = ({ apdCreated, apdName, setName, year }) => {
   const [isEditing, setEditing] = useState(false);
@@ -19,66 +23,69 @@ const ApdHeader = ({ apdCreated, apdName, setName, year }) => {
     }
   }, [isEditing]);
 
-  const onBlur = (e) => {
+  const onBlur = e => {
     const apdNameInput = e.target.value;
 
     if (apdNameInput.trim() === '') {
-      setName('Untitled APD')
+      setName('Untitled APD');
     } else {
-      setName(apdNameInput)
+      setName(apdNameInput);
     }
 
-    setEditing(false)
-  }
+    setEditing(false);
+  };
 
-  const onKeyPress = (event) => {
-    if (event.key === "Enter" || event.key === "Escape") {
+  const onKeyPress = event => {
+    if (event.key === 'Enter' || event.key === 'Escape') {
       event.target.blur();
     }
-  }
+  };
 
   return (
     <div>
-      <div id='apd-title-container' className='flex-align-row'>
-        <div id='editable-label'>
+      <div id="apd-title-container" className="flex-align-row">
+        <div id="editable-label">
           {isEditing ? (
             <input
-              id='apd-title-input'
-              className='ds-h1 apd--title'
-              type='text'
+              id="apd-title-input"
+              className="ds-h1 apd--title"
+              type="text"
               value={apdName}
               onChange={value => setName(value.target.value)}
               onBlur={onBlur}
             />
           ) : (
             <div>
-              <FormLabel className='ds-u-visibility--screen-reader'>
+              <FormLabel className="ds-u-visibility--screen-reader">
                 Edit APD Name
               </FormLabel>
               <div
-                id='apd-title-input'
-                className='ds-h1 apd--title'
+                id="apd-title-input"
+                className="ds-h1 apd--title"
                 onClick={() => setEditing(true)}
                 onKeyPress={onKeyPress}
                 role="button"
-                tabIndex="0">
-                  {apdName}
+                tabIndex="0"
+              >
+                {apdName}
               </div>
             </div>
-          ) }
+          )}
         </div>
-        <Button id='title-edit-link' className='ds-c-button ds-c-button--transparent' onClick={() => {
-          setEditing(true)
-          const e = document.getElementById('apd-title-input')
-          e.click()
-        }}>
+        <Button
+          id="title-edit-link"
+          className="ds-c-button ds-c-button--transparent"
+          onClick={() => {
+            setEditing(true);
+            const e = document.getElementById('apd-title-input');
+            e.click();
+          }}
+        >
           <Icon icon={faEdit} style={{ width: '14px' }} /> Edit
         </Button>
       </div>
-      <div id='apd-header-info'>
-        <h1 className="ds-h5 ds-u-margin-top--1">
-          HITECH IAPD | FFY {year}
-        </h1>
+      <div id="apd-header-info">
+        <h1 className="ds-h5 ds-u-margin-top--1">HITECH IAPD | FFY {year}</h1>
 
         <span className="ds-h6 ds-u-display--block ds-u-margin-top--1 ds-u-margin-bottom--3">
           <strong>Created:</strong> {apdCreated}
@@ -105,7 +112,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   setName: setApdName
-}
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(ApdHeader);
 

web/src/components/DashboardButton.js → web/src/layout/header/DashboardButton.js

@@ -2,7 +2,7 @@ import { Button } from '@cmsgov/design-system';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { goToDashboard } from '../actions/app';
+import { goToDashboard } from '../../actions/app';
 
 const DashboardButton = ({ children, dashboard }) => {
   return (

web/src/components/DashboardButton.test.js → web/src/layout/header/DashboardButton.test.js

@@ -4,7 +4,7 @@ import {
   plain as DashboardButton,
   mapDispatchToProps
 } from './DashboardButton';
-import { goToDashboard } from '../actions/app';
+import { goToDashboard } from '../../actions/app';
 
 describe('the dashboard button', () => {
   it('renders as expected', () => {

web/src/components/Header.js → web/src/layout/header/Header.js

@@ -7,8 +7,8 @@ import {
   getIsFedAdmin,
   getUserStateOrTerritory,
   getCanUserViewStateAdmin
-} from '../reducers/user.selector';
-import { t } from '../i18n';
+} from '../../reducers/user.selector';
+import { t } from '../../i18n';
 
 import DashboardButton from './DashboardButton';
 import HeaderSaveMessage from './HeaderSaveMessage';
@@ -20,7 +20,7 @@ import Icon, {
   faPeopleArrows,
   faEdit,
   faUserShield
-} from './Icons';
+} from '../../components/Icons';
 
 class Header extends Component {
   constructor(props) {
@@ -145,28 +145,25 @@ class Header extends Component {
                                 to="/manage-account"
                                 onClick={this.toggleDropdown}
                                 className="nav--dropdown__action"
-                                >
-                                  <Icon
-                                    icon={faEdit}
-                                    style={{ width: '14px' }}
-                                    />
-                                  Manage Account
+                              >
+                                <Icon icon={faEdit} style={{ width: '14px' }} />
+                                Manage Account
                               </Link>
-                            </li>                        
-                          <li>
-                            <Link
-                              to="/select-affiliation"
-                              onClick={this.toggleDropdown}
-                              className="nav--dropdown__action"
+                            </li>
+                            <li>
+                              <Link
+                                to="/select-affiliation"
+                                onClick={this.toggleDropdown}
+                                className="nav--dropdown__action"
                               >
                                 <Icon
                                   icon={faPeopleArrows}
                                   style={{ width: '14px' }}
                                 />
                                 Switch State Affiliation
-                            </Link>
-                          </li>
-                        </Fragment>
+                              </Link>
+                            </li>
+                          </Fragment>
                         )}
                         <li>
                           <Link

web/src/components/HeaderSaveMessage.js → web/src/layout/header/HeaderSaveMessage.js

@@ -6,11 +6,11 @@ import {
   selectError,
   selectIsSaving,
   selectLastSaved
-} from '../reducers/saving';
+} from '../../reducers/saving';
 
-import SaveMessage from './SaveMessage';
+import SaveMessage from '../../components/SaveMessage';
 
-import { Check, Xmark, Spinner } from './Icons';
+import { Check, Xmark, Spinner } from '../../components/Icons';
 
 const HeaderSaveMessage = ({ isSaving, lastSaved, error }) => {
   const [active, setActive] = useState(isSaving);

web/src/containers/Nav.js → web/src/layout/nav/Nav.js

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { VerticalNav } from '@cmsgov/design-system';
 import { connect } from 'react-redux';
-import NavLink from '../components/NavLink';
-import { generateKey as actualGenerateKey } from '../util';
+import NavLink from './NavLink';
+import { generateKey as actualGenerateKey } from '../../util';
 
 const Nav = ({ generateKey, items, pathname }) => {
   // force component update when pathname changes

web/src/components/SecondaryNav.js → web/src/layout/nav/SecondaryNav.js

@@ -2,13 +2,13 @@ import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Link, useParams as actualUseParams } from 'react-router-dom';
-import ContinuePreviousButtons from './ContinuePreviousButtons';
+import ContinuePreviousButtons from '../../components/ContinuePreviousButtons';
 
 import {
   selectActivitiesSidebar,
   selectActivityCount
-} from '../reducers/activities.selectors';
-import { addActivity as actualAddActivity } from '../actions/editActivity';
+} from '../../reducers/activities.selectors';
+import { addActivity as actualAddActivity } from '../../actions/editActivity';
 
 const SecondaryNav = ({ activityCount, addActivity, location, useParams }) => {
   const { activityIndex } = useParams();

web/src/components/SecondaryNav.test.js → web/src/layout/nav/SecondaryNav.test.js

@@ -5,7 +5,7 @@ import {
   mapStateToProps,
   mapDispatchToProps
 } from './SecondaryNav';
-import { addActivity } from '../actions/editActivity';
+import { addActivity } from '../../actions/editActivity';
 
 const defaultProps = {
   activityCount: 2,

web/src/containers/FederalDashboard.js → web/src/pages/dashboard/fed-dashboard/FederalDashboard.js

@@ -2,26 +2,29 @@ import PropType from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import FederalAdmin from "./admin/FederalAdmin";
-import { ApprovalStatus } from '../components/AffiliationStatus';
+import FederalAdmin from '../../../containers/admin/FederalAdmin';
+import { ApprovalStatus } from '../state-dashboard/AffiliationStatus';
 
-import { getUserStateOrTerritoryStatus } from '../reducers/user.selector';
-import { AFFILIATION_STATUSES } from '../constants';
+import { getUserStateOrTerritoryStatus } from '../../../reducers/user.selector';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-const FederalDashboard = ({ approvalStatus }) => {  
+const FederalDashboard = ({ approvalStatus }) => {
   const isApproved = approvalStatus === AFFILIATION_STATUSES.APPROVED;
-  
+
   return (
     <main
       id="start-main-content"
       className="ds-l-container--fluid ds-u-margin-x--5 ds-u-margin-bottom--5"
     >
       <h1>Federal Administrator Portal</h1>
-      {isApproved && <FederalAdmin /> }
-      {!isApproved && <ApprovalStatus 
-                        status={approvalStatus}
-                        mailTo='CMS-EAPD@cms.hhs.gov'
-                        administratorType='Federal' />}
+      {isApproved && <FederalAdmin />}
+      {!isApproved && (
+        <ApprovalStatus
+          status={approvalStatus}
+          mailTo="CMS-EAPD@cms.hhs.gov"
+          administratorType="Federal"
+        />
+      )}
     </main>
   );
 };

web/src/containers/FederalDashboard.test.js → web/src/pages/dashboard/fed-dashboard/FederalDashboard.test.js

@@ -1,9 +1,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import { AFFILIATION_STATUSES } from '../constants';
+import { AFFILIATION_STATUSES } from '../../../constants';
 
-import FederalAdmin from './admin/FederalAdmin';
-import { ApprovalStatus } from '../components/AffiliationStatus';
+import FederalAdmin from '../../../containers/admin/FederalAdmin';
+import { ApprovalStatus } from '../state-dashboard/AffiliationStatus';
 
 import { plain as FederalDashboard } from './FederalDashboard';
 

web/src/components/AffiliationStatus.js → web/src/pages/dashboard/state-dashboard/AffiliationStatus.js

@@ -2,14 +2,14 @@ import PropType from 'prop-types';
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 
-import Instruction from './Instruction';
+import Instruction from '../../../components/Instruction';
 import {
   getUserStateOrTerritory,
   getUserStateOrTerritoryStatus
-} from '../reducers/user.selector';
-import { AFFILIATION_STATUSES } from '../constants';
-import UpgradeBrowser from './UpgradeBrowser';
-import axios from '../util/api';
+} from '../../../reducers/user.selector';
+import { AFFILIATION_STATUSES } from '../../../constants';
+import UpgradeBrowser from '../../../components/UpgradeBrowser';
+import axios from '../../../util/api';
 
 const ApprovalStatus = ({ status, mailTo, administratorType }) => {
   const options = {