Add ngo_id filter to Adoption page

Refs boacausa#114

app/controllers/v1/pets_for_adoption_controller.rb

@@ -6,6 +6,7 @@ def index
     pets = pets.by_sex(params[:sex]) if params[:sex].present?
     pets = pets.by_description(params[:description]) if params[:description].present?
     pets = pets.by_city(params[:city]) if params[:city].present?
+    pets = pets.by_ngo_id(params[:ngo_id]) if params[:ngo_id].present?
 
     render json: {
       pets: ListPets.new.all(pets, params[:user_email])

app/javascript/actions/adoptionFilters.js

@@ -1,7 +1,8 @@
 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_CITY_FILTER: 'ADOPTION_FILTERS/SET_CITY_FILTER',
+  SET_NGO_ID_FILTER: 'ADOPTION_FILTERS/SET_NGO_ID_FILTER'
 };
 
 export const setSexFilter = (sex = '') => ({
@@ -18,3 +19,8 @@ export const setCityFilter = (city = '') => ({
   type: types.SET_CITY_FILTER,
   city
 });
+
+export const setNgoIdFilter = (ngo_id = '') => ({
+  type: types.SET_NGO_ID_FILTER,
+  ngo_id
+});

app/javascript/configureStore.js

@@ -5,6 +5,8 @@ import adoptionFiltersReducer from './reducers/adoptionFilters'
 
 const appReducerDefaultState = {
   user: { email: null, group: null },
+  ngos: [],
+  pets: []
 };
 
 function appReducer(state = appReducerDefaultState, action) {
@@ -28,7 +30,7 @@ const rootReducer = combineReducers({
 });
 
 export default function configureStore(user) {
-  const preloadedState = { app: { user } };
+  const preloadedState = { app: { ...appReducerDefaultState, user } };
 
   const store = createStore(
     rootReducer,

app/javascript/containers/AdoptionList/AdoptionList.jsx

@@ -15,6 +15,7 @@ export function fetchPetsForAdoption() {
     const sex = getState().adoptionFilters.sex;
     const description = getState().adoptionFilters.description;
     const city = getState().adoptionFilters.city;
+    const ngo_id = getState().adoptionFilters.ngo_id;
     dispatch({type: GET_ADOPTION_REQUEST});
 
     let params = [];
@@ -33,6 +34,10 @@ export function fetchPetsForAdoption() {
       params.push(`city=${city}`);
     }
 
+    if (ngo_id) {
+      params.push(`ngo_id=${ngo_id}`);
+    }
+
     const urlParams = params.join('&');
 
     return (

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

@@ -5,8 +5,9 @@ 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 } from '../../../actions/adoptionFilters';
+import { setSexFilter, setDescriptionFilter, setCityFilter, setNgoIdFilter } from '../../../actions/adoptionFilters';
 import { fetchPetsForAdoption } from '../AdoptionList'
+import { fetchNgos } from '../../NgosList'
 
 const GET_NGO_CITIES_REQUEST = 'GET_NGO_CITIES_REQUEST';
 const GET_NGO_CITIES_SUCCESS = 'GET_NGO_CITIES_SUCCESS';
@@ -30,7 +31,8 @@ export function fetchCitiesForAdoptionSuccess(json) {
 
 class AdoptionFilterBox extends React.Component {
     componentWillMount() {
-        const {fetchCitiesForAdoption} = this.props;
+        const {fetchCitiesForAdoption, fetchNgos} = this.props;
+        fetchNgos();
         fetchCitiesForAdoption();
     }
 
@@ -40,22 +42,30 @@ class AdoptionFilterBox extends React.Component {
 
     onDescriptionChange = (e) => {
       this.props.setDescriptionFilter(e.target.value);
-  };
+    };
 
     onCityChange = (e) => {
-    this.props.setCityFilter(e.target.value);
-  };
+      this.props.setCityFilter(e.target.value);
+    };
+
+    onNgoChange = (e) => {
+      this.props.setNgoIdFilter(e.target.value);
+    };
+
 
     render() {
-        const cities = this.props;
+        const { cities, ngos } = this.props;
+
+        const ngoOptions = ngos.map(ngo => ({ id: ngo.id, name: ngo.fantasy_name }));
+
         return (
             <div className={styles.FilterBox}>
                 <SelectInput
                     label='Cidade'
                     placeholder='Selecione uma cidade'
                     width='200px'
                     marginRight='20px'
-                    options={cities.cities}
+                    options={cities}
                     value={this.props.adoptionFilters.city}
                     onChange={this.onCityChange}
                 />
@@ -64,6 +74,9 @@ class AdoptionFilterBox extends React.Component {
                     placeholder='Selecione uma ONG'
                     width='300px'
                     marginRight='20px'
+                    options={ngoOptions}
+                    value={this.props.adoptionFilters.ngo_id}
+                    onChange={this.onNgoChange}
                 />
                 <SelectInput
                     label='Sexo'
@@ -91,15 +104,18 @@ class AdoptionFilterBox extends React.Component {
 
 const mapStateToProps = createStructuredSelector({
     cities: state => state.app.cities,
+    ngos: state => state.app.ngos,
     adoptionFilters: state => state.adoptionFilters
 });
 
 const mapDispatchToProps = {
   fetchPetsForAdoption,
   fetchCitiesForAdoption,
+  fetchNgos,
   setSexFilter,
   setDescriptionFilter,
-  setCityFilter
+  setCityFilter,
+  setNgoIdFilter
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AdoptionFilterBox);

app/javascript/containers/NgosList.jsx

@@ -7,7 +7,7 @@ import {Link} from "react-router-dom";
 const GET_NGOS_REQUEST = 'GET_NGOS_REQUEST';
 const GET_NGOS_SUCCESS = 'GET_NGOS_SUCCESS';
 
-function fetchNgos() {
+export function fetchNgos() {
     return dispatch => {
         dispatch({type: GET_NGOS_REQUEST});
         // TODO: how to make the path look better?

app/javascript/reducers/adoptionFilters.js

@@ -3,7 +3,8 @@ import { types } from '../actions/adoptionFilters';
 const adoptionFiltersReducerDefaultState = {
   sex: '',
   description: '',
-  city: ''
+  city: '',
+  ngo_id: ''
 };
 
 export default (state = adoptionFiltersReducerDefaultState, action) => {
@@ -23,6 +24,11 @@ export default (state = adoptionFiltersReducerDefaultState, action) => {
         ...state,
         city: action.city
       };
+    case types.SET_NGO_ID_FILTER:
+      return {
+        ...state,
+        ngo_id: action.ngo_id
+      };
     default:
       return state;
   }

app/models/pet.rb

@@ -15,6 +15,7 @@ class Pet < ApplicationRecord
   scope :by_sex, ->(sex) { where(sex: sex) }
   scope :by_description, ->(description) { where('description LIKE ?', "%#{description}%") }
   scope :by_city, ->(city) { includes(:ngo).where(ngos: { city: city }) }
+  scope :by_ngo_id, ->(ngo_id) { where(ngo_id: ngo_id) }
 
   def days_ago
     created_at