Laravel Movie App - Search Dropdown w/ Livewire - Part 4

what's up guys welcome back and in this video I'd like to build the search drop-down using live wire live wire is a full-stack framework that allows you to create JavaScript components that usually need to make Ajax calls but now you can do it entirely within PHP now you still might need some JavaScript for some UI interactivity so for that we'll be making use of alpine Jas so let's go ahead and get started so first thing I'm going to do is install live wire and then extract a live wire component so let's go to the docs here and let's see how to do that let's compose a require it okay and let's include the assets so I am using their Val seven here so we can do it this way so I'm gonna add live wire styles and live our scripts in my layout file so that'll be main top plate I believe may not play the PHP help so let's add these styles here and it's add these scripts before the end of the body okay and you can publish the config file if you want but I'm just going to stick with the defaults and there's other configuration options here if you want as well so let's go down to making components and we will extract this component or this whole thing into a live wire component so let's go ahead and PHP artisan make live wire and we'll call it search drop down so PHP artisan make live wire search drop down so similar to blade components we have two new files here we have a class and we have a view file so let's open those up so that would be app HTTP live wire search drop down and we also have the view file here so let's go into that live wire starts drop down okay so now I just want to extract the HTML in here from here so let's grab that search drop down so it's this whole thing right here so if you see if I remove this you'll see that it's gonna be gone from here okay so let's put that in our view file for livewire and let me just reinvent that okay and now we can re add it in our blade template using ifire search drop down and I don't think we need to self close it so let's see if this comes back and there it is awesome okay now I just want to scaffold out the styling for the search drop-down so let's go ahead and do that with tailwind go back here and I think if I just make another div that's absolute right underneath here so that absolute and it's a BG gray 800 as well and let's give it some rounded corners let's say results go here and see if that renders correctly okay and we'll give it some padding in each of the elements because I want to make a horizontal rule here so let's just make it with 64 just like the search input to make it the same size okay cool it's got a margin top as well okay and within here I'm gonna make an unordered list and I guess this could have been the parent element but I'll just stick to what I have and for each of these I want a list item with a border border grace 700 is what I have here and each one of these will have a link to a movie and say class equals block say hover BG query 700 and you can put a transition on this if you want I'll probably do that behind the scenes UI three and it's a Avengers see how that looks okay it looks pretty good and it's add two more here just to see how it looks okay so that looks pretty good and I think I have this as small text so let me just add that text SM okay so now let's hook up live wire so let's start with the live wire class so search drop-down and we need to make a public property that's similar to state in save you so whenever this changes this render method will get re rendered and the view in here will update so that's what we want as we type here so let's make any piece of state let's make it public called search and this is just the search that the user puts in here so that's going to update as we make changes to it that's defaulted to an empty string and I can't remember if I have to pass this in or if it gets passed in automatically so let's try so let's put something here actually hello there and let's see if I get pet it gets passed in automatically in our view here so instead of this first result I'm gonna do search does that work I'm sorry this goes within a big glass so right here okay let's try that again and see if that renders okay so it does so you don't have to pass it in cool now to make this reactive so it updates every time you type something in here we can make use of the wire model directive so similar to V model in view so let's add that right here on the input so let's do wire model and we'll give it the search variable and like magic this should update as we type into the input so I'm gonna refresh and you'll see this update hi there so I hope you can see all the magic that's going on here we have a class here we have this search component and it's hooked up to the input and as we type here the back end gets changed and this gets rear-ended if it needs to so there are some options on this wire model for example if you want to change the debounce time you can do that by default I think it's set to 150 milliseconds but I want to make it a bit higher you can just do that and now you'll see that this won't get updated until I stop typing so and then it updates after 500 milliseconds so that's what we want because we're gonna be making calls to our Search API endpoint and we don't want to make a call for every keystroke okay now let's take a look at how to use the Search API and for our endpoint its search slash movie so if you got into my rest client you'll see that I have an example here takes a query parameter and you can give it whatever movie you're searching for and then you'll get it results array similar to our popular movies in the first video so let's go ahead and add that to our livewire class so back to our search drop-down and I'm gonna make a variable here called for the search results okay and I'm just gonna grab something similar to what we did in our movies controller for this popular movies but now it will be for search results so let's update that search results so it's search movie and we have a query string named query equals and the string is this search and there's also a results key so we can keep that and since this is not a instance variable up here then we have to pass it in directly I guess we can make it an instance variable if you want but I'll just keep it like this so search results equals collect actually I'm gonna make it a collection but we'll just pass it in like this for now and let's dump out these search results too so we can see what we're doing so dump search results okay so back to our view here and let's see if this works HTTP not found let's import that okay okay so there is the results for hello there because that's what I default it and see if it actually yeah so it kind of matches what our query is and let's just put that back to an empty string okay and let's see if this actually works so let's refresh and begin an error here says undefined index so what I'm going to do is I only want search results to be available if there is something typed in to the info box so I don't want to search one character or two characters I want at least at least two characters so we can just do if STR Len this search squared any or equal to some number I'll just do two then you can do this so let's move that up and now this should work okay and you see it doesn't search for one the only searches for at least three characters so let's try Avengers here okay and there are the results for that query cool so let's go ahead and loop over the search results and display them in our drop-down so we don't need these two and let's go ahead and for each over this so we have our search results coming in and say result and Smoove this in there okay and the title is going to be result title let's do that and we also want to link to the details page and we have a route for that and you can grab the ID as well so route is movies that show and the idea is gonna be result ID okay and let's see if this works let me get rid of that dump cuz it's gonna be annoying okay let's see if this works okay so let's try typing in a search query in here Avengers and there you see it update here and you can see in the bottom left this should go to the appropriate movie page awesome okay so I only want a certain amount of search results so let's go ahead and do that so I'm gonna collect this make it a level collection oops collect and you can specify how many you want here so I'll take say 6 or 7 say 7 ok and now we should only have 7 results here so if i refresh try again there's only 7 results cool so I also want the case where there's no results so if I just type some gibberish here then I wanted to say no results for that string so let's do that back to our template let's just make a conditional here to check if there is results so since we made that a collection we can just use the count method so if search results count is greater than 0 then we can move this up there ok and then we can put an else clause in here for the null results and I just do class on the class px 3 py 3 no results for yes but just in quotes say search ok and that should work see if that works ok so it does work but it's displaying when there's no results so let's see if it works for ok so that works and this still works ok but we also want to get rid of this when there's nothing to show so I just have to make another conditional around the entire thing so around the entire search input so right here so say if so similar to what we did in the class where we checked if there are these two characters so let's do STR land search Square than or equal to 2 ok and it's in that here and it's just indent this ok try again ok let's type in gibberish ok and this still works awesome ok let's add a poster image for our results here so right to the left of the text so let's change this anchor tag to be a Flex container items center and the first result will be the image and the second result will be the title so let's put this title in a span and it's put a margin left on it ok and the first flex item will be the image so image source and that's gonna be HTTP image dot tmdb org slash TSP / with 92 so I'm just getting a smaller image and I showed you how to do this in the last video and I want the result poster path poster path and say poster okay see if that works try again okay and we just want to change the width here so let's give it a class of eight with eight I mean with eight see if that is good okay looking good so some results don't have a poster path let's see here as you can see for this result there are some posters that don't exist so we can just put a placeholder there so let's just say if result poster path then we can do this but if not we can put a placeholder image and it's gonna paste that in it's just from a placeholder image service and that's the size and let's see if this works maybe and and their lives cool okay now let's add a loading spinner and livewire has support for that so for the loading spinner I'm gonna make use of a tailwind CSS plug-in that is easy to use so just when I believe so let's go ahead and install this or NPM okay and I think we need to add this to our config here or first we have to require the plug-in in our tail when config so tailwind that config yes let's put that in here okay and we have to add this stuff in here in our theme let's do that let's put it after the extent okay and let's get rid of this okay and it's compiled this town npm run dev okay that's done let's go ahead and just put a loading spinner in here then i'll show you how to use it within livewire so let's just put it anywhere to see it working so I'm gonna put it right here and we just have to do dot spinner and see if that renders anything and there it is cool and by default this spinner is position relatively and I want to position it absolutely so unfortunately we're gonna have to go into our tailwind CSS here and override it here so dot spinner position:absolute and we have to compile again okay that's done it's go ahead and try that again and now you can see its position absolutely relative to the info box so now we can position it to the right so back to our blade let's say top 0 right 0 and it's just bumping into place with these margins which I already done and there you go you see it there so now all we have to do to make it work with livewire is add an attribute here so similar to how we have wire model above you can just do wire loading and that will appear if it's still in a loading state when making requests so refresh and as I type here you'll see it appear here also so the last thing I want to do is check out how to test your livewire components so let's take a look at the tests we made in the last video so I was called via movie test view movies test and let's make a new one here called the search drop-down works correctly ok and I'm gonna fake the query like we did before and the endpoint is search smash movie and I'm gonna search for the Jumanji movie and just like I showed you in the last video I have a fake response for that query oh this fake search movies and then we can assert if we see this text so let me just paste that method in so I'm gonna paste it right here and as you see I have the Jumanji movie here and we can assert against that so to test you can just do livewire test give it the name of the component on our cases switch drop down and then we can make assertions on it just like how we would make assertions on the response so assert don't see Jumanji because we didn't type in the search drop down yet and let me import this ok and to simulate typing in the search drop down we just have to give it the set method we want to set the search input or the search variable to Jumanji and now since we have our fake response and that response has Jumanji in it they can just do assert see Jumanji so this should pass if I did everything correctly and there we go we are at green so we built this drop-down in livewire and it makes requests to our back-end and updates our front end whenever changes are detected we have that loading spinner and everything works great however for things like toggling UI elements then that's when you still need JavaScript so for example I want to be able to press escape and closed the window I want to be able to keyboard navigate and that sort of still works I want to be able to click off this and then hide this that doesn't work so in the next video we'll be taking a look at using Alpine Jas with livewire so we can accomplish that and maybe I'll also add some interactivity to the other elements on the page here for example maybe if I click on this a model will come up and same for the play trailer button so yeah stay tuned for that please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one thanks bye [Music]

Channel: Andre Madarang

Views: 25,545

Keywords: laravel livewire, livewire laravel, laravel livewire tutorial, laravel livewire demo, livewire tutorial, laravel livewire search, livewire search, livewire component, livewire testing, andre madarang, drehimself, livewire caleb porzio, livewire http client

Id: BGNLi9Cojbs

Length: 24min 7sec (1447 seconds)

Published: Thu Apr 02 2020