React Live Search (P5D81) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with Jesse I'm Jesse and I'm happy to be back I haven't streamed for a while I was on vacation last week and today we're gonna work on our search feature which we haven't worked on in a really long time so we got it to a point where it works but it didn't have all the functionality that we wanted so now I want to go back to it and take a look at it you know see if we still like it and what we need to do is to get it to a point where we're really happy with it and it'll be good for a user yeah so in the chat I guess I I haven't I haven't talked with you it feels like such a long time so if anything new is going on let me know in the chat I'll definitely check that out you know in between coding and also just a heads up I'd like to keep this stream under an hour I might have a meeting at 3 p.m. my time which is about an hour from now so just in case I do have that meeting I want to make sure I'm ready for it so I'd like to keep that you know maybe give me like 10 minutes to prepare because if I do have a meeting I'll probably have to present some data that I did not get yet hey iniki's here how's it going Syd Syd haurache sorry if I'm mispronouncing the name let me know if I am please anyway how's it going all right so let me get started in case I have some new people here I'll just do a quick recap of how we made this the search function and let me put it up on the screen here there we go sorry if the picture is not as good as normal I left my my webcam in my backpack and I left my backpack at home I had a doctor's appointment this morning and just was going to be late and just ran out the door without at all but I think it'll do you all don't watch this for my face anyway so this screen will still look good the code will look good so here's our search page and I'm just running this locally but if you want to check this out live you can go to dev dot Franciscan University and I should let me let me just paste this in to the live chat now and then that way you all can check it out so the dev the version running on my computer and the version running here at this URL that I just put in the live chat exactly the same version in terms of this page so you should get the same results that I'm getting here and so let's just let's check this out cool yeah so you see I as I type things change there we go so I get different results as I type and right now the results show up with a category so our categories here are basically our post types that we've set up in WordPress and I'll show you a little bit about about that in in just a few seconds here and then we have the title and it looks like yeah it looks like some of these titles still could use a bit of work I have had some student workers helping out with cleaning up the data which is really nice so it looks like the rest of these look really good so others have to check on some of these things because obviously we don't want three PLU four Pharmacy asterisk right that's that's not good so probably don't need that at all that piece of content but right now some of the links work so we've made the title a link doesn't really look like a link so we might need to style that differently but if we click this it should take us maybe is it gonna work okay it is it's working now so that's weird actually this is really weird I thought we had styled this so that it should work let's check out another faculty member let's just say died here we go Monica's okay so all right I need a little bit of work on styling I'm glad I saw that because I thought we had these styled pretty like okay across the board so let's go back we'll stick with this search page for now so let me type in since I know biology works I'll just keep going with that because we get a lot of results so we can search so if I click sort whoa aha Christopher I see you just put that in there so Christopher already got that era the sort was working and now it's not so what did we do we haven't worked on this for a long time so I'm not really sure what we did that messes this up from the files to find you might have mixed up I'm a type is invalid and you list well at least we know where to look okay I'm gonna start this timer this Pomodoro timer so after 25 minutes I'm going to take a break from the code and I'm going to come back and answer questions in the live chat I will glance over occasionally through the chat so if there's something really important or you have if you see something that I don't see that would solve this problem I'll try to keep looking over there so just put it in the in the chat feel free to put any questions in there and I'll get to them after the session we might only do one session today it depends on how many questions we're getting in the chat I do want to make sure I can get all the questions as well so let's follow this error message right because we can't move on and add new features if the features that we already added aren't working right so first things first let's check this error message we need to go to menu list so whoops let me rearrange my stuff here well I'm gonna bring this over actually I don't know what that window is so these are the two I think we might use this is our WordPress plug-in and this window will be our this is our react thing and this was some data had to bring over don't save I had to bring that over for a white list for that University bulletin that I had showed you on we'd worked on a bit and we're actually white listing URLs or email just as individually now which I'm not thrilled about let's see menu lists menu is you know what I wonder if this is this may have to do with material UI if I had to guess I'd say that's it if you remember maybe a month ago or so we we upgraded significant upgrade to the latest version of material UI and we we had to make a lot of changes and I don't know that I ever checked I may have missed something in the components so I'm guessing that might be it because I can't think of anything else we change that would affect this let's check out our components though yes because we'd only actually even have a menu list component so that's referring to I'm guessing something in in material UI so what component trying to look through this a bit to see if I can figure out what components alright let's just check out our search component and see what we have see what we're using here so we have menu item we're importing menu item from material our core menu check the render method a menu oh I'm sorry menu list how about this list you know this girl's probably too small I'm sorry about that make that a bit bigger all right so we're not actually using menu list anywhere lists let's just try list we're not even using lists at all here all right so what what components are we using the layout component see all right this is a bit odd I guess I was a good sign just to go over the code of it to catch everyone up and just to show you basically all we're doing here you know we we have an input field and then on on the ticket so unchanged I can't remember what handler we use but basically whenever we enter anything into that search input it just runs a let's see it runs this little API call right so we fetch that and into this URL string that we're creating we add in the search term so it's not I mean it took us a little while to get to this point but it's you know at the core of it it's just a basic API call to the WordPress REST API I see some some help come in here in the chat let me check this out Sanjeet says press control shift F and enter menu list to search that's search for menu list and check its name from yeah okay so Joseph it's an G both saying search egg what was that control shift F call I never knew the shortcut to that I always just clicked it to open it but it's a good idea menu list a poor interesting what and that's the only place oh man check the render method of menu list well I'm yeah I do not know all right so we are getting some references to search a s way down here 50 interesting it's a 250 and 250 249 in grid okay maybe maybe something changed with material you I in terms of what I can pass in here maybe this I'm guessing here all right let's try something flow control hell protects yeah I mean this this makes sense let me go back let's see when this area comes okay so as soon as I click it that's when it happens so the air must be it has nothing to do with the API call or anything else rendering to the page it must be with that the gist that section that deals with that that select box so I'm guessing whatever the problem is it's it's here so let's check out the material ID documentation for select and see if something that we were doing is now no longer supported and if it's not obvious from the documentation we can go back and check for all the versions the previous versions and see if there are any braking changes that were listed for that we should be able to just you know do a control fine and it shouldn't take that long but first things first let's check out materiai it should redirect this was the URL for the latest version it should tell me what version version 11.04 I don't remember what version we're on let's check that out first to make sure I knew I had my package JSON open somewhere alright so let's see one point 2.0 let's go go to the main 101.3 point oh it looks like they've updated again so we may need to update that soon for now I'm just going to try to get this working so let's just type in select and see what we have all right let's see so what first we'll check select and then we'll kind of dig down a menu item as well let's see so we're using value on change and name which I'm assuming or supported on change value so it doesn't list name here but I don't think that would mess it up we can always check a demo implementation Ross is interesting we could use a native select change effects all right I'm not seeing anything terribly different right they are is saying option let's go back to this one instead of okay this one is usually menu item okay change input props so yeah for this menu item we have a value and this looks like it this looks like we could I mean looks like it works right let me see how I'm importing menu items then to you our core menu and select yeah I mean I'll make sure that I'm importing this correctly I guess whoops I could see it right here and then you item I'm just gonna copy and paste it it looks like it's the same but oh you know what it is it is slightly different alright so let's see if that makes a difference for us okay well it's not giving us an error anymore it's just not doing anything all right so those buttons still work and now we're not doing anything let me check the console nothing getting nothing all right what did I do I see a few more of you joined hey how's it going wow this is totally not how I expected this would go but that happens okay so what did I do I change the import of menu item which shouldn't really have at a difference here because we can see that this is how it's showing that we should import this we can go down here and check oh we can check up here and you check menu item okay Christopher you will still be getting that error because the change I just made is only reflected locally so at this point changes I make will not be available let's check it out we we didn't change anything here right and um yeah it doesn't really tell us much control over this like okay so we I believe we are using a controlled version of this so maybe maybe this will show us the difference I'm close yeah okay this okay all right I think I've found out what we need to do so when you use this as a controlled component which if anybody's not sure what a controlled component is let me know in the chat and I'll take time to explain that but a controlled component the value is controlled by state so it was just working before but now it looks like we need to open and close this as well so let's let's do that so we'll still have our on change you know and we also need a value of open which we had none of those before okay I think this is it this makes sense based on what we're seeing so we really had two problems first problem is we're importing that incorrectly but then the second problem is we now need to include this in a newer version so let's also add in these open and close handle is here I guess we can put them in here and we need in states I need to bring this over and include it in our state there we go and see how that's gonna do me for fresh mm-hm still not working we're not getting in any errors related to that alright let's check this out again all harsh it saying use and rot we could test it out yeah I'm gonna be a bad idea at this point so that's open actually it might not be a bad idea to just check react what's going on with reacts select okay all right here's our values on change you don't know gonna close the open is set to true so if we click okay so that's definitely not that's not changing sum up how did it open get set to true let's refresh this okay that's quick true okay so we did get truthful you know what we need [Music] clothes and clothes oops I think I missed something here let's see what they have in their handle change this event target maybe we need to switch to use this input for ups as well and I don't know why we need that ID yep still nothing interesting like to see what what's rendering below that all right this is interesting okay so we do have this rendering on the page let the state exit interesting okay my timer went up so I'm going to take five minutes I'm going to go back here to the chat and let's um I'm gonna answer some questions now at least I have a hint I'm sorry you know what this was hidden y'all couldn't see that so basically what I would have found in here right is if if we go down there's a modal at the root of this you know or down or shouldn't say the root right it's it's one of the children but anyway when we go in here it doesn't really matter whether we have this open class of true or false that's being passed down by props but there's a state here of exited true or false and that's what really controls this so somewhere along the way something's changing so maybe I need to take a closer look at how I'm supposed to implement that component now with with the newer versions so that's that's what I'm gonna take a look at but for now I'm gonna go to the live chat Phoenix says hey Jesse you're back I tweeted you today about the same glad to see you're back oh cool Austin check check out Twitter and thanks I'm glad to be back our ketose says sup hey how's it going see how's it going hard hey Vinod Chris asks do you have do you have to use curly braces after name I don't know you know what I noticed that in the documentation they had some strings in there and they were just using the string and not the curly braces I'm not sure why I put the curly braces here I don't know if if I had to so that might be something to check out although I don't think this is an issue sorry it's hard for the yawning there let's see Nino says I just recently got a contracting job thank you so much for the help hey no problem congratulations on the job definitely let me let me know how it goes goo goo goo Raj says please explain side nav as visible and hide to small devices the side nav I'm not so do you mean in general making a side nav visible and I had on small devices or something we're doing specifically on this project because I mean I guess normally you could achieve that through media queries in your CSS Christopher Brown says have you ever looked at switching to view no I haven't looked at switching to view I don't have anything against view I just have a lot of projects and react and at this point I kind of I would rather specialized yeah so I mean you know to do maybe a side project than view just to try it out would be cool but I have a lot of stuff going on and react right now so I think it would be I don't know I think I just think it'd be better for me to specialize at this point Nietzsche says no the curly braces starts you enter JavaScript mode and react yeah so that's why I'm wondering if maybe those were necessary in an older version all right I'm yeah I'm not exactly sure why I added those maybe I can take them out and it'll work in any case I'm pretty sure that's not gonna solve the issue but it may save us a few characters okay Nino says could you help me with the layout yet Nino let me know just like send me a message or something on Twitter or you know that you know ask me whatever questions you need to okay so timers up it's it's 2:30 8 p.m. my time so I don't want to do a whole nother 25-minute session because that'll put me into my meeting time so let me check for now yeah you know what for now my next step is pretty much going to be to just look through the documentation more carefully which is not going to be very fun for you all so I'm gonna just switch up to checking on another part of this and I'll read through the documentation later so for now I mean these still work so sorry these still work and the search still works so you know we've got enough functionality to go on here okay so I'm not gonna restart that timer I'm just gonna go for about I don't know 10 more minutes with this actually yeah let's sit a 10 minute timer go about ten minutes and then I'll see what's going on a live chat and I'll keep an eye on if I start getting a lot of questions I'll go back to the chat so what I'd like to do is let's bring this back up again what I'd like to do is make sure I want to take a look at these these links that we're creating because that's gonna be an issue because not all of them will work Wow this is terrible if there's no way this is gonna work yeah okay yeah for sure that's not working all right so we can come down here and look where we have this parents checkboxes ah here we are so we're doing a lot of sorting right based on what our sort it could be if our check box were working so we don't need to worry about this right now what we have we're getting back JSON data from our API call and obviously reading back the title and the category but we're also getting back the the type and the slug and that's what we're using to create our URL which it works sometimes but not all the time so we're gonna need more data we need more info I'm wondering how we can do this I think what we need yeah what we'll need is maybe another another filled in in WordPress and a risk originally I was trying to get around doing this but now that I have some student workers I think yeah I think it this can work we can actually add a field so what may need to happen then yeah let me go to the WordPress where sir that I thought I already loved into one oh wow okay let's go to major so that's what we were looking at I think this so what we need to do wow this is weird what the heck happened here none of these even have categories hmm that's no good off to fix this let's go and click on one of these then just to see what we have alright so in particular yeah this this is actually pretty awful there's not even very much in there what we would need then is a new field somewhat like this permalink field where we can edit this link but what we'll do we'll have a field add a field where a user can manually put in that that URL at least that that last part of the URL and then on the react side we can check so for our href here we'll actually have a turn area and it will check to see if we actually received a value for that URL if we did it'll use that if we did not then maybe it'll fall back to something like this I would really rather have that work automatically but just given given the complexity of the URLs and the fact that they're not they don't really all follow the same pattern as you know if you've watched the previous episodes which I'm sure you've seen that I'm just not sure that there's a way to if not only around you know having users put in manually here's what the URL needs to be for this piece of content that that should solve yeah that's just solve that problem it should solve our search problem I think yeah so that's probably what I'm gonna do to fix that normally I would go in and fix that so it's but I'm just letting you know what the next step is we may or may not do that on a stream let me know if you'd be interested in that that's probably going to involve some PHP or at least finding some sort of plugin that we can use I'm having some issues right now where in the past we've used advanced custom fields which we could use here with the API but the problem is I need to find something that also works with WP graph QL and advanced custom fields currently does not work with WP graph QL so if I'm gonna have a solution may as well find one that works for everything I'd rather not use advanced custom fields plug-in just for the search and you know have that whole plug-in there just for one thing it'd be better to find a solution that can work for everything if possible let me check the chat I mean I'm probably gonna have to wrap things up here very soon so this is kind of a frustrating stream for me I actually didn't get anything done well I mean I got I solved one error message that's about it but just kind of unexpected errors nikki says in the chat if we're self hosting those fonts next Jess will probably probably let you add the needed loader to webpack for it to work okay cool Christopher says you should work on replacing the loading with a loading indicator yeah for sure I've you know what I think I have an issue about that on github right now I don't know vaguely remember making that issue so you know that's definitely on the list but yeah I mean I'd say that getting this this.href right is probably the most important thing right now for that search because that's that's key functionality right if user searching for something they want to be able to click on it and actually go to that page so that needs to work everything else is not necessary to work even the sorting you know if we had to launch today I could remove that sort look and just leave it and for later but users need to be able to click on those links so that's priority number one for the search page so that's definitely getting done and then we're gonna we need to add more more types so just to show you before I wrap things up with the actual fetch the WordPress comes built in with this WordPress API it's a REST API and the way you use this is you just have your URL so here's your base URL which is the URL to the WordPress site you add on to the NW p - json / WP / v - and then after that you can you basically tell the api like hey here's all the endpoints so i'm going to get data from so we're using a plugin called multiple post type which allows us to get data from multiple post types but then that also means we need to list all the post types that we want so currently we are adding by default Department major and faculty but we have a ton of other types so we need to include all those other types and then also we can change what types are added so in state we have these check boxes right so we can change which type is that we're searching for okay and that's how we'll filter so this definitely needs some additional info here right now we are getting per page which i think is reasonable under per page the user can definitely use filters to narrow that down and you know I I think it'd be fine I mean think about it we'll only gives you ten per page and most people don't get passed on most people don't get past that first page but then after that it's very rare for somebody to actually go through you know 200 results right they have to go through ten pages of search so I think that should be fine and we may even want to lower this really all right and that's my 10-minute timer just went off so I'm gonna check the chat it looks like I don't have any more questions so kind of slow day for the chat kind of slow day for me too in terms of what I'm getting done though all right so yeah I'm gonna wrap things up and see I kind of hope I don't have a meeting but I do want to be prepared if I do so if I do have a meeting I'm gonna have to leave for that meeting in just a few minutes so thank you all for joining me definitely glad to be back I hope that you're glad that I'm back to and someone asked if I could flash the folder structure so yeah let me there we go all right that's that's the structure and you can check it out on github as well so all of this code is available on github the links in the description feel free to open pull requests a for kit to use it for whatever projects that that you'd like deaf have a lot of issues open right now if you want to work on them that's that's awesome especially if you're trying to get your first pull requests in let me know make a comment on an issue and I'd be more than happy to work with you to help you get a pull request in alright so I tomorrow is pretty busy with meetings for me but I'm gonna do my best to try to get a stream in especially since I didn't stream at all last week so hopefully I'll be able to stream I'm not exactly sure what time afternoon is gonna be bad for me so I'm thinking maybe late morning I might be able to get something in but I'll let y'all know on Twitter and probably on Instagram as well if you're subscribed to this channel and you turn on notifications you should get a notification when I scheduled the stream and it'll remind you again like a half hour before the stream starts so I definitely recommend that if you'd like to see some other videos check out my youtube channel the link is in the description I do occasionally put some videos and livestreams on there as well let me thank you and that's it for me thanks again for for joining me and for let me know what you think in in the chat I really appreciate that and I'll see you all tomorrow until then have a great day