Add propTypes and small fix

boacausa · Jan 21, 2020 · 76807db · 76807db
1 parent 0f0d776
commit 76807db
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 79 deletions.
diff --git a/app/javascript/actions/adoptionFilters.js b/app/javascript/actions/adoptionFilters.js
@@ -1,20 +1,10 @@
 export const types = {
-  SET_SEX_FILTER: 'ADOPTION_FILTERS/SET_SEX_FILTER',
-  SET_DESCRIPTION_FILTER: 'ADOPTION_FILTERS/SET_DESCRIPTION_FILTER',
   SET_CITY_FILTER: 'ADOPTION_FILTERS/SET_CITY_FILTER',
-  SET_NGO_ID_FILTER: 'ADOPTION_FILTERS/SET_NGO_ID_FILTER'
+  SET_NGO_ID_FILTER: 'ADOPTION_FILTERS/SET_NGO_ID_FILTER',
+  SET_SEX_FILTER: 'ADOPTION_FILTERS/SET_SEX_FILTER',
+  SET_DESCRIPTION_FILTER: 'ADOPTION_FILTERS/SET_DESCRIPTION_FILTER'
 };
 
-export const setSexFilter = (sex = '') => ({
-  type: types.SET_SEX_FILTER,
-  sex
-});
-
-export const setDescriptionFilter = (description = '') => ({
-  type: types.SET_DESCRIPTION_FILTER,
-  description
-});
-
 export const setCityFilter = (city = '') => ({
   type: types.SET_CITY_FILTER,
   city
@@ -24,3 +14,13 @@ export const setNgoIdFilter = (ngo_id = '') => ({
   type: types.SET_NGO_ID_FILTER,
   ngo_id
 });
+
+export const setSexFilter = (sex = '') => ({
+  type: types.SET_SEX_FILTER,
+  sex
+});
+
+export const setDescriptionFilter = (description = '') => ({
+  type: types.SET_DESCRIPTION_FILTER,
+  description
+});
diff --git a/app/javascript/components/Button/Button.jsx b/app/javascript/components/Button/Button.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Button.sass';
 
-const Button = (props) => (
+const Button = ({ children, onClick }) => (
   <button
-    children={props.children}
+    children={children}
     className={styles.Button}
-    onClick={props.onClick}
+    onClick={onClick}
   />
 );
 
+Button.propTypes = {
+  children: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+}
+
 export default Button;
diff --git a/app/javascript/components/SelectInput/SelectInput.jsx b/app/javascript/components/SelectInput/SelectInput.jsx
@@ -1,16 +1,33 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './SelectInput.sass';
 
-const SelectInput = (props) => (
-  <div className={styles.SelectInput} style={{width: props.width, marginRight: props.marginRight}}>
-    <label>{props.label}</label>
-    <select name={props.name} onChange={props.onChange}>
-      <option value="">{props.placeholder}</option>
-      {props.options && props.options.length > 0 && props.options.map(opt => {
-        return <option key={opt.id} value={opt.id} selected={props.value === opt.id}>{opt.name}</option>
-      })}
+const SelectInput = ({ label, name, placeholder, value, options, width, marginRight, onChange }) => (
+  <div className={styles.SelectInput} style={{ width, marginRight }}>
+    <label>{label}</label>
+    <select name={name} value={value} onChange={onChange}>
+      <option value=''>{placeholder}</option>
+      {options && options.length > 0 && options.map(option => (
+        <option key={option.id} value={option.id}>{option.name}</option>
+      ))}
     </select>
   </div>
 );
 
+SelectInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      name: PropTypes.string
+    })
+  ),
+  width: PropTypes.string,
+  marginRight: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+}
+
 export default SelectInput;
diff --git a/app/javascript/components/TextInput/TextInput.jsx b/app/javascript/components/TextInput/TextInput.jsx
@@ -1,12 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './TextInput.sass';
 
-const TextInput = (props) => {
-    return (
-        <div className={styles.TextInput} style={{width: props.width, marginRight: props.marginRight}}>
-            <input value={props.value} placeholder={props.placeholder} onChange={props.onChange} />
-        </div>
-    );
-};
+const TextInput = ({ value, placeholder, width, marginRight, onChange }) => (
+  <div className={styles.TextInput} style={{ width, marginRight }}>
+      <input value={value} placeholder={placeholder} onChange={onChange} />
+  </div>
+);
+
+TextInput.propTypes = {
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  width: PropTypes.string,
+  marginRight: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+}
 
 export default TextInput;
