Add propTypes and small fix

Refs boacausa#114

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
+});

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;

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;

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;

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('&');
 

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);

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;