Adding Query String Support to NovaPackages with Laravel Livewire - Matt Stauffer Livestream

alright alright alright hey everybody welcome looks like there is around a 10 second lag on YouTube according to at least my experience oh nice 10 o'clock on YouTube and a around a 5 second lag on Twitch today which isn't too bad but just so everyone knows the lag thank you all for joining so today we are going to be working on horrible echo oh did it get doubled up and better now there's always something with the sound every time so my apparently I have two versions of the exact same input on my I just upgraded to Catalina and I'm pretty sure that's what happened so he's asana yeah I don't know it must have been a cattle need to upgrade thing so hey Sam hey Larry so yeah so now that you can all actually hear me take - thanks happy Valentine's Day yeah that's the that's the the red my kids are wearing red this morning or and pink that's my daughter's obsessed with pink so so yeah so what we are going to do today is let's share we are going to be working on updating Nova package comm which we recently converted to livewire to update the URL query string every time a important request dated changes we're gonna update the basic page like the just the normal arrow page so that if you refresh that page or send a link to that page it will actually respect those query string changes and then if we have time I had some people this morning or one guy this morning say he didn't like the fact that this new livewire version only shows you six pages at a time because one things he likes to do is just scroll through all of them and he doesn't like having to navigate so I'm not sure how I feel about that but I figured one thing we could do is an easy win so one of the things that he had mentioned was that or somebody else had mentioned was that Caleb will be making it easier to do [Music] what's called lazy loading where you just kind of scroll down to the page and loads more and more but they said wait to do that until after larrikin online which is in two weeks so right now I thought one stretch code would be just to add keyboard shortcuts for pagination and one possibility might be to add another row here so we were paginating on nine instead of on six and that'll depend a little bit on just how I think about it in different different browser you know screen sizes but we might throw this up to 9 per page and possibly imagine eight six and then another stretch goal would be this thing where we were saying so when you're on a particular package type and let's find a big package type that has oh because we're not in live one when your particular package type if it's got lots of pages hmm where's okay if you start searching well anyway if you start searching you might find yourself in a circumstance or actually actually the better circumstance let's say let's go here you search for ABC you don't see it you go oh you know what I don't actually want an action so you want to dismiss this tag we had talked about putting like a little X here so you keep your search query but you drop the tag filtering so that's another option so infinite scroll thank you hey no worries you didn't miss anything other than me messing up with audio once again so that's what we're gonna work on so first thing the latest version not the latest but more recent than when we started versions of livewire make it possible to automatically update the URL query string every time important request data changes so let's get that working so let's go to the laravel livewire documentation and see what it can tell us about query string and look at updating the query string sometimes it's useful to update the browsers query string when your quota state change is perfect for example if you're building a search post component just like we're doing and want it to reflect the current self file like so all right so this is exactly what we're talking about right now you can add a properties name to protected updates query string and live well we'll update the live wire will update the query string every time the property value changes perfect so are there any plans to add domina shape manipulation functionality or we're doomed to you something like Alpine jeaious what kind of Dom manipulation but I my guess is that he's expecting that if you're wanting to do something you can't with live wire that it's gonna be an Alpine but I'm I don't I don't know I don't actually know all right so um okay opening it up and yes code and we were talking about the it's been a while since I've worked on this project so I gotta remember the name of my my live wire component package list okay so we're gonna add a new thing here that is oops it's a protected something I thought I copied it but I guess I went away updates query string and it's gonna be an array of the properties on this that we want to have updated so right now it's probably gonna be tag search and page as my guess so let's just try that now and see how it treats us so as we switch tags nothing happens okay so let's take a look here and see what else we have to do all right so we're on a live wire component we create a protected property called updates query string it's an array of keys the keys reference the things that should be changing so why is it not happening live wires for Ajax right but there's some things like word counter that doesn't need Ajax calls to the server I mean I guess if you'd think that they don't need calls to the server you either might want to use something other than live wire or you might disagree with the foundational premise of live wire but I'll let you have that conversation with Caleb one of the things that he did in some of his early demos was show I even think he even showed some things that shortcut around the calls to the server but I can't remember exactly but he was showing very simple things that you'd normally say don't require call to the server and even some of those used them but yeah that might just be a circumstance where you just don't use live wire but I don't know okay but I want to focus on so why so we're not seeing that that thing works that thing working the way we want right now so let's make sure that we have the latest version I don't even actually remember what the livewire / livewire yeah let's see what is the latest version of livewire ODOT 7.4 and we're on ODOT 6.0 so i'll just bump it up to the 7 series right now and see if that's what we needed for it yeah I remember in some of Caleb's earlier demos he was showing I think the possibility of something where it might've actually like certain things would have I passed the calls to the server but I don't think that's where I ended up so I'm pretty sure if you end up in a circumstance where it's not just hey I think that you know like I've you know I I foundationally I'm surprised that this is a good idea for the server call but now that I've used livewire it turns out it's actually not a problem and you've moved into oh no you know what this is just a thing that's a bad fit then I think that's probably a thing that you're gonna want something like Alpine 4 or vanilla JavaScript or view or whatever else so no livewire will not replace for you jQuery will continue in the liberal community livewire will continue inertia will continue view will continue react will continue I also don't think that livewire will ever get as big as view because view is as big as it is because of not just his presence in the lyrical community but although levo was a big part of its growth but also its presence in the non level community but within the liberal community I do think that livewire is going to grow a lot password is right now because livewire and inertia are both a ton of fun to work with and livewire is I think is an easier onboarding for people who don't know to you and even people like me who do know view but who feel more comfortable well I think Clive bar is a really great fit in that context yes it was very difficult to learn the layout of my keyboard to the point where I several years in still don't feel like I'm as fast with his keyboard as I was with my old normal layout keyboard while we wait for this to download in case anybody's wondering what keyboard this this is the Kinesis advantage to I guess not I I it's actually just the number two and it's this is not the only one with this layout I forget the name of this layout but it's got a name and the biggest shift that I had to make was the so that the the the letters were actually pretty easy to learn but the modifiers being on the thumb and then the things that use encoding a lot but not in your dorm or writing those are the things that have been artists for me to kind of learn it's in part because I don't do as much coding every day as I you know used to but yeah I'm pretty I'm average speed now I used to be an extremely fast typist but I got this keyboard because I was having horrible wrist issues so man I do not know what is going on with this update right now so Wow we heat wait on that let's see if there's anything else for me hang on I paid the basic page of respect query string down on new visits so my guess is that just because it updates the query string does not mean okay here we go doesn't that mean that it's going to read it so one of the things we're gonna have to do there is once this query string has changed we're still gonna have to update a yachtie up with my wrist issues a lot okay cool we're gonna have to update our code to change to honor that so great so it is updating it great done upgraded tail art I fail with livewire and then added tracking for our query string so that was super easy for basic variables that impact future loads what happens you go for all package it shows that string well the bigger question is what happens you go to the nasty one where it's this really janky thing that I don't want anyone to see yep the popular - - and - - recent which is a bummer because that was not something I ever wanted and you know an average human being to actually see I have Taylor Biggs turbolinks in live or on a car level nah nah I mean did like adding it well I don't understand why I would have to be baked in like it works like adding it was basically no cost whatsoever so yeah I think a lot of people will kind of get stuck thinking that a particular use case is the use case that every uses but like plenty of people don't use any Ajax all plenty of people use their bail for api's like that laravel api people were like you should get rid of all this front-end stuff from Laval right and then people who use at the front end be like you should make more in so you just got to recognize that like there's a reason why so many things are healthy as packages you know like I think that normalizing the use of things like turbo links 100% totally agree with you and you know live wire and stuff like that but baking it in I think that's definitely a little bit of a different story okay cool so we are now updating the query string we have a question about whether we're gonna kind of make this be less nasty or something like that but right now it's just whatever it does the job so let's figure out how to but if we refresh do we end up on the action page and the answer is almost definitely no because I never program great exactly I thought thanks for following xk lee xxxxX one thing I love about Symphony and hate about Clarabel is that a lot of components are second separate packages yeah I mean I've heard the people complaining about the fact that laravel Clare Wilson inherent things are bundled instead of separate packages and so you know like like you're mentioning Marisa I certainly wouldn't want us to add any more but one of things i hate about symphony that thankfully has grown a lot in the last few years is that you like for example in the early days of symphony you didn't get auto wiring in your inversion of control container by default you'd have to wire every single thing by itself so what I like for me is that larvae out of the box works the best for someone who's just learning it because all of us who know enough to complain about something know how to get rid of it if we really care I have yet to see a compelling reason why somebody needs to pull something out that's very difficult to pull out because you know like they don't like that they're there but it's not actually harming them at all so all right cool so let's get to the point so our next step is to make it so that if I come to this question mark tag equals action that gets set so what we really want to do is when this tag is set like this we want to be able to pass that tag in to where package list is being called which I'm probably packages dot index dot blade pack nope home blade where are we actually calling this some that's from welcome maybe ok package index wait no that's not that's the olden view one I'm trying to remember yeah there's a packaging why did that not work when I auto-completed of course networks ok cool so right here is where we're passing live wires so the question is can we just pass in tag to be something else like this so that if we pull it from the query than something else so let's for now just manually set it to be partition tagged partition and I think in order to do that we're gonna have to then in the constructor or render or something cuz to mount maybe in mount we might have to pull that yeah here we go later when we're handling querystring updates in live blah blah so let's just see what is [Music] like where do we actually get the things that are passed in do we get something where tag is partition ok cool so I think this is just gonna be like data it's probably what's happening there and when you run mout you get whatever was passed to the to the second property here so yep that's exactly what it is won't live wire controllers in view makes standard level no absolutely not no no I mean like yeah no yeah it's cool but the idea that everybody's going to use live wire for everything is is definitely not the case for me just the same with them with uh turbolinks alright turbolinks is used what is definitely not globally used so okay so so we've got our data here so let's just basically say if we pass in tag page and actually no I should have done before I did this was make sure that tag page and search are all passed in there all right so search is tagged is and then let's check out page great so one note the one thing though here is that search is getting updated even when it's empty which I don't like that might be a feature to pull request up to UM to livewire is don't keep it in the query string if it ends up being null thanks for following death by code yeah David I mean it I yeah it's it's a it's great I wouldn't use it on everything all the time it introduces complexity just like any feature does that I'm gonna use when I want to use and not use when I don't when it doesn't seem like the right fit I definitely wouldn't just say we should use it all the time it is cool though okay cool so step back what did we just do okay so potential pull request to livewire or issue requesting to take query string parameter the one thing I wouldn't I wouldn't notice for there one thing I would note for that is it's possible that it does but it's gone from being null which it was originally to know an empty string and there might be like a thing that we would have to do that would like be on updated search that's actually just tries for a second if this search let's just do this if it's if it's at all not only you know or falsie then this search equals actual null and I wonder if you make an actual no does it get rid disk it does it get pulled out of the the query string so let's see action it does so that's the trick I'm going to put this here prefer null over empty string to remove from query string that was cool figured that out go team boom update Astra search to set to null if empty so it's disappears from the query string okay questions here which package using for og it's not a package it's a custom blade directive I don't even know where I put it yeah he go custom blade directive called og and it basically just pulls out the Keane the value of it and then echoes I met a thing so I'll put this up on larval tricks later if I remember put og lay directive not on there well tricks okay see you if you can yeah I've been going to be s Co to try for a couple months now it's it's good it's not um it's not as good in terms of its multi-select and vim together in the same as the blonde text is so I basically can't use multi-select any more because it's doesn't work well with the vim bindings that's my most annoying piece about it but everything else about it I like it you are very welcome Embree M mm er Emory Emory so we sort of have t a prettier four blade we've got teal in if anybody's not familiar with it not that one interesting somebody else came out with one and they're bigger than us oh no that's TS language okay so T lint right here is a linter I'll answer that in a second or so just give me a second if I can so it's a linter for laravel conventions the titan style they're about conventions and it's got plug-ins for all the major things so you'll actually probably end up seeing it run in my code why don't you rebind the multi-select why don't i rebind the multi-select i don't actually know what you mean what multi-select is that mrsa okay so oh sweet Nate okay cool so yeah the hot key I'm sorry I there's interfering oh I did it didn't work it's happened in a couple of the of the streams so I'll do something like this so I this and part of it will start working but then you know let's see I'm trying to member what was what do I do to trigger it so used to not work at all we got to the point where it works a little bit but now there are certain circumstances in which let me try to remember what does it what do I do all this okay so first of all one of them is we're at the beginning at the end of the thing so this one's at the beginning this one's at the end and it doesn't always go to the right like that I don't know basically on an almost daily basis I'm able to put myself in a circumstance where the multi-select completely falls apart so Teelin doesn't do any formatting now but we have talked a fort we actually have the beta of a formatter in there if you do sleep Teela in format it'll try it but it's it's pretty beta right now so okay so back to what we were talking about before a minute ago we were going to basically say if you in the mount method if you pass in data and that data contains important things then we will set them so we don't want to take any data well all right one thing we could do is just say for each data as key equals value and just basically set them on the [Music] just like that and that would certainly make the whole thing a lot simpler team lint doesn't do no team that definitely does do blade so it does yeah I know worse sealant does blade that's why I brought it up as a suggestion oh so that's working obviously we're not pulling it from the query there but interestingly we don't actually need to do it here and now that I'm looking at it because duh patches Lestat PHP has access to the query string so I don't need it you just so if request has let's see about this how maybe we can do this for each real cost only and what we're doing page a tag page and search although that's not helpful because that's not gonna give us the key is it it's only gonna give us the values I think undefined variable request tag lens Oh huh we did get them both great okay cool this key equals value now let's that is a nice form writer for blade and vs code all packed I tried messed up the code I'm not sure um I had one running and it always messed up for me use it anymore I do have tea light running so I'm trying to remember what like I think we could trigger it I think that triggers yeah so you see T lines running there and then it says put a space between the blade control structure names and the opening friends and then when you hit it so but it's not formatter it's only a linter okay so back to this I believe this package will stop PHP so what we're saying is give me the property amount thing for tag search page and then set them on this package list instance so what that allows us to do is if any of them are missing it just doesn't set them and we're not gonna pull if somebody tries to like hack us by like pulling setting something else on here which I don't know what it would be they can't because we're using a request to only not request all so so let's see if it works so if I go to tag lens let's go to one that actually has something tag base resource and then I literally go to a brand new tab and I've got a pet tag based resource boom tag based resource alright so now if I'm in tag based resource and I'm gonna search for a dashboard oh if this my algo leah is not indexed but whatever it doesn't matter we're not getting results we'll still at least see if the query sticks so I go here go like that and that's interesting that's not what I typed that happen what about validating the value in the request nullable to get a null instead of an empty string other thing is I don't want it to stay in the request at all yeah if you're talking about search if you're not talking about search let me know but the thing with all the whole thing with null instead of an empty string is happening not just in the request it's also happening when they're typing so when I hit backspace here this VAT the value searched internally in livewire is now set to an empty string so in order to make it when it's an empty string become null again has nothing to do with the query it's actually modifying the query string not reading the query string that an instance okay so let's see is there anything we have more than a full page of it's frustrating if there's not no all right so let's change our pagination down to like two items instead of six real quick which would be render package list paginate six no I beat this one over here all right cuz that's certain yeah okay so paginate two are to save cool all right so we're on page two so that should be google analytics and patch discovery and i know i can just hit refresh but i'm doing this for people to see a little bit more clearly and look we're still on tagged action we're still on doing analytics we're still impact discovery so I think we did it I think it was really fast and we still have half of a stream left so we're gonna hit some stretch goals today so let's see update mount okay let's try that again when people try to do these like smart code things sometimes it really drives me nuts all right update mount method to pull page search and tag from query string if set so I kinda think about it for that which was I paid the base of page requesters query string to enter new visits so I think we're done to the point yeah we're done with that first first goal in 30 minutes way to go Caleb and five minutes of that was dealing with audio and another ten minutes of it was just explaining things so let's review commit and then move to our stretch goals so when we change any of the three important things which are tag search and page then that it is persisted to the query string and when we refresh and visit again the query string is honored along those three lines and so now we have basically a full kind of like push state for this so let's go take a look let me oh you know what I never tweeted out that I was streaming like I normally do I looked over to my thing to try and hit the button and I realized I never actually hit the let's go button wha-wha-wha after upgrading the Catalina my stream deck oh it wouldn't have mattered my stream deck wouldn't have mattered wouldn't have done anything because my stream mix totally unhooked from OBS now because of upgrade to Catalina who knew that would have done something let's just hit pause with me what are used for your note keeping it is notion dot s oh okay which is sort of like a slab or you know whatever else replacement one thing I like about notion is it makes it really easy to share these notes publicly though okay so we were oh so I was hiding it really quickly so I can go over to github desktop so I can make sure that github desktop is on the correct project and now I can bring you all back not using my stream deck share full screen okay cool so let's look over here what have we done we've upgraded livewire mm-hmm and we have track and honor page tag and search query string you know it's a really good way for me to well I guess was really I was gonna say I could go to twitch.tv slash Matt Stouffer and see how far the stream is behind let's just do that I'm gonna do that for fun it's gonna be like a so well actually how would I do that one two three four five six so it's four seconds behind on my machine okay cool so what do we do next stretch goals add keyboard shortcuts to pagination for Stefan Bower and possibly paginate at 9:00 instead of six so let's try paginating at nine still six because that's an easy win so search compassionate at night well okay hold on let's imagine a couple different devices and figure out what nine paginate 'add would be oh this is weird I thought I'd fix this can I find the element app okay that might be a thing we need to as well I'm fix cannot find element app view warning on the home page okay so I wanted more than nine things tagged to action well you know we could do all packages without search there we go okay alright so we've got lots of packages apparently I just didn't tag them super well so what we want to do is test out on different screen sites because on my local you can see that six feels really good however I am also zoom well I'm not zoomed in that much but on Nova packages calm feels a little different because we all of a sudden have more than one popular package and so six starts to feel a little a little small now interestingly this page fits just fine but once you scroll down here on my screen it's start feeling like you can either throw another three on there but it's not just about that it's also about what would make the most sense for people with various devices so let's imagine I was using this on an iPad and how do you flip them there we go okay so is using an iPad 6 is already a six is a pretty good page so I'm not really interested and if you're using an iPhone I definitely don't want to have to scroll what's going on there now pagination still - I thought I'd fix that gosh darn it fix pagination links being too wide on mobile okay yeah so the idea of having to scroll down nine to get to a next page I'm not sure if it's something I totally love so I'm kind of leaning away from that unless anybody here feels super strongly that we should need me with nine but one of the things that Stephane was saying was that he would be interested in it being able to kind of browse through them really quickly and I agree like having to click through the pagination in the mouse especially as you can see that dots are changing and shifting this can be a kind of a pain in the butt at times especially if you really want to click through so let's do keyboard binding especially because it's just a fun thing to work on let's see what keyboard modifiers when that modifiers I don't want to modify I want an actual maybe there's just keydown events somewhere else here we go triggering actions key down wire colon key down equals so we have to figure out what the name so this is key down enter so let's see what like--all though the key for left and right are gonna be my guess is gonna be whatever JavaScript calls them so this is what happens when you press that key when you're in a particular input I'd love to see what happens when word can we put it on the entire component instead and I don't know if that's something he actually he actually kind of allows for here let's see if there's anything that makes us super clear and if not then we might have to integrate some JavaScript which would be a fun challenge too all right so we want to do it in the package list blade thing here so let's just see can we just put it at least here why our key down down enter equals and then we'll have to have something that's doing oops all right and then so we're gonna say wire to Q naught equals test okay so the question is can I hit enter and have it go to the test and the answer is no so my guess right now is the only way this is bound is when I'm actually in a particular input which is basically now it's possible that this is causing this problem for another way so let's just take a second just see what happens when I click on this input yep so the binding works fine nope that's interesting okay huh so one of the problems I'm noticing here is that when I navigate through here I don't get actual true push State so I head back I just go back so we're gonna have to say add issue / PR to live wire to add push state browser history when a query string is modified is there something extra to do when installing teen-line - because code install the composer global you're started because code after extension yeah you need Oh after I don't know you'll have to go on the I mean I'm sure there are things to do but this is I we could we could spend the next 25 minutes hacking on that so if you put an issue up on the the Teelin repo I'll make sure that the team line folks at Titan take a look at it all right so we are getting the point where this oops that's good lord value equals this is what I was trying to do here okay cool but if I hit it so it does do that correctly so this this wire : key down doubt whatever works on an input but it doesn't work on just a div so as far as I know that means we're gonna have to be doing this binding in JavaScript which is cool because we're gonna have to figure out how do I modify livewire stuff with JavaScript and actually let's think about that how do you do that how do I have JavaScript a JavaScript binding modify livewire without forcing a full page reload is it possible is it really obvious is it documented thanks for subscribing Augusto hmm there you go check a look you can use at this dot set so we can modify them there all right so let's do something fun [Music] so JavaScript bind to arrow keys let's just see if we can do in vanilla JavaScript without having to pull in something else you go boom okay so and he's actually mentioning this idea to use a blade stack which I love to push it so let's do that so we're going to go to our app layouts app blade IV HP we're going to put a stack down here called scripts and then we're going to push on to that and push and then we're going to put our this is assuming jQuery but it doesn't need to be jQuery although I am curious how do you do this is oh no that was a fully jquery example I want a JavaScript one EDA which is normalized for pure JavaScript first two lines with document dot he down key down whose function okay so this is nann jQuery version okay so let's let's see if this works I'm sure there's something I'm missing here just to do a console log oh come back console log every time I hit the left arrow all right left arrow and go oh okay let's try this okay so we're not even seeing that be bound so let's see if my push stacks is not working okay so this isn't even getting pushed in that would explain why I'm sure that I used my stack wrong so let's figure that out real quick we have our layout app blade PHP that has a stack that's how stacks work right yep stack scripts just like I was doing stack scripts yep and then we push into it yet with the name push into it at push scripts the push does not have to be what's interesting so in his he's doing it in the body here I thought I thought push can happen outside of a section I think it can because I don't even think it makes sense within a section to be honest you know I mean what am I missing here everybody I'm sure it's something I mean honestly what I'm inclined to do is just throw this where that stack script is right now until we figure out what's actually going on yep there you go so what's being bound twice now consulate log outside the eventlistener is that what I did what no cuz this consul that log was right here but it's running twice now which kind of makes me think that I just needed to ream refresh a couple more times or something nope what is going on see that you can see cuz it might in my stack the console dot log is inside the listener now it's outside of the switch but it's inside the listener I was just trying to get a VC what so if I throw it in here I get at zero times if I throw it in here which is right next door it supposed to be I get it two times Oh cuz I hit take multiple keys wait a second yeah what is going on okay well whatever I'm sure it'll be super super obvious when I watch this later and whole bunch of people on YouTube will be like you missed this totally obvious thing what's wrong with you okay cool so the bindings working so now we should be able to find on left great left works and then right works he says before actually testing to see the right works you go cool so we have right and left working I won't worry about up and down from right now I'll get rid of all this stuff all right great so what we want to do here is at this dot so it has this this dot set no no is that it wasn't the keyboard thing was the JavaScript thing that we're looking at can I call I can call an action alright so that this dot call and then there's like I think it's previous page is what it's called and then that this call next page and that would be cool if it was that simple all right so we need to go on soap sorry you all can't see the rest of that we need to go to something with lots of pages and then hit left and right oh it doesn't work look tink of it invalid syntax error okay what's my syntax error is it the at invalid syntax error not sure when I do this it stops having that same syntax error I betcha yep it's that at so what's the trick here no look at this at this that at this director compiles the following string for JavaScript to interpret I was going to say I'm pretty impressed that he did that but so what he's doing is if you do this within your livewire component it gets compiled correctly so unfortunately we don't have this at this thing conveniently in here so actually you can't even let that this so let's just do this okay so that's probably what we need to do unreferenced component is not defined at document o component right right so I don't know if we have access to that so that's probably not gonna work so really in order to make this whole interacting with JavaScript thing work we actually just have to figure out why my push and pop is not working oh right let's go back to that and figure out why it's not working anybody tell really clearly why it's not working Kalista played up PHP the only thing I can tell the different is that in his example it's like in line with his components blade view but my components blade view has like an extends and stuff so you know what maybe if we put it on the parent instead let's try that I don't think that's gonna work though let's just try it let's just try it your video stuttering sometimes a lot oh I'm sorry everybody if you're all having this problem art internet was a little bit slow today although I'm a little bit surprised OOP Stuckey down still not working I'm losing my mind here sorry everybody I had no idea what's causing trouble today I'm getting green sends on my Oh yep 3995 drop frames four percent of frames have been dropped although I don't actually know if that's a big deal relative to normal now the imagine if oh wow that's really bad everybody well this one might not stick around on youtube next time I don't know what's going on with it and at the office today unfortunately so I don't even know how to fix it so goodness well yeah OBS shows me is green which is it's its way of saying you're sending plenty of stuff over the wire I don't know y'all I'm sorry about that but funny enough at this particular point I'm stuck anyway can you push up to ancestors [Music] well can you push up to ancestors yeah yeah as far as I know you can push the whole way up I mean to push push doesn't care how far up it is you're just pushing on in stack from anywhere in the descendant tree all right so let's hey Ari's let's take a break for a second with our brains so we are trying here let's try this right now real quick just say hello world so in theory if we have an app populated PHP stacked scripts and then in a child thing we have push scripts then we should see hello world and we do so the problem might not be that it might actually be the whole script replacement thing which would be gratifying if it was not my fault let's let's try it down here again and once again replace this with hello world no I must make sure I cut that not deleted hello world is still there so had nothing to do with not understanding stacks and pushed correctly it's because something about the way live wire does its whole magic script replacement thing oh and now it's working goodness yeah it's working fine no it's right there so and now there's that component ID thing he was talking about it replaces at this with that so awesome so that doesn't mean our keyboard bindings are gonna work oh but they are look at that I have no idea why that didn't work yeah you all saw it happen all right so look at this just a fun Bower left and right yeah I fixed it by changing literally nothing left and right pagination options keyboard shortcuts look at that and that fun that was pretty cool all right so let's look at the different test typos and then the stack oh and we can get rid of that whole wire that key down here so what have we done here we have added left right or add left right keyboard navigation to paginate 'add sections on blame vs code that works for me all right cool so that was our first stretch goal well it was our second stretch goal we got 10 minutes blazing through these today Oh hold on let's update it update our ad left/right key binding to pagination I'll just one second everybody okay great so what was our next stretch goal allow for dismissing the currently selected tag with a little X next to it when searching oh that's fun I'm excited about that one let's do that one real quick considering how quickly it loads I wonder if it's possible to have live wire only display loading it takes long next time to get the response in this case I'd want the loading to not show if it takes practically no time to load anything yeah it's a really interesting challenge I'm gonna put that in our future notes thanks Marisa and I wonder if even if you can't do that with live wire if there's actually a a way to use CSS where every single time to think it's shown it takes a second to like fade on but you can do a sharp fade so really what happens is every time it gets displayed it takes you know whatever 0.5 milliseconds or 5 milliseconds or 50 or whatever it ends up being to show up and so if it gets turned on and that CSS fade has not actually finished before it gets turned off again then you wouldn't see it so that'd be interesting okay so what were we doing Oh a little X here so let's do that so interestingly we could I kind of don't love this um this UI anyway so let's let's see if we can say right here we're gonna do a little doohickey it's a technical term and then right next to it we're gonna do a another doohickey and it's gonna say so what is it wire : click equals tag equals null I'm sure that's way too easy let's just try it real quick transitions with CSS or D balance and JavaScript so the problem is D bounces JavaScript would require it not to be magic but it is magic so we can't do it because it's a it's a livewire magic but the CSS transitions is what I was thinking about just to refresh the chat sorry y'all um I'll just throw this in here okay so let's see when I click it does it make it go away oh no there's some way to do it but I feel like if you maybe have to do um like back ticks like that in order to do it no I feel like there's a way to do it we're on the wire click here you you run an operation here andreas says what happens if you try to get the next page with error when there's not in any next pages package list dot php' x' next page method nope live wires next page method keeps incrementing it Wow I was sure that it was smart enough to only increment it if it wasn't passed the last page I'm really glad you called I cuz I had originally written a custom um custom one and nice catch look at that so we need to override the with pagination well yeah now I want to override the next page in previous page methods to be smart enough to only do that when the count is let's see what what is our count parameter how do we actually know the count I might have to get into like the pagination review territory this is clever when you're updating a query string this makes it so that page one does not update the query string nice Caleb okay just so many things happening the brain right now what are we trying to do we're trying to fix the thing that we just pushed out before we work on the other thing so let's let's fix the thing we just pushed out first and I really thought that it handled that already okay so let's just grab this first thing we're definitely gonna overload these so let's overload them ourselves we might also fix next page previous page to disallow overflows and we might want to consider doing that in our own things let's go take a look at our pagination links thing because I bet you if we go to end Veda pagination we'll see what the count is paginate are on first page oof so the paginate or itself is smart enough to know how to do that thank you Yannick that was what I was looking at is the dollar sign set in magic so unfortunately we have to now go look into where is it's has more pages definition coming from because basically then that has more pages and that all that kind of stuff comes from count do we have like a um like a count thing on our paginate er or something like that where could I put that I'm gonna die in dump it I feel like we're getting down a little bit of a I'm really glad you caught that on Darius thank you I don't think it's gonna be count but let's just take a look yep it's not count is there a way to figure out all the variables you have access on a live wire instance I'm just wondering what does okay so with pagination oops not the reference go to the definition it gives us a paginate err I want as paginate or use oh you know what it's on the packages that's what it is duh the packages has its packet of package information and pagination information on it so it would be we would have to save this packages probably on the component itself so let's see how do you get the number of pages off of a patch what actually what comes out of paginate is pagination length the where paginate err I think yes and it has a last page and a yeah so fixing the the previous page is gonna be easy basically you can say if this page is greater than one then this page you know is this page minus one that's super easy this is one's gonna be tougher which is this this page is gonna be less than whatever count is then do it and so we need to be able to pull count off of the packages so every time we pull in packages now we need to have to be able to say this - page count equals our total pages maybe equals packages and then what was it called last page let's just try that maybe um thanks for subscribing Kwami edokko get to find vars yeah good point and then we'll have to do it here as well and then anything else that renders a list of packages also I guess this one is an imagination so so now we have this total pages variable and then we should I guess we should set total pages to one here and oh okay length away or pagination I wonder if it's like get last page or something like that I got a hold on I gotta take a phone call real quick everybody give me just one second you all right I'm back sorry buddy um so let's see if we can solve this one problem so we need to be able to get the last page off of length aware paginate ER and sometimes it's faster to google it and find it in this old documentation here than it is to try to hunt it down when I have the vendor directory ignored in my IDE last page thanks Yannick or it's even faster if somebody just looks it up for you yeah perfect actually this and this is total pages so in every place where I said last page I just shall say last page like that okay great did that work oh of course won't work off off the bat okay so if we go to all packages let's go to action because there's no more pages okay so we might have caught it now let's see if it's working on all pages of packages that does have things okay we can't go previous to page one which is good and let's say we go to page 67 we can't go to 68 but we can't notice 69 thank you very much for catching that so we are unfortunately not going to get to our stretch goal so let's go undo the work we did there which was I think in here you know is this stuff next time we'll just have to jump onto that why was that okay all right so let's see what we did total pages equals one total Pikmin 2 equals 1 total pages of the factors last page X last page and then fixed next way for you is page to disallow overflows sweet and I understand why live art isn't that do that by default because you have to be doing this thing where you're modifying total pages every time you're doing a pagination call can't you pull the Declaration of total pages out of the FL statement instead of duplicating you might be able to good catch now that you mention it because they both will end up with a length where paginate oh right yep great point thank you simpler I like him all right so just test again it is fetching a new page which is weird because nothing's actually getting modified so that's an interesting thing I mean it's not like it's gonna be a big problem but I am a little surprised because when we hit next page nothing changes but it must be something about if you call in a method it has to call yeah that's where it is because this logic exists on the server so it has to call to see if anything should actually change so okay cool so good work team thank you for all of y'all's help so what we're doing is gonna say avoid pagination overflow when using keyboard shortcuts thanks again Andres alright so we made it that far we did not end up getting to the dismiss in the currently selected time tag but we did avoid pagination overflow hey 100 messages today with restream chat thats fun thank you everybody do you what's tightened CMS of choice over each one we kind of tend not to I mean we do we have a lot of love for Stata emic and craft so those would you know but we the last time we actually did anything with the CMS has been quite a while but those would be the two for sure static and the laravel and the static side and then craft on the you know the more old-school everything lives in the database you know better than WordPress and expression engine we actually have used WordPress once recently because we needed a really easy authoring interface that ended up spinning out on an API that Larry about consumed and so that was actually a perfectly fine choice for it but you know alright thank you everybody for hanging out yeah we don't use October we are poking around at twill a little bit although while I think is like probably half admin generator half CMS well I'm not sure but yeah I know a lot of people who use who very avidly advocate October but I have not used it so all right thank you all for hanging out good work team and I will see you all next time

Channel: Matt Stauffer

Views: 2,130

Keywords: caleb porzio, coding livewire, development, education, how to program livewire, laravel livewire, laravel livewire tutorial, learning laravel livewire, live, live stream, livestream, livewire, livewire from scratch, livewire tutorial, matt stauffer livestream, php, programming, optimizing, debug, debugging, optimize, optimization, performance optimization, query strings, query strings in livewire, query strings in laravel livewire

Id: aaBMSG38n9s

Length: 64min 30sec (3870 seconds)

Published: Tue Feb 18 2020