age group

src/app/team/service/details/ServiceDetails.jsx

@@ -27,6 +27,9 @@ const LoadingView = () => (
 function getUpdatedAt(service, route) {
   const { metaDataSection, fieldName } = route;
 
+  console.log(service);
+  console.log(route)
+
   const subFields = service.metadata[metaDataSection];
   const field = subFields.find(el => el.field_name === fieldName);
   return field ? field.last_action_date : null;

src/app/team/serviceForm/whoDoesItServe/WhoDoesItServeEdit.jsx

@@ -19,7 +19,9 @@ class WhoDoesItServe extends Component {
 
     // serviceGroups -> { allAges: true, customMinAge, customMaxAge, name}
     const serviceGroups = isEditing(this.props.value) ? [] : this.props.value;
-    this.state = { serviceGroups };
+    this.state = { 
+      serviceGroups,
+    };
 
     this.onCheckInputClick = this.onCheckInputClick.bind(this);
   }
@@ -32,7 +34,10 @@ class WhoDoesItServe extends Component {
       serviceGroups.splice(groupIndex, 1);
     } else {
       serviceGroups.push({
-        allAges: true, minAge: defaultMinAge, maxAge: defaultMaxAge, name: groupName,
+        all_ages: true, 
+        age_min: defaultMinAge, 
+        age_max: defaultMaxAge, 
+        name: groupName,
       });
     }
     this.setState({ serviceGroups });
@@ -42,7 +47,7 @@ class WhoDoesItServe extends Component {
     e.stopPropagation();
     e.preventDefault();
 
-    this.updateServiceGroups(group, serviceGroups, 'allAges', value);
+    this.updateServiceGroups(group, serviceGroups, 'all_ages', value);
   }
 
   getCustomGroups() {
@@ -54,6 +59,9 @@ class WhoDoesItServe extends Component {
   }
 
   getForm(groupName, group, serviceGroups) {
+
+    console.log(this.state);
+
     return (
       <form
         key={`editForm-${groupName}`}
@@ -69,7 +77,7 @@ class WhoDoesItServe extends Component {
               className="form-check-input"
               type="radio"
               name="ages"
-              checked={group.allAges}
+              checked={group.all_ages}
             />
             <span>All ages in this group</span>
           </li>
@@ -82,7 +90,7 @@ class WhoDoesItServe extends Component {
               className="form-check-input"
               type="radio"
               name="ages"
-              checked={!group.allAges}
+              checked={!group.all_ages}
             />
             <span>Specific ages in this group</span>
           </li>
@@ -92,22 +100,22 @@ class WhoDoesItServe extends Component {
             <div> From: </div>
             <div>
               <Input
-                disabled={group.allAges}
+                disabled={group.all_ages}
                 type="number"
-                defaultValue={group.minAge}
+                defaultValue={group.age_min}
                 onChange={(e) => {
-                  this.updateServiceGroups(group, serviceGroups, 'minAge', e.target.value);
+                  this.updateServiceGroups(group, serviceGroups, 'age_min', parseInt(e.target.value));
                 }}
               />
             </div>
             <div> To: </div>
             <div>
               <Input
-                disabled={group.allAges}
+                disabled={group.all_ages}
                 type="number"
-                defaultValue={group.maxAge}
+                defaultValue={group.age_max}
                 onChange={(e) => {
-                  this.updateServiceGroups(group, serviceGroups, 'maxAge', e.target.value);
+                  this.updateServiceGroups(group, serviceGroups, 'age_max', parseInt(e.target.value));
                 }}
               />
             </div>
@@ -139,29 +147,37 @@ class WhoDoesItServe extends Component {
 
   addCustomGroup() {
     const { state: { serviceGroups } } = this;
-    serviceGroups.push({ allAges: true, name: '' });
+    serviceGroups.push({ all_ages: true, name: '' });
     const customGroups = this.getCustomGroups();
     this.setState({ serviceGroups, lastAddedIndex: customGroups.length - 1 });
   }
 
-  updateValue = e => this.props.updateValue(
-    this.state.serviceGroups,
-    this.props.id,
-    this.props.metaDataSection,
-    this.props.fieldName,
-  );
+  updateValue = e => {
+
+    console.log('update value');
+    console.log(this.state.serviceGroups);
+
+    return this.props.updateValue(
+      this.state.serviceGroups,
+      this.props.id,
+      this.props.metaDataSection,
+      this.props.fieldName,
+    );
+  }
 
   render() {
     const { state: { serviceGroups } } = this;
+    console.log(this.state);
+    console.log(this.props)
     return (
       <div className="w-100 WhoDoesItServe">
         <Header className="mb-3">Which groups does this service serve?</Header>
         <Selector fluid>
           {
             SERVICE_GROUPS.map(([groupName, defaultMinAge, defaultMaxAge], i) => {
               const group = this.state.serviceGroups.find(_group => _group.name === groupName);
-              const minAge = (group && group.minAge) || defaultMinAge;
-              const maxAge = (group && group.maxAge) || defaultMaxAge;
+              const age_min = (group && group.age_min) || defaultMinAge;
+              const age_max = (group && group.age_max) || defaultMaxAge;
               const isActive = !!group;
               const showForm = isActive && i !== 0;
               return [
@@ -172,7 +188,7 @@ class WhoDoesItServe extends Component {
                   hide={false}
                   onClick={() => this.onServiceGroupClick(groupName, defaultMinAge, defaultMaxAge)}
                 >
-                  {formatLabel(groupName, minAge, maxAge)}
+                  {formatLabel(groupName, age_min, age_max)}
                 </Selector.Option>,
               ].concat(showForm ?
                 this.getForm(groupName, group, serviceGroups) :

src/app/team/serviceForm/whoDoesItServe/WhoDoesItServeView.jsx

@@ -4,6 +4,9 @@ import ConfirmationOptions from '../../../../components/form/ConfirmationOptions
 import { formatLabel } from './util';
 
 function FormView({ value, onConfirm, onEdit }) {
+
+  // console.log(value)
+
   return (
     <div className="w-100">
       <div style={{ fontSize: '13px', marginBottom: '1em' }} className="font-weight-bold mt-2">
@@ -13,7 +16,7 @@ function FormView({ value, onConfirm, onEdit }) {
         {
           value.length ?
             value.map((group, i) => (
-              <li key={group.name}>{ formatLabel(group.name, group.minAge, group.maxAge) }</li>
+              <li key={group.name}>{ formatLabel(group.name, group.age_min, group.age_max) }</li>
             )) :
             'None'
         }
@@ -26,8 +29,8 @@ function FormView({ value, onConfirm, onEdit }) {
 FormView.propTypes = {
   value: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
-    minAge: PropTypes.number.isRequired,
-    maxAge: PropTypes.number.isRequired,
+    // minAge: PropTypes.number.isRequired,
+    // maxAge: PropTypes.number.isRequired,
   })),
   onConfirm: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,

src/app/team/serviceForm/whoDoesItServe/util.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { EVERYONE } from '../../../../Constants';
 
-const ifMinOrMaxAge = (minAge, maxAge) => (
-  (minAge || maxAge) ?
-    ` (${minAge}${maxAge ? `-${maxAge}` : '+'})` :
+const ifMinOrMaxAge = (age_min, age_max) => (
+  (age_min || age_max) ?
+    ` (${age_min}${age_max ? `-${age_max}` : '+'})` :
     ' (all ages)'
 );
 
-export const formatLabel = (groupName, minAge, maxAge) => (
+export const formatLabel = (groupName, age_min, age_max) => (
   <div>
     <span>{groupName}</span>
     <span>
       {
         EVERYONE === groupName ?
           '' :
-          ifMinOrMaxAge(minAge, maxAge)
+          ifMinOrMaxAge(age_min, age_max)
       }
     </span>
   </div>

src/config.js

@@ -5,7 +5,8 @@ const parseBoolean = (value, defaultValue = false) =>
 
 export default {
   gaTrackingId: process.env.REACT_APP_GA_TRACKING_ID || 'G-8YQSKLWB8R',
-  baseApi: process.env.REACT_APP_API_URL || 'http://localhost:3000',
+  // baseApi: process.env.REACT_APP_API_URL || 'https://w6pkliozjh.execute-api.us-east-1.amazonaws.com/Stage',
+  baseApi: process.env.REACT_APP_API_URL,
   privacyUrl: process.env.PRIVACY_URL || 'https://docs.google.com/document/d/e/2PACX-1vQ8djXWiASXKkcKJ2LSHNXMgrQ1PhQPskSs_Thk5oLTZMnKvMy7Nqz1t4Xs18mGGKuORXOj8yNNhJUq/pub',
   termsOfUseUrl: process.env.TOU_URL || 'https://docs.google.com/document/d/e/2PACX-1vTBNI2Sv5QC8DSBwBL7WHNBdMI-9kPLuN2ev_Y2VDSo-bLeh8qssi7iBv-w0EEQurX9fgFQF4_2lItn/pub',
   commentGuidelinesUrl: process.env.COMMENT_GUIDELINES_URL || 'https://docs.google.com/document/d/e/2PACX-1vTi6AR2Q-PpTNMLTimvdVg8yDuLJ5DURswQ-heCToXj3OwuqNXyt-LIBs-By9znC2A_0HxqlO8vQ_DJ/pub',

src/selectors/service.js

@@ -26,8 +26,26 @@ export const getServiceTaxonomy = (state, props) => {
   return taxonomy && (taxonomy.parent_name || taxonomy.name);
 };
 
-export const getServiceWhoDoesItServe = (state, props) =>
-  getService(state, props).who_does_it_serve;
+export const getServiceWhoDoesItServe = (state, props) => {
+
+  const eligibilities = getService(state, props).Eligibilities;
+  const currentValues = getService(state, props).who_does_it_serve;
+
+  if (currentValues) return currentValues;
+
+
+  if (eligibilities) {
+
+    // console.log(eligibilities)
+
+    const whoDoesItServe = eligibilities.find(item => item.EligibilityParameter.name === 'age')
+
+    if (whoDoesItServe) return whoDoesItServe.eligible_values
+
+  }
+
+}
+
 
 export const getServiceLanguages = (state, props) => getService(state, props).Languages || [];