Build a Cart Powered By State Machines — Learn With Jason

good morning everyone and welcome to an adhoc episode of learn with Jason I needed to get something done and I've been procrastinating so here we are on livestream to hold me accountable what's up Jordan what's up A+ AMA good to see you thanks for stopping by so yeah let's let's talk about what we're doing so we have been working on kind of off and on a new version of the net with ice swag store so if we look at let's see what do I want to look at let's look at big muff first all right so somewhere in here is bisque or ghee there's biscotti um oh I got bounced out of the well that's unfortunate okay everybody hold on for a second while I log out of figma in this view let's see what else can we look at let's look at the deploy preview 15 cuz that's the one we need so this is the the work-in-progress swag store and then I also made this thing on my profile see where is it oh not those nope here pens public here we go so we made this one that is a like kind of a fun footer for the site based on some ridiculous things that that Rafa and I wanted to do yeah that's big sickly oh my my figma really is just like a nightmare in here just me trolling people but yeah so that's that so so yeah this is this is the thing that we want to do where we want all the contributors for the swag store to be we're pulling I github avatars cuz look at this I learned this cool thing if you take someone's github username here so their username and then you add dot PNG and a size to the end you get their avatar so we can really easily pull people's usernames if they contribute to this repo so I built this too so that we could like highlight people who contribute to this Web Store so I'm really really excited about this this is this is really fun Rafa had this this cool idea to kind of make this look like the Looney Tunes that's all folks which i think is really fun what's up Nikki what's up the flying dev good to see y'all ooh yeah that chicken and mushroom sauce I made last night let me just let me just show this so this yeah Marissa and I have been coping with stress by cooking things so let's see yeah look she made these apple muffins yesterday that we're oh they were so good I'm gonna eat the rest of them today and then we made we made chicken so this is like lightly lightly breaded chicken cooked in a cast-iron skillet and then we cooked down some mushrooms in the butter oil and chicken fat left over after frying the chicken we cooked the mushrooms and that and then added cream and Madeira and it turns into this really nice sauce and then we had a bunch of potatoes so I just like chopped him up and and fried him real quick so made like homemade french fries I'm gonna say they were like okay they weren't they weren't great fries they're not sweet potatoes no that's what's weird like these are regular these are regular potatoes but the way that I fried them they went weird and like changed color I don't know what I did I they like I said they didn't taste bad but these were not my my most they were not my best effort I don't think anyways as you can see as my stress levels ramped up I've been drawing pictures and like making food this is what my life is like lately so yeah that's that's that's a quarantine quarantine stress management 101 yeah Nikki if you've got a recipe for for Belgian fries that would be significantly better because I am NOT doing not doing a great job with my fries I made like I don't know if home fries is a thing outside of the US but like in the in the u.s. at diners they they chopped the potatoes up into like little like little pieces and then fry them with like peppers and onions and and stuff like that and you get this really kind of good morning hash right so I made that that worked out pretty well french fries this is the first time I've tried it you know I'd like hand cut those those potatoes and so the sizes weren't quite even and I think that you know that showed in the the final product you know lots of lots of issues so anyways back to code what am I talking about right contributors so we've got this thing and we want this to show up at the footer on every page and then Rafa had this really funny idea to make the credits for the site so like instead of showing a footer with just a list of links he wants to do movie credits so I think that's really funny we're gonna do that and all of that needs to go in here but that's not what I want to work on today so what I want to work on today is actually the shopping cart and so let me get into let me see if I can get into figma we just switched over to like a what's it called a single sign-on like a sam'l kind of solution so I have to make sure cool yeah I can nullify account reset password I might not be able to pull up the logo today I think I gotta click a link so I'm just gonna just gonna power forward so here's what I want to do today here's my goal we need to have a client-side powered cart so when you add a product from the store into your shopping cart you're able to know we with oh okay all right I'm gonna talk about the bot for a second and I swear I'm gonna focus on the the bot right now we have multiple BOTS running so there is a stream labs bot which does things like the subscriptions and follow notifications there is the blitz Jackson the robot who's actually running from tooth to software pieces so there's there's like blitz Jackson the robot which has our regular commands like like our text commands so that that works here and then there's the new stream blitz bot which stream blitz is what is is handling like these for example takes a minute to warm up actually I think so these these are running and and I haven't updated the sound effects command so what I did figure out though is that stream blitz can operate as an API so that I can list all of the commands but for the moment for better or worse this is all handled on github at the learn with Jason dev and in the site functions these are the new commands right and so if you want to use one of these you can just go in and look at it and this is the the command that you would fire so if we want to show me potato salad there it is so yeah we've got a we've got a whole bunch of new ones I'll throw this in here if y'all want to play with it but yeah and there's still some still some bug's to work out but stir that's just coming along it's like becoming a thing I'll probably figure out a time to come in and do actual work on that on stream to to play with it and show it off a little bit but it's been unstable enough that I and I've been changing my mind so often that I'm not sure if if it was really ready to show before here so okay so talking about the cart all right I'm gonna be I gotta run focus up on myself like this is not there we go okay doing it it's gonna I break focus up broke focus out that's unfortunate okay um oh wait is it just focus did I forget all these commands this is really too bad should we focus upstream Labs that's where it is yeah so I need to bring some of those across so alright focusing so what I want to do is I want it to be so that when someone comes to the site they can add items to their cart right pretty standard ecommerce functionality and when they've added something to their cart I want us to to keep track of quantities so they need to be able to add and remove quantities and we also want like the ability to open and close the card so I think what we're gonna do is kind of a side a side position cart little little pop open so you can you can see your cart in place wherever you are on the site so in order to do that we need to we need to figure out how that logic is gonna work and I've been a big fan of state machines lately so I'm going to attempt to write a state machine to do it so to do that we're gonna go to X States I forget what the website is so we're just gonna go here and I want to use both the docks and the visualizer so what I'm gonna do is I'm going to start with my cart so we'll call this a cart machine and then by default it's not going to be doing anything so we're gonna call that idle and we're gonna have will say products or I guess items and that'll just be an empty array and then down here I'm gonna start with just the names of the states so let's go into just this and if I update this we can see that we've got an idle state so right now our cart doesn't do anything there's no it has a storage place for the current items in the cart but it doesn't ever get out of the idle state so the next state that we would need is like we want to have an open state and I think maybe what we can do is instead of final we'll just call it closed right because closed would be like the cart it's not doing anything it's just off to the side what's up Chris thank you for the sub appreciate it so if I update that now we've got closed and closed we want to go to open now why doesn't it yeah there it is so if I want to be able to get to open we would need a way to open it and if we wanted to if we wanted to do a transition or whatever we need an interim state that will call opening right so then what why are you yelling at me and do nothing all right so when it's closed we're just gonna listen for commands so on instant Corgi stampede shouldn't have been fixed did the count even come up did I break it well guess we'll find out blitz Jax Monroe oh there it is forty counter seems to be broken though so that's that's no fun I wonder if it's off-screen hold on maybe I broke it now that's the right size no oh you think you're way too wide so if we make this like don't don't be like that it's fine everything's good what's going on all right let's go here all right Kenny are y'all even seeing this there's just like weird sup should we try a nice look I was trying to focus up and then I realized that y'all made me break things and now hold on just troubleshooting troubleshooting away but let's go over here make this like 980 no that's not it just gonna keep just like flashing on screw yeah that's terrible just don't mind me live live debugging we're doing it live there we go alright so that should be fixed now the the count should actually work so let's yeah let's let's try it actually yeah the I definitely broke the the redemption thing there we go that's a that's a hard-coded a value and totally forgot to unhard code it so so yeah alright so on we would say on open we want to transition to opening right and then if I update that now we have the ability to actually open the card and then on opening we want to do something automatic so we're basically going to do we we want to invoke like an animation and then when that animation finishes it would move us to the open state so let's do so let's do the we can create like a service in here actually you know what I don't really like the idea services because what happens is you start having all these names and they get kind of hard to follow so if I create one called like opened cart animation and this is going to be an async function that will take will say nothing and what it needs to do is trigger an animation and then once it's done it's going to return true right and so what we'll do is we will have this invoke so basically as soon as it starts we're going to have it invoke its invoke so the source is open cart animation I think this is I'm doing this from memory I might have to look this up and then on done we go to open and on error we'll just go back to closed now formed arrow function parameter list now formed error function parameter the hell does that mean anybody see my error here what am I doing wrong Oh duh thank you that was the right thing okay so check this out so now because this returns true when I open it's gonna move to the open State and like I can I can slow this down a little bit if I want so instead of doing a sync let's return a new promise and we will get resolved and reject out of here and then what I can do is set your really like making that look gross aren't you no break this down here I think okay so there we go I'm gonna set a timeout and we will say the function we want to run is we're gonna resolve true and we will do that after one second one second and yeah that's that should be good so let's update okay so now if I open goes to opening and then it transitions to open okay cool so we've got a basically that's a one-second animation that would take us to the next thing so okay so baisama this is something that I learned from David core sheet David Kay piano on Twitter you don't have like you can't have states that are different at different times that's it's two different states so an animation is its own state that animation needs to complete and then the open state is like an idle sitting in one place and the reason that we want to do that is because if the animation happened while open was true then all the buttons would be interactive which would mean that people could like try to click things or someone could accidentally if the you know the cart moved under their mouse as they were trying to click and they click like the delete button make it takes and out of their cart so opening keeps everything inactive and then open will trigger everything to be able like you know what I mean like opening opening is is when we know that things are happening and open is when we know things can be done well so Nikki it's like the the animation is one thing right so it's an interim it's an interim state where one thing is happening and we it's I mean in terms of the the actual line like I mean I guess it's kind of a it's sort of an academic distinction but like if you think if you think about it less in terms of like academic correctness and more in terms of truth right like when the cart is opening I don't want other things to happen when the cart is open I want other things to be possible so if we if we have those both things are true then we would want like we we need to think about it as like two separate states Chris I have no idea I have no idea state machines support concurrency I assume there's their support for parallel state machines I don't know what that means so I don't really get like exactly how all of that stuff works or what that means so theoretically but that's probably a better question for David Corinne okay so right that's a good question the X state is a a library for writing finite state machines but finite state machines are not they are not a new concept like these have these are a they're a philosophical approach to things that is implemented in lots of different ways so this is this is kind of a it's gonna be like pretty heady but what I like the good way to think about this is what we're basically doing here is yeah like a program design paradigm so so what we're trying to do here is we're trying to make sure that impossible states are impossible so one of the things that'll happen when you're writing code is that if you are using like the the standard way of writing code you might find yourself doing something like like you know if State DOT is open and it's not let's see it was write actual code it's not animating then like make buttons clickable so like what what we're doing here is we're removing this need to write lots of if logic by saying like what is true in a given state and so we can kind of determine the the work flow through a cart or through any piece of logic by saying like when the cart is closed the only thing that can happen is that it can open right there's no there is no way for a comfort like a closed cart to be interacted with you can't remove things from it you can't click buttons all you can do is open that cart and so I just noticed something that we're gonna have to think about which is that the open and closed State of the cart component is going to be different than the state of the items in the cart so I actually don't think I'm gonna even keep the items in I think I'm just gonna control the open and closed state of the cart because I could add an item to the cart and the cart component never needs to open or really show anything yeah I wasn't on that's that's exactly what we're doing because what we what we're trying to do is we're trying to chart like what one can do at any given state so and the goal is that like if I showed you this this is reasonably understandable if the cart is closed and I go to open it let me move back the card is closed and I open it I want to open the cart it's going to go open and then once it finishes opening it will be open and then if I want to close it I can say on close I'm gonna go to closing and the closing state is going to invoke will say source closed cart animation and on done we're gonna move to closed and we probably need an on-air but I'm going to leave that out for now because I don't have anything for it so let's take this one and paste it and we'll say closed cart right and what will end up happening is now when I update this let me get rid of this logic down here now I can open my cart it goes through the animation I close my cart it goes through the closing animation and then it loops back to closed so I have two options I can I can open the car but now that it's opening I can't open it again right it's already open so I can't do that again and now that it's open my only option is to close it I can only close it I can open it I can't put it into the opening state I can only put it into the closing State and then once the closing State is finished it goes to closed so this is you know it's a the the the idea here is that we are very clearly I wish I could drag these around to make the arrows a little bit more like sensible because it's it's hard to follow this flow chart where the arrows are going but let me actually let me just get rid of this here cuz that'll clear clarify a little bit okay so so here's our workflow we go closed open action that takes us to the opening state which invokes this call then when it's done it moves to the open State in the open State we can call the closed action which then moves us to the closing State which invokes this function which then has the done once this this is finished and done then it moves us back to closed so we move in a circle right we we are we have established a workflow from point A to point B that has interim States so that we can do things like animation and we're not going to need to add a bunch of logic and our UI cards we're just going to be able to say like for if the state matches this state then this is the component you show or if the state matches this state this is the the thing you show so it's still conditionals but it's not those complex conditionals where we're guarding against like multiple things we're able to just put it into a linear flow so it's a little easier to think about that way so let's I mean let's maybe let's maybe just take this in and make it work right because I feel like this is this is most of a that I mean this is a state machine like we've we have written a state machine so there are two major components that we've got here the first one is actions like it when I use this on prop what I'm saying is that an action called open can be fired and it will take us to the next state the other thing that we can do is we can invoke so as soon as the state gets entered we call a function and so as soon as we hit the opening state we want to invoke open cart animation and then we can add on done and on air and so let's let's actually add like an error state and what we'll do with this is we'll actually just leave it at or one no we should probably do this we'll do an on reset we go to closed right so we just bail out if something goes wrong and what we can do now is we can set for on air we'll go to air and we'll do the same thing up here on error go to error okay so if I update this now we have an error state and that can be reset so if I make this fail like if I just let's say we wrote some some bad code and before our timeout finishes this is gonna reject so let's whoops let's update okay now as soon as I open this fails and we go to the error State so I want to reset so I reset I go back to closed so basically what we've done is now we've just added error handling that says like if something goes wrong I can go back and just say hey let's try again right and so and like notice how fast that was versus error handling in in like ways that you leave program before like I know for me what I would end up having to do is some kind of like a a try-catch block and then in the try-catch block I'm like firing up some other component and that other component is like trying to reach up into into parent State and so what we're what we're doing instead is we're basically saying like hey if you hit the error state your show reset button and that reset button Oh movie back to the closed State so that we can try this whole thing again we probably won't I would be really surprised if we ever hit this error state but we're gonna keep it just in case so from here let's move in and let's actually do something with this so let me pull this up we're going to go into swag dot nullify comm yep and we'll pop this open and I am going to see this is the product card let's go let's close everything down and let's just look at this thing so all right so we've got a Gatsby site right here's our Gatsby site and in it we are pulling in Shopify product data so we've got Shopify product data up on we've actually created Shopify store and the product here is hey what's up David good to see you here yeah no I mean that's like I I'm I I'm I think I'm just gonna be using like your I think you did an example where you used animations to get from an open to or close to open and back again and so I'm gonna be trying to do that kind of on my own here and so there's always a possibility that an animation function fails would be super surprising but we're gonna keep the error state in just in case and that way we at this point there shouldn't be any way for anything to go wrong in this program that's not recoverable because even if things fail we have a retry button right so it we might get caught in an infinite retry loop but we'll never get to that point where the whole app just like barfs and you have to you have to reload the page or something so that's our goal here is to make sure that we're we're always covered in the sense that we can that we can like predict our UI right we've got a safe UI here oh yeah so the let me show real quick what we're trying to do so this is the the net la vie swag adult supervision here well played yeah so what we're trying to do is I want to add a cart component and the cart component is gonna live up here and I want someone to be able to click that and slide out a cart tray that'll show you what's inside the cart and then close it to the hi bet again so we probably won't get to the actual let's see I have until 11:00 today so we probably won't get to the point of actually implementing the Shopify buy SDK which is where this is ultimately going shopping by SDK is also dope so we'll do a follow up stream on that but this is what we're gonna use for client-side cart management and this just talks to Shopify it allows us to store a cart so if you put stuff in your cart and then you close the window and go away then when you come back then you can you can reload that cart and which is like I think it's pretty fun it's a it's a pretty cool way to do things so we will get there eventually if we if we go fast through this this cart part we might try to tackle a little bit of it today but for the meantime in the meantime what we're gonna do is we're gonna take this X state chart and we're going to implement this in a way that when we're closed the cart component will be hidden when we click open it'll animate in the opening state when it finishes the animation it will move to open once it's open we will show like a you know the cart goes here kind of placeholder and then we'll have a close button when you click close it's gonna move into the closing State and that will put us back to closed so that's kind of our goal here right where we're trying to get into a really nice a really nice workflow where we can predict all of our our states and actually design for them so that we've got all the states covered and our program can't go into a direction that wouldn't actually work so let's uh let's let's make that happen and to do that I'm going to do something ok so I'm going to go over to the to the docks because I need to install this right so I'm going to use the react state machine so I'm going to go to the packages and I want X state FSM no react so I'm going to go in here and I'm going to yarn add X state and X States react that I need anything else no okay and inside of our our cart here where we're loading our Shopify products and then we get this layout which is where I'm gonna put the cart and the cart is gonna live in here so I'm gonna create a component for the card and this is where everything is going to actually happen so let's let's just borrow this part because that's what we're gonna use and then we can import use machine from State react Wow that was not the thing I wanted X State react and then I want to just pull in our machine so I'm going to co-locate it so that it's easy to reference as we are doing all this so I'm gonna take all of this and put it into here and then I'm gonna design define a cart component and we'll leave it without any any stuff just yet so we'll just return let me get the fragment out of react and we will say to do build a cart okay so I'm going to export that and then in our layout up in the header I'm going to import cart alright and now if I start this then you gotta know if I'd ever owning its certain gatsby we got that's a deprecation I'm not gonna think about that just now just realize I've had this cup of coffee in front of me for like an hour now and I haven't drank any of it so I switched over to the like thermos mug right and now my coffee is too hot until afternoon whereas before my coffee would be like too cold before I even got to my desk you like that is a ASMR if I like sort my coffee right next to the mic I'm so sorry that's got to be horrible yeah I got this at UH I got this at the the what was it the graph QL summit they're cool like somehow I ended up with like four of them so all right we've got use machine signed the value but never used machine is not defined okay so I need to get machine and that comes out of X state and that's in cart that's why I didn't see it machine from X State right and then down here I can get state and send out of used machine State and send use machine cart machine okay so I'm going to this is gonna really Bork the layout but what we'll do is we'll dump the state just so you can see what's in it certify that okay let's take a look all right so our state comes out with a bunch of things but this is kind of the interesting one so we're in the done or the closed state so we can now do something like let's let's see what we can do with with components here so I'm probably going to start in line and then we'll we will start to move these out so I'm gonna use matches if the state match is closed I want to show how do I want to do this mmm this feels a little bit messy but we'll get there right so we're gonna take that we're gonna show if the state match is closed it's closed right and then if I take each of these and we go with opening and open and then closing we will see that only closed shows up so it's in the the closed state so then the next thing that I can do is in here we can add a let's add a button actually will do a button on click that is going to send open and what did I break Oh needs to be an arrow function okay so now I broke it it went into the error state oh it went into the air state because we didn't write that function yet so let's add the error state to because I totally forgot that and we'll add our button which on click will send reset and bring us back right so check that out how cool is that so we we have now added error handling already to our cart which is just so dope okay so let's see put the coffee mug Midway yeah yeah that'll work okay so oh so the the coffee that I'm drinking right now is from Cova coffee and it is I think it's called Allah let me look it up first Cova coffee I am drinking this way it is extremely good and extremely worth it I would I would highly recommend if you are a home coffee brewer give it a shot yeah I mean all of Cova coffee is really good I am particularly a fan like my I find that my taste runs more toward the the Central and South American coffees I don't like a really acidic cup and I find that like Kenyan coffees especially have almost like a fruity taste to them so I just it's not my thing but yeah let's let's let's keep rolling on this thing so I need to add our OpenCart animation so let's remove the rejection so that we actually move through our states here so I'm going to open need to reload I guess open opening open Hey okay so now in our closed state I'm going to add a close button so I'll just grab this button straight out go to open and there we go close close and now we can go to closing and closed opening open closing closed boom that's awesome okay so now I have to remember how animation works which is this is not my area of specialty at all so I'm going to cheat and I'm gonna look at this where was it there's I got to tour no recipes somebody did this and did a really cool thing where was it custom hooks and animations yeah David if you're still here and you remember what the oh yeah I think it was this it was yes this is it so Dave jet ski made this it's awesome and so I actually am gonna try not to just use his code I want to actually learn how to do it so I'm just gonna figure out what library he used and then I'm going to move I'm gonna move over States okay we this is what we've kind of done so let's get to the animation library or is the animation what if I just search for the word animation animation completes green sock alright let's let's learn green sock so what I want to do is tween I think all right move elements hmm hmm box okay so it has a styled box and then the colors get set okay that's all good and then JavaScript we grab the box elements and then apply rotations to it good so that seems like what we're after and then event callback I think we would want if anybody knows how to do this stuff like definitely let me know because I can I can certainly work my way through this but probably faster but I don't want to just like I mean I can just read Dave's article so if I if I get too stuck we'll just go read his article but I'd like to kind of muddle through it on my own just in the in the interest of like the struggle right like I feel like the struggle is is worth the struggle is worth getting after here we go on complete that's what I want so let's just give this a shot exactly right you like the the struggle is where I feel like things sink in because if I just if I just write out the code that Dave wrote I'll get the result but my retention of it is gonna be lower because I am just kind of like reading and then copying down and so with this I have to actually think through it I've got a reason about like okay where would I go where am I going where am I going to end up here and so that's my my intention here what is that is that a spaghetti maker what's up will good to see ya see Ryan Warner codes Ryan C Harris all sorts of folks in here or Accio good to see you oh man yeah all right so let's uh yeah let's just try this maybe May what I should do a reverse complete Oh interesting can i they're like a toggle thing run backwards this is cool okay so I think what I want to do probably is start with that's true all right let's play let's play with one of these for a second so I've got this box and what I want to do is we it's not gonna let me edit this edit on code pen that's cool okay so I don't think that's actually the one I wanted though I feel like I just kind of want one of these standard standard dealies yeah cuz that's really what I'm after and so if we if we want to run it backwards be the move right we just want that reverse method between reverse and the tween is just up here okay all right so that's that's what we want so let's go back to G SAP and figure out how to install oops getting started and I want what if I just want install instructions getting started loading it's probably where I'm after don't really want to do that I'd like to npm install let's go down to there do I need bonus plugins mm-hmm I don't think I need that I think I'm just gonna yarn add gzip and I guess we'll find out if I need extra stuff later yarn add G SAP Oh pasta I get it I get it right you okay so let's get back in here yarn develop and then I'm going to come over here and we will just try okay so I think what I'm gonna do to start because I don't want to get get out of here I already had this what's going on node try that again this time there you go alright so now I should in theory be able to load let's see what I need to do I probably don't want just like all of it right so I probably want just the the plug-in I'm using so I think or do I need do I need all of G SAP mmm you can include like so you were using server-side rendering okay so I'm gonna try just pulling in the tweening because that's really all I need so let's go to tween and let's see if I can do that I'm going to just import two from G's up that gonna work I don't know find out and then what we can do is we can set this up up here I guess let's pull let's this may not be what I want but I'm gonna put it in here to start so we'll say two and we're gonna just call this like cart and we want to set the X this lake or really what I want is I want to what do I want to do I want to like slide it in from the left so I would need to move it off to the right and that means that we're gonna need to do something that does overflow:hidden so that it doesn't break scroll bars later paper sama thanks for stopping by oh whoa what's react G sab maybe that's what I need let's look tween timeline from oh yeah yeah that seems like more of what I'm after tween oh cool oh cool okay so this looks way more like what we're after because now I don't have to figure out how to make it work with react what's up there in dev uh Chris I have used react spring it would be neat if this just works all right let's look at both what so react spring is is that on top of what's it on top of its on top of things 3j s right all right let's let's make the decision in the responsible way so let's go to bundle phobia and let's look at react spring okay that's that's okay that's a reasonable size let's react jeez ah that's a big one alright so probably this all gets tree-shaking out but react spring also looks cool so what if I just want to transition and I can just write this is just CSS that makes me feel a little more like I know what the hell's going on and we just tag this with or did animated come from toggle between components use spring was that probably should read the basics what do you think single spring moves data from A to B okay so if I import you spring and animated need the animation primitive itself and a special factory called animated okay and then Chris when this uh when this runs does this give me a call back when it's finished because I'm gonna need to be able to send this is really cool oh and that just works that's also very cool scroll left yep that's cool it's all very cool colors lengths angles good good good where is my common API I want a callback or like an on done on start on the rest does that mean that's probably done right wait a car thanks for stopping by too okay spring config callback when a key is about to be animated frame by frame okay so I think this is what we want this does seem a little more it makes a little more sense to me just at first glance like the the catches is it like I've I've learned to think about things in a very like reactive way and that means that I love this that means that when I am when I'm looking at at nonreactive things it takes me a little longer to get my head around it that plus the fact that like gee sap just does a lot and I don't know that I need a lot later on thanks shopping by given that I don't think I need a lot here I think I am just gonna roll with react spring so let's uninstall G's app and instead we will install react spring which I does it have any dependencies nope and that's just not something I'm willing to do come on sharp yeah spring okay so what I want to do I think is I'm going to use a spring so let's get in here use spring and then I need animated animated from react spring okay and then down here and I get rid of this and instead we will say I will fade in sure so we'll go props equals use spring and I'm gonna send it left what I want to translate no transform and then I translate X to zero okay I think that'll work and I have my my reasoning for this is that what I'm gonna do is I'm gonna take this cart component so let's wrap this in a fragment and then fragment okay so I'm realizing what I don't like about this I I've done something here that I'm that I don't like and react which is where you've got all of these like conditionals in state so I think what I'm gonna do instead is I'm actually going to do like if State thought matches let's do check for error first and then in here we'll just return this don't give up on me right so now now this is simpler and we can do the same thing bird all of these like if state dot matches open then we can pull up return for open get rid of this one match is not matched opening return opening and like we could we're gonna go closing and then finally go with closing closed closed and then here we can return this thing otherwise we're just gonna return no okay and so my my thinking behind this is that what I'd really like to do is let's see right that's a good question so what about having conditionals in the state is bad don't I like it's mostly just that like what I was just saying about how sometimes I have a hard time thinking about things in a nonreactive way I feel like it's it's partially because of patterns like that where where instead of using javascript to say like this is a conditional we have kind of shoehorned our approach to to writing JSX in to solving those problems so like instead of having a like a pretty standard control flow here we're able to do like we end up doing these like kind of complex nested like JavaScript with JSX with javascript inside and it's like why not just write JavaScript and then return JSX and get the logic out into a more top-level place so we can see what's going on this is very much like a preference and I think that that's something that like you know it is not a thing that I think people should do it's just a thing that I like to do because it helps me understand what's going on a little bit better so now that I've got my error state down here or my error States up here we've got opening open closing and closed inside of opening the other thing that's going to be nice about this is this will make it much easier for me to extract out component specific logic to have like an opening component that I can drop in and a you know all those sorts of things not a hundred percent sure if I'm gonna end up doing that but we will we will see so let's how do I want to make this work because I need to I need to show a cart in various states and so I can props equals use spring I already wrote this up here can't put can't put that inside a conditional can I so what I'll do instead is I'm going to when it's opening put it inside the fragment so that I can nest these things and I'm gonna add a div with I just spread the props stylus crops what I need to use animated and inside we will say art and mmm what does this do that's what I also think I need to do is like translate transform and then translate X by let's say 200 and then I'm going to make the display block make the background red and the the height will be a hundred of hundred viewport height units let's get position:absolute and set it the top right and what else do I need to do in here I think that's all most of the color to be white so that it's easier to read okay so what does that look like when I actually okay so did that do something or did I have an error it's down because I haven't started the site yet that's why um Stephanie [Music] [Applause] [Music] [Applause] okay so I screwed several things up here because that didn't do what I wanted and we need to figure out why so my current machine let's let's start collapsing things we're not using right now so we're not looking at the error state we're only looking at the opening state and I want to change this open cart animation because that's not actually what we're doing so it didn't do what I wanted because it first of all was supposed to animate so it's supposed to translate X to zero and so what I what I'm trying to do maybe what I should do first is take this this cart item out and let's render it in closed so that we can work on it without okay so let's close all right so here's our card item so it's not getting some of the styles that I wanted it to get which means we need to look into here and find out why so I told it to translate X 200 pixels what am i what am i doing transform translate X 200 getting something wrong translate I want to translate X pixels where's my translate X anslee X 10 pixels that definitely should work right what am i oh that's okay yep alright so that that is that is the problem so let's translate X 200 pixels and let's also set a width of 200 pixels which I forgot to do and now didn't work what didn't work why man I can't spell what it what even happened here what what was the word I was attempting to spell when I did that any guesses cuz I have no idea okay there's my wit but it still didn't animate in so what I want what I want to happen is I want for this to start out as as translated so does it need a transition property I kind of thought react spring was gonna handle that oh oh wait I think I might just have to tell it tell it to do it in the thing from Anne's forum translate X 200 pixels okay and then I can take it off down here okay so that's better um yeah that's fine that's what we want and so yeah it looked like spring was smart enough to to catch that and it also looks like the spec allow zero as a as an option so now that's working I need to set my Z index higher whoops okay good and let's let's see here so now I want this to fire a callback okay so I need to do a couple things here I'm gonna take all of this out into a component so we'll say cart wrapper and that is going to equal we'll say props I know we'll say styles and then we can just return that straight up and instead of style will say or props will six styles okay and so what I can do then save that and down here we're gonna show the oh but we do need to include that translation otherwise because our weight we're gonna do it like this yeah like I'm overcomplicating this really really poorly so let's do transform down here and that's gonna be a function that will or no will say hidden if it's hidden we will transform or translate X no we're gonna do it like this translate X then say hidden if it's hidden gonna be 200 pixels otherwise it's gonna be 0 yes okay then what I'm going to do is wonder if I can extend these props to include reverse because what I want to do is I want to show the cart wrapper and in this case we're gonna do styles equals get that a name that makes sense spring styles right and then if it's open we're going to use a fragment and show the cart wrapper hidden false blue boy and then if we're closing we want to do Bragman my man I gotta go read okay I'm gonna do this and see if it works and then I'm gonna go read Dave's article and realize how I vastly overcomplicated this cart wrapper and then we want to do reverse and okay I'm doing this the bad way and then we're gonna learn how to do it the better way and I just pass in Reverse common API there was like a reverse yes nope down here Oh so I need to take this out move it here still not happy spring sales reversed cart wrapper styles spring styles reversed and then finally we're going to show the cart wrapper with closed I guess we don't even need to render it at all so we can just we don't really need that we don't need the hidden thing because we can just set it to translate X 0 because spring will override it and that means that is no longer necessary so maybe I mean we got that's still not right um so what doesn't it like here is it because of this like what if I just know website doesn't doesn't work that out it's not animating and it's not animating because why spring styles reversed maybe it was just broken no okay I mean so we have like in in the Ghent most general sense this does do what we want but it's not it's not finished here so why doesn't this thanks code nod I think I fixed it that part's fixed so I mean it would be unmounting and remounting but that's okay because that's how like that's how it works and like if we put it because if we put it directly in it does the thing so like if I take this and I put it in closed C so why does it work here but not there like what's happening differently because I want this to happen in the opening that they're like they're the same thing Harper style spring styles in opening but it doesn't do it it does it in closed put this here okay with it is I mean let's pass in the state I think that's what it is so if I pass this in we can show what state were in screwed that up didn't I okay back to the docks let's go here and we're gonna look at react State value closed opening okay so why ah that is odd it's very odd okay let's look at let's look at Dave's article here which is no no oh oh crap that I closed it okay so let me make sure thank you for sharing that Jordan so let's look at green sock so he's using a wrath okay he's using a callback react spring demo samples I don't want ya I don't really want any of that though I just want like that's what I want show me show me the code so the pages alright so that's pretty much what we're after so we're looking for maybe we need to transition instead of a spring that kind of seems like what we're after huh well then you just stack them I am sprockie how are you picking a thing index said passing in the index and then setting the current index to the index plus one so they get the style okay I'm gonna try this use transition thing and if this doesn't work then I will probably have to call it and then get an adult all right so let's use a transition and then down here I'm going to use transition alright I think I need a adult supervision here I think I might the stuff is hard for me man I don't know why like you know how you have things that just make perfect sense like I can in it never it's never stuff that seems logical like I can just read regular expressions like they like regular expressions don't scare me but animations do not make sense it's like I feel like that should be the other way around right like I I don't know it's just what you practice right and I do I don't practice this this is not a thing that I do and so it's not a thing that I am like it's not a thing that I'm learning so I need to okay so I need a from enter and leave okay so enter and leave and that's just gonna be the sector that's gonna be the same thing so let's okay put these in the right order so it goes from 200 pixels off screen enter brings it to where it should be leave takes it back off screen okay and then well now you tell me Chris geez okay so translate X translate you X translate X so okay so I get my transitions all right and then with my transitions I hold on the hell does that mean use transition items oh this is no that's not right that's not what I want at all because it doesn't work so I don't want I don't want to Trenton I just want to toggle a state yo so this is a toggle between two items but that's not what I want I want to I just want to toggle between two props I'm feeling like I should just like I could probably just do this the hard way but it's gonna be the easy way so what if I just don't use a library right what if what if what we do is instead we take how would I do this so I would transform translate X 200 pixels okay so that's my starting state and then when I just get rid of that entirely or actually I'm gonna keep the state value so let's get rid of the styles and state value just copy paste this down okay so what I'm gonna do is I'm going to use a ref and my goal here is to be able to just update styles right on this thing so we can go with a wrath equals or wait I need to I need to pass through the ref yeah so we're going to forward the ref as well oh so we would need to add code is that right so this is going to or word wrath drop these don't need those okay and then our car traffic goes into cart breath get those styles out here okay so what I'm gonna do is when we call these so what I need to do is I need this to trigger something on the elements how did Dave do this and this just melts my brain had it over here somewhere here she's got the rip the div open menu and close menu oh and he's just passing them straight into the machine okay all right I understand how this is gonna work so we're gonna take these and these are gonna get passed into the machine which means that they need to be quoted I guess so we're going to use machine and then we pass in services and that's going to be Open Cart animation and closed cart animation and then I need to move these in because these need to touch the ref okay all right so what these are gonna do is ref or cart ref current dot styles transform no way does this work let's just start start with the basics let's just log it okay so that it's gonna start here we're going to open the card animation okay and we'll pull up the console reload no service found for opencart animation but I did that services okay where it is our where's he defining his machine open menu right machine put in the cart machine and you have an object object take services object services Open Cart animation maybe declaration order matters that would be odd but that's not the end of the world that just gives me undefined so our our thing doesn't have styles I wonder if this use callback thing is gonna make a difference let's try use callback and then the way that that was done is to use a callback we get context and events which he ignores yup okay so use callback an event it's the element element is used right okay so these are gonna be you just call back and we'll do car F and I'm just gonna ignore these because we're not using them context in the event right he doesn't touch those at all in here and do the same thing here use callback and then we'll add the cart ref okay at least work but now we're not getting the styles so I need to update the styles of this element which means how does he do that element current so he's just grabbing the actual element and then changing stuff on it let's log this and see what happens like is it is it a straight-up Dom element it is a straight-up Dom element okay so that means I can use Dom methods so the end style attributes okay so that's what I'm gonna do here I'm going to set transition to be transform one second linear okay and then what I can do is in this one I can set cart ref current style and then I think I just set the property transform and we're gonna set to translate X 0 and then for the open or the close card we will do the same thing except we will translate 200 pigs oh look at it go we are okay so that I mean that looks like just trash but it works right okay so I'm I'm happy with that I'm gonna add a quick we're gonna set this we'll make it like 500 milliseconds and then I can go in and replace this in all the places where we're using it with a little bit of mess and then down here do the same thing okay and then I'm going to ease [Music] look at that we have we've got a cart and it's controlled by state machines so yeah I'm happy with that and then if anything goes wrong which I'm not sure how something could go wrong here like what how'd is there is there a catch like could something go wrong with this current style I guess we can be missing an element whatever let's just do this we're gonna write a try/catch and if we hit an error we will reject with the error right and so that way if I do something silly like a typo then what should happen is when I go to open the cart oh I need to actually pull in resolve and reject here okay so I'm going to actually pull in the cart oh it won't let me do a thing that's like obviously broken um what if I do that one yeah let me go to air so now if something goes wrong like our element doesn't exist or something it would it would reset it's not a great uh it's not a great kind of air handling but like it gets us where we want to go so now we can open close good good good good also did that take us to open when we reset there we go okay so that's good I'm gonna I'm just gonna copy this straight across we'll do the same thing all right so now something goes wrong we hit an error state I mean the cart Ref the cart record can be checked but that's basically what we just did with this try-catch like if it if it doesn't exist like if I said it to this currents wait are you trying to give me a real error right now cart ruff was used before it was defined that's fair that's fair I can fix that then what reject is not defined guess I could read the error messages Hart ref was used before was defined so that should fix all of it oh oh well because I broke it so yeah so basically if we if we have something wrong like if if we're trying to access something that doesn't exist that will catch it so then now we'll get a cart so all right I think that is all that we've got time for today I am very happy that we got to a happy ending because I was a little worried that I was gonna go horribly wrong so let me know let's see let's remove react spring I apparently need to have another session on how to use it but but yeah so this this is this is the beginning of the cart we we modeled the whole thing with X State so here is the visualizer let me login Oh get out of here okay never mind I'm not gonna do that I'm just gonna commit this code you should go faster let's go over here I'm going to you know I didn't install that thing on this this profile okay so let's just check all right we have our our layout that just includes the the cart component now in the header we have part of the product card change mm-hmm things change that I wasn't aware of so let's add what we know we changed the package.json in the yarn lock and then we change the layout layout and the source components cart okay so let's commit and we will say feature added state machine powered cards overlay and and get push to the new store how did I get logged out of everything what the hell is going on let me change that get remote Oh get push there we go we want to push Langsdorff and then we want to do the each new store okay all right that's better that's better so that then if we go to get browse we can see that that is up if I go over to the net with I swag site we can see that the pull request is dependable gonna fix that um here's the commit if you want to see it and the the deploy preview is being built now so we will have the deploy preview up soon so that we can actually see this live on here and with that need to shut this thing down so thanks y'all I appreciate you coming on it's it's been fun hanging out stay tuned while we raid and definitely do keep in mind that we've got some fun stuff coming up we have on Tuesday Chris is coming on and we're gonna set up the ability to by party Corgi stickers through party Corgi calm which if you have not been to party Corgi calm it is wonderful and this is something that Ryan Warner codes has been working on because in addition to coding Ryan Warner also designs and Ryan Ryan Warner builds Ryan Warner saves so thanks y'all let's let's go raid somebody that'll be a good time thank you very much for hanging out and we'll see on the discord you

Channel: Learn With Jason

Views: 2,023

Keywords: state machines, ui logic, xstate, cart component, complex ui

Id: txD9JOo0Els

Length: 105min 41sec (6341 seconds)

Published: Tue Mar 24 2020