Code a Podcast Player App in React with AG Grid - How to Build Application Tutorial Part 2

so welcome back to our tutorial where we're building a podcast player using ag grid and react and in this episode we are going to build a dropdown that has some of our favorite podcasts we're going to add some filtering so that we can see information at glance and this will also search through the description and we're going to add some pagination and just some general tidying up okay so let's take stock where are we so we've built a basic podcast player it takes an rss feed we click a load feed button and it renders the xml rss feed after parsing it into the grid with a custom cell renderer that displays the audio control so that we can play the podcast and if you want to find the source code for this it's at github.com a g dash grid slash react dash data dash grid and it's in the podcast player folder where we have a whole bunch of different versions but the main version is in the root and if you check out the project in any of the version folders you can do npm install followed by npm start and it will start up the application and that's what we're doing here so the first thing that we want to do is add some searching and filtering now in the associated blog post with this video i go through the design process of attempting to figure out how i'm going to do this so the first thing that we can try one of the easiest things to introduce in here is to add a filter on the title itself so in the column definition for the episode title i can simply add filter and i'll use one of the built-in ag grid filters a g grid text filter then when i save that the grid will refresh and we will automatically have the ability to search in here now that's nice and simple it's using the data that is displayed on the grid and we've introduced a search capability into our podcast in one line of code now we already have the ability to sort on the date but i think it would be useful to add a filter on there as well so we can see episodes between a different range and again that's very easy to do with a g grid i simply come into the date column and add a filter and this time i'll use the built-in date filter from edgy grid age date column filter save that the app should refresh and now we should have the ability to filter on published if i say greater than first of greater than january and less than april there we go and it's filtered the episodes within that range and i can easily see what was available at that point so this very quick and easy we've now got filtering in place for the title and the date but there's extra information associated in the feed with the description for the episode that we haven't rendered here now if you read the blog post associated with this video you'll see that i try different things in terms of trying to render the description in different ways but i found that the graphical user interface got a bit cluttered when i tried to do that so what i'm going to do at this point is simply add the description into the grid data and add it as a hidden field in the grid and use a quick filter to allow me to search on the title and the description so the first thing i have to do is get the description in my data so i will add a description field in here and i will do the query selector to get the description from the feed now that will pull in all the content from the description but that also includes html tags so i'm just going to add a replace that will use a regular expression to convert any matching values into an empty string and the matching values are going to be anything that is vaguely like a html tag and i'm not a regular expression genius i found this on stack overflow somewhere and copy and pasted it into my code now just to double check that that's working i'm going to very quickly console log that description just so that we can see it i'll just copy and paste this and delete this in just a second so if i run that let me inspect see what's in the console and there we go so we've got all the information coming through without any of the html tags so that's good now if i search on that it should be a little bit easier now agreed provides us with a quick filter function what this basically means is we use the api to set a quick filter and it filters all the rows based on any of the data in the grid so i need to find a way of exposing this on the gui and i'm just going to add another control in here to my main graphical user interface so i've got my feed url that will load the feed and let's add another one in here for the quick filter so i'll say div and i want a label and that's html for my quick filter and then we'll add the input field which type text with an id of quick filter to match the label i'll give a name and the value will come from a state and we'll handle this ourselves so handle filter change okay so now i better add this state and i'll add the functionality to manage it so let's add the state const and the state is the quick filter so we'll need to set quick filter and initially that will be empty string because we're not filtering it and then i'll write a handle filter change function which will simply set the quick filter to be the value of the target element if i fix my spelling so now we're rendering this on the screen but we haven't implemented the filtering functionality because we haven't passed it into our grid because we're going to use the grid api in order to do this so if i pass in a new quick filter property there it is then let's implement that in our grid now so far we've been using the grid in a relatively simple way we've added some column defs with some configuration we've fetched data in and added that into our grid but we need to start using the api so the first thing i will have to do is to add a state variable to let me use the api so i'm going to say const grid api and then i'll set the grid api use state nothing let's add some semicolons so now in the grid declaration what i want to do is when the grid is ready on grid ready then i'm going to call a function which will set up my state to let me use the api and my on grid ready function we'll take some params that the grid is going to give me one of which is going to be the api and i will set grid api to be params.api now there are two main apis that are provided by ag grid which is the grid api and the column api but at this point we're using the grid api and you can find all the information you need in the documentation so the next thing is having set all this up we will need to set up an effect such that when the quick filter changes or the grid api props dot quick filter then we will apply the quick filter using the grid api so if the grid api has been set then we will use the grid api to set the quick filter from the props if i save that hopefully i haven't introduced any issues we'll find it very quickly there we go there's my error so now we have a quick filter but if i search for testing i can see that it's filtering on the title but i know that there are more matches for testing in the description so why is it not matching the description yet because we haven't added the description into the column definitions and so i'm going to add this in as field description but i don't really want to render that on screen because it'll get a bit cluttered so i'm going to make this hidden so now i know the description is there and searchable but not visible and we have a bigger match for the term testing even though it's not displayed in the title so now i know it's searching the description as well so we have a much richer way of working through the podcast episodes without cluttering up the graphical user interface so now that we have so many episodes in here and we filtered it i think it'd be useful to know how many episodes there are and have some sort of pagination and the easiest way to do that with a g grid is to come down into the grid properties and add pagination as a configuration this is all we'll have to do then i can see if i refresh this that i have 156 episodes spread across two pages so if i type in testing there are 20 episodes that cover the concept of testing now we can see that we've added the pagination but the page size by default can be quite high i think by default it's a hundred so what i'm going to do is set the pagination so pagination page size and i'll set that to 10. that seems reasonable yep and i think if the titles were all there then the episode audio would fit in perfectly so 10 seems good i'll go with 10 for the moment or i could just allow the grid to choose how many to show with pagination auto page size and set that to true and the grid has chosen nine so let's let the grid decide what it thinks it can fit in best into the area and we'll go with that so i'll go with page nation auto page size and let the grid make the decision about how big the number of rows in the page should be now again i've only added a few extra properties to the data grid here but we've immediately made the application more usable with kind of minimal development effort so i think it would be useful to have more feeds in here rather than having to go away and find the feed url every time so i'm going to add a drop down into my grid and to do that i'm going to need to change my feed from an uncontrolled component to a controlled component so at the moment you can see that our quick filter is a controlled component i'm putting it in a state i've got a function to handle the change events with my feed url currently this is using the default value so it's being managed by the dom if i was setting the value i would have to manage this myself and it's getting to the point now where i'm going to want to add a drop down which is going to set the value of the feed so the user can set the load feed and to do that i'm going to have to bring it under my control so let's start doing that first so i will add a new state in here for const and this will be the input feed url to set the input feed url and so i'll set the default to be our current feed and try and make everything as backwards compatible for the user although there's no user as possible so now set the state no change yet because the state's not being used let's fix that there we go so now rather than using the default value which is what makes this unmanaged we'll make this use value and we'll make it use the input feed url so now i have a feed url that i can't change because i haven't put in any of the on change event handling so now let's add that so on change and i'll just do this in line for the moment so i'll say event then set input feed url for the event target value save that now i should be able to edit this which i can now if i load feed this won't work because the feed doesn't exist but at least we are having this under our control now which will allow me now to add a drop down that can also change the feed url so i'd like to have an easy to maintain approach for these urls so initially i'll create a state for this so const feed urls with a set feed urls and that will use state to set up an array of objects and we'll have a name for the podcast name so web rush because that's what we've currently got and the url which will be the feed url and because we're going to set up our select let's add another one so let's add in the so the evil tester show and that url is https feed.pod.co slash the evil tester show all right i should really have done it this way check the feed is correct there we go feeds correct now we've got the value in here so all that remains now is to add a select into our code so i'll add this at top with a div wrapper and i'll start with the label which is the html for podcasts and i will have to say choose a podcast and this is a select let's name podcasts id podcasts so that will match the label and we'll set this with the value coming from the state input feed url and whatever let's keep this consistent slash select so i want to have a an on change event in here on change so we've got the event coming in and i'll want to set the input feed url to the event dot target value let's fix the typo there we go then inside the select i will want to take all the feed urls map over them and so for each feed object that's in there i will want to create an option with the value of the feed url and because we're using react we need to set up the key which will be the feed url and inside here i want to render the feed name close the option let's format this a little bit and that's our map close that select all right let's save this and see what happens so now we've got a podcast which is changing the urls which is good and then if i load feed it will load in the feed for each of the podcasts and we can edit the feed and add in our custom feeds if we want to good so let me just add in a few more feeds so that you've got some good podcasts to listen to if you choose to so we add in the change log the js party and founders talk so by putting them in a array in state this just makes it a lot easier to manage and it also means that if i want to later on i can add a button to save any feeds that we add into local storage and then use local storage to populate the state and everything just becomes a lot easier to maintain that way and now we have a relatively functional podcast player we have a list of podcasts we can change the urls we can filter to search on the title and the description we've got pagination which will show us how many episodes there are even after we filter so we've got two episodes on testing there and we haven't created a lot of code to do this much of the work has been passed over to ag grid through the various properties on the grid itself for pagination setting up the data and we've used the api once in order to implement quick filter we have added code to person rss feed now really i should have this in a separate function or object to delegate to often make that easier to test but i'm just adding this into the use effect on the podcast grid so that when we add an rss feed we'll do it there if i was expanding this up into something else i'd move this into a new module or class or function and we're using the column desk to add a lot of functionality like the filters making it resizable the layout through the flex layout and we've added a custom cell renderer just to display the audio tag so edgy grid is doing a lot of the work for us here through a few simple properties and you can find all the code for this over on github so github.com a g grid slash react data dash grid in the podcast player folder and where we go up to in this video series is version seven so if you want to experiment with it clone the project or download the zip go into any of these folders npm install followed by npm start and it will start up that version feel free to take this forward add some more validation add some more podcasts add the ability to save or load lists of podcasts to local storage do whatever you want because the whole point of these projects is to experiment with very simple applications to explore the api to create a lot of functionality very quickly because we're offloading a lot of the work to edgy grid itself you can find more about 80 grid at a g dash grid dot com agreed dot com you

Channel: ag-Grid

Views: 263

Keywords: ag-grid, javascript data grid, react data grid, ag grid, javascript datagrid, create custom react control, custom react controller, managed components react, unmanaged components react, create a select in react, defaultvalue react

Id: rsamoG6bD4Y

Length: 20min 21sec (1221 seconds)

Published: Mon Oct 11 2021