Merge pull request #1851 from 18F/sr-3938-fix-timelines

[EN-3938] Only valid items count to timeline summaries

src/components/Section/History/Education/EducationSummaryProgress.jsx

@@ -1,87 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { i18n } from 'config'
-
 import SummaryCounter from 'components/Section/History/SummaryCounter'
-import { totalYears } from 'components/Section/History/helpers'
-
-const schoolRangesList = (items, errors) => {
-  const dates = []
 
-  items.forEach((i) => {
-    if (!i.Item || !i.Item.Dates || !i.Item.Dates.to || !i.Item.Dates.from) {
-      return
-    }
-
-    const itemErrors = errors && errors.filter(e => e.indexOf(i.uuid) > -1)
-    if (itemErrors && itemErrors.length > 0) return
+const EducationSummaryProgress = (props) => {
+  const { items, errors } = props
 
-    dates.push(i.Item.Dates)
+  const validSchoolItems = items.filter((i) => {
+    if (!i.Item) return false
+    if (!errors || !errors.length) return true
+    if (errors.filter(e => e.indexOf(i.uuid) > -1).length > 0) return false
+    return true
   })
 
-  return dates
-}
-
-const diplomasRangesList = (items, errors) => {
-  const dates = []
-
-  items.forEach((i) => {
-    if (!i.Item) return
-
-    const itemErrors = errors && errors.filter(e => e.indexOf(i.uuid) > -1)
-    if (itemErrors && itemErrors.length > 0) return
-
-    if (i.Item.Diplomas.items) {
+  let validDiplomaItems = 0
+  validSchoolItems.forEach((i) => {
+    if (i.Item.Diplomas && i.Item.Diplomas.items) {
       i.Item.Diplomas.items.forEach((d) => {
-        if (!d.Item || !d.Item.Date) { return }
-
-        dates.push(d.Item.Date)
+        if (d.Item && d.Item.Date) validDiplomaItems += 1
       })
     }
   })
 
-  return dates
-}
-
-const EducationSummaryProgress = (props) => {
-  const {
-    Education, Birthdate, years, errors,
-  } = props
-
-  let schoolDates = []
-  if (Education && Education.List && Education.List.items) {
-    schoolDates = Education.List.items
-  }
-
-  const getSchoolDates = () => schoolRangesList(schoolDates, errors)
-  const getDiplomaDates = () => diplomasRangesList(schoolDates, errors)
-
   return (
     <SummaryCounter
       className="education"
-      title={i18n.t('history.education.summary.title')}
-      schools={getSchoolDates}
-      diplomas={getDiplomaDates}
-      schoolsLabel={i18n.t('history.education.summary.schools')}
-      diplomasLabel={i18n.t('history.education.summary.diplomas')}
-      total={totalYears(Birthdate, years)}
+      schoolCount={validSchoolItems.length}
+      diplomaCount={validDiplomaItems}
     />
   )
 }
 
-/* eslint react/forbid-prop-types: 0 */
 EducationSummaryProgress.propTypes = {
-  Education: PropTypes.object,
-  Birthdate: PropTypes.any,
-  years: PropTypes.number,
+  items: PropTypes.array,
   errors: PropTypes.array,
 }
 
 EducationSummaryProgress.defaultProps = {
-  Education: null,
-  Birthdate: null,
-  years: 10,
+  items: [],
   errors: [],
 }
 

src/components/Section/History/Education/EducationWrapper.jsx

@@ -49,7 +49,7 @@ class EducationWrapper extends React.Component {
 
   render() {
     const {
-      Education, Birthdate, formType, inReview, errors,
+      Education, formType, inReview, errors, data,
     } = this.props
 
     const years = formType
@@ -120,9 +120,7 @@ class EducationWrapper extends React.Component {
 
             {!inReview && (
               <EducationSummaryProgress
-                Education={Education}
-                Birthdate={Birthdate}
-                years={years}
+                items={data && data.List && data.List.items}
                 errors={errors}
               />
             )}
@@ -139,10 +137,9 @@ class EducationWrapper extends React.Component {
   }
 }
 
-/* eslint react/forbid-prop-types: 0 */
 EducationWrapper.propTypes = {
   Education: PropTypes.object,
-  Birthdate: PropTypes.any,
+  data: PropTypes.object,
   formType: PropTypes.string.isRequired,
   inReview: PropTypes.bool,
   onUpdate: PropTypes.func,
@@ -156,7 +153,7 @@ EducationWrapper.defaultProps = {
     HasDegree10: '',
     List: { items: [] },
   },
-  Birthdate: {},
+  data: {},
   inReview: false,
   onUpdate: () => {},
   dispatch: () => {},

src/components/Section/History/Employment/Employment.jsx

@@ -13,8 +13,6 @@ import EmploymentItem from 'components/Section/History/Employment/EmploymentItem
 import { Gap } from 'components/Section/History/Gap'
 
 import { getYearsString } from 'helpers/text'
-import { findTimelineGaps } from 'helpers/date'
-import { validateModel } from 'models/validate'
 
 import { HISTORY, HISTORY_EMPLOYMENT } from 'config/formSections/history'
 
@@ -114,22 +112,13 @@ export class Employment extends Subsection {
 
   render() {
     const {
-      List, totalYears, recordYears, errors,
+      List, totalYears, recordYears, errors, gaps,
     } = this.props
-    const { items, branch } = List
+    const { branch } = List
 
     const recordYearsString = getYearsString(recordYears)
     const accordionErrors = errors && errors.filter(e => e.indexOf('List.accordion') === 0)
 
-    const dateRanges = items
-      .filter(i => i.Item && i.Item.Dates && validateModel(
-        { Dates: i.Item.Dates },
-        { Dates: { presence: true, daterange: true } }
-      ) === true)
-      .map(i => i.Item.Dates)
-
-    const gaps = findTimelineGaps({ years: totalYears }, dateRanges)
-
     const showGapError = branch
       && branch.value === 'No'
       && gaps.length > 0
@@ -230,10 +219,9 @@ Employment.defaultProps = {
   caption: null,
   onUpdate: () => {},
   onError: (value, arr) => arr,
-  section: 'history',
-  subsection: 'employment',
   addressBooks: {},
   dispatch: () => {},
+  gaps: [],
   errors: [],
 }
 

src/components/Section/History/Employment/EmploymentSummaryProgress.jsx

@@ -4,43 +4,18 @@ import PropTypes from 'prop-types'
 import { i18n } from 'config'
 
 import SummaryProgress from 'components/Section/History/SummaryProgress'
-import { totalYears } from 'components/Section/History/helpers'
 import { Svg } from 'components/Form'
 
-const dateRangeList = (items, errors) => {
-  const dates = []
-
-  items.forEach((i) => {
-    if (!i.Item) return
-
-    const itemErrors = errors && errors.filter(e => e.indexOf(i.uuid) > -1)
-    if (itemErrors && itemErrors.length > 0) return
-
-    dates.push(i.Item.Dates)
-  })
-
-  return dates
-}
-
 const EmploymentSummaryProgress = (props) => {
-  const {
-    Employment, Birthdate, years, errors,
-  } = props
-
-  let employmentDates = []
-  if (Employment && Employment.List && Employment.List.items) {
-    employmentDates = Employment.List.items
-  }
-
-  const getEmploymentDates = () => dateRangeList(employmentDates, errors)
+  const { dates, years } = props
 
   return (
     <SummaryProgress
       className="residence"
-      List={getEmploymentDates}
+      List={() => dates}
       title={i18n.t('history.employment.summary.title')}
       unit={i18n.t('history.employment.summary.unit')}
-      total={totalYears(Birthdate, years)}
+      total={years}
     >
       <div className="summary-icon">
         <Svg
@@ -52,19 +27,14 @@ const EmploymentSummaryProgress = (props) => {
   )
 }
 
-/* eslint react/forbid-prop-types: 0 */
 EmploymentSummaryProgress.propTypes = {
-  Employment: PropTypes.object,
-  Birthdate: PropTypes.any,
   years: PropTypes.number,
-  errors: PropTypes.array,
+  dates: PropTypes.array,
 }
 
 EmploymentSummaryProgress.defaultProps = {
-  Employment: undefined,
-  Birthdate: undefined,
   years: 10,
-  errors: [],
+  dates: [],
 }
 
 export default EmploymentSummaryProgress

src/components/Section/History/Employment/EmploymentWrapper.jsx

@@ -5,38 +5,45 @@ import i18n from 'util/i18n'
 
 import { HISTORY, HISTORY_EMPLOYMENT } from 'config/formSections/history'
 import * as formConfig from 'config/forms'
+import { findTimelineGaps, getApplicantRequiredDuration } from 'helpers/date'
 
 import { Field, Show } from 'components/Form'
-import { sectionHasGaps } from 'components/Section/History/helpers'
 
 import connectSubsection from 'components/Section/shared/SubsectionConnector'
 
 import ConnectedEmployment from './Employment'
 import EmploymentSummaryProgress from './EmploymentSummaryProgress'
 
 const sectionConfig = {
+  key: HISTORY_EMPLOYMENT.key,
   section: HISTORY.name,
   subsection: HISTORY_EMPLOYMENT.name,
 }
 
 const EmploymentWrapper = (props) => {
   const {
-    Employment, Birthdate, formType, errors,
+    formType, errors, applicantBirthdate, data,
   } = props
 
   const formTypeConfig = formType && formConfig[formType]
 
   const years = formTypeConfig && formTypeConfig.HISTORY_EMPLOYMENT_YEARS
   const recordYears = formTypeConfig && formTypeConfig.HISTORY_EMPLOYMENT_RECORD_YEARS
 
+  const requiredYears = getApplicantRequiredDuration({ years }, applicantBirthdate)
+
   const formName = formType
 
-  let employmentItems = []
-  if (Employment && Employment.List && Employment.List.items) {
-    employmentItems = Employment.List.items
-  }
+  const validEmploymentDates = data.List && data.List.items
+    ? data.List.items.filter((i) => {
+      if (!i.Item) return false
+      if (!errors || !errors.length) return true
+      if (errors.filter(e => e.indexOf(i.uuid) > -1).length > 0) return false
+      return true
+    }).map(i => i.Item.Dates)
+    : []
 
-  const employmentHasGaps = sectionHasGaps(employmentItems)
+  const gaps = findTimelineGaps({ years: requiredYears }, validEmploymentDates)
 
   return (
     <div>
@@ -57,19 +64,18 @@ const EmploymentWrapper = (props) => {
       <span id="scrollToHistory" />
 
       <EmploymentSummaryProgress
-        Employment={Employment}
-        Birthdate={Birthdate}
-        years={years}
-        errors={errors}
+        years={requiredYears}
+        dates={validEmploymentDates}
       />
 
       <ConnectedEmployment
         scrollToTop="scrollToHistory"
-        totalYears={years}
+        totalYears={requiredYears}
         recordYears={recordYears}
+        gaps={gaps}
       />
 
-      <Show when={employmentHasGaps}>
+      <Show when={gaps && gaps.length > 0}>
         <div className="not-complete">
           <hr className="section-divider" />
 
@@ -89,15 +95,15 @@ const EmploymentWrapper = (props) => {
 
 /* eslint react/forbid-prop-types: 0 */
 EmploymentWrapper.propTypes = {
-  Employment: PropTypes.object,
-  Birthdate: PropTypes.any,
+  applicantBirthdate: PropTypes.object,
+  data: PropTypes.object,
   formType: PropTypes.string.isRequired,
   errors: PropTypes.array,
 }
 
 EmploymentWrapper.defaultProps = {
-  Employment: undefined,
-  Birthdate: undefined,
+  applicantBirthdate: null,
+  data: {},
   errors: [],
 }
 

src/components/Section/History/Residence/Residence.jsx

@@ -5,9 +5,6 @@ import { HISTORY, HISTORY_RESIDENCE } from 'config/formSections/history'
 import { INCOMPLETE_DURATION } from 'constants/errors'
 
 import connectSubsection from 'components/Section/shared/SubsectionConnector'
-import { findTimelineGaps } from 'helpers/date'
-import { validateModel } from 'models/validate'
-
 import Subsection from 'components/Section/shared/Subsection'
 
 import { Accordion } from 'components/Form'
@@ -80,17 +77,10 @@ export class Residence extends Subsection {
   }
 
   render() {
-    const { List, errors, totalYears } = this.props
-    const { items, branch } = List
-
-    const dateRanges = items
-      .filter(i => i.Item && i.Item.Dates && validateModel(
-        { Dates: i.Item.Dates },
-        { Dates: { presence: true, daterange: true } }
-      ) === true)
-      .map(i => i.Item.Dates)
-
-    const gaps = findTimelineGaps({ years: totalYears }, dateRanges)
+    const {
+      List, errors, totalYears, gaps,
+    } = this.props
+    const { branch } = List
 
     const showGapError = branch
       && branch.value === 'No'
@@ -161,6 +151,7 @@ Residence.defaultProps = {
   addressBooks: {},
   dispatch: () => {},
   errors: [],
+  gaps: [],
 }
 
 export default connectSubsection(Residence, sectionConfig)