3.3 Rendering the Table

Hello and welcome back. We're looking at the hard view JSX file, you can see that it has gotten a little longer. I think it's time to refactor this and trim it down. Let's start off by starting our Dell server to make sure everything's still working as we factor. Now trim down the [INAUDIBLE] JSX by extracting the grid component into a separate sub-component called our entry table. I'll create a separate file called, [INAUDIBLE] JSX under components and I'm going to move all the codes that concerns the table into this file. So, starting with the C.S.S. and then moving on to the JavaScript. Next we'll create the React component class over here. And then move the [INAUDIBLE] that we created in the HarViewer constructor into the constructor for the HarEntryTable. Now as I move the code out, I'll make sure I also delete it from the HarViewer.jsx file. Next let's take the render code and also the one that handles table resizing and move all of that into hard entry table. I'll make sure to remove it from har viewer as I do it. Now the code that we brought into har entry table has some extra stuff in it. I'm going to take out all of that. Let's also take the default props that we created in har viewer and move that to the har entry table. Of course, any references to HarViewer should also be renamed to HarEntryTable. Now while we do this, let's not forget the import for the fixed data table, which of course are now part of the HarEntryTable.jsxfile. So now that all the table related code has been moved out, let's import it into HarViewer and start using it. Let's replace our table component with the HarEntryTable and pass the entries into this component. And while we're at it, let's also remove all the code that we don't need any more. Now, entries used to be part of the HarViewer props, which we have now transferred to HarEntryTable. So in order to pass information from the viewer into the table, you create a straight property called entries and use that to pass the data down. Now, this is a standard pattern in react and ensures so the data always flows in one direction, which is top-down. Now with all these changes, let's make sure our app is still working. And of course something had to be broken. In this case we seem to have missed out the import statement for React inside HarEntryTable. So let's go ahead and add that. And with that let's refresh the browser and things are back in action again. Now our render function has definitely become smaller. But you know what, we can actually go further and make it even smaller. Let's take our all of the header components, the components which are above the table into their own function. And I'm gonna call it renderHeader. So now let's take all of the header components and then paste it over here. So now we can take out the table component from the renderHeader function. Now the render function of course is gonna call into the renderHeader function. So we can get rid of all of the header components that we had there before. And then to place that with a call to renderHeader. Now with that change let's revisit the browser and to see if things are still working and show they are. So now that we have leaner render function, let's switch gears a bit and focus on rendering the table with data. We'll start our by getting some sample hard files. And to do that let's revisit our best friend Chrome. Now Chrome has a built in ability to save all of your network traffic as a hard file, as you can see over here. So I'm gonna do that for the Facebook react page. And also a few of the pages like stack level flow and New York Times. I've already saved these files to the local desk. So I'm just going to copy them into our project. I've put these files inside the sample-har folder, inside store under source. To reference these har files in our app, I'm going to create a sample sort of JS file. That keeps links to these har files. We'll then use this in our drop down to switch between them. But making this at a global, we can reference this easily in our app. We can now require this file in our app.jsx and make a global layer level across our app. Now with this we can populate our select control which will allow us to switch between different har files. So let's go ahead and do that. It's inside of the HarViewer under header function. I'm going to create a bunch of option objects which will be the options for the other controller. And this will be populated from the windows samples. So let's go and do that here. Now note that I'm specifying the key property for the option tags over here. The key property is used for React and allows it to be har when it does [INAUDIBLE] on an area of equal objects. Now that we have the options, it's just a matter of including it with select, control. So now, if you visit our browser, you should have a select control that would allow us to switch between the hard files. Of course it won't do anything right now since we haven't handled the on change event. The on change handler is currently pointing to the sample chage function and it's kind of empty right now. What we need here is the currently selected value in the select box and to get that let's give the select control a reference with the ref property. To extract the current selection, it's just a matter of looking at the DOMNode's value property. To get at the har file, we'll loop over our window samples and extracting the one where the id matches the selection. I'll use the handy low dash function, _.find to get at the sample and then extract the har file from that. Now if we do find the har file we definately want to render our table with the data. If not, let's just reset the whole page to our initial state. Now as you know when we call set state on our component it intimately calls render. Which will then go through the cycle of dom dipping and then re-rendering what has changed. But down below they made a reference to the _initialState function. So let me just go and create that which sets the initial state for the component. Note that we're tracking the currently selected Har with the active Har property on our state. Now inside the render function is where we look at our active Har and actually extract the entries and render the table. And this is where we need to look at a separate component called the har parser. Now, the har parser is not really a react component, but more of a service. It'll be used to pass the har file and extract the entries. And these entries will be rendering inside of our table. Now by moving all of your domain logic into a bunch of services, you can keep the UI components oblivious of where they get their data. Now this is definitely a good pattern and a practice that you add up in your react net. Now let's get back to our hard file. Now we'll remember from our previous lesson that a hard file consists of a set of entries and pages. Or higher paths of service, they're essentially going to loop through this and create our custom entry objects and page object. Let's go ahead and do that. I'm going to put the har-parser, the entry, and the page files in the core folder. Let's first start with the har-parser. This service exposes a single object with the parse method. Parse simply takes a hard file, loops through the entries and pages, and clears to corresponding page and entry objects. Now, the reason why we're creating a custom page and entry entities is because the har file actually exposes a ton of information. And all we need is a very small subset of it, so this is what we capture for the page and entry. The entry is the core entity in our domain. In fact, it contains the bulk of the information that we'll be using to render our grid and [INAUDIBLE] chart. The entry captures the request details such as the URL and the method, the response information such as the size of the file and the mimeType and timings, which is used to render the timeline chart. Note the use of destructuring to extract this information from JSON and set the properties on the entry object. So the parser is gonna give us back the entries that we need to render the grid. So let's go ahead and use it. So let's go ahead and import HarParser and within our render function we are going to check and see if we have an active var. If that has a value it will render the grid otherwise it will render an empty viewer. So let's go ahead and create these functions. The render viewer is going to take in the var file, extract the enters and pass it down to the var entry table. The renderEmtpy viewer is just going to display a message stating that you need to select the hard file before we can display the grid. Now, here, I'm making a reference to the other component inside the interviewer. So, let me go to import that from the React bootstrap library. So now that we know when to show the corresponding viewer, let's go and update the render function to show the appropriate content. And finally, in the _renderViewer function, we can make use of the harParser, call the parse method, get the pages, and show the entries from the first page. So we can definitely show entries from the other pages as well. But for this particular app we'll just limit to the first page. All right so with that change we should finally be able to see some data in our grid. Let's go and visit our browser. Now right off the bat we can see that the empty viewer is showing up and you have no har selected. And once we do select a har, we can see the data populated in the grid. Of course, the values shown for these columns is not correct. And that's because the way we are reading these properties from the row object. Let's go ahead and fix that now. Now I know our har entry table, we have set the data keys for different columns. The URL size and time keys are definitely correct, but the value that you want to show in those columns is a little different and stored inside a nested properly. So, let's pull that out with a separate function called readKey. It'll take in the data key and give back the corresponding value that we need to show against that key. But for the URL data key I'm gonna use the value from request.url. For time, I'll use the start time from the time object, and for size, let's just stick with the size property on the entry entity. I'll also use the handy lower hash function _.get to fetch a property from a keypad on an object. So with that, we should be able to extract the character values for each of those columns. Now, the next thing we need to do is to tell the fixed data table that it should use the readkey function for each of the data keys. And we do that with the cell data getter property on the column. So let's do that for each of the columns. And with that change if you now check the browser you should see the correct values for each of the columns. So we have the URL size and the start time for the Timeline column. And that's all for this lesson. Let's continue in the next lesson where we'll add sorting to the fixed error table. See you there.