3.5 Filtering the Table

After sorting, it's time for some filtering. And in this lesson, we'll do just that. Now just like we did for the earlier lesson, we'll start out by moving out the filter related UI elements into its own component. So let's start out by creating a file FilterBar.jsx which will hold our filter controls. Let's start out by copying all of the dependencies from the HarViewer into the FilterBar. Change the name of the class to FilterBar. Create our standard functions, which is the constructor and the under function. And here we're moving all the controls from the HarViewer into the FilterBar render function. We'll make sure we also move in some helper code for creating the buttons for the FilterBar. This is these buttons for filtering by the file type. So at this point we have enough of the FilterBar code brought in, so let's just start using the filter bar in the HarViewer. So let's go ahead and include the tag now, which is the FilterBar. A few of the things that we need to move out of HarViewer include the helper function to the creator over here. So we take all that and put it in the FilterBar. We also need to import the FilterBar inside the HarViewer, so let's go ahead and do that. Now, looking over here I can see that the underscore filter text change function hasn't been brought in. So let's go ahead and do that. I'll go back to the HarViewer, get the filter filterTextChange function, and put it inside the FilterBar. So at this point let's take a look at our browser and see if things are still working. And looks like there are no control errors at least, but the FilterBar seems to have gone below the table. It's just a matter of changing the order in our template. So that should be a quick fix. So let's go ahead and change the order, and move it up. And now if you go back and visit the browser, we should see that the FilterBar is in the correct position. So now that all the controls are loaded into the FilterBar, lets start handling the evens. In this case we have the input box for filtering by URL and also a row of buttons for filtering by the file type. Let's look at the input box first. So like we did in the earlier lesson, the FilterBar itself doesn't handle the event. Instead, it files a callback which will then be handled on the HarViewer. I'm calling this callback as onFilterTextChange and here I'll pass in the text, so that has been entered into the input box. And we'll do the same thing when we click on below the button for the file type filters. So here we'll just change the state so that the correct button is highlighted, and also file a call back. I'm gonna call it onChange and pass the type as the argument. Now since we're creating custom props over here. I'll also make sure we'll set the default props and the prop types for these properties. And as I mentioned earlier the prop types come from reactor prop types. Let's just make a constant for that. And the last thing we need to do on the FilterBar is to add the type property to this date. This is what is used to highlight the current filter type when you click on it. And by default this is set to all. That is show all the rows and all the file types. So now it's just a matter of going back to the HarViewer and making use of these callbacks. So let's go ahead and set that. So here we'll set the onChange and the onFilterTextChange callbacks. Now in these callbacks, we'll take the same approach we took for sorting. We'll simply start from state properties, in this case it will be the filter type and the filter text. And, as you know, when you set the state it forces a render on the component, and that's where we'll handle the filtering of the entries. Since we're introducing new state properties, let's go and add that to our initial state. Now the render function is going to be the funnel through which we'll sort and filter our entries. This has become somewhat of a common pattern in react where the rendering becomes the place where you manipulate your data and also do the rendering. Now currently only sorting is being done on the entries. Let's also introduce the filtering operation. And for that I'm gonna create a custom filter object, which you'll simply take in the state, the filter text, and the filter type, and pass it along into a custom function I'm gonna create called filterEntries. To do the actual filtering, we'll need the type and the text, and that's where we'll pass it into the filter. The filter entries function is rather straightforward. All I'm doing here is using filter function, which will only include entries that match the given type, or the URL contains the given text. So that change, you should have both sorting and filtering working on the table. Let's go try it out. And of course, something had to break, so let's take a look and see what's going on. It's most likely in the filter entries function that we just wrote. As it looks like, we forgot to pass in the empty string, in case the text is set to null. So let's go ahead and make that change. So here, if the text is null, we'll make sure we pass in an empty string. And with that change, let's go back and test. So now the entries are loading. And you can also filter by the type. You can type in some text in the input box, and see that the URLs are getting filtered accordingly. Sometimes [INAUDIBLE] flow the filter bar takes care of handling the evens on the filter type, and the input box. Files the call back, the HarViewer handles this callback, does the sorting and filtering, and then sorts the new entries on the Har entry table. So now that we have the filtering working, I'm gonna do one more little refactoring on the HarViewer which is for the sample selector. Let's mold it out into a separate component. Let's start out by creating a separate file. I'm gonna call it SampleSelector.jsx. Here, I'll pull in some inputs, create the class, sample selector, from reactor component. And then put in the stop for the deconstructor and for the other methods. Next I'll pull out the template code for the render method. You'll also get the corresponding helper code and the unchanged handler for the select box. We'll make some minor adjustments to the unchanged handler. Instead of handling the selection over here, we'll instead fire a callback. And as usual, I'll also include the default props and the prop types for the SampleSelector. Now back in our HarViewer we can now make use of the SampleSelector. Let's also import it in and then make a simple change to the onsampleChange handler. Now let's go back to our browser to see if things are still working and looks like there are no console alerts. I can switch between different templates. The filters continue to work. So things are back in action now. In the next lesson we'll continue to chip away at the Har enter table and render the timeline chart for the timeline column. I'll see you there.