Add description filter to Adoption page

Refs boacausa#114

app/controllers/v1/pets_for_adoption_controller.rb

@@ -4,6 +4,7 @@ class V1::PetsForAdoptionController < ApplicationController
  def index
  pets = Pet.active
  pets = pets.by_sex(params[:sex]) if params[:sex].present?
+ pets = pets.by_description(params[:description]) if params[:description].present?
 
  render json: {
  pets: ListPets.new.all(pets, params[:user_email])

app/javascript/actions/adoptionFilters.js

@@ -1,10 +1,14 @@
 export const types = {
- SET_SEX_FILTER: 'ADOPTION_FILTERS/SET_SEX_FILTER'
+ SET_SEX_FILTER: 'ADOPTION_FILTERS/SET_SEX_FILTER',
+ SET_DESCRIPTION_FILTER: 'ADOPTION_FILTERS/SET_DESCRIPTION_FILTER'
 };
 
-const setSexFilter = (sex = '') => ({
+export const setSexFilter = (sex = '') => ({
  type: types.SET_SEX_FILTER,
  sex
 });
 
-export default setSexFilter;
+export const setDescriptionFilter = (description = '') => ({
+ type: types.SET_DESCRIPTION_FILTER,
+ description
+});

app/javascript/components/SelectInput/SelectInput.jsx

@@ -7,7 +7,7 @@ const SelectInput = (props) => (
  <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}>{opt.name}</option>
+ return <option key={opt.id} value={opt.id} selected={props.value === opt.id}>{opt.name}</option>
  })}
  </select>
  </div>

app/javascript/components/TextInput/TextInput.jsx

@@ -4,7 +4,7 @@ import styles from './TextInput.sass';
 const TextInput = (props) => {
  return (
  <div className={styles.TextInput} style={{width: props.width, marginRight: props.marginRight}}>
- <input placeholder={props.placeholder} />
+ <input value={props.value} placeholder={props.placeholder} onChange={props.onChange} />
  </div>
  );
 };

app/javascript/containers/AdoptionList/AdoptionList.jsx

@@ -13,6 +13,7 @@ export function fetchPetsForAdoption() {
  return (dispatch, getState) => {
  const userEmail = getState().app.user.email;
  const sex = getState().adoptionFilters.sex;
+ const description = getState().adoptionFilters.description;
  dispatch({type: GET_ADOPTION_REQUEST});
 
  let params = [];
@@ -22,6 +23,11 @@ export function fetchPetsForAdoption() {
  if (sex) {
  params.push(`sex=${sex}`);
  }
+
+ if (description) {
+ params.push(`description=${description}`);
+ }
+
  const urlParams = params.join('&');
 
  return (

app/javascript/containers/AdoptionList/FilterBox/AdoptionFilterBox.jsx

@@ -5,7 +5,7 @@ import TextInput from "../../../components/TextInput/TextInput";
 import Button from "../../../components/Button/Button";
 import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
-import setSexFilter from '../../../actions/adoptionFilters';
+import { setSexFilter, setDescriptionFilter } from '../../../actions/adoptionFilters';
 import { fetchPetsForAdoption } from '../AdoptionList'
 
 const GET_NGO_CITIES_REQUEST = 'GET_NGO_CITIES_REQUEST';
@@ -38,6 +38,10 @@ class AdoptionFilterBox extends React.Component {
  this.props.setSexFilter(e.target.value);
  };
 
+ onDescriptionChange = (e) => {
+ this.props.setDescriptionFilter(e.target.value);
+ };
+
  render() {
  const cities = this.props;
  return (
@@ -69,6 +73,8 @@ class AdoptionFilterBox extends React.Component {
  placeholder='Procure por palavras-chaves'
  width='350px'
  marginRight='20px'
+ value={this.props.adoptionFilters.description}
+ onChange={this.onDescriptionChange}
  />
  <Button children='Procurar' onClick={this.props.fetchPetsForAdoption} />
  </div>
@@ -86,6 +92,7 @@ const mapDispatchToProps = {
  fetchPetsForAdoption,
  fetchCitiesForAdoption,
  setSexFilter,
+ setDescriptionFilter
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AdoptionFilterBox);

app/javascript/reducers/adoptionFilters.js

@@ -2,6 +2,7 @@ import { types } from '../actions/adoptionFilters';
 
 const adoptionFiltersReducerDefaultState = {
  sex: '',
+ description: ''
 };
 
 export default (state = adoptionFiltersReducerDefaultState, action) => {
@@ -11,6 +12,11 @@ export default (state = adoptionFiltersReducerDefaultState, action) => {
  ...state,
  sex: action.sex
  };
+ case types.SET_DESCRIPTION_FILTER:
+ return {
+ ...state,
+ description: action.description
+ };
  default:
  return state;
  }

app/models/pet.rb

@@ -13,6 +13,7 @@ class Pet < ApplicationRecord
 
  scope :active, -> { where(active: true) }
  scope :by_sex, ->(sex) { where(sex: sex) }
+ scope :by_description, ->(description) { where('description LIKE ?', "%#{description}%") }
 
  def days_ago
  created_at