Updating prop-types on all components

robertkraig · robertkraig · commit fae7feb6ab28 · 2018-08-02T18:51:49.000-07:00
diff --git a/app/CLAgg/ReadConfig.php b/app/CLAgg/ReadConfig.php
@@ -110,7 +110,6 @@ public function getFieldsArray()
 
 				unset($array['argId']);
 				unset($array['argKey']);
-				unset($array['argName']);
 				unset($array['argTitle']);
 
 				$array['checkbox'] = array(
diff --git a/package.json b/package.json
@@ -13,10 +13,10 @@
     "devDependencies": {
         "axios": "^0.18",
         "babel-core": "^6.26.3",
-        "babel-preset-react": "^6.23.0",
-        "babel-preset-react-app": "^3.1.2",
         "babel-loader": "^7.1.5",
         "babel-plugin-dynamic-import-webpack": "^1.0.2",
+        "babel-preset-react": "^6.23.0",
+        "babel-preset-react-app": "^3.1.2",
         "babel-runtime": "^6.26.0",
         "bootstrap": "^4.0.0",
         "classnames": "^2.2.6",
@@ -37,6 +37,7 @@
         "styled-components": "^3.3.3"
     },
     "dependencies": {
+        "prop-types": "^15.6.2"
     },
     "babel": {
         "presets": [
diff --git a/resources/assets/js/components/navigation/Areas/index.js b/resources/assets/js/components/navigation/Areas/index.js
@@ -33,16 +33,30 @@ class Areas extends Component {
     };
 
     getSelectedAreas = () => {
-        return filter(this.props.area_list, (area)=>area.selected === true);
+        return Object.entries(this.props.area_list)
+            .filter(([key, area])=>{
+                return area.selected === true;
+            })
+            .reduce((collector, [key, area])=>{
+                collector[area.partial] = area;
+                return collector;
+            },{});
     };
 
     getTotalSelectedAreas = () => {
-        let selected = filter(this.props.area_list, (area)=>area.selected === true);
-        return Object.keys(selected).length;
+        return Object.entries(this.props.area_list)
+            .filter(([key, area])=>area.selected === true).length;
     };
 
     getUnselectedAreas = () => {
-        return filter(this.props.area_list, (area)=>area.selected !== true);
+        return Object.entries(this.props.area_list)
+            .filter(([key, area])=>{
+                return area.selected !== true;
+            })
+            .reduce((collector, [key, area])=>{
+                collector[area.partial] = area;
+                return collector;
+            },{});
     };
 
     areaListStyles = () => {
@@ -73,7 +87,7 @@ class Areas extends Component {
                 </a>
                 <div className={this.areaListStyles()} id="areas_list">
                     <label>Selected selected: {this.getTotalSelectedAreas()}</label>
-                    {map(this.getSelectedAreas(), (area, idx)=>{
+                    {Object.entries(this.getSelectedAreas()).map(([idx, area])=>{
                         return (
                             <AreaPartial
                                 key={`areaSelected:${idx}:${area.selected?1:0}`}
@@ -82,7 +96,7 @@ class Areas extends Component {
                         );
                     })}
                     <label>Un-Selected</label>
-                    {map(this.getUnselectedAreas(), (area, idx)=>{
+                    {Object.entries(this.getUnselectedAreas()).map(([idx, area])=>{
                         return (
                             <AreaPartial
                                 key={`areaUnSelected:${idx}:${area.selected?1:0}`}
diff --git a/resources/assets/js/components/navigation/CheckBoxField/index.js b/resources/assets/js/components/navigation/CheckBoxField/index.js
@@ -1,16 +1,36 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-export const CheckBoxField = ({field, cb}) =>{
+const CheckBoxField = ({checkbox, cb}) =>{
     return (
         <div className="checkbox-field">
-            <label className="fields" htmlFor={field.checkbox.arg_name}>{field.checkbox.title}</label>
-            <input id={field.checkbox.arg_name}
+            <label className="fields" htmlFor={checkbox.arg_name}>{checkbox.title}</label>
+            <input id={checkbox.arg_name}
                    className="fields"
                    type="checkbox"
-                   onChange={(e)=>cb({elm:e, key:field.checkbox.arg_name})}
-                   value={field.checkbox.value}
+                   onChange={(e)=>cb({elm:e, key:checkbox.arg_name})}
+                   value={checkbox.value}
             />
-            <br />
         </div>
     );
 };
+
+CheckBoxField.propTypes = {
+    checkbox:PropTypes.shape({
+        title:PropTypes.string.isRequired,
+        arg_name:PropTypes.string.isRequired,
+        value:PropTypes.string.isRequired,
+    }),
+    cb: PropTypes.func.isRequired,
+};
+
+CheckBoxField.defaultProps = {
+    checkbox:{
+        title:'',
+        arg_name:'',
+        value:''
+    },
+    cb:()=>{console.log('checkbox-un-bound')}
+};
+
+export default CheckBoxField;
diff --git a/resources/assets/js/components/navigation/FormField/index.js b/resources/assets/js/components/navigation/FormField/index.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import TextField from '../TextField';
+import RadioFields from '../RadioFields';
+import CheckBoxField from '../CheckBoxField';
+import PropTypes from "prop-types";
+
+const FormField = ({field, onTextChange, onRadioChange, onCheckBoxChange}) =>{
+    switch(field.argType)
+    {
+        case 'text':
+            return (
+                <TextField
+                    field={field}
+                    cb={onTextChange}
+                    />
+            );
+
+        case 'radio':
+            return (
+                <RadioFields
+                    fieldName={field.argName}
+                    cb={onRadioChange}
+                    radios={field.radios} />
+            );
+
+        case 'checkbox':
+            return (
+                <CheckBoxField
+                    checkbox={field.checkbox}
+                    cb={onCheckBoxChange} />
+            );
+    }
+};
+
+FormField.propTypes = {
+    field: PropTypes.object.isRequired,
+    onTextChange: PropTypes.func.isRequired,
+    onRadioChange: PropTypes.func.isRequired,
+    onCheckBoxChange: PropTypes.func.isRequired
+};
+
+FormField.defaultProps = {
+    field:{},
+    onTextChange:()=>{console.log('onTextChange:unbound')},
+    onRadioChange:()=>{console.log('onRadioChange:unbound')},
+    onCheckBoxChange:()=>{console.log('onCheckBoxChange:unbound')}
+};
+
+export default FormField;
diff --git a/resources/assets/js/components/navigation/RadioFields/index.js b/resources/assets/js/components/navigation/RadioFields/index.js
@@ -1,29 +1,64 @@
 import React from 'react';
+import PropTypes from "prop-types";
 
-const RadioField = ({field, radio, cb})=>{
+const RadioField = ({fieldName, radio, cb})=>{
     return (
         <div className="radio-box-field">
             <label className="fields"
                    htmlFor={radio.arg_name_id}>{radio.arg_name}</label>
             <input className="fields"
                    id={radio.arg_name_id}
                    type="radio"
-                   name={field.argName}
-                   onChange={(e)=>cb({elm:e, key:field.argName})}
+                   name={fieldName}
+                   onChange={(e)=>cb({elm:e, key:fieldName})}
                    value={radio.arg}  />
             <br />
         </div>
     );
 };
 
-export const RadioFields = ({field, radios, cb})=>{
+RadioField.propTypes = {
+    radio: PropTypes.shape({
+        arg_name_id:PropTypes.string.isRequired,
+        arg_name:PropTypes.string.isRequired,
+        arg:PropTypes.string.isRequired,
+    }),
+    fieldName: PropTypes.string.isRequired,
+    cb: PropTypes.func.isRequired,
+};
+
+RadioField.defaultProps = {
+    radio: {
+        arg_name_id:'',
+        arg_name:'',
+        arg:''
+    },
+    fieldName:'',
+    cb:()=>{}
+};
+
+const RadioFields = ({fieldName, radios, cb})=>{
     return (
         <div className="radio-box-fields">
             {radios.map(radio=>{
                 return (
-                    <RadioField key={radio.arg_name_id} field={field} radio={radio} cb={cb} />
+                    <RadioField key={radio.arg_name_id} fieldName={fieldName} radio={radio} cb={cb} />
                 );
             })}
         </div>
     );
-};
+};
+
+RadioFields.propTypes = {
+    field: PropTypes.object.isRequired,
+    radios: PropTypes.array.isRequired,
+    cb: PropTypes.func.isRequired,
+};
+
+RadioFields.defaultProps = {
+    field: {},
+    radios: [],
+    cb:()=>{}
+};
+
+export default RadioFields;
diff --git a/resources/assets/js/components/navigation/Regions/index.js b/resources/assets/js/components/navigation/Regions/index.js
@@ -60,10 +60,10 @@ class Regions extends Component {
                     }
                 </a>
                 <div className={this.regionListStyles()} id="region_list">
-                    {map(this.props.region_list, (region, idx)=>{
+                    {Object.entries(this.props.region_list).map(([key, region])=>{
                         return (
                             <RegionPartial
-                                key={`idx${idx}:${region.selected?1:0}`}
+                                key={`idx${key}:${region.selected?1:0}`}
                                 region={region}
                                 callback={(e)=>this.updateRegionSelection({elm:e, region})} />
                         );
diff --git a/resources/assets/js/components/navigation/TextField/index.js b/resources/assets/js/components/navigation/TextField/index.js
@@ -1,11 +1,34 @@
 import React from 'react';
+import PropTypes from "prop-types";
 
-export const TextField = ({field, value, cb})=>{
+const TextField = ({field, value, cb})=>{
     return (
         <div className="text-field">
             <label className="fields" htmlFor={field.argId}>{field.argTitle}</label>
-            <input className="fields" onChange={(e)=>cb({elm:e, key:field.argName})} type="text" value={value} id={field.argId} />
+            <input className="fields" onChange={(e)=>cb({elm:e, key:field.argName})} type="text" id={field.argId} />
             <br />
         </div>
     );
-};
+};
+
+TextField.propTypes = {
+    field: PropTypes.shape({
+        argId:PropTypes.string.isRequired,
+        argTitle:PropTypes.string.isRequired,
+        argName:PropTypes.string.isRequired,
+    }),
+    value: PropTypes.string.isRequired,
+    cb: PropTypes.func.isRequired
+};
+
+TextField.defaultProps = {
+    field: {
+        argId:'',
+        argTitle:'',
+        argName:'',
+    },
+    value :'',
+    cb: ()=>{}
+};
+
+export default TextField;
diff --git a/resources/assets/js/components/navigation/index.js b/resources/assets/js/components/navigation/index.js
@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import actions from '../../actions/index';
 import { withRouter } from 'react-router-dom';
 import debounce from 'lodash/debounce';
-import {TextField} from './TextField';
-import {RadioFields} from './RadioFields';
-import {CheckBoxField} from './CheckBoxField';
 import Regions from './Regions';
 import Areas from './Areas';
+import PropTypes from "prop-types";
+import FormField from './FormField';
+
 class Navigation extends Component {
 
     state = {
@@ -100,36 +100,17 @@ class Navigation extends Component {
             <form onSubmit={this.submitForm} id="find_items">
                 <div id="change_size_container">
                     <div>{this.props.page_title}</div>
-                    {Object.keys(this.props.fields).map(fieldKey=>{
-                        let field = this.props.fields[fieldKey];
-                        switch(field.argType)
-                        {
-                            case 'text':
-                                return (
-                                    <TextField
-                                        key={field.argName}
-                                        cb={this.onTextChange}
-                                        field={field}
-                                        state={this.state} />
-                                );
-
-                            case 'radio':
-                                return (
-                                    <RadioFields
-                                        key={field.argName}
-                                        field={field}
-                                        cb={this.onRadioChange}
-                                        radios={field.radios} />
-                                );
-
-                            case 'checkbox':
-                                return (
-                                    <CheckBoxField
-                                        key={field.checkbox.arg_name}
-                                        field={field}
-                                        cb={this.onCheckBoxChange} />
-                                );
-                        }
+                    {Object.entries(this.props.fields).map(([key, field])=>{
+                        return (
+                            <FormField
+                                key={field.argName}
+                                field={field}
+                                state={this.state}
+                                onTextChange={this.onTextChange}
+                                onRadioChange={this.onRadioChange}
+                                onCheckBoxChange={this.onCheckBoxChange}
+                            />
+                        );
                     })}
                 </div>
                 <cite>{this.props.page_search_example}</cite>
@@ -143,5 +124,21 @@ class Navigation extends Component {
     }
 }
 
+Navigation.propTypes = {
+    page_title: PropTypes.string.isRequired,
+    site: PropTypes.string.isRequired,
+    page_search_example: PropTypes.string.isRequired,
+    area_list: PropTypes.object.isRequired,
+    region_list: PropTypes.object.isRequired,
+};
+
+Navigation.defaultProps = {
+    page_title:'',
+    site:'',
+    page_search_example:'',
+    area_list:{},
+    region_list:{}
+};
+
 const mapStateToProps = state => state.search_settings;
 export default withRouter(connect(mapStateToProps)(Navigation));
diff --git a/yarn.lock b/yarn.lock
@@ -5880,7 +5880,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
+prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
