Last active
December 19, 2019 04:48
-
-
Save skflowne/2cf8f42c63d107c41edcfd8bd0f699a8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function filterRestaurantsBySearch(restaurants, search){ | |
return restaurants.filter((restaurant) => new RegExp(search, "i").exec(restaurant.restaurantName)) | |
} | |
// ou | |
// que tu appelles comme ça | |
// const onlySearchedRestaurants = filterRestaurantsBySearch(restaurants)(search) | |
export filterRestaurantsBySearch | |
// ensuite dans un autre fichier ou t'en as besoin tu peux faire ça | |
import { filterRestaurantsBySearch } from '../path/to/helper/restaurantFilterHelpers' | |
// ce que je te conseillais de faire | |
const restaurantsBySearch = restaurants => search => { | |
return restaurants.filter((restaurant) => new RegExp(search, "i").exec(restaurant.restaurantName)) | |
} | |
const restaurantsByRating = restaurants => (note) => { | |
return restaurants.filter((restaurant) => { | |
const rating = restaurant.getRating(); | |
return (rating >= note.min && rating <= note.max); | |
}) | |
} | |
const restaurantsByLocation = restaurants => (bounds) => { | |
return restaurants.filter((restaurant) => { | |
return (restaurant.lat <= bounds.topLat && restaurant.lat >= bounds.bottomLat && | |
restaurant.long <= bounds.rightLng && restaurant.long >= bounds.leftLng); | |
}) | |
} | |
const filterRestaurants = restaurants => (search, note, bounds) => { | |
const searchedRestaurants = restaurantsBySearch(this.state.restaurants)(this.state.search) | |
const ratingRestaurants = restaurantsByRating(searchedRestaurants)(this.state.note.min, this.state.note.max) | |
const matchingRestaurants = restaurantsByLocation(ratingRestaurants)(this.state.bounds) | |
return matchingRestaurants | |
} | |
// dans ton composant ensuite tu peux soit utiliser une des fonctions si t'as besoin de les combiner autrement, | |
// soit utiliser la grosse fonction | |
// ça te permet plus de fléxibilité | |
import React from 'react' | |
import Restaurant from '../components/Restaurant' // imaginons que tu as ton composant restaurant dans un autre fichier | |
// tu importes la fonction depuis tes helpers | |
import { filterRestaurants } from '../helpers/restaurantFilterHelpers' | |
class Restaurants extends React.Component { | |
state = { | |
restaurants: [], | |
search: "", | |
note: { | |
min: 0, | |
max 5, | |
}, | |
bounds: { | |
// ... | |
} | |
} | |
render(){ | |
const matchingRestaurants = filterRestaurants(this.state.restaurants)(this.state.search, this.state.note, this.state.bounds) | |
<div class="restaurants-list> | |
{matchingRestaurants.map(r => { | |
return ( | |
<Restaurant restaurant={r} /> | |
) | |
}} | |
</div> | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment