React JS Project | Building a Decentralized Twitter Clone - Part 8 | 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 part 8. when we left off in the last episode we had just gotten uh our post form working with the sockets and if we refresh here [Music] let's try this again really quick um let's say testing um in part eight let's post and i think it's gonna give me an error because i'm not signed in maybe up here um let me i don't remember which account maybe this is the account this xerox one c d yeah let me click connect wallet there may be a little bit of a bug around that but now that i'm actually connected to the correct wallet from episode let's say part 8 here we go let's say post should prompt me to sign and it may come in immediately or it may take a second but eventually we should get a message i wonder how many seconds this is going to take let's give it a minute and see so what's it been that's probably okay so it says 19 seconds so we have an obvious ux problem that comes from this and again this may be something we can get the websockets faster at some point or something like that not entirely sure what i was thinking to do is whenever we basically submit this form um something like we click post we have to sign the message and then whenever this goes through we get some kind of loading animation here maybe the form goes away and then when the message comes in the modal gets closed something along those lines now that i'm looking at how long this is taking though i might not actually like that idea um well that didn't take too long at a time maybe it did i don't know it's kind of hard to tell um honestly so it seems like it took two seconds we just didn't see it it probably just flickered really quickly so we didn't even see it change um i guess we'll go with my original plan and we'll see what we think um but anyway let's jump into it so the first thing we're gonna need to figure out is how to take some kind of action um whenever we sign this transaction or cancel for that matter we may not worry about cancel in this episode but we will need to figure out how do we actually handle the capture the event of it actually submitting here i think what we can do is say um let's say const tx equals it's not really a transaction i guess it is kind of a transaction um it's a transaction for with respect to a lef um let's say like if tx and we'll just console let's console.log tx here so if this works if this actually works then what we should expect is let's open up our uh javascript terminal over here um we look like we're signed in we got our address down here so let's say um testing tx here post so we haven't gotten anything logged out down here yet when i click sign okay so when we click sign briefly after that we get our tx down here um which uh makes sense to me so and then let's let's close this and see if we got it back okay so we got it back pretty quick well seven seconds i think this seven second differential um essentially is pretty much how long it's taking us to get it back from the network via the socket so that's not great but in any case um we got it back and we got our tx down here so let's do this um what we want to do is update the the element that we're in whenever we have a tx and i just realized that tx maybe not normal naming for some people it's transaction in short okay so let's go to get bootstrap.com let's go to the docs components uh trying to remember what this is called here we go progress so i'm just gonna copy this progress bar uh not the zero give me one that's like 25 or something and uh we will be changing this right now all this is just filler content obviously so um if you're like this is really ugly don't worry we're gonna fix that at some point in the near future so let's make this class name here [Music] class name [Music] and we'll need to get rid of some stuff eventually i think there's some stuff in here that react doesn't like but let's go back and look at this let's do a good refresh here the style prop right okay so this expects to get a javascript item basically so we'll close that off like that and let's see what that does okay so now you can see we have this progress bar so let's what i want to do essentially the ux for this and i don't know if we're going to get this fully finished in this episode we'll probably get just kind of the basic mechanics working and then in the next episode we'll do the design update okay so the first basic mechanic we want to do is if there's a tx we want to show the loader otherwise we want to show the form okay so i'm going to make a new use state variable here and we're going to say tx set tx equals use state and we'll basically just say actually let's do it like this let's say false i'll say tx in progress and then we'll do set tx in progress just kind of have a boolean flag here and then we'll do set tx in progress true and then down here what we're going to do is say tx in progress question mark and if there's a tx in progress we're going to have this else we're gonna have this other stuff now you can't have two elements returned so i'm just gonna make a really simple like div here like this and then we will basically move these guys up inside there let's go have a look at this now and hopefully we don't get any crazy surprises in this episode all right so testing tx in progress okay so we'll post this we'll sign and now we get this loading animation and you can see we already got back the answer here so that's actually the socket on that was really quick so hopefully most of the time it is but what we need to do now because what should happen when we get the response back is that the actual uh the the modal closes and everything kind of resets um and then we just kind of see so the ux would basically be click submit you kind of get a loading animation which should be kind of smooth maybe if it's taking an extra long time it kind of hangs out kind of toward the end like you i'm sure you've seen that before on a web page it feels like it's taking a while we may even make like a little animated background instead of just a solid color and then whenever the message comes back from the socket that matches what you just posted we're gonna hide everything and reset it and that's going to be the ux or at least that's how i'm imagining it now if we're getting like you know crazy long wait times that might not be the best but anyway all right so let's see how we can get this going so back in the code let's have a look at the next problem we're going to need to solve so we have our socket connected uh where is it connected here inside of this post.js now if we look at the actual architecture so we have app js at the top level then we have posts down here and then we have the post form modal which is actually out here okay so we have a few options but basically what we need to have happen is we need to get this socket information over into our post form modal because when we get a message we need to check if it was from us so if it was from our if it was from us we want to close everything and reset like i said so one way we could do it and i'm still actually thinking about this literally as i'm making this video one way we could do it is have some kind of property on the top level of the app and then like like basically pass the method for setting that property down into our posts and then whenever you know what let's just do it um and then it'll be more obvious we may change this because i the thing is what we don't want to do is constantly reload the app but actually if we're reloading just when we post that might be okay you'll see what i mean in a second so let's do this let's say const um user just posted or user post received and then maybe like set user post received and then we'll say um use state false like this and then what we'll need to do is basically say down in our socket where we have the sockets i'm going to new line some of this stuff so that it's a little bit easier to read as we go state management and react is not something that is extremely easy sometimes and i tend to try a few things and then kind of rework it but let's see how this goes um so my understanding really quick if you're learning reacts um i'm also kind of learning react i might be further along than some of you but like the way i understand it is you have all these use state variables and anytime something in the state changes my understanding is it re-renders the component so i try not to change my top level state so you'll see like we have our i don't want to change it very often i should say so like um the web 3 connection shouldn't really change once we connect metamask the account shouldn't change and the wallet address shouldn't change unless we do something that changes the entire screen like switching metamask account or something like that so i'm always very careful about what i put in the top level component in this case i think this is going to be okay but we may change it so i'm sorry i'm talking and not working so what do we call that user post received so we don't really care about this status inside of posts what we care about is the set user post received method and then we'll do set user post received and then inside of posts basically what i want to do is if i have just received a message that is from me i want to say hey i just received a message from this user um and then what we're going to do is alert our model like hey we just got this message back from ourselves which means the post that you just submitted we got it so we can hide the modal that's the idea which means i'm also going to need inside of posts um i'm gonna need to know my address what's the yeah i'm gonna say sorry for the crazy scrolling we'll say a wallet address equals wallet address here and let's go back down into post now and let's come in here and let's add some console logging so on message post post item content let's console.log the post so let me just save everything here because i've been changing a bunch of stuff so refresh i'm going to go ahead and run clear over here to clear this up so we can be sure that what we get is the one we're interested in um logging to console we're gonna sign the message here um let's see so i did get it um i'm wondering if yeah i'm wondering if this is going to work exactly how i'm thinking it may or may not we may be getting these back a lot faster all of a sudden um but you can see here we have content address so what i want to check is the post content address we're going to find out together if this model that i've come up here makes sense come up with here make sense post content dot address equals props dot wallet address make sure i have props being brought in on these posts yep so okay save that hopefully we get a true here oh that's all false which makes sense well it makes sense because my wallet's not connected that's not good let's connect the wallet um testing logging again here we go let's post we will sign and why does that not match let me log them both out console.log maybe it's like undefined or something for some reason i'm not sure why and it always worries me when i have like the color doesn't quite match but i guess it's fine okay um let's refresh and so we got undefined on all of those it's because i'm not connected okay so now my wallet is connected let me do like a okay now i'm getting a bunch of stuff okay so let's do it doesn't matter sign those look the same to me and that is very confusing let's check if they're equal just under let's do let's add a little bit of extra info here let's say post let's do wallet here and then let's do console.log and then we'll just copy these and set check for equality and i don't know why but if i don't hit command shift r i don't have a wallet here if i just click refresh it doesn't connect me um but if i i guess you call that a hard refresh on a mac command shift r okay uh let's post this and see if we get true here i can't tell what came from where i guess that was the last one maybe just kind of slipped in one thing i just noticed is it looks like we may need to listen for a different event because if you saw that it actually took a couple of seconds for this to switch to this loading screen so that doesn't do quite what we want but it looks like our addresses match now so i think i'm gonna basically try to get this thing to hide um and let's see how far am i into this i think i'm like at 20 minutes so what we need to do i'm going to go a little further with this i don't know if i'm going to finish this whole feature or if i'm going to cut the video so i'm trying not to let these videos get much past 20 minutes here what i want to do is say let's cut all of this let's say if this what we want to do is say props um if i can type props dot a set post set user post received okay and then let's come over here to our post form modal i have to like remember how this is triggered so what we can do actually um i think let's do this in our top level up here let's do a use effect so i was gonna pat so what i was gonna do uh was pass something down into the actual modal and maybe i need to let me let's go look at the bootstrap documentation really quick let's look at modals um my modal ad event listener so it's sort of anti-react this is something i haven't done in react before is mess with these modals i'm used to like jquery or something um so typically what we would do is have like document get element by id my modal and then like my modal.hide or something to that effect um i think so launch demo modal there's gonna be a modal like close or hide or something like that let's actually look in the blue strap 5 has also sort of changed up the documentation structure so that's interesting um [Music] let's see here modal let's see hide methods hide mymodal.hide so what we should be able to do is document get element by id so this is sort of like not the declarative style that you would normally use in react but i want to get this working and i don't want to spend all my life on this so um or yours so let's see if we can get something basic working so instead of passing something down into the um i'm lost instead of passing something down into the modal itself what i want to do is from the outside i just want to close the modal now what i would like to really be able to do is be able to pass in like open or closed here and then change some state stuff which might work we might be able to just manipulate some classes but i'm going to research that off camera and in the meantime what we're going to do is set up a use effect and again we're going to do this thing where we listen to a specific property so we're going to listen to what do we call this user post received so it's a user post received and then if user post received what i want to do is say modal equals get document.get by id and then what do we call the modal we should not call this example modal we should call this like post modal and let me just quickly copy this and paste it where it says example modal at least in these two places okay we've got post modal here so we're going to say document get element by the post modal and then first of all let's do const equals that and then what did bootstrap tell us to do just call hide on it so we'll do modal dot hide and then i think what we should do is say set user post receive to false okay so let's try this um modal.hide is not a function i believe we have potentially not brought in bootstrap now we have a bootstrap here huh let's do a quick google on this but i may i may actually kind of pause the video here and and see what's going on model hide is not a function that's from 2017 that's probably gonna not work just remove the data let's see if there's modal hide let's try this if this doesn't work i'm gonna apologize but we're gonna stop here and i'll pick up in the next video once i figure this out off camera but again i'm trying to keep these to be like a sort of reasonable length modal.modal is not a function um uncaught type air modal modal is not a function let's do one quick thing here modal dot hide is not a function bootstrap react um so we're not using this react bootstrap and maybe we should be i'm gonna look into that i think we just we pretty much just grabbed the uh we pretty much just grabbed the bootstrap distribution from the main bootstrap website so yeah i'm gonna cut this here so in the next video what we're gonna do is let me comment this out so that we can actually see the screen so in the next video we're gonna fix this so that we can actually uh like close this whenever we post and we're also going to figure out how to listen to the correct event here so that we're not we're not just listening for the transaction because i think the transaction is whenever we actually get something back from the socket so or potentially from the network not 100 sure sometimes these life cycle events can fuse me a little bit so in any case we're gonna stop here and we'll pick it up in the next one so i will talk to you there

Channel: Techmaker Studio

Views: 38

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: JnbvUHYGa3E

Length: 28min 9sec (1689 seconds)

Published: Thu Dec 16 2021