React: Sortable Responsive Table - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and today I'm going to attempt something that I haven't done before and I'm not exactly sure how I'm going to do it and I'm excited about it I don't know about you but I get excited when I'm going to do something that's going to be cool and useful to the user and especially when I'm not really sure how I'm going to do it because I know I'm going to learn something and it's going to be awesome when it comes together and happens so uh let me show you I'm kind of right in the middle of um kind of taking this stuff and making it its own component and I was going to put it in the UTS folder and uh because I'm going to use this in multiple Pages now so it' probably be better if it was separated out uh so that's an anticipation for what we're about to do and let me bring bring a window over so you can see so I did make oh that's no good I made the uh search uh function live so uh for now this is the alignment of the search if you watch the uh the show when we set this up there was a lot of debate over how we should align this so I'm expecting another input to be here in the near future we'll see how it goes if we do end up not putting something here then maybe this will change but for now it's right here and it works and we also added the the images are live they don't show up all the time uh when I'm doing local development but on katc.com the images show up at least one image there's only one image that's been uploaded that's big enough to actually be used the rest of them the width gets checked and it doesn't use them uh if they're not wide enough so what we're going to work on today if my all right I'll just show you over here for some reason it's not reloading uh but the live site will be fine so what I want to do on the events page down at the bottom right now I have this responsive table right so it works even on small screens because you know you're you get to scroll horizontally and obviously even when it get smaller you know still works not ideal if you on a screen this small but but it's definitely more usable than a normal table would be which would throw off everything and we'd have horizontal scrolling of the entire page so what I want to be able to do all these are pulled in from the WordPress API so what I think I should do what might be the easiest is I want these to be sortable so if you click date you can get it from right now it shows the events let's see so the events that are coming up the soonest are first so that's by default how everything's sorted which makes sense people probably want to know what's coming up soonest but there's a lot of other things you could sort by here so potentially you someone might want to sort by any of these things with the exception of Link obviously probably um the emails don't need to sorted by but uh I could see definitely these might want to sort by these although it kind of stinks everybody has doctor in front of their name because that's not is everybody if everyone's a doctor maybe it'll work out but no see so um it is going to kind of mess up the alphabetical sorting here uh since people have doctor but other than that you can see my point it would be nice to be able to sort this either you know alphabetic order reverse Al Bet order maybe reverse it so we see the events that are coming up the latest first I think location will probably be the most useful uh you know maybe somebody's not interested in traveling far so they don't care about events not near them so maybe they want to you know sort it by that the other thing I'd like to to do if I have time is have a search bar for for this so just like we had on the resources page they could search I'm not sure where I would put the search bar in this setup here it would be it would be a little bit more Awkward uh awkward looking I think to fit it in here so I have to give some thought to that but I can at least get the uh the functionality down and then worry later on about how I'm going to style that but that the search function could be super useful because you could potentially just put in the name of your city or a city near you and then get that or the name of a speaker that you really like and then they would just autop populate just like the resources so at first I thought I would just take whatever data automatically got pulled in uh you know on the initial page load from the WordPress API and then just manipulate that data to sort it differently but then I thought maybe it would be better to actually make another API call when we do a sword and I'm not I'm not 100% % decided on this but my reasoning being you the limit on how many uh how many events I can get from an API call is 100 so there may be some way around that limit but that's that's the limit I've hit with the word press API it limits you to 100 which is fine I you know you don't want to pull in a ton of data but you know for something like this it's not really a lot it's just some tech you know Json so I thought well if somebody you know if they really wanted to get a more accurate listing you know let's say they want to go in reverse alphabetical order well they want to see everything from these speakers uh so I don't I don't know not not just whatever the you know the first 100 that came up let's say there's 500 events in here I don't think there'll ever be that many but if there were 500 they'd be missing out on most of the events so anyway think about that let me know what you think on what would a user expect from sorting this um or is there a totally different way or would just the search bar be sufficient and I shouldn't even worry about necessarily about the Sorting as much all right I'm going to go and say hi to everybody in the live chat I just wanted to get everything out of the way uh for people that are joining maybe for the first time um just kind of let them know what's going on uh if you are join joining for the first time this is just me streaming projects that I'm working on uh for my everyday job so it's not necessarily a tutorial some sometimes it kind of feels more like a tutorial but a lot of times it's me just trying to figure out how to do things and everybody watching helping out with that uh so if you're interested in that stick around uh if not thank for joining in and maybe join a different time all right so let me look it looks like everybody's just saying hi hey everyone oh there's spoilers it says uh H hitarth I'm not sure if that's how you pronounce the name sorry if I mispronounced it hitar says want spoilers something new is coming to FCC free code Camp I'm I'm interested in that I don't know is anybody else interested I don't know what what spoilers it would be uh but i' I'd be excited about something new hey Andy ask what's going on hopefully you just heard my explanation it looks like you you asked that before I explained it so hopefully you got that also uh so Andy m is in the live chat he also does uh live streams so I don't I haven't really talked to Andy about it but I did check out uh a little bit I only had a few minutes the other day but I I thought I want to check out some of the live streams so I didn't watch a lot but I did check it out so if you want more live streaming uh check out Andy's channel uh on YouTube all right so we got one question in in the live chat um says what data are you pulling at the moment a limited number of events by date yeah so right now the data that I'm pulling is uh 100 100 events now what I did I I think I may have made this so that it doesn't show previous events let's take a minute and look at what the the code I did this a few weeks ago so I actually can't remember I know I had intended to make it like that but I can't remember if I did so let's go into events I'm going to come back to this in a minute uh but let's go to events and see okay so I'm filtering by date order by sending so I should look down where I'm actually using it maybe I have oh now I remember I did end up I ended up doing something maybe I didn't maybe I'm not seeing it here uh if you all see this and you could check out the uh the GitHub repo it's it's all updated at this point and um you can check this out as well the Link's in the description uh I also have links to what we worked on yesterday which was setting up uh prettier and standard JS which by the way is really amazing I'm really liking using that so vet submitted that pool request to set all up and I really appreciate that because every time I use it I'm just I I just love it even more um so let me just explain since I can't find in the code whether or not I actually did this here's what my intention was I have I'm OB obviously pulling a date here so I have two different dates that I'm pulling one is the displayed date so that's what you see here so this is the format that it was requested that the date be put in so that's that's how it shows up and that's just a text field that whoever's managing that content puts in there they can put whatever they want in there but that's not really easy to sort by right so I needed a better format for the date so then I also added a field that would give me the date in a format that was easier to use so I have that format as well and I'm not doing anything with it yet it looks like at least here but my intention was to only show events that were going to happen so any events that had already happened they wouldn't show up anymore um now I guess it wouldn't be ideal to do it here and to sort it here because that would be a waste of you know data being sent so the ideal place to do it would be actually sorry for all the scrolling around here um it would be actually here where I make the call so the I give these parameters for what data I want and then that way I wouldn't even waste time even grabbing data that I know I'm not going to use so filter by date but I don't think I'm yeah I'm not doing it there I'm not sure how how I do it so so I have it set up so that it could be done in terms of the data coming through and I'll show you what it looks like let's grab we'll take a look at this the raw data that might be a good place to start and then we'll all be on the same page in terms of what data we're actually getting and um you know how we can manipulate that to do what we want it sounds bad when I say I'm going to manipulate the data like like I'm doing something wrong to it but I'm not I'm just just going to add it into the site um event all right so here's the data that I'm getting we have a title we have so here's the date this is what I was talking about and it's easier just to show you so we have two dates there's the display date and then we have the actual date and it comes in this just in this format um which is it's a nice easy format and that you know it's I can just sort on the date very easy I don't even have to convert this or anything like that which if you've worked with dates and JavaScript it's not always the most Pleasant thing to do but I don't even have to worry about that it's just one number the higher the number means the later the date so what do you think I'm going to go to before I I I do this I make a decision on this I want to go to the live stream I'm going to see if I've gotten responses to any of the I think I've asked several questions over the last couple minutes so I don't want to get too far ahead of myself I may have had some really good ideas in the come through in the live chat Oscar says hi from Colombia hey how's it going thanks for watching uh Dennis ask is that Dennis or Denise sorry if I mispronouncing that d n i s uh what what do you think about async await uh promises I'm actually using um await like async await stuff here um I don't think I'm as I'm knowledgeable enough about async await and Promises to give a really good answer I will say the few times that I've used them I've really liked using them basically it's always in the concept context of using fetch uh that I end up using async await and promises and stuff so I like it but I don't know enough about it to give you any detailed explanation of it but it's definitely easier than like having lots of callbacks and things like that uh Alberto says I'm always working using database backend and still don't have much information about WordPress API but maybe a drop- down for each row to filter uh on dates the filter would be a date range names would be a list to pick from event titles and locations huh it says possibly too much functionality for a small feature I hadn't thought about before let me think about that for a second so let me bring this over so we can just get the visual so we're thinking there would be a drop down for each row and then in that drop down they could select something either a date range or something else in those rows to filter by H that that could work that could definitely work I could populate the drop downs based on the data that I get from the API so everything that was in here could be in the drop down I could do a check and if it if it equaled something that was already in the drop down it wouldn't put it in twice that could work that would it would be you're right it would be a lot of work it might be overkill for this feature but I I think in terms of the layout of the site this is kind of tucked away now you know it's at the bottom of this page which I realized this this is the main event that's being put on by this um kakal Institute so in terms of conferences this is uh this and this are their main conferences so this is more of a collaboration I think with another department here but you know this is their main conference so they do want to highlight that but really for from a user's perspective this is probably going to be one of the most useful parts of the site I would say this and the resource section that we've been working on uh for the last week or so so it might warrant a little bit more work I don't know let me know let me know what you all think about that or would it you know we could potentially do something similar just with a search bar that auto suggests things and we could populate the auto suggest from these values as well with that be cleaner I'm a little worried about the Clutter of dropdowns all right let's um I actually I want to get into some codes so there's definitely some stuff that we can do without making these decisions yet so I want to get in there and do some of that stuff uh to prepare and then that way we'll get some things done and you we'll get to see some coding since I claim to be live coding and so far I've just been live talking uh so we'll do some of that first and then we'll come back and make some decisions on how exactly we want you know visually this to look and for people to be able to search but I mean I think it's pretty much agreed at least in my mind I somehow they're I want users to be able to filter these uh or sort them in some way to find what they want and more easily than having to actually scroll right now there's not that many but eventually it could be really difficult to find what you want not a good user experience all right so here's what I was thinking we need to set up so I have I know this is a little bit smaller than normal uh and that's on purpose because I have had these side by side and I needed to see what was going on so I will zoom in and just just a few seconds here uh but I have resources on this side because resources is now going to be the model for how we do everything else because we had a lot of refactoring going on here and some pool requests related to this so this is kind of the most polished way to do things uh we're doing we're not using uh jQuery for everything here we're doing it you know more more of the react way actually I just noticed I had my phone right next to the mic so I apologize if there are any like static sounds I'm going to move it farther away now let me let me know if you hear static and then I'll I'll move it like to the other side of the room if I have to um so anyway this is going to be the model so I've already started to bring over some of that into here so if uh I will kind of move this over make this text bigger so we can all see so instead of just saving this data uh to props and being done with it now we're going to go we're going to set the state and we are initially going to take this data that's that's a props and we're going to use it to set the state and then we're going to down here man I I can't wait until I get all this pulled in through the API so I don't have to scroll through it um but instead of props here it's going to be state so I can actually let's change this to State I think I have enough code in here for this to work at this point change it to State and my Dev server should be yeah it's working now so we can see on Local Host it did work all right so now we're we're grabbing from State the reason that that's important if if you didn't see what we did with the resources uh if you didn't happen to see that that show uh that's important because now every time we change State all of these will automatically change okay and that's that's the react more of the react way to manipulate the Dom is through Changing State and not as we were doing on some pages using jQuery all right so so that's that's done so that's basically converted to set us up so that however we want to sort this all we have to do is change change the way things are in state and then all that will fall into place um we want to we want to add this so assuming we're going to make some API calls after get initial props I wanted to add this section here which we used for our API calls um whenever we're doing our live search in the section for resources I want to extract this out and make it its own component so I've already extracted some of this out I'm importing isomorphic fetch now I realized when we when I first talked about this I was saying something about I don't know if this will work uh because I don't know about how it how it uses basically polyfills for Fetch and everything I didn't know if this isomorphic fetch only worked in the server side but then when I was doing this again I thought that was actually kind of ridiculous and didn't make sense what I was saying before because obviously whatever is going on here with fetch works on the client side and the server side you know this works OB otherwise our client side routing would not work so that definitely works so I figured maybe I ought to import isomorphic fetch because maybe maybe and I don't know this yet I could have tested it that's what's necessary to make fetch work either way on client side or server side so I did import that if you have any insight to know whether or not I need to import it here just let me know but I can always take it out but for now I'm going to import it so everything set up here I think it's all set up I need to pass a URL yeah I'm passing the URL in here to get and I need to pass get you yeah I need to pass the URL in as well here and I did have a question about the syntax I don't know why so when I'm using an arrow function here I don't I'm assuming here I don't need to put the uh parentheses around it right is that is that a correct assumption since I didn't do it here and it's working I know there's a delay in the live stream so I'm not going to get an answer right away but I'm going to go back to the live chat since now we've come a little bit further I want to make sure I didn't lose anybody or I didn't miss a good suggestion and if you have any questions feel free to put it in the live chat I think I keep calling the live chat live stream U sorry about that put it in the live chat or um if you can't stick around and wait for the answer put it in the comments of the video or direct message me on Twitter I know if you I say that all the time if you've been watching but I mainly saying it for people who might be new and watching for the first time all right so okay so this is a continuation of the the question about asyn AWA promises um says I saw you use promises and get Json function but don't use async await there okay yeah actually that is a good question basically um the reason I didn't do that is because and this is going to be uh this is going to make me sound like a noob but I'm obviously if you've watched any of my other episodes you know I'm not afraid to look like a noob this is how it was done in the documentation for next it had all this kind of pre-made so this has been adapted slightly to my needs but I this was from there so I didn't mess with it and I used it this I grabbed from a previous project and I knew it worked so I grabbed it and I didn't really modify it too much the only thing I modified was I used Arrow functions so that uh when I use this inside of here it would be uh the write this which now that I'm extracting this out I'm not even sure if I'll have the write this anymore but we we can test it and find out uh so the the answer is I just hadn't even thought of that I hadn't thought of why I would use it one way or another I just knew that they worked and so I kept them like that and um didn't really mess with them too much so that's that's the honest reason it's not a a great a really good reason or Reason to makes me look good but that's really why I didn't use async or a weight there if someone else has more knowledge about when to use async a we and when to not use it please uh you know put that in the live chat uh because i' I'd like to know more about it as well I think that's how it is sometimes I don't know if it's like that for all of you but for me certainly sometimes you get you grab some code you know it works you know enough about it to modify it to your needs but you still don't completely know why it works I mean I I think that's it I mean well think about I really everybody does that like think about all the packages that projects load from you know all the the node modules and stuff you know I don't know of anybody that knows what everything does and why it does what it does uh but we all still use it so that's what's going on there basically is I know it works I'm not exactly sure why it needs to be like that all right so Andrew asking and what do you have to sort so maybe I don't maybe Andrew's getting in a little late basically we're sorting this so we're going to sort by date would be useful to sort by and lo date and location are going to be the most useful things to sort by presenter maybe but I could see presenter being more like um something you would want to search for especially because we have doctor and front of a lot of names so that just messes up our alphabetical order right now I could maybe try to ask uh the person that's inputting all this data in WordPress to maybe put a comma and then doctor so we could but even so like we still have first names ideally we would have last name comma first name comma and then title but that wouldn't really look that nice so that might end up just being something that's searchable so in any case we want alphabetical order for this and then we want to order by date for this and possibly alphabetic order for this as well um Dr Pavo says hi Jesse as the title says find the nearby event maybe better search bar for an exact request and just uh button something like show nearest event used geolocation that's a great idea that was my initial idea when um when the people who I was making the site for requested this section and it said find a nearby event I immediately thought geolocation but that's not what they had in mind so this is one of the areas where I kind of delivered pretty much exactly what the specifications were but I had intended if I had time to do more than than what we'll say the client in this case but really they work at the same organization that I do um so yeah I agree it makes if you're going to call the section find a nearby event you would expect some sort of geolocation or at least some place where you could manually type in your address or something like that so that's I'm not going to work on that today because you know if people came based on the title of what this is going to be which is being able to sort a table data in a table and react and I'd rather work on that now and then save the geolocation thing for another you know maybe tomorrow but I think that's an awesome idea um let's see uh I had a question about from uh I don't know if it's Michael or mall I'm not sure how you pron m i c h a l um what's the reason of doing of going with fetch as opposed to a library like axios Patrick gave a nice answer to that um fetches a new shine this is Patrick's answer fetches a new shiny way to make things simple simple is the reason those libraries came about fetch is built into updated browsers uh so yeah yeah that's a great answer Patrick Yeah fetch fetch is like is is now the newer browsers it's it's built in so like it's it's more lightweight you don't have to add an extra library to do the same thing you just do it with Fetch and it's it's easy I mean obviously you could see from you know from how it is here it's it's super short it's really easy way easier than trying to do it with jQuery or even just straight xhr um so that's that's why I use it and with the polyfill older browsers are fine too so you can pretty much use it for most projects yeah Patrick says I think isomorphic means work on client and server in this context yeah definitely Patrick says single argument doesn't need parenthesis good to know all right all right so Andrew linked a a design for it looks like better data tables so maybe I'll take a look at that I don't know Andrew do you want me to take a look at that now or should I just uh check that out later uh so anyway I'm going to this should work then assuming that I'm doing the correct thing when it comes to this uh then this should work so let's go Ahad and save this and wow where am I at projects I'm going to save this in util so should we just call this I just call it fetch um do I want to yeah I'm going to go with I was just checking to see whether or not the other uh component in here was uppercase or lower case so it is already lowercase so I'll just go with that so let's call it fetch. JS whoa that was weird um if you didn't see that text it said the editor is not responding so that would have been bad oh excuse me sorry to sneeze um yeah that would have been bad if my editor crashed right in the middle this uh okay so what am I getting all these yeah I haven't I'm going to get weird stuff happening with uh with my editor as far as the hints go because I haven't updated my packages to reflect the stuff that we're doing here um import moric fet I'm definitely going to get rid of all these soon all right so we're going to save that and now we need to to test to test this I'm going to edit this uh resources file and we're going to import what do we need to import we're going to call sorry I'm just trying to remember which one I call First we're going to call get Json and then that's going to call get so what I want to grab from there is I'm just going to copy this since we're going to use the same basic format here what I want to get is the function get Json from Fetch okay and we don't have to put the dot JS obviously uh you could see here um and that should be that should work cool so I'm going to save that and I'm going to bring over resources Let's see we now if I search this should work so let's [Music] go nice it does work great all right so now actually I'm not even going to look at what's in the live chat right now because I know somebody noticed this and is trying to call me out I should have removed all that to make sure that it really was working so now I am removing it I'm going to do uh empty cach and refresh just to be sure that I'm getting rid of all that now let's try it okay now it's not working so um oh thanks guys just saying bless you from when I sneeze thanks guys um so we have a c from uh J Steve Martinez says fetch has no support on IE that's true yeah there is no support so you want to use a poly fill if depending on what you need to support if you need to support older browsers use the polyfill for fetch uh to have it work in older browsers so I have used fetch before with the poly fill and gotten it to work in ie1 I didn't test it any further back than 11 but it it does work all right so I'm going to check out Andrew is saying that this he sent is a good example of design for a table so let's check it out oops maybe I'm not getting it I got a 404 when I tried to type that in what did I mess up um yeah I'm getting a 404 so Andrew I don't know I I tried to type in that link and it's not working for me um yeah that's what I did Andrew saying change the star with DOT that's what I did I replace the um I did replace the star with a DOT and whoa what did it still 404 yeah okay so Sebastian is getting a 404 as well so it's not just not just me I thought I was doing something wrong um all right so let's troubleshoot and see let's see what's going on I guess it's not like I don't have to get this working right now so re really we could skip this and just work on it later um and then just get on to some more like the Sorting uh stuff so I can throw this back in here and get rid of this for now and work on this later and let's just throw these in here oops thought I copy these I guess not there we go so we'll just throw those in there for now obviously it would be better to have these separately so we don't repeat ourselves in multiple uh multiple pages but uh for now this should work so what we need to do for now let's just have let's do a reverse date so let's see if we can reverse the date field because that should be the easiest thing to do we're going to have Let's find let's find where we have the date let me uh let me describe to you what's going to happen here so we can go through the steps to make sure this makes sense logically so what I'm going to do is on the date I'll bring it over here so we can all see it so where it says date here we're going to have an onclick uh event handler there so onclick it's going to fire off a call an API call that is going to grab this data and it's going to basically use the same URL except it's going to order by uh descending instead of ascending all right that's why I'm starting with this one because it's going to be so easy to to do at that point it's the state is going to get reset with this data that's now sorted in a different way and then that's going to change change the order of these does that make sense to everyone all right so we're just going to make uh function I'm going to make the function first before I even before I do the click uh the on click because that's not really a big deal uh so we're going to make the function and all we really need is when we do this is to grab we just need to make a call uh an API call so I'm actually going to grab a lot of what we did over here just so we don't have to type it out again because it'll be very similar oops so this is already a lot of what we want to do here we'll just have to change the uh the parameters in for the API call all right so basically we're getting you know this is the URL and these are the parameters which we're now going to change to this and we're going to change this to descending so we're going to change the order and then so we're making the API call it's going why did I split this in between I don't want to split those up okay so we're making the call here and then that's going to use fetch within here it's going to return us Json which is great and then we're going to take that data that Json data and we're now going to make that the state we're going to set that to data in the state once the state is set then that will trigger uh all the components you know to render down here so I'm going to save that and now what did I call this we call it sort date okay so let's go down and find where we actually have the word date here we go so let's [Music] goop on on click um and then this is how we do we just call it is this how we called it um what's it Patrick says why are you not importing getjson and events. JS I'm not sure I know I know Pat Patrick saying dry man dry um yeah so I want to do it like that but when I tried it I don't know if I maybe I did it on my other screen and so you all didn't see it but when I so I put this in this separate file here and I tried to import it in resources as a test and it didn't work I don't maybe I didn't uh say that out loud and just thought it sorry about that so it didn't work so instead of spending time trying to fix this right now I wanted to get more like to the point of uh the topic I I don't want to be uh false Advertiser here since since I um made the title of the video about sorting a table and I tweeted saying that I was going to try to sort a table I wanted to get to that if we get this down uh I almost said if we get this sorted um but that would have been just trying to be funny but um uh if we get this down then I can go back and try to get this so Patrick I totally I totally agree with you and I I want to do that uh so it's gonna happen uh but I just wanted to get something uh accomplished and not not spend my time on something that I didn't absolutely need to be to be working right right here uh so this should work right I know we had a uh I I vaguely remember that having some sort of trouble with whether or not what was I doing whether or not I called the function on and where did I do this on click oh well I guess I'll see it in a second okay so right now let me pull this over right now nothing happened when I click that so do I need to call this oh this I just have to put this in there still nothing do I have to do it like I didn't think I had to put that but yeah know this start get say something I got a weird error here saying this thought get Json is not a function yeah I have it in there don't I right oh shoot I need to use an arrow function function for this okay we just went through this like last week so already I I'm forgetting so we need to use Arrow function if you're not familiar with arrow functions they newer thing uh it's es 2015 or sometimes called es6 in this case the reason we want to use an arrow function is because otherwise the value of this is not not what we want it to be okay so we need this to mean like the context of this basically this entire um component here right this or at least this section of the component so that's why we did this so before when I clicked it went through here but it got to this point and it said I don't know what get Json is okay because it was looking just within this scope so that's why we use the arrow function and you you actually end up using Arrow functions quite frequently in react at least I I've been having to use them frequently and it's the same same concept here when we're using this as well so um I'm sure there are other benefits to using Arrow functions but for our purposes right now that's the main benefit that's why we're we're using it so I've saved that and let's check it out so we've gotten rid of the eror that's a good sign oh yeah and it actually did it did what we wanted so I want to refresh that so we can see it happen uh okay whoa oh shoot because I'm calling it um I knew I I didn't have to put that on there anyway if you're wondering what I'm talking to myself about here originally I didn't call that there but then it didn't work and I I thought hey it's not working cuz I didn't do it right but that's probably not what happened so anyway it was just being invoked at least I think let's test it out and see if that's in fact what did happen okay good so when I click this we should see the switch yep there we go awesome so we started with events in June being here and going further uh down the timeline you know further ahead in the future now we're starting with the latest event and working backwards so that works it works like we wanted to so um so since that works I'm going to go to the live chat and just check out make sure I haven't missed anything important and then we'll see what time it is all all right we've already it's been like almost an hour uh to get to this point so I'll see maybe we'll do some more obviously we want it on a second click we want to be able to sort the other way as well so think about that for a minute while I go through the live chat I'm wondering if Here's my thought this was what I was thinking when I first made this function what I'd probably do is somehow just do like have some variable it could even be a Boolean or something that gets check to true or false uh when sort date is run and if it's true it these params will change to either be ascending or descending so I don't have to write another function that does this I just switch this function in or out so it would accept um yeah I don't know somehow I would switch that off that's what I'm thinking if you have a better idea please let me know uh so let's catch up here with the live chat that um I was reading I had some some other suggestions here for trying to get that article to work that Andrew had linked to so I'll have to I'll have to check it out all right I'm going to copy and paste again this this new link that was sent yay that worked this time so cool cool it looks good I'm scrolling through this on my other screen here this looks really cool I am going to look through this after the stream and see uh I'm always I think I mentioned this before but I'm a little bit restricted in terms of oh let me bring this over like in terms of layout like a lot of these decisions as to how this worked like to make a change really like required a meeting and discussion so um uh so some changes are probably fine and I could make it and it wouldn't be a big deal but some changes may require like more meetings like would make the change and then get an email or a phone call shortly thereafter and so if the change is like for sure like needs to be done would make it so much better then I'm I'm down to do that but if it's not really going to be a huge benefit to change it then it's probably not worth it to go through all of that so just so you know if you make a suggestion even if it's awesome I might not use it and it's not because I don't think it's awesome it's just because of that because of other factors so um so don't don't feel bad if your suggestion doesn't make it in it's not it's not exactly up to me what makes it in and what doesn't all right it looks like I didn't really miss that much in live chat I did a somewhat decent job of keeping up with it uh Patrick does mention the arrow function lexically binds this to the parent scope that's that's how you say it so okay thanks Patrick so Patrick has given a very accurate uh correctly worded definition here uh for what I was trying to say say with this so so I'll read that again just because it was so good the arrow function lexically binds this to the parent scope so all right Patrick says I feel like you should be using state state for this so do you mean is that in reference to me saying something about I needed to go both ways like to switch the date and I was talking about some sort of variable that I would use like a bullion or something if you're talking about that let let me know if you're talking about something else um Patrick says thank Scott Allen for that watch the video about it yesterday so his his Aro function uh statement there so cool I mean I know like going through uh what was it the book uh is it you don't know JS is that the one that's on GitHub and is is totally free so I remember one of those books or something I remember getting the official definition at some point but it's hard to remember okay so all right so J Steve Martinez says sort date is getting the data you should already have in your state um are you meaning let me see are you meaning that BAS basically I already have all this data in the state from before so I don't need to make another API call so let let me know I think that's what you mean let me know if I'm wrong about that Patrick says the fact that this table can be sorted means it has multiple states keep this stuff in state and let react render the Dom based on it okay so let's see okay and um Jesse o OA says does nextjs win in production have an index.html file I encountered an issue using next how do you deploy with no index.html file um no I don't I don't think there's so you would need to deploy it to something that runs node uh so node can can run an index .js instead of an index.html uh so that's what you need so um it may depend on where you're deploying it to as to what what has to happen um I don't know maybe uh if anybody in the live chat has a better answer uh please please add to uh to what I said but um could you explain maybe more about what your production environment is like what what are you running um in terms of the server and then maybe maybe I give you a better answer uh okay so back to back to the whole state thing help me out here so basically the state she saying keep this stuff in state and let react render the Dome based on it uh that's okay so Jonathan has just said basically what I was kind of thinking here um can't we just sort the data so do this data sort so yeah actually I i' I've thought about doing that I think I explained at the beginning um whether or not so I had kind of two options either just sort the data that I already have which will work fine for now because we don't have that many events or make a separate API call the reason being when I make an API call at some point when we get lots of events I'm not going to grab every single event with that first call so I'm not actually going to have all the data um saved in state like right off the bat so the idea what my thought process was is what a user expect you know if they if they hit this date here and let's say we have 500 events and I've only loaded 100 events they're not necessarily going to know that I've only loaded 100 events if I'm only sorting the data I already have then they're only getting you know a small number you know uh what is that if I had 500 they're only getting 100 they're only getting a fifth of the possible events now the reason I'm saying 100 is because in the WordPress API there's a limit on how many of the the post types you can grab um how many particular Post in that type and the limit is 100 I'm assuming there's some way around that I just don't know it right now so I was based on what I've have right now that's was my thinking for making a separate API call so anybody have any insight on that you know maybe I'm thinking too much about this and it would be fine to just sort what I have but I expect at some point that there will be quite a few events in here uh I don't really know what to expect exactly I'm not I'm not getting this data and I'm not entering this data in so uh I'm just not I'm not sure maybe maybe there'll never be that many events but I'd like to be prepared for that okay so jonath said Jonathan said that makes sense okay all right good yeah I kind of like my first thought was simpler and it seemed a lot easier I'll just sort all the data that I already have uh and potentially that would just be that would be faster anyway it already happens pretty fast so I'm not worried that much about speed but um all right so that's why I'm making another API call it's not going to be that easy I think with everything as the date the date's the easiest thing to sort on but uh that's the basic idea so I think before I end this video I wanted to keep the videos short like around around an hour so since there's not a lot of questions I I think I'm going to finish up with at least this portion so that we can when we click on it again it takes us back to the initial state so I'd like to finish that because I think that would give if anybody else wants to like watch this and Implement something similar if we finish at least that one that would give enough info I think to repeat it with multiple rows so let's try to finish this up and then I'll end the video normally I do you know kind of like an actually pretty long Q&A session at the end but there's just not a lot of questions so uh we we won't have to have to do that so Patrick says H okay well you want to conditionally sort based on the current state of the table you need to store that in state also don't retrieve the data over and over if the user clicks date again okay thank you for the explanation that makes perfect sense so Patrick's Point here is so I had initially when it loaded I had all the data from this API call saved in state and then I overwrote all that with everything in this API call now when I want to click that again I'm basically going to make this API call again which doesn't make any sense why not if I've gotten this data once why not keep it stored so that does make sense and Patrick let me know if that is in fact what you meant I think it is but if not uh let me know so the uh the thing is it's not enough for us just to keep making these API calls again and again because that's a waste uh although we will be caching API calls so technically it won't it won't necessarily require like a search through the database on the WordPress end but still it does make sense it it' be better to just keep it state so let me think I'm just thinking about how how I'm going to do this so that I can keep things inate and here's what I'm thinking let me know if this makes sense or if you have a better idea so basically I'm still going to do this at the beginning this this is going to be saved to data right in in state then when you click to sored before this gets stored to data I'm going to basically take what's currently stored in data and I'm going to store it in some other variable so I don't even know maybe I'll call it old data right now I don't know there's going to be a better name probably but that any name will work so basically everything that was in data now gets stored in old data uh and so it we still keep it all and then at the point when I want to switch back I just take what's in I can take what's in old data and move it flip it back up uh to data and just switch switch them out basically uh so I keep both of them now it it becomes more complicated when I add this to the other rows and do I want to keep every call so I may have to yeah it's I certainly could keep every call and just make different um you know different sections within the state you know to hold them all does that make sense oh okay Sebastian says save the sorted data in sorted data oh and I got some other I I got some detailed advice here so let me read through this uh Pat says so grab ascending once grab descending once and then render based on state all right awesome so it looks like I I did get that right so Alberto says for name if you're pretty sure that the last name will always be last you could do sort by like current val. split and okay so you say I can split it I'm actually not certain that the last I I'm not certain of anything concerning the the name I could probably like suggest a naming convention and have it right there in the instructions for whoever is importing it in so assuming that they follow the instructions maybe I could have some certainty that that would be it so maybe all right so let's let's get to this let's take a crack at this saving stuff in state and I'm going to I'm actually pretty excited about this because I mean this kind of gets at least for me this kind of gets to the thing that's cool about react uh is you know changing of state and having things render on the page very quickly right that's that's what's awesome about react among other things um so being able to manipulate things like this is what I'd like to be able to do uh better than I'm already doing it so because I need to move out of building things like this in jQuery to building things like this in react which is much preferable to the the mess that usually happens when I try to build this out in jQuery which which starts out very simple and and nice and then as features get added it just becomes very hard to maintain so let's just let's just kind of try out um let's [Music] say for now I am going to use use just the the silly name of old data um no that's not what I want I want to set the state so this set State and I want to use let me want to use I guess I can just call I I will call it old data so stop me if I'm I'm doing this wrong but I'm going to use old data now oops just going to use data right that's what needs to happen um and then now this gets set so that'll be safe so that's the first step and I've just saved it and I've gotten no error messages I have it up on my other screen so that's good sign um now we need a way to switch it back so how how am I going to do this let's see if I could just do um I'm I'm blanking out here sorry sorry I'm actually um don't forget to set up the default state oh okay Sebastian says why not make both API calls on page load and then save them to State then make the button just change what is displayed uh pulled from the state that's a great idea however at least I probably could do it on component amount so I couldn't I can't make another API call here at at least I don't I've tried before and it's come up with errors so there's I I assume there's some way to make multiple calls here so it's not going to be here but what I could do is on component did Mount I could do it then would that be preferable ought I to make all the API calls that I need on page load or should I wait uh because a user may not ever even click to need that would it just be what do you all think would that be would that be preferable because if a user did use it it would be faster or would it be more of a waste of bandwidth because I'd be making lots of unnecessary API calls I'm not I don't I don't really have a decision one way or the other at this point I'm going to think about it so let me know okay so Patrick saying set up the default state do you mean um like here I need to set like old data up here and then have it do this I'm assuming that what you meant okay so this that state old data equals data uh so we've got that oh now I know that's what I need to do I should have wrote in some comments what was going to happen so I wouldn't forget uh that's what I usually do but so basically here we need to have um uh check what the current stay is and change data okay so basically I need to figure out which way it's sorted ascending or descending and then change the data so I need to flip this data around one way or another um but I need to know I need some some way so what did I say earlier I was just going to have some some check like um so we can make it actually what if we had I here's this is my idea what if we also added so let's say for each row so so basically we have we have data that's always going to be what gets rendered there is whatever is in data but then for each row we not only have you know old data and then I'm going to change it so this will end up being like date um ascending date descending we'll probably have that so let's just do that now since that's what it's going to be date ascending and then date descending and but then also we're going to have um date um current state does that make sense is that too much uh because this again end up being like repeated for several of the rows uh but my thought is eventually we could have the ascending and descending both saved to these and then the this will just basically say whether or not it's ascending or descending and that doesn't have to be a value that could end up being a um just a true or false right so um I mean this it could maybe be something like is date ascending true or false right I don't know this seems more descriptive to me of what it's actually doing though let me know what what you all think I don't need that um okay so what it what it will do then is check so too many commas in class I think he's Jonathan just said too many commas I think he was referring to this last comma that I just took out so um all right sorry I'm kind of like really slow it's actually super hot here and I'm literally just like sweating and sweating I don't want to turn my fan on cuz it's going to mess up the sound for the video but uh I'm like dressed up and dress clothes and everything for for my job and I'm just like dying here so uh actually I'm going to I'm going to get some water hold on a second I just I don't have to go anywhere I'm just going to kind of pour it right here okay all right cool jonis Jonathan said you got it that's what I that's what I thought it's tough cuz there's a delay when we're when we're doing this so I think you know sometimes there is like a little mixup of of things Sebastian said it's 31.5 degrees C uh in his room which I'm in the United States so I don't really know how hot that is so and even know what that is in Fahrenheit I could look it up real quick all right so that is really hot that's like almost 90 Dees Fahrenheit for those of you in the US um so I actually use celsius and the metric system when I'm cooking but then for the temperature I use Fahrenheit and that's I don't think that's common to use it for cooking in the US people still s in fahren height but uh all the cooking shows that I like are all usually um from from the UK and so they they use celsius so anyway let's get back to this so Sebastian he he feels my pain right now because it's also super hot where he is um okay so I still need some way so I have these set up at least a place to store what I want to store but I still need some way to set that and then and then check it so actually the initial state is is always going to be ascending right because that's what we're loading first so the initial state for that will be ascending so I guess I could just put I could just put it in there I mean all I to just put it right there okay we just had a bunch of stuff in the live chat I'm going to check um Flint flank I'm not sure how to pronounce f n c ke um says old data could be an object that holds the query params that were used to get the data from the API so you can specify what old data exactly holds and you don't have to do the same API request again okay so it could hold the query it could actually hold the pams okay all right I'm just sorry I'm just checking out the um uh the code that was just put in live chat just to see see what's going on there okay I'm wondering actually all right I just had an idea sorry if this is annoying you I keep having ideas and changing things but um if this if this what makes sense this might actually work better than whatever I was trying to do right here so I have set it up before and I have it set up basically I've set up caching of the API calls like when I did something like this but I did it with all jQuery stuff I set up caching of the API calls so that obviously I wouldn't have to make more requests and it was set up so that every time an API call was made so basically this portion had a check inside of here and so it checked to see if those query programs had already been saved and the reason I thought about this is is because uh flank just had the suggestion of saving the actual prams along with the data so that got me thinking like well why not do that and so basically the it would be key we could essentially have key value pairs stored up and the key would be the query prams themselves or in fact the entire URL would be the key and then the value would be the data so that each time I go to make the API request it checks to see if it's already been made and if it has been made instead of return making the API call it just Returns what was saved and the uh key value pairs it could be saved I think in when I did it before I actually saved it in um in local storage and I gave it an expiration as well so there was there was another piece of data there too but I don't know does that make sense does that make more sense than the way I'm doing it right now uh to kind of like basically simplify things so that I don't have to spell all this out uh beforehand and it just kind of would build everything up and store it I don't know let me know uh I'm just wondering any so what I just described I'm just wondering like would that be the react way to do things uh like I said before I used local storage to do that but is that not the react way to do it would the react way to do it in fact be to just have it all set in state and and and do it like that and not have not hit um local storage not save stuff in there at this point I think I'm kind of overthinking it um I knew that's why if you read the uh the tweet that I put out for this video I said I'm attempting to do this I wasn't sure that I would actually get it done all right so I'm not getting any response back it may be a little bit of a delay so I'm not getting a response back on this so and I'm also losing viewers so I suspect that some people are in agreement with me that I'm overthinking this and it's taking too long click once actually let me do a um let me do a silly thing um let's um toggle can I use that or is that not um let State toggle equal zero State toggle plus plus all right if if you're watching this and you're thinking what am I doing then I'm kind of thinking that too so just wait the idea the idea is this um this is actually going to be really simple why not just set this variable oops I need to set this actually somewhere else outside of here um so let's say let's actually make date current state equal to um H can I just set something in state I don't have to make it equal to an array right could I just potentially make this equal to zero and then current state this let's see this do current state I don't think this will work I've never tried this before uh this set State old data let's go with state do state oh man I think my editor froze it's not letting me do it there we go all right awesome that's what I thought Patrick just confirmed that I can set properties however I want um where am I at okay so the idea is basically um like I'm just going to be able to click on this a bunch of time so instead of I don't know an easy way might be like let's just increment every time I click it and then if it's an odd number it's the ascending if it's an even number it's descending does that make sense to anybody um and then that way it'll just keep track so what I need to do then I'm setting it initially to zero okay so the first time it runs all right it'll just be one and then we're going to do an if statement here that's going to say so we need to make a call at some point so let's do all right so the first time it definitely does it does have to make the call because we have to get the data so I guess it would be slightly more complicated than I expected all right Umberto says I always used Bull and set the value to um exclamation point value so value to not value okay um let me know does this make sense how I'm doing it or is this just silly and more complicated than it needs to be be honest with me because I'm honestly I'm this is taking a lot longer than I expected it to and uh I kind of want to just either finish this tomorrow or like get it working as fast as possible and then fix it up tomorrow or something I'd hate to just end the video at at this point because it would feel slightly like a failure even though we kind of did what we wanted to do okay Patrick says it does make sense but it's a bit harder to understand when you come back to it okay I do I do agree I yeah I think it would just be better if I could just have one value or another here's what I'm thinking though I'm I'm just blanking here on um maybe I should try streaming in the morning and my brain would be better at times I just maybe it's the fact that I am streaming and I so I'm trying to think and talk but occasionally uh it just seems like I'm better able to figure out this sort of thing when I'm not streaming I like to do it with all of you because you give me great ideas too but in terms of my contribution to this it it always seems harder when I'm doing it but anyway what I what I basically am stuck at is when I click how do I change how do I change whatever value I'm going to put here whether it be a Boolean or what and then check that check that here like I know what needs to happen but the step in between I'm just drawing a blank on what the best way to do that is okay Alberto has an idea um so say and we also so uh flank says if so if WordPress returns only the first 500 resources is there a flag that says if there are more in this case if we know all resources are returned then we can just sort it on the front end okay it actually WordPress only returns 100 resources but regardless the point is still valid I don't think there's a flag that returns I'm I'll have to check the documentation to see if there's it may have to be a separate API call but the API call I might be able to just get the number of how many I'm I'm dealing with so yeah but it there's no flag I mean this basically this is the data that gets returned and that's all there's it's just this repeated over again um I am cutting out some of the fields so there probably would be some sort of ID let me see if there's an ID field okay so there is an ID but it looks like that's not going to help me I was thinking that it would start at like 1 and keep going up but it looks like it it doesn't because this is registering 260 and there's no way I have 260 so that won't help let me just take all of this out right now and see let's get everything and see if there's something I've never seen anything that I know of but I've never looked either no all right looks like there's nothing there that would tell me so anyway so I mean that was a good thought I wish it did work out like that I know it's possible to um edit the API within WordPress to make it do other things that it doesn't do but I don't I'm not as confident with my PHP skills as I would need to be I think to make that happened uh Nuno says hi really nice uh really nice lives good work uh thanks thanks for watching all right so Patrick says how about date is ascending true and that's default date is ascending equals not date is okay all right so let's see so basically let's see so let's change I do like uh I'm going to go with date is ascending since that is State date is sending equals true all right that's the first one so now when we get in here we toggle so date is ascending equals dates is a okay so now this is going to toggle and then within here we're going to do one or the other but I still I I still do have one issue and that's basically I don't want to make this call every single time what I could do is set up that cache like I was talking about earlier here so it doesn't matter I can make this call every time and it's not actually going to to call anything if it's cash cuz I'll cash it up in here somewhere um or otherwise I need a way for within here for this only one run once or potentially I guess I could have this check as well to say if um oh yeah I can just check the state right I can just check and see if there's any data in descending then I'm not going to make that call right I yeah that makes sense and that won't require me setting up a separate cache which might be complicated so um is data oops now let me see if this do state and I forget what I called it um date descending date descending I could probably just check the length right length Chelly n GTH length is um greater than zero right length is greater than zero then we're going to do all this stuff right otherwise and not only so this will actually be wrapped nested if statements this is going to be wrapped if um date so you want this to be with if it is ascending if date is ascending so that me if that is true then we want to do this and actually let's if this is else so we need it else after I fix after I do this then let me know if there's a way I could refactor this to make it better but um just to get this done I'm doing it like doing it kind of a very basic way I guess uh so basically we wanted to uh this dot data or dates oops this state sorry oops okay this state date descending right yeah uh date descending is going to equal oops no that ah why am I my brain just not working here so I need this set State and now I need to set date descending no I don't wait if the state if State length I need to State set data that's it that's where I'm going you set data to date descending okay so dat is ascending let me make sure that this has happened so if the date is ascending and date descending length is greater than no that's that's flipped around if it's it needs to be all right let's say not equal to zero cuz that's going to return zero right it should right um yeah you guys should have looked uh justs like Jonathan um Jonathan caught that before I did uh so good uh good look on that one uh I'm I'm going to check the other posts here in the live chat just to see if they if anyone caught anything else that I messed up on okay so uh flank says from the WordPress API page to determine how many pages of data are available the API returns two header Fields uh so xwp total the total number of Records in the collection oh okay very nice thank you for that information uh I'm not going to do anything with it right now obviously CU this video has been too long as it is but but I'm going to look that up either probably not today I'll probably leave as soon as I'm done with this but tomorrow if I get a chance I will look that up as well thank you um all right states to null for your data and get rid of the length check all to get Al together Patrick saying set initial states to null for your data and get rid of the length check all together um okay I will that sounds good I will ask though initially for at least for this data we set this here so that we wouldn't get an error potentially down below but since we're not directly calling any of these down below then it shouldn't be an issue correct and I'll I'll wait a minute before I change that um to see hopefully or if you need more explanation for that but I think some of you were around for when we kind of when we talk did this part on our um on our resources and why we said it like that in the first place uh Alberto says I'm kind of confused you're checking if we are currently trying to sort by date ascending you want to check if we have data for date descending meant date ascending and date descending okay yeah that's what I thought so it shouldn't make a difference then right all right so so basically Patrick just to get this right so I could do something like should I legit like just put null there or can I just leave this blank let me know so then down here I could just say get rid of the length and is if this estate equals equals null so is this what you were thinking something like this or let me know um so anyway that would work if it's null then we need to fill it with something otherwise we need to set data to the date descending because otherwise that means we already have set this at some point and so we need to set it back so if date is ascending if date is already descending right so if it's this one so that would be the else for this right um else we've obviously are already we've already switched over so all we need to do is something like this right data ascending so at that point we've already we don't have to switch any data around because the first time that this would have been clicked it would have saved this all right we need to change this and set this to data ascending right okay so first time it's clicked data ascending gets set so we never have to set it again right um also first time this is click this gets set to data so but we also want we also actually want this set here so probably this would be the place where we could set the date descending set data to date descending or I'm sorry set date descending to data right yeah so whatever the okay all right let's try I think I'm at the point where I could actually try this and I'm sure if there's some error you all have seen it um and I'll you'll let me know data sending oops oh good look okay so Patrick had a wonderful idea um he like obviously I don't need to call set state twice so I can just do descending can I do it like so could I potentially do so I could do it like that I mean I'm assuming it this would both happen in order as well so it would be fine and I I'm assuming that's what you were referring to Patrick okay and I fixed that all right so let's see I was getting an error I'll bring this over so you can see why am I getting an error let me I'm just restarting the dev server because occasionally that causes problems Okay cool so Patrick has verified then that uh that that is what what he was referring to uh what we just changed all right great we got a page load always a good sign and let's go down here so everything loaded up so we haven't broken that and now here's going to be the first click H and nothing happened on the first click all right so let's see let me just see if we're act if we're going to get any errors here um where's my console I'll bring the console over so we can all see the errors so here's what we're getting oh let's go to the top here okay uncaught reference error date is ascending is not defined yep now I understand what is going going on here so it's going to be this do date is ascending right that's why they couldn't find it am I using where else am I using that this do dat is ascending is equal to um how would I so would I need to could I just do it like that or should I actually write in something else all right so anyway hopefully this Works um where am I at I just want to check and make sure I'm not using this anywhere else if I highlighted it should show me Yep this there we go and let me make sure I'm not oops and it needs to be State too there we go this state this state data sing okay I think that's everywhere that I'm referencing something in state that I need to change so okay here's the next error I'm getting it's saying data is not defined online 59 let's check it out oh no obviously that's not it um where am I not to find where's data not toine this all right um where I'll show this I'll share this to you all again because obviously I have I'm using data a lot so trying to figure out why it saying it's not defined let me check the live chat see um maros caught that this state date is ascending thing before I did so thank you I I um I didn't look over and see that you caught that uh but thanks thanks for catching that um Patrick also looks like everybody caught it except for me and I just didn't look over in time uh to see it oh okay I see what Patrick is saying so uh basically let me what What's Happening Here is uh the default state is ascending right but then here I'm setting this State let me take this out cuz I'm not actually doing that here what I'm doing is I'm setting the state to say that it's not ascending and then I'm checking this so obviously it's checking to see if this is ascending and it's saying no it's not ascending so set it to ascending so that's why I'm not seeing anything happen so uh Patrick rightly says put this at the bottom okay and I I didn't do anything about that error that says data is not defined so I expect to get that again I suppose all right so here's the error that I'm getting data is not defined now it's saying it's at line 52 this set State data why are we getting okay so data should be maybe it's a problem with the API call I'm going to check real quick to make sure that this actually works okay so all right that does actually work so when I put this in the browser it is returning data so we should be getting data back and let's see in that case the data you're referencing should be this state data uh also you need to use set State for the toggle oh okay yeah good uh all right so I got I got some input about these errors here uh so it should be data date descending not date descending data where we at uh this set State and where are we at else you're right wait actually so flank is saying it should be data um colon date descending not the other way around which which line are you talking about Patrick said also you need to set State okay so I do need to set State for the toggle so this state date is ascending so and I do need it for the toggle I need to set state so I need this do set State um and we're going to go date is ascending and I should be able to just to do this do set State oops this dot State DOT date is asscending no yes no wait a second this state dat is ascending equals oh I see I see I've messed this up a bit all right so is line 48 I have data ascending instead of data ascending in line 48 okay so so I have like two different issues that I'm both getting feedback on in the live chat so I apologize for those watching the recording of this because you can't see the live chat um because there's a lot going on in there so in regard to the error of the the data okay then we're saying uh data is at at this point not local to uh this function so it needs to be this state data which makes sense that's why I saying data is not defined um in this case it's okay because we're getting the data from this this call so it'll be okay and then where else am I using data so down here I also need to use it um State H that auto completed for me okay this state data there okay great so that um should fix that error I'm just going to check that real quick so I'm going to ignore this for just a second just to make sure I'm not getting that same error oops I got a different error so so that's good I didn't get the same error um and where am I at okay shoot yeah this this threw an error really quick so let me let me just take this out just for a second I just want to make sure to take this one at a time I want to make sure that I fix the data error thing and it looks like I'm not getting that error but I'm still not getting the result that I want so okay yeah so event you fixed the air okay okay it looks like I have a typo as well um Matt says there's a typo in the left half of the colon declaration the second a should be an e all right let me let me try to find that um this state data what am I looking at I don't see it was it in here I'm trying to find the uh the typo but I'm not finding it um okay so Patrick says you're moving things around in state as if it is a cache you need to make sure that when you are moving something in state you reference it with this state data okay oh yes thank you uh I need I need curly brackets okay that obviously is an issue let's see Matt Robin says yes in line 48 we at 48 this set State date ascending there we go thank you I I looked in this area several times I just couldn't see it thank you very much um thanks Matt agon and Patrick for everybody responded with the line so everybody could see that except for me okay so I think we're really close to this the only part that I'm not sure on so Patrick in particular but anybody can uh can contribute here um so I know I edited this a little bit from what it was originally have I messed this line up line 56 do I need to change this it was originally it was originally different than this correct Patrick says it's much easier to catch mistakes when you're just watching uh deleted okay good thanks Patrick so Patrick says I can act I can delete this line um see so this set State data is ascending this and then add to set State uh Patrick says I need to add an exclamation point to the set State um do I add it I'm just going to add it in here let me know if that's not the right place do I add it in here oh there's another Maro sees line 56 before this state okay line before this state declaration okay good so that is in fact yep all right awesome okay I've saved that and let me bring bring this over if I get any errors as well I'll bring the the console over and let's try it out what is going on oops wrong page all right um all right let me refresh that okay so that's what it should be and we click it great now let's click it again okay when we click it again we get an error well at least it worked at least we didn't get crazy ears at first right off the bat so data sending is not defined in events JS 56 let's check it out 56 all right that's what we were just talking about so date is where am I at date ascending is not defined in line 56 I'm not even using that am I in line 56 this set State date is ascending this set this state date is ascending the opposite is okay that's an that's an odd error right am I am I missing something um obviously I'm not even using this online 56 but I am using it this state data oh do I need to do this state data equals this state that's probably it all right now let's bring this over um Let me refresh okay all right so click changes changes nice okay it worked uh in case you didn't catch that it did work we clicked once and we clicked twice and the first two clicks worked the third click however gives us an error here date descending is not defined which this at this point this is easy cuz I I feel like I've had keep having the same error instead of just Yep this state date descending okay and that makes sense because this wouldn't actually have fired until the third click anyway so um good so this should be this was the only line that hadn't fired yet so assuming we fixed this which I think we did this should work so I'm going to I'm just going to make sure I refresh to reset the state back to the original state and it figures the uh Dev server would just hang so all right I feel it I feel like we're close I said at the beginning that this is going to be one of those times when I don't really know what I'm doing or how I'm going to do it but I'm going to learn a lot and I'm going to feel really good when it happens happens and I think this is about to happen all right so click one works click two Works here's click three it works yay we go back and forth and just to show the network let's see if we can find I'll show you the network so here is where we actually got our descending things so you could see it's only fired once we just clicked like I don't know six seven times it only fired once so we did only fetch the data one time and it never fires again after that so awesome great job everybody uh for sure yeah on this one this was a little bit me and mostly all of you helping out so I pretty much just brought the uh here's what we need to do and then you all brought most of the uh most of the other stuff I really appreciate that this has been wow over two hours of a video I did so well the other like yesterday it was like an hour you know so I was doing good and then then we went we went over so we went way over the normal time uh hey thanks everybody there some uh Christian said congrats but thanks for the congrats but really like congrat ulations to all of you for um for kind of coaching me through all that I'm sure it was frustrating at times when uh uh it actually cooled down in my office and my brain's a little bit more clear now but there there was a time there in kind of the middle that my brain was just not working uh and and you all kind of had to had to hold my hand there and take baby steps with me so yeah I appreciate that uh uh foil says uh we hope we see you soon so yeah I hope I see you all soon so thank you very much for all the help and hopefully this helps somebody watching to know how to do this obviously you could you know repeat these steps now I will say this this in particular we're using the WordPress API right so I'm basically doing the the sorting through the WordPress API if you wanted to do this and you like already had the data and you didn't want to make another API call then you'd have to do the Sorting on the data you already had if we had done it that way I think it would have been helpful to more people but obviously as we discussed earlier in this case at least at this point since I can only get 100 uh entries per page for the events I needed to keep making a API calls um because I think that otherwise uh the user would not be seeing everything you know all of the events available so just so that's that's clear that there's a different way to do it to actually sort on the data maybe I'll have an opportunity to do something like that if I can figure out how to get all the entries or something because I would like to do that as well because I think it would be helpful for you all and certainly there'll be occasion for me to use it in the future but other than that little caveat um hopefully this is some some stuff that you can use in your projects and uh this was certainly helpful for me so I'll be back tomorrow at 2 and I'm thinking Friday I might not do a stream so I was I was going to do a stream earlier in the day but I now have a meeting uh so I don't think I'll be able to do it early I'm going on vacation next week but I'm leaving Friday night and I'm going to drive through the night so it takes about 8 hours to get where I'm going uh to the beach and I'm driving my family through the night so the kids can all sleep and I think I probably should leave work early and take a nap so that I can safely drive throughout the night uh so it'd be probably best if I left work a little bit early so I don't think I'll be able to do a stream if something changes I'll certainly let you know but as of right now I don't think a stream will be possible for me on Friday I really wanted to do one since I may not be able to do one for a whole week but um really I I really do want to make sure that I'm awake enough to drive safely uh you know through the the whole night so um I do plan on hopefully making some recorded videos and maybe releasing them next week so hopefully you'll have that so may not have any live streams but I'll be releasing recorded videos and those will go on my YouTube channel uh free code Camp is just for the live streams and then my like recorded videos will be um on on my channel so anyway so enough talk for me you all are awesome that you stuck around this long and I know some of you in different time zones it's like 2:00 in the morning now so uh so go to sleep and uh and I'll see youall tomorrow and thanks again