React JS Project | Building a Decentralized Twitter Clone - Part 9 | Techmaker Workshop

[Music] what's up everyone steven here from techmaker studio this is building a decentralized twitter clone with react.js and alef.im and i think this is part nine in this episode we're going to try to wrap up some problems we were having in the last episode and the first thing i want to do is add something called react bootstrap which i haven't used before and i kind of just jumped straight into using react the way that i always have and the other apps that i've built in other systems um but we want to actually use this because they make it a lot easier let's do a quick scan for react bootstrap modal because i had seen something from pluralsight and i thought this was looking like a pretty easy little tutorial whoa am i about to get advertised something maybe that's what's happening i don't know so i think we've already got bootstrap added so i'm gonna just npm install react bootstrap here and uh i don't need to go there i need to go here let's pull this terminal up a little bit and i'm gonna go ahead and run that the command and pause the video for two seconds while that finishes all right so if we pop back over to that tutorial you'll see here that it's prompting us for importing the modal and then we have some it's asking us to import the bootstrap min css so let's go really quick to our index.js i want to make sure but i think i've got the yeah i've already got the bootstrap css here so i should be able to just do this now and then let's go to our modal file here and um what i'm going to do is at the very top we'll maybe just under post here uh maybe under not sure where the best place to put that is maybe there's fine doesn't matter potentially so i'm pretty much just gonna follow this tutorial which seems to be really really simple um let's actually let's try something really fast let's just copy this and let's basically cut we're going to undo this in a second but let's just paste this in here and then save and then let me fire up my server again and let's see if it pops up this modal i just want to make sure this is actually working before we commit to trying to detail it out with our existing stuff uh there it is um looks like i've got the text it's just white for some reason okay cool so that does in fact work so now what we need to do is basically uh merge that style into our existing modal here you know in actual effect i'm just scanning through this we really don't have much in here that's custom yet so let me copy this again and let's paste this above and let's just use they're going to freak out on us here let me just put a little div and then put everything inside of it basically you can only return one top level element and then when we pasted that in we had two so we'll delete this div at the end but that way we don't have a bunch of red text hanging out okay so modal header i'm assuming that's this we don't even i don't even know if we need a modal header let's just ask that modal body um let's copy this well you know what um what we need to do is say tx in progress let me think for a second uh let's go ahead and cut this let's paste it here let's untap that back like that and then what we can do instead of this div um did i miss something i missed something modal content modal title so what i'm basically going to do is just copy this modal body oh i'm going blind apparently there we go let me fix that and then let's put the closing div here no problem and then for the footer we're just going to copy this so essentially what this is is a pre-baked set of components for react that makes our life a little bit easier and let's just follow this is something i was kind of complaining about in the last video is we can't follow this style of sort of of just telling it what state it should have so this is really nice to just be able to say show equals true or false here so we'll look at that in just a second but let me go ahead and get rid of all this and then as i said let's get rid of that and let's get rid of this and then tab everything back one and fix that okay so let's save that and let's go see what it looks like okay so we don't have our slider which we shouldn't let me just do a good refresh here is there any text up here doesn't look like it this is the this is the footer post something um we don't need where the heck did that this is the oh i left some stuff hanging out up here i missed that entirely and then there we go now we're talking so real quick let's review exactly what's happening so if we go into our post.js um we have this on message whenever we get um a message with the same address as our wallet address meaning it came from us we're saying hey we just received something from ourselves and then um i believe uh that's calling back up into app yes app.js is that around here somewhere user post received and then this is kind of where we were starting to get a little bit stuck um so what we need to do is say um you know what what we can actually do is pass i'm just kind of thinking about this in terms of what the easiest thing is what we could do is pass the [Music] user post received in here user post received equals user post received and then what we could do is say well that's going to get weird because um well let's keep going with it let's keep going with this sorry just kind of thinking this idea through in real time here so user post received so what we could do is the modal could be props dot user post received and that should be false by default i think um in app.js okay so we're setting that to false by default so we refresh over here and actually i think it was already loaded okay what if we set this to be true we should see this showing up automatically cool so that's working so now what we need to do and this is going to be kind of interesting i'm going to put these on new lines again like the naming conventions here is what's throwing me off and i'm thinking a little bit ahead but what we could do is say set user post received equals set user post received and we're passing this into we actually need to pass this into the nav bar i think yeah so this is weird to me because we're we're kind of splitting up this function this functionality and passing it into a bunch of random places um and i need to pass that up here in the actual nav bar as well okay so save that save that actually don't need that on multiple lines yet um let's go to our create post button this thing we're no longer going to rely on the sort of default bootstrap stuff that we normally do what we're going to do instead is say on click and then we'll call something along the lines of open modal and then we can create a function up here const open modal equals function and then what we want to do is say props dot set user post received and then we'll pass in true and then we should take in the event and say e dot prevent default so this is kind of this con and actually we should set it to i'm thinking about this wrong now set user post received to true let's just try this i don't think this is going to work for some reason i have the logic has gotten tangled in my head no now it works see that naming is weird though because we're actually saying hey mark it as though we have we have received a post um but let's test it so we need to come up with a better name but let's test it here so we'll say testing the post button and so we'll post and then it's going to break cannot read properties of undefined address um you know what that's because i need to well my wallet wasn't connected i'm gonna do i'm gonna go out on a limb and say my wallet wasn't connected so let's try this again trying the post button ux update post it's going to ask me to sign here we'll sign okay so it's not exactly doing what we want but it did get more in the direction of what we want so before we even try to fix anything i want to fix this naming because it's super confusing right now i know what i was originally trying to do um but i don't i'm not really not really vibing with it now um so what we want to do is in here what we really want to do is say okay when we receive a message set the modal to be closed basically we want to close the modal so we should say something like set modal open and it's false maybe and we're gonna have to see how this tracks okay but say it's false and then let's come into our app.js here and we'll say uh um open and then modal open set modal open and it's false by default and then down here we need to replace all of these with set modal open set modal open and then we'll copy that do i need that again i'm not sure let's do yeah i need it here and then down here we'll say modal open modal open so let's go uh what line is that 33 i have another thing um if modal i don't need any of this so we're getting rid of all of that fancy stuff for the moment then what we're going to do is go into our modal here and say props dot modal open okay and then the only time the modal should be open is to say uh so first of all we need to pass this through our nav bar um where was that set modal open so hopefully this naming is making a little bit more sense we're directly saying this is what we're trying to do and we're going to make that props and then here i'm going to say set modal open to be true and if we give it a good refresh which we probably i keep saying is we probably don't need to do it i had to do it the other day for some reason and i don't remember so let's do a quick test again post it's going to tell me to sign and you kind of okay so that actually worked better that time so you see that like it showed us the the progress bar for just a second and then it hid okay so we're going in the right direction um i'm going to make this just say post something because i'm tired of seeing launch demo modal and then let's have a look at our post js so this is really the last thing i want to try to knock out here is what happens how do we handle like the actual like um ux so what i had started doing if we look down well let's look at the actual modal um we have this tx in progress and if the tx is in progress we show this otherwise we showed that and i'm actually thinking that the modal body i need to do something this is kind of crazy i need to move the modal body out here i think i don't know that's really weird i've got a weird thing going on here maybe what i can do is actually replicate this in here because i think this progress bar needs to also be in the modal body is the point so in one case we put the modal body alone with the progress bar otherwise we do this okay that makes more sense like that in any case um we're basically doing this on this tx in progress and what we should be doing is probably something like there's a tx that's been triggered okay so like when you click the button to submit the form down here we should probably say okay you just triggered a transaction so instead of doing that down here after because i think what's actually happening is that when we get this tx back it's saved to the network already so it kind of just flickers and goes away what we want to do is actually start the loading animation like here so we could say um and we could use the same tx in progress thing it doesn't matter um but let's look at this like that maybe the naming will be better differently because it implies that there's a real transaction in progress but let's go ahead and say post something post something and if we click post you'll see now we have this loading thing right and what we basically want to do is have it actually animate and like start animating a little bit early so it could start like over here at 25 and have some kind of like little animation going like it's about the process and then once we click sign we would want it to continue on maybe or maybe it just i don't know we can get fancy or not um the only thing we we haven't handled is what happens if we click cancel so if we click cancel we're actually stuck here so what we want to do is instead of doing a weight right here what i'm going to do is say post dot submit and then i'm going to dot catch error and all i'm going to do here is say set tx in progress false and let's see what this does and i'm going to give it a refresh here again out of pure habit all right post something let's click post and click cancel and now we're back to having our message here testing post cancel testing this again post and let's actually submit it sign and then you see like once it goes through boom here it is so now you can actually see better i think what i'm trying to accomplish with well that's no good so what we need to do is something like dot then results and we can actually do set tx in progress false in both cases but i think you get to sense now maybe of what i want the ux to be so the whole whole idea is like okay if we i don't think it thinks i'm signed in that's a bug we need to figure out so we oh no we've changed our mind cancel okay now we can type again um working on this new ux still okay we post so now this thing is kind of loading we click sign all right so that's also not what we want to do i think we don't want this so what i want to happen is for that to continue to load all the way across when the post finishes it hides that's the main idea um where is our so our modal i'm wondering if i can trigger this set tx in progress later because that's basically the last little bit that would make this really nice so in the next video we're going to work on the design because i want this to be better across the board i want it to look really good and maybe the next couple of videos are going to be that and in the process we'll make this animation look legit right now it's just kind of getting the bones in place and the workflow in place um but in any case what i want to do is have this be set tx in progress false later maybe what we could do um [Music] i'm just trying to think how can we connect that so props modal open we could do this and this kind of seems kind of hacky to me but let's try this let's do use effect and i'm going to have to import use effect up here we're going to say use effect and what we want to do is listen to props dot modal open and then say if props dot modal open what we can do so what this is doing is saying listen for changes to the modal open variable and if that is indeed open set the tx in progress to false so what this is basically saying if it works let's see if it works and then i'll explain it that's going to be my new motto try it and see if it works and then explain it okay so let's click post something okay post uh i need to do a real refresh here we need to figure out what's going on with that post something post cancel okay we're back post and sign okay so now you see that so in reality what we want to see that loads all the way across and then it fades away poof our new thing is here so now what we want those for when we click post something for the form to be there so it is so i think what is happening now is we've got this use effect in place we're listening to this modal open on the parent and then we're saying if the modal is actually open set the tx in progress to false and this is just basically resetting it because what had happened was it got left in this stale state the modal closed when our new data came through we could make this more complicated but i'd rather not talk to any other components just to change this little thing so i think this is fine like basically we can tell from this this use effect here that hey we're trying to open the modal if you're trying to open the modal just set the tx in progress to be false because in what situation would you want to open the modal and see a progress bar um yeah so i think this is going to be kind of cool i'm feeling pretty optimistic [Music] it seems like it's working now post sign that thing and then poof here it is so it's really uh it's going to come together so the next thing obviously as i said is we're going to work on the design and get the structure like really tight and kind of make sure the ux feels good then we're going to switch over to our own custom data model that we're going to use for this project um yeah and we'll just keep going so i think like i've been thinking about a lot of stuff with regard to this because like when you think about twitter you know you're obviously going to want to have comments and likes and retweets and all this kind of stuff or reposting or however we're going to call it so there's some aspects of that that you know the queries will be insanely slow if we try to just use like the native aleph approach alef is doing a lot of work with indexers on different platforms which we won't get into today as far as what that is exactly but we may end up or i may even do this offline or in a different video series because it'll be kind of complicated we're going to build this out sort of with the basic data structure that makes sense like sort of the what you might call like normalized data and then we may end up creating some for lack of a better word on top of my head like indexers that cache certain things for you as a user so that when you load the screen we can actually show some other stuff in a kind of responsive dynamic quick way because otherwise we're going to make the slowest app in history so anyway a lot of stuff to think about this is going to be a really interesting project we're going to be working on it for a while i hope you're enjoying it so far if you are be sure to give this video a thumbs up subscribe to the channel and share it with all your friends and i'll talk to you in the next episode

Channel: Techmaker Studio

Views: 10

Keywords: web3 tutorial, react js project, react js tutorial, react js series, real projects with react js, web3 project, aleph.im, aleph tutorial, aleph-js tutorial, web3 aleph

Id: W8pCxzUNhCI

Length: 27min 1sec (1621 seconds)

Published: Fri Dec 17 2021