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

[Music] what's up everyone steven here from tech maker studio in this episode we're going to keep going with our react js twitter clone which is decentralized using aleph.im and this is part two of this workshop series so if you followed along with part one you'll remember we basically just kind of set up the layout and started pulling in some kind of basic data from the alef network in this episode and again these are the workshop episodes here so we may meander a little bit these are more freestyle so just keep that in mind what i think i'm going to do here is just kind of continue to work on the layout a little bit and also try to flesh out this data and kind of see what else we can display here and again this isn't the data we're going to use for our app this is coming in from the chat channel on alef and again it's open decentralized data so whenever we set up our actual data source and we actually start broadcasting data to the network you'll be able to run your own user interface and just use the app it's sort of like the old days of twitter back when their api was fully open you could just build your own app directly on top of the data it's kind of what's gonna happen here so it's permissionless so anybody could do pretty much anything they want and um that's just how it goes so with that said the first thing i want to do is jump back over into the code and i want to just kind of log out what exactly we have going on here so let's do console.log and then props.contentprops.post if i can type so let's jump back over to the browser here and open up our console and you see we have all of these javascript objects logging out now from our post.js so you can see here we have the address so the address here is the same as like your wallet address so whenever you post something to the network it's going to be your address and if you're not familiar with web3 and cryptography or anything like that basically this is a really cool like single sign-on system effectively so we can tell um who posted every message to the network by them signing the transaction in their wallet so then what we can actually do and we'll do this later alef has this cool profile concept where we can pull back things like profile username picture stuff like that from the address it's a little more complicated than that actually um let's see um is there a timestamp of when this was posted we may have to incl if i'm not i may just not be seeing it um it would be cool if we had that um let's look at item so we have content here which is body hey um what's in the item content so let's actually do um json.parse props.post and then we'll do dot item [Music] content i think i should be able to query that like that and then we'll refresh over here and let's have a look at this yeah so this actually has this may be what we want to work with actually is the actual item content so we still have the address okay so that's good we get the type in here of chat we get the ref which is sort of like a foreign key is one way we can use that and we'll get into that later and then we have the the message content which again this is custom for you know this chat channel essentially and then we have the time it was posted okay cool so that's pretty handy one thing we may want to do is see you see these times here are these like unix timestamps basically we can convert that into a displayable date by saying new date and then paste that in there and do times a thousand and you can see this was posted on sunday august 29th 2021 i'm pretty sure these come in um newest first so this should be i think this may actually be like from today or not too long ago so we'll just paste this in and this will help me just remember december 4th 2021. cool so yeah they're coming in like that all right so if we look at actually let's look at twitter um basically you can see you've got like you know these are coming in with the username the handle this is a promoted one so that's not this one's got the username the handle how long ago and then the text and then you have all these icons and stuff down here right okay so what we want to do is just kind of start to rough in some of this information so i'm going to just kind of put a comment here what we want to do is have um we'll start with the address and we're going to want to truncate it we'll add we'll switch over to like a username kind of system soon but for now we want the address we want the time posted which we'll just display as a date for now and then we'll have the message content and then maybe like a link to view this message because remember the message that's coming in from alef we don't have any well you you may not know this if you haven't followed along with any of the other series but we don't have an ability really to control what gets posted to the network because anybody can post to it they don't have to go through our front end so we don't have any way to say like you're not allowed to post you know a 10 000 word article as a post so what we're going to want to do is just truncate uh the actual message content to look like a tweet or just be shorter and then maybe you can click to view so in that sense it'll be more more like a facebook post where you can actually post whatever you want or or longer form content and then people can kind of like click to see more so that'll be kind of like that but we can start with this and then let's see how let's see where we are all right so um in actual fact let's set the content up here so again like we're gonna want to um import uh let's say use state from react and then we're going to use this uh this state hook basically to go ahead and hook up our our various attributes so i don't want to have to be calling props.post.item.content all the time so what we're going to do is say uh const and then we'll say address and then set address no is it address or address i don't know i just used it both ways so whatever so say use state and we'll not initialize it with anything actually you know what we can do as you say props dot um let me think about this for a sec uh probably what we want to do first is say i think these run top to bottom so we should be able to say item content and then set item content which we don't really need to use i think we're just like we're just not going to really use item content so we can just kind of mark it like that so that you know we don't think we need to set it somewhere else but what we can do is say um use state and then we'll say json.parse and then props dot post dot item content like that and then down here we won't need to set address either we'll just say um item content dot address okay and then let's just like print out the address here and let's see if this works so if we come back over we're just gonna see all the addresses that are posting things okay then let's do the same thing for the time posted and then we'll do an underscore set time posted because again we don't need to use these for anything at the moment and you know this one actually we need to run a little bit of code and so i'm just going to pass this in kind of as a callback just to be able to set this up kind of on different lines and what i'm going to do is say i'm basically going to do new date and then we'll do itemcontent.time times a thousand like this and then down here let's let's go ahead and put this in a p tag we'll we're going to change all this up sooner than later just trying to get all the content that we want on the screen and then what we'll do is say time posted like that and let's go see what that looks like uh it looks like nothing do we not have a time oh i need to probably return like that and it didn't like that the error occurred above the oh boy um let's do this let's try not to use my fancy callback thing first of all let's just paste it like that and just refresh and see if that fixes anything it may have a problem with my yeah it's something to do with my objects are not valid as react let's do this let's undo let's comment this out um and then comment this out and refresh and let's see here hopefully we get a bunch of stuff logging out okay so we're definitely getting time here right so what is new date and then passing that in times a thousand so what's wrong with that um [Music] is it date equals something and then date dot um to date string maybe and then maybe we could do date to date i don't really know all of my to date to what do we have here to local time string what does that do so to local time string to local [Music] string there's so many little methods here um let's just see what we got so two time string to local date string let's try that one okay so we want the local i think we want the local string basically just that for now so essentially what's happening is the error was that react says hey we're not expecting this we can't basically put an object here it has to be like a like a simple data type like a number or a string or something so this should basically get us set yeah so this obviously is not how we're going to want to display this but this is something to start with and then i think the last thing for now that we want to display is the content down here so let's do another p tag here and uh let's do content and then up here we need to say const um content set content equals and then we'll do use state and then do item content dot um what is that again content.body now this will change whenever we switch to our own sort of data feed again this is the chat this is how they set up they have a content with just a body i don't know what we're going to call it we might go with that but now you can see here we have the address the time this was posted and then whatever the message is um cool so looks like um i don't somebody was testing this just a little bit ago so that's cool um one thing i want to do while i'm noticing if i just noticed this like and again like our styling has not been we haven't done much yet at all other than just kind of getting the layout put together but if we look at twitter this central area is really narrow now again i think this has to do with just the fact of like uh they have ads on the right rail and we may not do that but in the interest of looking pretty similar um for the moment let's go to posts and actually that doesn't have it we have app we have call nine let's make this like seven um like this and then in the post let's give these things an mb uh let's do an m y three let's see what this looks like okay cool so now they're like you know centered a little more on the screen sort of i think if we made that probably if i have to guess what we want to do is make this a six and then so now you have three columns on the left three on the right which we can put other stuff in and then the sort of feed in the middle so that's cool um so before we move on i think i'm going to wrap this episode up kind of soon because i want to cut these around like 20 minutes ish i don't know exactly how far we are but it's getting in that ballpark i think um so let's go back over to post one thing i want to do is i don't want to render out this entire address and i want to actually have a truncate address function that we write in the top level because i'm also going to want to truncate the address somewhere else so this is going to be just a utility for now we'll just put it at the top level of the app so we can pass it around [Music] we can move it into like a utilities directory later but for now we're just going to say const truncate address equals and it's going to take in an address [Music] and basically what we want to do is say um return and then let's do um some tick marks and interpolate this and we'll say address dot slice and we'll do zero and then up to six i think like that and then let's do dot dot dot and let's do the same thing and do address dot slice and then address dot length minus four we'll see what this looks like to address dot length i don't know if that's i just kind of did that off the top of my head so let's try this first of all on our account button over here and so we'll say truncate address equals truncate address and we'll go into our accountbutton.js and then here we'll say props dot truncate address like this and let's see if we broke anything oh that's pretty much exactly what we wanted so we have basically the 0x uh d4 fb and then 0x or 0565. and let's look up here and so we have d4 f we're not showing the b here maybe to be consistent with meta mask we'll trim one character so 0x d4 f dot 0 5 6 5 okay so let's do let's do that um so we'll do to the five position and then we'll copy this i think i probably will move this into a utils thing later because otherwise we're passing this function around to like every component that needs to know about an address um [Music] and in this case for example we're gonna pass it here and this is gonna be props dot truncate address and then over here let me copy this and what we're gonna do in our post is say our address is use state um and then we'll do props all right i'm going to kind of have to tweak this up a little bit so basically paste this in here and let's go see what that looks like all right cool these all the same here this is like one person testing a bunch no they're not all the same you can see it switches here but yeah i was kind of surprised for a second i'm making sure i didn't have a bug but it's probably one person who's just kind of testing trying to figure it out um yeah we have a few people in here okay cool cool so that looks like it's working as i was saying in the future so what we're gonna do one thing we need to do is have like a profile picture here and then shift this content over that way um this i want to do like in ruby on rails there's this time ago in words concept which is i think based around what you see on twitter so you see like um six minutes ago or whatever so i don't necessarily want to just say 6m or 45m or whatever i want to say like well we could we could say that um and then maybe if like it's more than a certain time you put the date or something like that so that could be something i really want to do i do really want to mimic their layout here so in the next episode what we're going to do is exactly that we're going to put like a placeholder image we're going to mimic the layout here a little more and just kind of make the design look more realistic like it's actually an app because right now it's very very bare [Music] and then once we have that done we will start looking at hooking up the ability to actually post to the network and using our own data feed um this is going to take us quite a few episodes so i hope you're into it and if you are be sure to subscribe to the channel and share this with anybody who you think might be interested but i think that's where i'm going to stop this one and look forward to the next one and i'll talk to you there

Channel: Techmaker Studio

Views: 77

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

Length: 21min 40sec (1300 seconds)

Published: Tue Dec 07 2021