React: Sorting and Filtering Data - Live Coding with Jesse

Key Takeaways

hey everybody its Jesse and I haven't haven't streamed in a while had a holiday yesterday fourth of July here in the US and the day before that my boss got married so I took the day off and went to his wedding so it's been since last week we we did some really some like design work on it was a Friday we had at the last dream and actually let me show you let me show you what I kind of settled on for the moment just to let you know how it went so if you remember we were going with like a really short section and at the very end of the stream it was a long stream so I don't know how many people stuck around for the end but at the very end someone mentioned that it looks like an old-school WordPress header and then I made up my mind that I had to change it because I couldn't have that so I left it a little bit bigger than normal and kept a lot of the same I kept it basically same as it originally was shrunk it a little bit adjusted line Heights and made this a bit bigger made the font a bit bigger increase the font weight so all the changes are are much more minor than what we had originally done on Friday so this is what I'm going with for now of course I'll have to see what everyone else that's involved in the project thinks about that but that's it for now the only other changes I made since Friday are I took out this there was a contact form section here I took that out I got an email this morning saying that they didn't want that in there and there's some other sections and they're gonna be taken out and rearranged here but other than that the home page is pretty much finished I think I think I'm going to get different images for these sections and that's I'll just see whatever images I'm giving for that and hopefully they all can can work with these dimensions but today we're gonna work on the resource section specifically we're gonna work on sorting so we might do a little bit of UI work here because we're gonna need to add some toggles and a drop-down maybe but the most important thing is getting the sorting to work so that users can pick a category they can toggle whether they want the free or the paid resources you know this obviously already works and then they could even search within that so they can just really narrow down on what they exactly what they want so I'm streaming from home again so if you've joined in before when I've streamed from home the quality isn't always great but I had to work from home again today so let me know if if anything is is really really off the setting I left the same settings as out on Friday and it seemed ok on Friday the video quality is not HD which that kind of stinks I would rather it be HD but at least the the buffering wasn't too bad on Friday but let me know if it gets bad there's not really that much I can do about it but maybe I can change some settings here I'm gonna go to the live chat as quickly and say hello before we get started sorry I had I don't have anything set up as much as I normally do I just concluded a an interview a phone interview with with a candidate so that ended just a few minutes before the stream hey everyone oh hey hey bill bill hasn't been able catch a stream in a while so I'm glad you could watch this one hey Fabian how's it going yeah I haven't seen you in the stream for a while it's good to see you yeah the github sue rev asks about the github link so the link for the github repo for this project is in the description there's not exactly a tutorial to follow but if you check the videos I actually started this website I think on my own channel so I think there's like two streams that are on my youtube channel and that's linked in the description and then I got invited to stream for free code camp so I've switched everything over to them so it's a lot of content some of the streams are pretty long but if you went through them it would be somewhat of a tutorial but not not comprehensive at all the goal of this show in case you're joining for the first time is just to to work watch me work with me as I do my normal everyday thing so there's a lot of things that I work on for this project that I don't record so that's why you won't get exactly you know comprehensive tutorial but I try to title all the videos accurately in terms of what I'm doing so you know there are some aspects of what we're doing that are tutorial like and you you probably get a good idea of how to do it but no not really any official tutorials yet yeah it is someone asked about the resolution it's 480p right now that's basically my upload right now is below 5 megabits per second so I can't consistently stream at a high enough bitrate to get 720p so I dropped it down to 480 because if I try to do 720 I can't sustain it and there's lots of buffering or ATP seems to be the max I can get on my home network so yeah I know a couple people are saying they don't like the 4 TPI I watched the recording the last video and I really couldn't stand the 480 but I figure I guess it's better to just you know do a stream than to not do one because I don't know when I'm gonna be able to get back into into the office so I might be doing a bunch of streams from home huh I don't want to be away from you all for that long of a period of time I don't know about you but I like have gotten used to interacting with you all you know four sometimes five times a week and I start to miss you when when I don't stream for a while so I thought it would be good to just do the the stream and all right so we have it looks like yeah we have a really good amount of viewers today actually more than normal so we're up to you know over 90 viewers so that's great so I don't want to leave everyone hanging with introductions let's get to it just to explain in case you haven't seen what we're doing here we're pulling in these are resources this sections gonna undergo a big kind of design update here not on this video but it will soon probably sometime this week so what we're gonna do or what we are doing is we're pulling in data JSON data from WordPress via the WordPress API so all these resources are added in by someone else who handles the content into the WordPress back-end we pull it in here to this site which is a react site so that's what we're going to be sorting through we're gonna get in JSON data and then we're gonna be adding in filters and we're gonna include some sorting I don't have anything in the UI right now that really like would would sort things so we're gonna have to add some elements in for that as well but we want to be able to filter that data by categories so there'll be a drop-down with a bunch of categories we want to be able to filter whether it's free a free resource or paid resource and there'll be a toggle for that the search is already working these already work but we may change exactly how these interacts so we'll see once we get into it whether we need to change so that's the plan and I'm not gonna worry as much about the UI yet in the design yet because I think that the sorting and filtering is the most important part and if I get that down and you get it working you know then I can fine-tune the design aspects of it later on so right now I was working I think I'm gonna switch to another branch so if you're following along on github let me pull this over just really quickly and show you what we're working on what branch were working on I'll make this bigger I'm have to make everything extra big I think - just to make up for the low res video so everything that we did on Friday and that I've done since then is on the home alt branch so if you're checking on github that's the you need to switch to that branch to see it for these resources actually I think I'm gonna make a new branch for this and if you're not familiar with git or github a branch is just like an alternate version of your your project and you can switch to that branch make any changes you want and then switch back to the original branch and everything's still in the same condition you left it so it's nice to be able to make you add new features and if you need to switch back to the main branch and make a quick fix on something that came up you can do that and then you'll push that up to production that can be live and then you can just switch right back to your feature branch and work on that until it's ready to go so it's super useful I've gone in some previous videos in more depth into and to get but I haven't done a tutorial yet I hope to do so soon but there are a lot of great get tutorials out there even on this channel in free code camp there's a whole playlist about using get in and github so if you want to learn more about it I recommend checking that out so let's I I'm just going to check just to make sure I don't have anything okay so this branch is clean I'm just gonna push it up to github just so that I have it in case I need to work from a different computer and so that you all can see all the changes as well and let's change I think I'm going to name this branch resource sorting I guess that works so we're gonna git git branch it's is this easy if you haven't done this before and get github or with git I mean it's it's super easy just get branch and then type the name of the branch that you want to create and actually I'm gonna let me go I'm gonna go back to the master branch first I'm not really sure I'm sure you know you all probably know this but I didn't want to get a copy of the home old branch and start from that I wanted to start from master so I didn't know if that would make a difference just the web branch I was in but just in case I do want to make a copy of the master branch to start with this so I don't know we're gonna be doing more than sorting but this will be a decent name out at least I'll be able to remember it so now if we go get branch it'll list all our branches so we have resource sorting so now we can go to that so we get checkout and there are shortcuts for like pretty much every command you want to do and get so you don't always have to type all this out there we go now we're on our own branch so now I can do anything on this branch and it won't mess up anything else you're doing on any other branches all right so let's go over to our code and we'll go into resources let me make this a bit bigger okay let me know if it needs to be bigger than that I'll show you what's going on just in case you haven't seen any of the videos where we worked on this I mean we're in porting just some basic layout components our resources are all in cards and that's a separate component but this is this is gonna undergo a major change so we're ly gonna leave it for now but that will definitely change we're importing we've we've extracted and not me actually I think you did it I think it was Patrick who submitted a pull request that took that all of our our fetch our functions that we're using to fetch data and put it into its own component so that's out of here it cleans things up a little bit and we don't have to include the same things in every every page so that's nice and then we had gotten masonry working before this is kind of sad for me because if you remember that was a really kind of a long stream when we tried to get masonry working and now I don't even think I'm gonna need it for the page so sad about that but I will definitely be using it in future sites so it will not be a waste of of effort alright so basically all we're doing is you know we've we've set up our state we have a place for our data to live here in our state and we get our initial request here and this is we're using next js' to kind of scaffold out or react up and in XJS if you want to render on the cert if you want to make the API call on a server side to be able to render that into the HTML and then send it to the client on that first load you have to do it inside get initial props and of course that saves it the prop so we have to transfer that then to the state so that's all we're doing here so this thing here is just fetching the data and it does it isomorphic lis so this would actually take care of fetching it on the server-side and then if they were if you went there we're using client-side routing so if they navigated to this page using the client-side routing then it would also work as well so we're just transferring that from props to state and we want to transfer that to state because we want reacts to be able to rerender every time the state changes and that's going to be key for our sorting because every time we sort or filter anything all we're gonna do is change how these things are set up in state and then react is automatically gonna know and I know most of you know this already but just in case there's some people that aren't familiar with react I'm kind of going through it react is gonna know about the change and it's gonna rerender everything okay so that's great if you've done anything like with trying to setup maybe like a single page app with jQuery or something you know it's crazy to have all these event listeners and everything so we don't even worry about that everything is nice and contained in State react takes care of so much of that so here's where we actually get to some of the stuff you know we're already doing some actually saw in this page I was thinking we were doing some filtering on this page but it it was on the events page so that's where you viewed on it so we may actually just copy some code from the events page as well and I'll bring that up right now cuz we're definitely gonna want to copy some stuff from that page so here's what we're doing so we bring in our data and we can set filters on the data right away and that's key you want to filter before you do sorting or mapping or anything because then you'll have a smaller set of data for everything to have to be put through after that so in this case we right away just filter out any events that have already happened that had a date previous to today's date and then after that we can we mapped the events into you know basically acts components hey and I'm not doing any sorting here oh yeah I am I didn't remember this because somebody else actually did this as well I think it was Patrick as well if I'm giving credit to the wrong person let me know but I thought it was Patrick that submitted this pull request where is actually using a sort for our sorting by distance okay so that's our basic things that we're going to use here mainly filter and sort and then when we're all filtered and sorted out sorted how we want it then we use map to just iterate over all those things and put them into you know the components that we need to get them rendered on the page and then everything is going to be set into state to trigger the rerender all right so I'm gonna go back to if I lost you in a live chatter you have any questions throw them in there right now I'll check it very quickly before we start actually coding stuff I just don't want to lose anybody you know this early on okay great it looks like okay it looks like the video is decent some people are saying they can read it it's decent quality um Ahmed says it it's kind of cute that I said I don't want to be away from you officer I know it's true I've been pleasantly surprised at the community that's kind of been built up around this I really feel like I always did my work alone I was a freelancer I basically worked alone from my house and now where I work I'm basically alone in what I do there's one other guy that does some web related like web development stuff but we always work on different projects so I'm just kind of alone in my office most of the time I mean there are days when I come in early I don't see anybody and I don't see anybody all day I'll come out of the office to go home later on and my co-workers will say oh I didn't even know you're here how so it's really really cool and unique for me to have this whole community of people and we're all like working together you know on these projects so it's been amazing I I didn't think anybody would even be interested in this when I started doing it so this has all been a very wonderful surprise for me so anyway enough of the sappy stuff I just I do appreciate you all so thank you hello a lot of people saying hello hey everyone okay bill says I like to use get check out - be this with the flag bee and then branch name to create a new branch and immediately check it out so I don't accidentally start working on my master branch that's a great idea so I'm just gonna throw this this command up just so that everyone can see it even if you can't see the live chat now or if you're watching later on I'm gonna throw this command up here so bill saying if you do check out so beta it would be get check out which I didn't I didn't copy the guid part so if you type git checkout and then you have this flag be and then type your branch name you'll automatically move to that branch and that bill says you don't accidentally start working on master branch so awesome I'm gonna try to remember that for myself as well cuz I can see that being really really useful so thank you for that okay someone says they wanted just a little bit bigger so let's go up I'll go up a little bit more I think if I go too big I think it's just gonna be hard to see enough of the code to really know what's going on so if you really need it to be bigger let me know I can try to go bigger but I think we're getting to the point now where it's kind of at our limit of what's reasonable nantan has a question how come you're using WordPress as a database instead a MongoDB bill bill has a good answer to that and I'll just give a just a brief answer in case you can't see the live chat WordPress is very easy for people who don't know how to code to edit things in WordPress so WordPress is my content management system because there's going to be different people a lot of like student workers that are gonna be entering data and they're gonna have varying levels of experience with just websites in general at all so I needed it to be as user friendly as possible as simple as possible and I know that WordPress is very simple to to use so that's why I went with WordPress I I would like at some point to be able to find an alternative that's just as easy to use that I could use instead of WordPress because WordPress can be resource heavy at times I'd love to be able to find something that's written in with with node instead of PHP and then I just wouldn't have to worry about PHP at all but until that time WordPress is my go-to for content management systems if I need it even just to pull data into a react site or an app or something I still think it's one of the most user-friendly options available and it's stable there's a huge community there's constantly security releases coming out so I can be confident that it's gonna work you know and it's it's gonna be pretty reliable so that's why I've been using WordPress Bill asks about Keystone j/s if anyone's used it I actually I've tried Keystone but I tried it I tried a bunch of new CMS's all at the same time so I can't even remember exactly what was unique about Keystone but I'll have to try it out again ok so it seems as if the code is okay to read but the folders are small yeah there's no at least to my knowledge I'm using Adam as my editor there's no easy shortcut way for me to make this text bigger I can make this text bigger just with a simple like command plus but it doesn't work when I try to do it over here so for now the folders are as they are if if there's something over here that I really think you should see maybe I can try to zoom in or I'll just read it out but for now the folders will be pretty hard to read okay so it looks like I've gotten through any questions than anybody had okay one more question is popped up so Andrea asks are you blocking your WordPress front end from visitors somehow and the answer is not yet so I think I mentioned a long time ago that the intention I had was to block people from going to the WordPress site which I normally do when I have a setup like this but I've been so busy with other things with the site I haven't done it yet part of the reason is I don't think it's on a subdomain and most people won't go to it the only thing I would be worried about potentially is I don't want that to get indexed by search engines ever there's no links to it anywhere so the odds of that happening you're probably low but still I am going to block it and basically the the easiest way that I've found to block it is to just go into your templates your wordpress templates and just take everything out because that's what renders everything it would be like you know going into react and just taking this index you know it's is basically as simple as find the equivalent of index J s for WordPress which would it be a PHP file and just pull everything out just like literally delete everything from that file save it and then when a user tries to go that site they'll see a blank screen I have done in the past on test sites instead of removing everything and leaving it I've removed everything and then added a full screen YouTube embed of the Rick Astley song so I rickroll everybody that tries to get to my site but I can't do that on official University websites so but if you ever find one of my test WordPress installations then you may see that yeah someone asked about the quality again I'm really sorry about the quality I wish I have the best internet I can possibly buy right now my at my house and it's it's still not great so I hope I can get better one day but it's just I'm limited to this right now so let's get to let's just pick what we want to do at first I think the easiest thing to do right now will probably be the toggle for whether the resources free or paid that way we don't have to come up with any like pretend category names or anything like that we'll just I already have data in the JSON file that tells me whether it's free or paid but I'm currently not pulling in the names of categories so to save us from having to go in and and make all this you know fake data just to get this to work we'll go with the toggle at first so I'm gonna pull up we have been using materialized so we're using material design and we're kind of basing everything off of that but in particular we're using the materialized framework to trying to help get a jumpstart on all of our UI stuff so we're gonna grab the the code for a toggle let's see there we go switches I guess they're calling them switches here I was wrong on the toggle so basically I want something like this but instead of on/off it's gonna say free and paid obviously will have a different color as well but that's basically it this is what we need so really simple we'll just copy that and we'll put that into our page let's see this is where I want to find where we have the search bar because I want it right to the left of the search bar well that's so this is higher up in the page [Music] this is the middle section here we go this file this react component is getting a lot bigger than I normally like components to be so it may need to to be cut down and broken up a bit and other components but for now we'll work with it as is all right so here's our tabs so above that is our search input and right now we can just use the regular column classes to align this so this input field is taking up half of the screen and we're offsetting it by half so on a medium screen it takes up six out of twelve columns and we've offset it by six columns and that's how we got it to be aligned to the right instead of you know normally it would be aligned left by default so we're gonna want to align now actually there's a plug-in now the where I don't even have to type class names so this will work but normally without that that plug-in you have to type in class name instead of class if you're you're using JSX so I'm gonna do class call alone and we're going to do I think we can get away with an s2 is this is gonna be a small input or I'm sorry and I'm not gonna worry about the small screens yet it probably doesn't warrant having it's an entire row on its own but maybe but for now we'll just have have the whole full width on small on medium screens we're gonna make it too and then we want to offset this by four that's all we really have left right so we had six this is gonna take up two so we only have four left so we're gonna offset that before so and this is this column system is all from the materialised framework so we're just following that I haven't customized it in any way so within that is where we can put our our switch now the nice thing about having the the plugin and once again this was something that I didn't do myself someone else did on a pull request and now I'm starting I've had so many of you help on this I'm starting to forget who did what so I apologize that I can't remember for sure who added the I'll show you what it is here and our package.json it's this react HTML attribute attrs so this lets you just write normal HTML without having to worry about using like class name instead of class and HTML for instead of just 4 so that's really useful if you have to copy and paste chunks of HTML otherwise if you've been using reactor probably used to just type in class or class name anyway so it's probably not a big deal but it definitely helps for copy and pasting so we're gonna change our labels free and then pay and that should be all it should be it like that it'll give us what we want so let's check it out I'll move this off the screen because we won't need this anymore and if you wanted to learn more I have up the mdn documentation for sort which we're going to end up using I don't know how we'll get to it today I don't want the video to be really really long but we'll say but in any case if you're interested especially if we don't get to it check out this I mean you just find it an NBN just search for sort and there's a lot of good info I mean it's really it's kind of I like this page occasionally the mdn pages will be just like it's too much for me like I just can't I can't figure out I have to read it several times but this in particular seemed to be pretty straightforward and easy to understand oh we didn't close our input side all right I love when we get errors live because then it's like a good a good learning moment so in the input tag we have to close it I'm sure someone said it already in the live chat that always you always catch my mistakes before I do so everything has to be closed out in JSX which is like the react version of HTML so let's close it out and it should work there we go all right so check it out we have this little switch here it works so obviously I wouldn't leave it up here like that and I would change the color but for now I'm not worried about that I just wanted to switch so based on what the switches we're gonna do some filtering I'm gonna check the live chat quickly just to make sure I don't get too far behind I've I found it's usually been my custom in the past to wait till the end to answer questions in the live chat but we've been having so much activity in the live chat that it actually starts to just cut off all the stuff from the beginning so I have to kind of go back now periodically or else I will I will miss your questions and I have no way to get them back so that's why I'm kind of trying to check it more often than normal now okay in regard to Keystone J's which is an alternative content management system to WordPress Bill said it appealed to him because it was with node and that's okay now I remember that one that's why it appealed to me as well I'm definitely gonna check out Keystone obviously I'm not gonna use it for this project cuz it's already so far advanced but I have some some smaller project and some really big projects that are gonna happen within the next year or two and you know if I can find an alternative to WordPress that's suitable I'm definitely interested in using it well bill says Rick roll the Rick Rolled front end is is hilarious yeah it was pretty funny I mean I I don't even know if anybody ever saw it but it was funny for me Oh Rohan says I could use the robots.txt file to block that's that's actually a good idea I can't believe I hadn't thought of it I'm also gonna probably pull out everything in the the PHP template files as well just just to be safe but that's also a good idea okay looks like there's some discussion and a lot chat about Keystone Jas so just for time I'm gonna skip over the discussion but it seems really promising to check it out if you're interested oh cool Patrick has included a link to be able to set up change the text size for the UI or in particular you know the things over here that you all had mentioned that it's really hard to read you know these file names so awesome Thank You Patrick I'm gonna copy this now so it doesn't get lost in the chat and I'll check that out so I'm gonna add this just to my page of random stuff here there we go so good looks McGee says taxation is theft all right not sure what that has to do I don't think I said anything relating to that but yeah I don't like taxes either so I mean I guess we need them but I'd rather not have to pay them right uh-huh also one black ded says D stream regularly I do stream regularly my schedule has been a little weird to last like two weeks because I was on vacation and then it was a holiday and I took it's today's off so normally I stream at 2 p.m. Eastern time Monday through Friday although the time sometimes I have to change depending on what's going on and then occasionally I just have to cancel completely for a day but that's my normal time ok now let's go back and now that we have our UI element in there we can grab this this value checks we don't even need to value first we can test it out just kind of manually and then hook up this this check box and that's all it is it this is just a check box it's a normal check box you get the value like you would normally do for a check box it just looks it doesn't look like a regular check box actually I forgot to check I don't know if anyone's familiar with the materialized framework I assume that this is not using any JavaScript to accomplish the styling for this check box switch here if it is though that's going to be a problem when we go to do the the server-side I don't think it I didn't have to initialize this at all so I'm hoping it doesn't use JavaScript and it's just plain CSS I suppose we'll find out at some point if that's the case we'll have to redo that because I want to do it you know write it within react component and not rely on jQuery which is what is used for most of the materialized JavaScript alright so let's go up here and figure out where we're gonna do this sorting so I guess it doesn't matter we'll just put it put it here in another function I want to put it above the just for organization purposes I want to put it sorry it's not a hard question I just I guess so I'll just put it here at the bottom right above the render function I guess that'll be that'll be fine all right so we'll go free the price price toggle that works that ik that explains what what this does I'm gonna make this I'm gonna use an arrow function for this and then that way this in terms of like the JavaScript this will be bound correctly just in case I need it so if you're not familiar with arrow functions I've explained it a couple times already so I'm gonna skip over it for those of you that already heard my explanation of several times but if you can either check out a previous video or there's so much information about arrow functions online and why they're good especially in particular with to use within react actually I think the react documentation itself explains this alright so within this we want to get let's see what I called okay so we're just we just call it data within state so we want to do this dot said state okay so I'm going to set the state and as as some of you in the live stream informed me maybe a few weeks ago it made shorten for me we never want to directly modify state we always want to use this set state function otherwise reactant won't know about the change and you won't get that rerender that you that you want so we want to change it within here okay so we're using this set state and we want to take data so we want to change what data is and then within there what we want to do I might have to bring up the the actual JSON data because I don't remember what I called the field but basically what we want to do is filter so we want to take this state dot data and then we're gonna filter and I am actually gonna have to look this up now because I will need to know what what we're getting and I could probably to speed this up by copying if you remember I said I'd already done some filtering format in events so I probably could have just copied yeah I mean I don't need it to be this do this much but basically basically that's all we need yeah there's not even any point coffee nut but I do need to get the data so let me grab if you see up here where we're initially getting the data I'm just gonna get this because this will give us most likely the contents of what data is gonna be so I'll go over here and we'll go to WP and we want VJ song I know that that's probably really small here but I'll increase the size on the actual JSON data alright see this is how it comes mr. data so here we go price well that that makes sense at least I named it something reasonable I couldn't remember it but it makes sense so I think the options are either free or paid so looks like I don't see anything paid right now but I'm pretty sure the options are free or paid so we just needed what data a CF price okay so what we want to do within our filter you want a filter only if we're gonna have to do a bit more to this but for now this will just give us the first step here so did actually I don't need sorry okay that's it I was wondering what I'm just calling it post sorry just checking it trying to look back at what I did earlier so I guess you okay actually I didn't get a live chat for a second because uh Fabian has a good point here and Fabian has helped a lot in making this project much better than it would have been if they would you spend me working on it so when he says something I I always pay attention so his advice is I wouldn't change data state but use the render function to display a filtered view of data instead by saving price filter parameter in States okay all right I'm a thing that weigh in on in a live chat if anyone else has an opinion on that because that seems like a good idea to me but if if we're gonna talk about changing I'm gonna do this then I might as well open it up to discussion so if anyone has any opinions so basically we're talking about is instead of changing data and having two rerender happen like that why not have a different like within the render function have a totally different view that gets toggled on and off based on the value of the price filter which would also be saved in state okay cool so everybody likes that also I will say this just in case this wasn't clear from before so that I'm safe for farther ahead here it is so the the user experience that I want to happen is that someone would then once they picked free or paid would then be able within that either with that free or paid be able to pick a category and the category would still show basically everything would be filtered let's say to paid then filtered further by category and then be able to be filtered further by these tabs and then even further by the search so if that changes anything let me know but that's the the functionality I want each filter to kind of stack on the other ones so it's not gonna take away whatever there you know it's not like it's gonna start from a blank slate of like all the data again all those filters are going to add up kind of like how Amazon does where you can you know check at least on the mobile app like you can check off they have a drop-down on the side and I you know you could say I want everything to be like prime eligible and I only want to see things that are four stars and up and I want those like both to be in effect both of those filters at the same time so okay good so patrick says that's even more reason to save filters and state and display based on them awesome great so that's good so now it's a great time to give my my usual disclaimer for this show I don't claim to be an expert in anything that I'm doing I am employed as a full-time front-end developer at a university this show is not me saying I know everything listen to me this show is me just saying hey this is my normal workflow and I'm open to any suggestions that you have I learned a lot on the show and from you all and hopefully you you know some of you at least learned something for me or at least from the other people in the live chat so I just always feel the need to give that disclaimer at certain times especially like this whenever we're kind of changing the I'm changing the plan on the fly here based on your feedback so I don't want to mislead anybody to think that you know they should that I somehow I'm saying that I know all this because I don't I'm still learning this all right so what we need to do then is have you probably initialize in state what we want and we'll have default so this is going to be price the default the default should probably be paid it depends like from a user standpoint they probably want to see the free stuff but from a business standpoint it probably makes more sense to have the paid stuff show up first so don't don't hate me for that but I just think that that makes more sense so we want the default to be paid right bill says I need a graphic to throw up on the screen with your disclaimer yeah that's true I should yeah I don't even know how to do that I know there there are ways to put up graphics but I have no idea how you do that in a live YouTube video I'm gonna have to take like a course or watch some videos on how to livestream because I just I just started doing this one day like literally I had the idea one day and then the very next day I just started doing it so I didn't really take time to to figure it out there's some are really early videos you can tell I didn't take time to figure it out because the quality is terrible but all right so what are you gonna have we're gonna have a category right so the category is gonna start out as all so I'll make sure I have an all category potentially we might at one at some point maybe think about having a featured category so you could show people actually that's a good idea let me show you this one on now right now I have this section that's featured resources but maybe I could get rid of it I'm not gonna make the decision right now I don't think but potentially I could get rid of this section because I wasn't really sure how I was gonna change this based on how I change this UI anyway so I could just save save the the thought about that it could simplify everything a lot make that whole component a lot smaller in terms of lines of code and JSX the default category could be featured I'll think about that for right now I'm gonna leave it as all we don't have any categories anyway right now so those all need to be input and I don't I don't really think it's the best use of my time to go in and input those categories so I'm just gonna have to let the people in charge of the content know about the categories I'll have to enable it in WordPress because I disabled categories for that post type I'll have to enable that and then let them know and then hopefully you know they'll add everything in and we'll start to get some good good data to be able to test out our category drop-down so I think that's sort of laughs now maybe we might want to switch over how we do these I'd hate to do this I mean we have this working already should we switch these to basically do the same use like the same system we won't have to worry about the masonry component and getting that to work anymore it's gonna be different I'm just gonna go and I'm gonna add a category now or a I'm gonna add something into the state object for it let's say type so it's gonna be resource type and this is also gonna be all by default and then for search is there any reason to do the search differently that we then we have been yeah actually we will need to this is there's really a good benefit to doing this in that I have to say out loud what I'm planning to do and in this case I just caught what seems like a big issue that I hadn't thought of before so right now the search works by sending requests to WordPress and getting an entirely new set of data from WordPress through the API every time something is typed so that actually sent a request to to WordPress and we got it back so it works great it's really fast I mean yeah I'd rather cut down on the the request but this is how it works right now but what I was describing a minute ago is I wanted to use her to be able to filter and then search but have all these filters still applied so basically I guess it I'm trying to think of a way that I could avoid making another API call and then simply just search the data but I guess this doesn't change anything will still search the search will still show us data it will send back data but then that data will be passed through all these filters and show up here so I don't see any way around that the reason being I'm not I don't think it's possible for me to grab all of the data at first because there's gonna there's going to be a lot of resources at some point at least that's the that's the vision of the people in charge of this they're they're expecting to have hundreds and hundreds of resources the WordPress API limits you to getting 100 posts at a time so I can't in one API call get everything in anyway so anyway having said all that if you have any ideas let me know I'll check the live chat now in case someone's been in anyone's commented on that I'm I'm not gonna attempt to tackle this entire problem right now you know we've already been streaming for an hour so and this doesn't have the question about the search thing does not have to be answered yet to make this work so for now I'm just gonna focus on this but I just wanted to share my thought process with you all to see if if anyone had any ideas on that Oh actually brandon has a good point in the live chat I have a toggle right now for free or paid but what if they want both that's a great point and I yeah I could definitely see ya a user might one but they might not care whether or not it's free or paid they just want to find the resources they want and it would actually be a pain for them to have to click back and forth so maybe we shouldn't maybe it shouldn't be a toggle maybe it should be and maybe another drop-down I hate to do another drug I just don't like to have a ton of dropdowns but that might be the only way let me know if you think of a different way the options would then be free paid or all I guess or it could potentially be checkboxes that say for your paid and if none of them are checked and it's all about a fault that might be a better option if it's just two checkboxes for free or paid and I guess it could be if they're both checked then you get both and if none of them are checked then you still get both that might be a little confusing but I don't I don't see any other way to do it because the resource is either gonna be free or paid all right let me know what you think okay cool someone else said checkboxes so weighty baifern fan 31 says checkboxes so great okay rowan says he leans drop-down with check box style okay tarek asked about throttling while sending requests research actually I didn't do it yeah I had sucked I assume your I talked earlier when I set it up about limiting the number of searches so like a certain number of milliseconds would have to pass before you're allowed to send another API request I don't think I actually I don't think I put that in so no I haven't done it yet but I intend to do that I think I put it in my cello board if that if not I'm gonna have to check and put it in there man 10 asks about caching there's some caching going on right now I'm gonna also set up some caching on the WordPress side basically I just have to click a button to enable it right now but it's already set up it's just through a plugin though asks can you apply a filter to achieve all posts regardless 100 limit oh cool it looks like there's Stack Overflow I'm gonna copy this now and check that out as well I had read some stuff about trying to get rid of the limit so I I think I've read this one off I'll check it out too but I think the answer was like you'd have to build your own custom like endpoint or something because there's not like a default way to do it so but I'll check it out oh good okay bill also says how about some sort of pagination with the posts yeah a bucha says that's how these single page applications like to work get all the data then filter and sort locally yeah I would love to be able to filter sort of locally the problem for me is just right now I can get all the data but in the future there there may be so much data that that's not going to be a good idea to get all the data Rowland asks this WordPress what doesn't WordPress do some caching by default actually it might I'm not I'm not sure if it caches by default the caching that I am going to enable at some point once I get all my post types settled is every time an API call is made instead of like normally it would go to the database it's a sequel database and then it would put together that data and send it out instead what would happen is that would be saved in the cache so you make an API call and then it doesn't have to hit the database again so I just explained basic caching sorry sorry for everyone who already knew that but let's see yeah and Bill says I wouldn't rely on it because the plugins creator will fix in the future by sanitizing input yeah okay Roland says displaying hundreds of posts might be a bit overwhelming it just puts a network strain okay all right cool Brandon says what if we just you know we only do an API call on the search text box and then filter those results that's what I was thinking yeah Bill recommends using Redux yeah and I kind of wish that I had set it up like that but you're right at this point he also says that require rewrite of how state is managed at this point yes at this point I just don't have I don't know if I gave you all the update maybe I did I think I have until like the 19th so I have to get as much as I possibly can done on this site for what's in my Trello board by the 19th and then I have to move on to another project so I'm actually learned I'm taking the the Udacity react developer course right now so I'm going to be learning about how to use redux I think it's Redux I can't remember which one but one basically one of the things that does what Redux does so I know there's like Redux and mob X and so one of those things I'm going to be learning about but I'm not going to learn about it and enough time to implement it on this project so that's unfortunate I think it would have been better okay Tariq says use of view more button instead of pagination yeah that would be good I was saying it maybe like view more button here and then it just kind of like I can either do a few more or I could do infinite scroll what's your opinion on this I could have it so that once I get near the bottom of the page it just automatically loads more which may actually like it might require another API called on to be honest but we could see how I'd do it or I could actually have a button that users have to click oh cool Jacob says that he's taking that course as well awesome and they are teaching mob x and redux good that's really cool I like that they're gonna do do both of them all right so enough thinking it's really important to think these things through to avoid wasted work and stuff but I want to do something I actually want to get a little bit of this working and then that way if anybody really like wanted to watch this because they were interested in the topic and want to learn how to do this I at least want to do it I want to at least do a filter I might not get to a sort today but I just want to do one filter and get it working obviously I'm there's gonna be some changes made to it and you can all follow along you know on github with the changes and see the finished product at some point