Filtering by Multiple Attributes
For my capstone project at FlatIron School I decided to take the approach of building an app for a client instead of building one for myself like I had done in the past and who better to take on as my first client than my wife! She wanted a way to track the days that products and processes were successful while taking the weather into account and be able to see what other users with the same hair type had success with. Thus Curl Keeper was born.
In order to build the functionality she wanted I needed to serialize the data on the backend first. For this I used rails built in serializer.
@users = User.allrender json: @users, except: [:username, :password_digest, :created_at, :updated_at],include: [:days]
This allowed my to get all the user data while excluding extra data and including the day data that belongs to the user.
Next I needed to make a fetch request to send the data to my frontend after component is mounted to ensure I’m not executing functions on data that doesn’t exist which will cause errors. I used store to save all the data, used connect to send it to my props, and then passed the props into my hair type cards. So now I have all the user data and the days that belong to them. Now I needed to filter that data by the type of hair a user has.
state = {curl_pattern: "2a",curl_type: "wavy",porosity: "low",density: "thin",width: "thin"}
First I create local state with the keys of users attributes and a default value.
<h3>Filter by Hair Type</h3><form> <label>Curl Pattern</label><select name="curl_pattern" id='curlPattern'value={this.state.curl_pattern} onChange={this.handleFormChange}><option value="2a">2A</option><option value="2b">2B</option><option value="2c">2C</option><option value="3a">3A</option><option value="3b">3B</option><option value="3c">3C</option><option value="4a">4A</option><option value="4b">4B</option><option value="4c">4C</option> </select>
Then I created the form I planed to use to filter my data with.
To change to state using the form I needed to write a function to handle the form change and set the new state.
handleFormChange = event => {this.setState({[event.target.name]: event.target.value});}
Now I need to filter props using the current state of the form.
curlPatternFilter() {if(this.props.users[9]){ return(this.props.users.filter(user => user.curl_pattern === this.state.curl_pattern && user.curl_type === this.state.curl_type && user.porosity === this.state.porosity && user.density === this.state.density && user.width === this.state.width))}}In this function I first check that my props has data in it by checking that it is an array with at least 9 items. If this passes then I can move onto the filter function. Here we take the user array and check if the key and value of the state matches to the key and value of the props. If it matches then the returned array will all be users that also have the same hair type and shows the days they have added to Curl keeper and sort them by the rating the user gave them.
Oddly enough I’ve found this project more exciting and interesting than the apps I’ve built for myself. I really enjoyed putting myself in another persons mindset to figure out how they could get the most functionality out of the app. This is a project that I look forward to working on in the future and could see myself pushing it to production as much more than a portfolio project.