diff --git a/app/javascript/containers/AdoptionList/AdoptionList.jsx b/app/javascript/containers/AdoptionList/AdoptionList.jsx
@@ -11,32 +11,16 @@ const GET_ADOPTION_SUCCESS = 'GET_ADOPTION_SUCCESS';
 
 export function fetchPetsForAdoption() {
   return (dispatch, getState) => {
-    const userEmail = getState().app.user.email;
-    const sex = getState().adoptionFilters.sex;
-    const description = getState().adoptionFilters.description;
-    const city = getState().adoptionFilters.city;
-    const ngo_id = getState().adoptionFilters.ngo_id;
+    const { userEmail, city, ngo_id, sex, description } = getState().adoptionFilters;
     dispatch({type: GET_ADOPTION_REQUEST});
 
-    let params = [];
-    if (userEmail) {
-      params.push(`user_email=${userEmail}`);
-    }
-    if (sex) {
-      params.push(`sex=${sex}`);
-    }
-
-    if (description) {
-      params.push(`description=${description}`);
-    }
-
-    if (city) {
-      params.push(`city=${city}`);
-    }
-
-    if (ngo_id) {
-      params.push(`ngo_id=${ngo_id}`);
-    }
+    let params = [
+      `user_email=${userEmail}`,
+      `city=${city}`,
+      `ngo_id=${ngo_id}`,
+      `sex=${sex}`,
+      `description=${description}`
+    ];
 
     const urlParams = params.join('&');
 

diff --git a/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx b/app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx
@@ -1,11 +1,12 @@
 import React from "react";
+import PropTypes from 'prop-types';
 import styles from "./AdoptionFilterBox.sass";
 import SelectInput from "../../../components/SelectInput/SelectInput";
 import TextInput from "../../../components/TextInput/TextInput";
 import Button from "../../../components/Button/Button";
 import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
-import { setSexFilter, setDescriptionFilter, setCityFilter, setNgoIdFilter } from '../../../actions/adoptionFilters';
+import { setCityFilter, setNgoIdFilter, setSexFilter, setDescriptionFilter } from '../../../actions/adoptionFilters';
 import { fetchPetsForAdoption } from '../AdoptionList'
 import { fetchNgos } from '../../NgosList'
 
@@ -30,20 +31,25 @@ export function fetchCitiesForAdoptionSuccess(json) {
 }
 
 class AdoptionFilterBox extends React.Component {
+    static propTypes = {
+      cities: PropTypes.array,
+      ngos: PropTypes.array,
+      adoptionFilters: PropTypes.object,
+      fetchPetsForAdoption: PropTypes.func,
+      fetchCitiesForAdoption: PropTypes.func,
+      fetchNgos: PropTypes.func,
+      setCityFilter: PropTypes.func,
+      setNgoIdFilter: PropTypes.func,
+      setSexFilter: PropTypes.func,
+      setDescriptionFilter: PropTypes.func
+    }
+
     componentWillMount() {
         const {fetchCitiesForAdoption, fetchNgos} = this.props;
         fetchNgos();
         fetchCitiesForAdoption();
     }
 
-    onSexChange = (e) => {
-        this.props.setSexFilter(e.target.value);
-    };
-
-    onDescriptionChange = (e) => {
-      this.props.setDescriptionFilter(e.target.value);
-    };
-
     onCityChange = (e) => {
       this.props.setCityFilter(e.target.value);
     };
@@ -52,6 +58,13 @@ class AdoptionFilterBox extends React.Component {
       this.props.setNgoIdFilter(e.target.value);
     };
 
+    onSexChange = (e) => {
+        this.props.setSexFilter(e.target.value);
+    };
+
+    onDescriptionChange = (e) => {
+      this.props.setDescriptionFilter(e.target.value);
+    };
 
     render() {
         const { cities, ngos } = this.props;
@@ -101,7 +114,6 @@ class AdoptionFilterBox extends React.Component {
     }
 }
 
-
 const mapStateToProps = createStructuredSelector({
     cities: state => state.app.cities,
     ngos: state => state.app.ngos,
@@ -112,10 +124,10 @@ const mapDispatchToProps = {
   fetchPetsForAdoption,
   fetchCitiesForAdoption,
   fetchNgos,
-  setSexFilter,
-  setDescriptionFilter,
   setCityFilter,
-  setNgoIdFilter
+  setNgoIdFilter,
+  setSexFilter,
+  setDescriptionFilter
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AdoptionFilterBox);
diff --git a/app/javascript/reducers/adoptionFilters.js b/app/javascript/reducers/adoptionFilters.js
@@ -1,33 +1,33 @@
 import { types } from '../actions/adoptionFilters';
 
 const adoptionFiltersReducerDefaultState = {
-  sex: '',
-  description: '',
   city: '',
-  ngo_id: ''
+  ngo_id: '',
+  sex: '',
+  description: ''
 };
 
 export default (state = adoptionFiltersReducerDefaultState, action) => {
   switch (action.type) {
-    case types.SET_SEX_FILTER:
+    case types.SET_CITY_FILTER:
       return {
         ...state,
-        sex: action.sex
+        city: action.city
       };
-    case types.SET_DESCRIPTION_FILTER:
+    case types.SET_NGO_ID_FILTER:
       return {
         ...state,
-        description: action.description
+        ngo_id: action.ngo_id
       };
-    case types.SET_CITY_FILTER:
+    case types.SET_SEX_FILTER:
       return {
         ...state,
-        city: action.city
+        sex: action.sex
       };
-    case types.SET_NGO_ID_FILTER:
+    case types.SET_DESCRIPTION_FILTER:
       return {
         ...state,
-        ngo_id: action.ngo_id
+        description: action.description
       };
     default:
       return state;