Build a Secure Realtime Chat App in React Native [4] (tutorial for beginners) 🔴

what's up nudges developers welcome to a new live uh welcome to new live stream where we are gonna continue with our signal clone so if you have been following the previous videos we have started a full stack signal clone and during previous video we have implemented the ui we have implemented the back end using aws amplify and also we have added extra features such as voice messages image messages and also emojis and today we're gonna continue with this clone we're gonna add extra features because a lot of you have asked me during the previous live stream and also in the comments what you would like to see even more features so yeah today that's what we are going to do i have prepared a set of features that we might implement in this video and i'm gonna run a poll to see which of these features you guys actually want so this live stream is gonna be a little bit more interactive we're gonna work together here in the live chat so say hi everyone in the live chat where are you joining uh from and yeah let's get started so some of the features that i um got from the comments that you'd like to see are the user status online or offline and also a possibility to see when was the user last time online this is a common feature in in um chatting in messaging applications to see when uh of our user was last seen online then we're gonna see the status of a message if a message was successfully sent and if a message was seen by valverde user this is also very common feature so we are going to implement it today if you guys want to see that next groups uh our application is ready and almost there in terms of uh structure and design for the groups uh the back end is ready the only thing that we have to adjust is the front end so if you want to see that let me know in the live chat pagination this is an extra feature that would allow us to load more messages so load them like page by page like i know first 50 messages and then when you scroll we are going to load more and so on ability to delete messages message replies this might be a bit tricky in terms of design and so on but as well very possible message reactions like uh liking a message that was sent to you and lastly gifs using give api i didn't prepare that for the gifs but we can do it together go through the documentation and so on so what i'm gonna do i'm gonna create a poll right now and then we can continue all right let me try to only be able to add more options so one user user user status online offline okay then message status message status send command send slash scene what else do we have here groups groups by generation and that's it only four okay so we're gonna run two poles uh first one is this one and then we're gonna run one more for our four where is your hoodie my hoodie is here is too hot for the hoodie but i really like it but the good news is that i finally found my uh not just development t-shirt where is it come on somewhere here i lost it for a couple of months and today alexandra found it so thank you for that all right guys so uh vote for what uh feature you'd like me to see build today and we're gonna start with that and yeah for everyone who is new here hi welcome to the channel my name is vadim and on this channel i'm trying to share my knowledge and experience about full stack mobile development and we're doing this in terms of uh project-based builds because this is a fun uh interactive and very effective way to learn new tech stack so if you're finding value out of this video subscribe to the channel and turn on the notification bell not to miss any future videos we are going live every friday at the same time at 3 pm gmt or 2 pm gmt i don't know time zones so um yeah also follow me on social media vadim not just dev i try to post video a little bit more often these days uh all right so uh one more announcement this video is brought to you by node.js development academy this is the platform where i'm gonna post my courses and now i'm working very hard on to finish the course that i have started and this is going to be a full stack mobile developer course which will include building two applications uh one of which is going to be a simple application and actually i have finished filming the videos about it this week it's super nice the application is super fun and it's a great way for every beginner to get started and improve their react native skills after that we're getting into a more advanced build which is going to be the instagram clone so here it is uh yeah where we are going to implement a lot of features that we have never touched on the channel because these are more advanced features things like in-app notification real-time messaging uh animations uh building and deploying it to app store and google play automating everything with cicd in order to do this automatically pagination filtering searching in the database and a lot a lot more cool features um i'm gonna add there so if you're interested where is it come on yeah we're gonna learn react native and aws amplify and i have opened the pre-sale doors for only 24 hours just because a lot of people have asked me to open it adventure of a month because of their possibility to join so yeah i decided to give this possibility to you guys one more time 24 hours it's probably even less now um so if you plan to join but missed the first pre-sale now is the last chance to join it with a 50 discount all right so see you there now let's back to let's go back to our video so if you want to follow along you can download vest at bundle at ss.nodejust.dev signal if you uh have been here for more videos you already know uh this kind of asset bundle that i'm preparing for you guys is very useful for following along also it was account amplify cli and check out the first three videos on my channel where we build the ui backend and the bonus feature regarding audio messages image messages and gifs all right also you can download them you can download the repository from github and one thing that i forgot is to create a separate branch for the previous video so we're gonna do it in a moment and yeah then we can get started with our features for today how are you doing guys oh let's see how is the poll doing uh user status online offline a lot of people want that message to sentencing okay um 35 votes okay we can end this poll and we can start a new one so let's do end poll and let's start a new one can we i'm gonna miss the poll okay no no no no so let's uh let's create the second poll with the rest of the features so here we have what uh delete where is it no no no it's not this one miss click miss click uh the leading a message deleting a message okay massive replies message replies um message reaction reactions like liking a message and gifs so okay let's ask make sure to vote in the chat there so we can know what you'd like me to start with we're not going to be able to cover all of these features because that's a lot but we're going to try to cover as many as we can in this video so yeah as i said let me let me what create a separate branch for the previous video so you can start from the same point so let me check here terminal gate status we are on branch main and we are in the signal clone back end okay let's get to let's create a new branch for the part three and let's push origin part three all right so now if you go to the github and you want to start from the same starting point you are going to be able to see the main branch which is going to contain the latest changes so if you are watching it afterwards this will contain the changes that we are going to implement in this video the ui is everything that we have done in the first video back end is everything we've done in the second video and part three is everything that we have done in the third video so let's start everyone from part three and implement our features okay hello everyone please do pagination and it as it's a great optimization feature yeah i agree in vikram i agree let's see what other people think will there also be part five let's see how part four goes uh do you have like a premium content yes we do you can check out at academy.notjust.dev it's not ready yet i'm working very hard these days uh at the content the first part like the first build in that course is filmed i still have to edit it and make it and make it available for everyone who have joined during the pre-sale we need all of this feature that you are mentioning on the screen yeah i know but let's try to prioritize and because it's going to take time i don't know if we go beast mode and implement everything but i'm not going to promise but today i've been quite tired this week with working on the course i've been filming like i don't know 10 hours per day or something like this so yeah part one three have been amazing great work within this could uh turn into its own full tech course actually yes that's what i'm thinking to do i'm also very very very pleased with how this clone turned out like we have covered so much in it and i like the paste of how everything went so most probably i will take this course i will edit it down and i'll add it to node.js dev platform as a free course but it's going to be edited down like with without like these cuts that i interact with um live chats so it's gonna be only the features that we implement so yeah thank you for the suggestion that's that's in my plans to do uh will there be also part five guys let's see how this part turns out because for the next week i have a very interesting plan like something different from what i usually do which i think you will enjoy because you've been asking me about that for quite some time so i decided to to do something about it uh let's see the poll so here the votes are a bit more distributed so in the first time we have 51 message status and now uh will you okay we have 37 for the message replies so it seems that we are going to start with message status uh okay all right so let's think about it uh yeah this tutorial is gonna be more interactive like we are gonna try to think about the solution together because i haven't like prepared like everything step by step i only have um like a a general plan in my head like how everything should work so first of all let's uh run the project oh we switched to npm okay npm start npm start so let me somehow copy these votes because i might need them shortly or maybe my moderators are alex or larry can you send me some with my solution and see um hopefully that helps okay so here i'm running the application on ios it should work on android as well welcome to no jazz developer sergey uh hello welcome how are you would you please reply on me on twitter after three months related to tinder cards wipe animation um most probably not directly after the stream because after a stream i usually am very tired and i don't want to see any devices around me but during the weekend i'll try to help you oh sergey that's awesome uh sergey just asked a question i gave him an answer and he joined the node.js development developer membership on youtube thank you very much for that hi vadim same name hello [Music] i am struggling to tell you a name welcome to the discord to the membership on youtube thank you very much for joining for everyone who doesn't know um hola rival joined our team as a discord support and also here a moderator on youtube so he is the one who helps everyone on the discord and i would really like to say thank you to you for helping me and for helping everyone in our community whenever i don't have time and i'm focusing on something else so welcome to the team and thank you very much for helping i think everyone here is uh especially which are coming from discord are uh thankful to you so here we have our project let's open a chat where do we have it here so we implemented a lot of things previous time here i'm having some time some fun sending messages photos and then taking photos from my phone uh audio messages that i don't know if you'll hear them but they work yes i can i can hear you okay so as we said we're gonna start with message status for that let's open our admin ui i'm gonna open aws i'm gonna log in real quick there nope nope nope nope nope where is it dot here okay where is my phone i need the multi-factor authenticated authentication code and here we have it so let's search for amplify amplify let's get start no no no let's get started let's select our application all apps and whenever you don't see the application that um that you have in amplify it's most probably that you have a different region here selected and now i have frankfurt for some reason but my applications are in ireland so let's select that one there and here we should see our apps okay so let's take the signal clone and let's open admin ui here this build is appearing to getting bigger and bigger yeah like com i think only the uber clone was uh this big but this this application is i'm very very happy with how it turns out so that's why i decided like let's continue let's push it a little bit more okay okay so here uh let's have a look at the data for our message statuses like whether it is read or not we are gonna add here in the message we're gonna add a new field um the field the field is gonna contain at estatus and the status let's say that the status of a message is going to be a a noom let's create a new enumeration because we need in the beginning two statuses it should be sent delivered send delivered and read right so message status one value is going to be sent which is going to be the default value delivered and the last one is going to be uh how is it red okay so let's uh do it like this and regarding the last one uh regarding the while we are still here let me think if we need anything else to change so let's also implement some data changes for our user status because it's going to be pretty similar and i want to do them at the same time because we have to wait like three four five minutes for the update updates to deploy so let's do them better at the same time so user online offline status that's going to be a field on the user model where is our user model let's scroll user here let's add a field that will contain a timestamp which will indicate when was the user last time online and based on that field we're gonna check if that's not too long ago we're gonna consider that the user is online if that field is more than five minutes ago we're gonna consider that the user is offline and we're gonna display last online last seen online was 10 minutes ago or something like this so let's say um last last online last scene online last online at i don't know let's do it like this and that's going to be uh date and time word time stamp [Music] i think it's going to be easier with to work with a time stamp or with a date time now with timestamp let's go with a timestamp because with timestamp we don't have to worry about time zones and you know how good i am with the time zones and it's not required and regarding the message field that we have added here status also not required because let's not mess up the previous messages okay should we implement anything else that is easy all right and i think from method replies we also need a very slight modification in in our data structure in order to implement it so um in order to save a reference in order to know if a message was a message replied to something else we are going to add a relationship from a message uh to hmm i cannot add a relationship to from a message to a message that's weird so we're going to think about that later because i need a relationship from a message to a message that will indicate buenos which to which message is this a reply to so it seems that i cannot do it here so i would either do probably i will i will do it simply with a reply to message id so this field will contain the id uh like this of a message which we are replying to so if this is not null then this is a message reply if it's null it's a new standalone message so based on this we're going to be able to query to know to which message we are replying so i think we have enough we have started enough features so let's save and deploy and then if we're done with this we are going to be able to come back and implement more so while this is deploying let's have a chat with a live chat here come on where is my mouse here when the course will be available the course is going to be uh available in full in a couple of months and i expect it to be ready uh to be deployed to the public e by the end of a year however everyone who is joining the pre-sale campaign they will receive new modules as they are finished so right now for example i have finished uh filming the first module which contains around 10 hours of raw footage and this is a separate complete clone that is focused on uh teaching you react native fundamentals we are focusing only on react native fundamentals there and after that um yeah the next step now are to edit this video and to make it uh available for everyone who has joined the pre-sale after that we start with our advanced course which is going to be the instagram clone where all the fun will begin yeah that's that's gonna be tough like in terms of filming and so on okay hey vadem okay hi man is there any way to build a hair filter feature in react native i'm not sure i understand hair fit filter something like snapchat didn't try that hello vran hello everyone hello from uzbekistan hello hello from egypt vietnam hi vladimir and glad to see you streaming again we are streaming here every friday at the same time so you're always welcome here josh i see you i see your messages i hear you we will see let's focus on this message let's try not to spam i understand you very much want to see the part 5. i just made the tesla up yesterday awesome now what's the plan which one is the next one we have so many we have around 16 bills on the channel something like that hello uh thanks for being my teacher thank you very much so boy thank you no coffee today no we have it we have we need unit test unit test is gonna also is also gonna be part of a course can you make any future video with google firebase we'll see cannot promise but maybe can we create models like this on firebase for react native i'm not sure about that i mean the user interface might be different but as far as i know like there should be something like this you have a database there i'm not sure if you can model it or if it's it's created whenever you deploy it or whenever you write so i don't know okay so our deployment is successful let's grab uh this command and let's go back to our project here and in terminal let's create a new terminal and do come on amplify pull in order to get all the new changes in our application fetching updates is if aws free or not shortly it's not free however it has a free tier which will give you the possibility to test and learn and experiment with their services up to one point so everything that we're doing here unless you deploy it to a wide audience it's gonna be free so i have around 16 projects with amplify and i'm not paying anything because we are under the free tier and okay so we have our new updates let's have a look let's go in the source is it big enough the code here i hope so so let's go in source models index where is it schema does we do we have the last uh last online or how did we call it yeah last online we have and also the rubber ones okay that means that we have successfully added both fields so what do we start with we are starting with uh as you said with message status so this is gonna be the first one come on okay i'm gonna add it here oh come on doesn't matter so the first one we have added message status field in admin ui status field for message model in admin ui and now let's work with this okay okay so first of all uh we're gonna add the the ui let's work for the ui uh i'm gonna open what i'm gonna open the components i want to see the message box here so component message this is the message box and here what do we have uh if this is a image message it's going to be this one if it's uh just message that content is going to be text and our ticks or something like that that we are going to grab from expo vector icons should go after our message there uh i don't know tick or how how to search it check mark something like that check mark okay this one is good these ones hmm will i be able to so we're gonna do it like this uh we're gonna display one check mark if it was uh delivered and two check marks if it was red okay so unicorns check mark let's copy it from here going back let's try to render it here now i'm working on uh windows machine and mac os so it's very hard to switch from from one to another like the copy and stuff like that they always mess up let's import our unicorns save okay it's there so what will we do with it for the container i'm gonna say flex direction row save okay and you wanna icons this size should be 16 and the color gray okay and it's gonna be either check mark or check mark done save okay something like this we can i don't know add some style and margin horizontal five to add some space between the message itself and and the check mark okay what do we have here uh there it's weird it's quite weird for them images so in case it's text it's okay here in case of an image we can add it i don't know advan or something like this and uh here the what audio player is messed up as well oh okay but let's let's focus on the functionality first and then we're gonna think how to fix these small issues okay where is the image view message content with okay here we can decrease a bit of a wave to have space for v-stick yeah probably that's that would work and if we want to align them to the end flex or align items flex end let's check it with that yeah the ticks now are at the bottom okay but these things should appear only if it's not our message uh is me so only if it's our message right so if it's is me i'm gonna display it otherwise no okay and here it's not there all right so let's think about the logic so whenever we uh send the message whether it's delivered or not we are gonna have to check if the message has been successfully synced with the cloud if a message was saved in the database because if we don't have internet the message will appear here because we are using data store so hello the message will appear here but it's not going to be synced with a database so in that case we shouldn't display any check marks once the message is synced to the database we should update its status to be delivered and once the message is read by the user we should update it to be read so what we are going to do to check if a message is synced with a cloud is saved in the database uh we can listen to some events so let's do amplify for the documentation come on where is it amplify data store docs so data store events here uh data store will fire some events uh for every yeah for the event that is happening behind the scenes and then we can also listen to them so there is this event for example sync queries ready or this is one outbox mutation in queued and it's going to be dispatched when local let me zoom in a bit it's going to be dispatched when local changes has been newly staged for synchronization so whenever we are trying to push something to to synchronize with a cloud this event is going to be fired and once it is finished outbox mutation processed uh this event is going to be triggered so dispatched on a local change has finished synchronization with a cloud and is updated locally okay outbox mutation events contains model name element model version last change that deleted okay so we can listen to these events whenever we are trying to send a message and once our message mutation is processed we're gonna receive this event and then we're gonna update the status of a message to being delivered okay so let's see where we can listen to these events are we already doing that in our application.tsx hmm i feel that we we should we are we have implemented this hub somewhere i don't remember where to be honest okay so let's copy than the creating of a listener and deleting of a listener and we can we will uh register the listener inside our application because this is the the most the top most component and yeah that's where we can listen to events that are happening because we know that the application component is always going to be mounted so that's why let's do it here uh so to run that to set up the event listener we need to do it once the application is mounted once it's loaded and we can accomplish that with a use effect so let's do it here i use effect and here like this and let's add the listener that we can copy from here from the documentation [Music] so we create the listener using the hub and this hub we are going to import from amplify here uh we listen to data store events here the hub will fire events not only about data store but also authentication if you do off and so on but we're interested about events from datastore uh so hub data will contain the event and uh data if event nate network status uh do that and we're gonna do if event equal to where is it this one output outbox mutation processed we're going to do something similar mu mutation has been synced with the cloud and let's do data simply data so the payload contain model and element let's see so these are a list of events as examples data store payload event okay um where is it outbox mutation processed is it here nope this gets logged okay that's with something else this is when uh the network status changes all right but let's let's have a look and uh see see the logs maybe it's gonna give us more details there so let's clean let's go here and do hello send we get the insert message update message but this is coming from somewhere else this is coming from [Music] from this one where is it screens chatroom screen where we are listening for from subscription yeah from here i'm gonna comment it out because we don't need it let me try to find all the console log come on i want to specify in the where components starting recording recording stopped only these ones invest screens probably we have more this one fetched messages get out of here okay so let's do a refresh and we receive a message here coming from a user has a network isn't it from here okay hola let's open this one and i don't see the hub event being fired let me try to do here console.log event console log data console.log data store event hi nothing am i doing something wrong use effect uh remove listener the remove listener should be in the return statement but why hub datastore is not displaying any events registering listener come on okay we have now some data story events synced query status and so on okay let's try the message and what did we have here we i save out both outbox mutation process so whenever i sent it data stored banned first of all our mutation has been enqueued and here we see which mutation then uh outbox status uh then mutation include another mutation include uh and here we see the outbox mutation process and we see this mass event whenever our message is synced and saved in the database mutation has been synced with a cloud here is the mutation itself okay model function i just want to understand if which model was that so element model name and element model the model instance that is processed model okay okay based on this id i can do it so i can do it like this where is it i don't need these console logs uh outbox mutation processed so if even the model that was processed is the message where is it come on i don't want to lose it uh model model is our chat room with a last message okay this is where yeah you see there is a outbox mutation process for our chatroom because we are updating the last message and also there is a mutation processed for our model a message so we should check object dot model if it's a message then we need to update it so if data dot model equal to message let's do the check here console the console log here to see if we actually are receiving it a message should be imported from where is it from models import message from models message mutation has been synced with the cloud okay so here let's try one more time where is it message notation has been synced with a cloud perfect uh okay but what was the data there let's do a cons separate console look for the data one more time to see how we can update that message data we know the idea so we can just search by id and update by id element and this is a message oh so we're gonna do element okay now let's set the message status to uh delivered deliver delivered okay so let's do it like this message dot update or save manipulating data updating datastore.save and the copy of original okay datastore dot save we're gonna save the message dot copy of and the copy is going to be of data dot data dot element because based on the console log we saw that the data.element is them is our message and then we can with a function update the status to deliver red or send delivered let's import data store real quick from amplify we can do it instead of off because we don't need it as i see data store updated status delivered all right let's try let's try one more time delivered let's send and let's hopefully see that we don't have any issues i guess and then i can go in the amplify content and here and here we should check if in the message uh we have status and let's sort by status and see one delivered and this is the last one which means that it was successfully updated in the cloud okay uh let's instead of checking it there let's go back into our message component and here so the name of our component is going to be a message dot status if [Music] if message the status is equal to delivered delivered then it's going to be simply check mark otherwise it's going to be check mark done check mark if it's delivered save deliver it however if it's just send that means we shouldn't display any tech um check marks so i'm gonna do here and message dot status status uh let's display it if only is different than send so save it shouldn't be here message that if is me and message. status is not sent we do it okay okay okay okay i'm gonna do it a bit differently let's add another icon for the when the message is sent or shouldn't we um the checks here are getting a bit messy because we can have a send status where we can have a null status so if it's sent or yeah it's going to be messy message dot status is not null and message status is not send then display the icon so in this case previous messages will not have a check mark because they are we don't have the status send the last one should have only one check mark delivered delivered delivered delivered this one let's check if it's oh come on did they do a mistake there come on so if message status is delivered but it should be i see it here if message status is delivered check mark otherwise check mark done why let me just do message status here in the content itself i'm gonna be able to see what's the status there uh save okay yeah now it works i think it it was not updated properly so we have it there with one check mark for the delivered and now and now uh and now whenever our user reads it we need to update it but um we should also subscribe to message updates here because if i do hear hello i send it and nothing is happening why i still see if is me and is not null and is not sent but what is it shouldn't display anything uh where in the message input when we create the message we should say that the status should be send save send oh come on what is your status wear okay pro yeah it's not null it's it's probably undefined there to be honest that's why so um we do not see the status change um in real time and we will see it only if i i know go back and come here now we will see it updated okay but uh in order to see it update in real time we should subscribe to updates here the same way as we are subscribing to updates uh where in this chat room in with data store oops observe so let's copy the use effect from here in our message and we are gonna subscribe to this update somewhere here after we fetch so datastore observe message model we don't have it imported we should so import message from models and let's rename it to message model because we have message component for the somewhere i don't know where as as message model and here they just store up their message models uh and also we can provide the id of the specific message that we want to observe based on the documentation here uh where is it real time so we can observe a post but we can observe a post by id and in our case we will observe a message model by the message dot id let's subscribe if message model and message operation type is update we want to listen to this update then then we're gonna need to update it somewhere but because um our message right now is taken from stay from uh from props we cannot update it so for that reason we will need to create a state variable for our message um i'm going to call it message and i'm going to rename the message prop here so set message equal to use state all right and this message i'm gonna rename it as mess message prop uh i cannot rename it porque let's do it just props and i'm gonna do props dot message hey my pc why are you starting to get slow here so set message so we are gonna do it everything that we have in state about the message and then we will override the things that was updated message dot element let's save message model here should be model oh oh okay yeah we need the to encapsulate the object with like this so let's have a look if uh are you updating send okay you saw that initially there is no tick and after just a couple of milliseconds the tick appears because the message is updated in real time we're listening to updates uh yeah we're doing a lot of things here so first of all we in the message input we are creating a we are saving a message what this will do this will first of all save this message on your local device then uh it will send a request to where is it the industrial event it will send them it will incur this mutation to be synced with a cloud datastore will fire an event called outbox mutation in code and after this process is successful and the message is saved in the database our data store will fire the event outbox mutation process at this point we are listening for this outbox uh mutation processed uh and we can delete these things and we we are listening for this outbox mutation process and once it happens we know that the message was saved to database and we can update the status to be delivered then in our message component we are listening for update events on our message model whenever an update event on our message model happens we are writing the data we are updating the data locally with the data that is coming from our data store you could also do it like this message dot element so basically you are not combining the two but you're just replacing with one that is coming and i think there is no disadvantage in this because it should contain all the data so here send no okay it's a bit tricky you saw like the message disappears for one second so i don't like this i like the solution where we take all the properties of a message and then we override the ones that are updated and this way we are not losing anything from here like this and then we we see that the message is delivered uh okay so like with all these uh things put together in common we have implemented the message send another thing is um whenever we display this a message which is not mine i don't know let's say something here on top where are theirs yeah whenever we are rendering a message which which is not mine that means that the message is red so if it it has been rendered on the other person device that means he has read the message and we should update the status to being read so to do that i'm gonna do it where i'm gonna do that in a message okay use effect i'm gonna create a function here below const set as red set message as red yeah so this function is going to be called in a simple use effect um data store query user like this user check if it's me set is me so whenever we know that is me or not then we are going to [Music] to call that function so i can do it like this i can add a use effect that depends on is me and here i'm gonna check if now here i'm just gonna do set as red in the function set as red i'm gonna check if the message is not mine if it's not me and message dot status is not already red because if it's already red i don't want to update it one more time then i'm gonna do data store dot save message dot copy off message dot copy off oh no it's capital m message dot copy off come on why where is that in our application message copy oh it's not message is message model here uh copy off a copy of the message from our state and let's do updated updated dot status equal red so we are updating it like this okay uh set as red so if it's not me i'm wondering is me is me let's do it with null initially so because by doing false it means that we initially set it to his message but we don't know that so let's do it with null so whenever we do is is me i'm gonna check here where set as red so if me is equal to false we should specifically check if it's equal to false not a new a false value because null is also false value but we should do that only if we know that it's his message when we do that okay okay okay let's uh have a look uh hello send sent i would have to probably run the application on my phone to be able to check if it works so my phone expo go here let's run the application let's hope it's gonna run soon come on come on open please okay it's opening i'm very far away from the wi-fi so on my mobile phone it's quite slow no i think it's going to be faster this way i think i was chatting with this support hi there did you see my message let's send it has been delivered and now i'm waiting for the application to open of a device and see if it was a red or not okay uh please can you test send a voice message from ios to android because they tried and get an issue please no extractors can read the stream that actually might be some issue with transcoding because on android and ios i'm not sure about audio but most probably it's the same but on on for videos ios and android has different encoders so not all videos from android will be able to play on ios and vice versa which for me sounds very weird like videos is such a general thing like why there should be so much difference but that's what it happens so at my startup vitinum to solve this issue i i was using aws media convert and whenever a user uploads a come on why it's failing on my device and whenever the user uploads a video i was transcoding it in different formats uh and also in a very general format like mp4 i think something like that and and uh i was serving this uh process to already think so that's why hello dico how are you doing why can't you connect why are you so good brother i don't know years of experience so let's have a look let's highlight did you see my message i'm gonna open this message where is it focus i'm gonna open this chat room and once i open on our screen here i should see that the message has been read so let's see if it works i enter and right away all the messages as you can see are slowly setting as red but we're setting it back to so i don't know what happened there but they have been set to red and then back to to this one so if i do a reload here hmm can it be because it sees that the mutation has been processed and it sets it back to delivered and here we should check if okay yeah i think i know the issue we update it it updates and then the same mutation processed event is being fired and we call the the updating the data store to deliver so we should check if but why do we have two if statements we can do it in one here so if and this one so we can delete it like this and data dot element dot status start is not i will do it like this so in case delivered delivered and red oh my god come on and red does not include the status of our this novice just tattoos a lot of things here so very weird check but what i'm trying to see here if this array that contains delivered and red does not include the value of the status which means that if status is different than red and status is different than delivered then we should set it to delivered because if it's delivered we don't want to update it because it's already delivered and if it's red we don't want to set it back to delivered so that's why if i go back here where is it i think we've support no with this one and if i open it again here i see it updates to delivered and let's wait a bit i shouldn't see it go back to i mean it has been updated to red because i open it here let me make it bigger so you can see better here what's happening so i have my thing here uh opened so for whatever message i'm sending send and then red we should see one mark appear and then two mark should appear come on come on one more mark should appear one more mark is not appearing because what because in message i think here message yeah whenever the message is updated we should also and we need to wait for the data store to change come on where is the simulator here one more try one more tar yes so you can see that no check mark then a check mark and right away two check marks because they have the device open here if i go back then we're gonna see only one check mark because the message is not read only delivered and if i open the chat message here on my device i see both of them so i guess it works as expected uh let's try with something else with some images uh okay let's do it like this what do you want me to show let's do it so with a message will it work it should okay yes so if you see here if it will i have two check marks there because the message was received and read all right so this feature is done is complete and i'm really happy with how it turned out do you have any questions related to this feature was it clear is it super complicated because we have a lot of moving parts all of them are very small like changing a couple of lines of code but in different places in order to make sure that we update properly we send properly we sync properly and so on so let's go ahead and do it like this i'm going to switch to main branch message status okay so the first step is done uh next one we are gonna go so let's document it here um when creating a new message set status to send listen for data store events and when the event called outbox mutation processed which means that the mutation has been processed and when processed is fired update message status to delivered when the message component is rendered update status to red i'm gonna delete this thing to make this one like this uh not it shouldn't be your message so not mine not my message update the status to red and also listen to message updates using datastore dot observe to update the stat tools in real time and that's it and test it and see if everything works i'm going to upload this this thing later so send the levered and sin like this okay let's move on so i'm gonna do the next one is gonna be user user online status and last scene online all right uh the first step is gonna be add the field last online at field to user model as time with type timestamp and we already did that with amplify and here in our data if we go to our user we should have last online at which is at timestamp okay so now we should update this last online ad we should update it periodically so i don't know every minute while the application is all opened we should update the last online ad field for the user that is authenticated and then if he closes his application these updates are not going to be fired and we're going to see that the last time it was updated is quite a long time ago so that's how we will know if he is online or not so yeah logically it's pretty simple let's see how we can implement it can we make a coin coinbase clone we have a crypto clone uh which i was inspired by coinbase and that's our 20 20 hours 12 hours live stream that you can find on the channel so in 12 hours we implemented everything from ui back-end and so on and also of application you can find it on market but uh yeah it's a virtual crypto exchange so there are no actual crypto involved only the ui and as a game let's put it like this okay so um so as i said the first step is to update them the user periodically okay and for that in our we're going to do that again in our application because that's the the component that is always going to be mounted so um first of all we are going to need a reference to our user so for that i'm going to add a state variable user set user initially it's going to be use state oh no use state it's going to be null but it can be of type user or null let's import the libraries that we need so for example use state the we will need authentication because we need to know which user is currently authenticated and from the models we're also going to import user model okay so let's let's register a use effect so that will take care of fetching the user fetch user let's register this fetch user function here and let's code it page user it's going to be a sync also because we need to do some database queries so first of all user data is going to be a weight authentication dot current authenticated user and based on that we're gonna take user equal await datastore dot query the user model with id user data dot attributes attributes dot sub and if there is such a user we're gonna set it in state set user as user okay so now now now now now now we need to uh register a periodic call um let's let let's do it like this first and then we're gonna do it uh so let's create a new function const update last online equal uh okay so if user is null that also might be the case we're gonna stop here because we need the user itself otherwise we're gonna do a weight datastore dot save and we're gonna save a copy of our user that we have in state and updated is going to be equal to updated dot last online equal new date anything to transform it to a timestamp or we have a moment i think we have a moment so we can simply do moment yeah last online moment is not assembled to type number or undefined moment seconds to seconds or timestamp let's check so update last time online let's just simply call it in another use effect use effect let's call update last online and we're going to call it when the user is updated save okay let's look at the content and here and here for the users uh last online everything is empty now let's uh do um a reload and see if we update the last online for our user do you know what database is using we are using [Music] aws amplify which uses upsync which uses aws dynamodb so at the end our application is powered by the dynamodb database but we are not working that much directly with dynamodb like a lot of things are uh abstract and taking care for us so just by doing [Music] let's say where is it in the components i'm going to show you how we send a message how simply we do that message input just by using datastore save new message with this content we a lot of things are happening behind the scenes but by the end your message is saved in database and also locally on your device as cash and so on so but the logic on your end like is as simple as this like datastore.save and you're saving a new message okay we are here let's check if our last online yes last online was updated but i don't like with what yeah because seconds are taking only the seconds part of the time not time two seconds so i don't want to use moment for this uh i'm gonna use date and i think new date and if you transform it if you are the plus sign in front you transform it to a number and that's gonna be the last updated at so let's have a look here where is it cancel yes now i'm thinking um where is it if this is milliseconds a timestamp in milliseconds should we keep in milliseconds or in seconds i think we can do it like this divide it by a thousand and do it like meth dot floor in order to keep it in seconds so milliseconds divided by a a thousand are seconds is it so right now it's better this is me this is seconds uh thanks how are you showing the phone on the right this is um the emulator that you can get by installing xcode if you have a mac os or by installing android studio you get an android emulator where you can also run the application so now now because i have last online ad um let's display it let's display it where i think it's here in the header underneath the name we will display if the user is online or when he was last online so for vet i'm gonna open this is part of our navigation so navigation uh chatroom header this is our chatroom header and here we are fetching the users and we are setting the user so camera name let's add this in a view let's add this text like the name in a view because we need to two rows there and let's add a new text with a user dot user dot last online at simply as a text here save save save save save save and some of the styles from this text is going to go here style for example flex 1 should go to our container oh whoa whoa why it's so slow oh whoa whoa oh my god my laptop is not my laptop was not charging i was on battery the whole time nice okay give me one second because someone is at the door and i'm gonna come back [Music] all right we are safe so what is happening there here for this view i'm gonna move the flex one here i don't need it here margin left probably also for the view hey i see with my left eye that there is a new member mikhail welcome thank you very much for joining really appreciate it look at me thank you very much all right what are the goals for this video the goals are to learn react native i mean the goals is to teach you react native guys okay and the view should end here save so let's see for this one i'm gonna um yeah the issue is that why my laptop legs now you don't have anything running here so again i'm gonna run the application on my phone and by doing that one of my accounts that i'm logged in on my phone will set the last online here so i'm gonna be able to display it here and it's not this one it should be this one support some of them this one so let's see here come on reload uh yes your messages are visible i want anime splash screen react native how can i do it you can there are a couple of ways you can add a separate screen like a normal screen in your application and do all the animation there and for example as we are doing here in our update sx if is loading complete i'm returning null so basically an empty screen but here you would return like your splash screen and if loading is complete you're gonna return everything else or the actual splash screen um like they're like it's a bit more tricky so i cannot tell you right now uh okay so let me let's check i have opened publication here and if i go back uh yeah the support that not just dev has last online this one so if i check it here i see that the last online was on this on this time what can i do with this information uh chatroom header i can do some checks where is it very slow very slow and i don't realize why one second i'm trying to kill ah okay but come on okay chatroom header where is it okay here so i'm gonna add a separate function in the chatroom header of course get last online text this is going to be a function and what we're going to do here let's do let's do a check so if uh user dot last online ad so basically uh if last online at is less than 5 minutes ago show him as online online so we can work with moment here so moment moment very slow oh i hate it first of all if user if there is no last online ad i'm gonna do a return null nothing because i want here to be sure that last online is a actual number thank you import moment from now let's check moment documentation not this one mikhail is asking please make a manga reader application i'm not very aware of any specifics about manga reader is it any different than normal book books reader applications uh difference where is it durations using duration with diff and moment duration string no moment duration xd come on diff display difference to get difference in milliseconds use moment div like you would use no moment from uh a div b so moment this one diff moment which is gonna be current time and let's just console log this one i want to see console log oh no or it's above our way around you are diffing from current time till there and this function is going to be called here instead of last online at save let's check the logs oh come on hey cheers it did not refresh because yes but they are images for the chats are you able to show how many messages have been sent since the user has been offline for example for new messages yeah now that we have a message statuses we can calculate how many messages are uh not read basically how many messages are delivered and that way we can [Music] display how many are we okay so this is minus um yeah that means that it's above our way around so it should be moment diff moment of this now it's this one but i think it's too much because most probably we should keep track of it um we lost online not as seconds but as milliseconds as we did initially so like this and yeah and i'm gonna open it here on my device to update it as well let's check in the admin ui one is updated one not yet so let's refresh uh do you think you could make a real time running up with leaderboard enjoying your content can't wait to go through every single one of your builds uh regarding leaderboard we covered it in the crypto clone the live stream of 12 hours i don't remember if we did it during live stream but i think yes but what you want to do is to be able to sort based on one field so based on score or something like that okay so we see that last online at as timestamp here as milliseconds let's go back here and let's open yeah so that means that which one is this one yeah that's not too much like in the milliseconds we're 38 seconds right so wish we can um we can chatroom header here transform it to minutes or just simply check uh moment if dot we can leave it like this we can leave it like this uh okay so if this one let's add it to a variable to know it better so uh me li set uh last online div milliseconds equal to this one so we will check if last online is less than five minutes and five minutes is going to be five minutes in seconds that's going to be multiplied by 60 and in milliseconds that's going to be multiplied by a thousand so if it's less than this i can do less than five minutes then i will return online otherwise i will return moment from from now a moment user last user dot last online ad from now and i can add it to a string something like this is going to be a variable last scene online and then three days ago or three hours ago something like that and now we see that the user is online okay uh but if i do it if i decrease it like less than one millisecond which is not going to be the case we can see last year online three minutes ago last year online three minutes ago isn't it uh cool so if i go back to checking it based on five minutes we see that he's online if it's gonna be more than five minutes that i can probably update it here so for the support i will do instead of free here too probably a couple of years ago so if i do it like this support lasting online five months ago and now if i'm gonna open my ch my application it should update from 162 to 163 and if i go back here uh to this one last seen online five months ago uh let me try to refresh it reload come on oh yeah my application is not has not run yet and now uh yeah it's online uh one other thing that we should do is we should update this last online uh periodically like we should call this function like every one minute so while the application is open we should update this uh last time online to do that we can register um a javascript set uh interval set interval we can set the interval in a react and when we return we need to make sure to clear the interval so here instead of doing that i'm gonna so our interval we set interval or we call inside the interval come on please please please we will call here update last online uh this is every one second i'm gonna do every five seconds just for you to see how it works every five seconds and back in chatroom header i'm going to say that i'm going to consider the user offline if he's more than one second offline just for you to see everything how it updates and then we're going to change these values so let me open my application let's refresh it yeah but we are not updating it in real time try again what's happening there why my pc is slow i don't like it do i have internet okay so maybe my server stopped so let's check it out here it stopped i don't know why let's just try to restart it npm start is that loading animation for each vet messenger bug no that's not a bug that's the intended thing because the messages are loaded uh individually so yeah that's we are loading to loading the data about the message about the user of that message of its until we have that information it you see this uh loading screen on a real device it's the things are happening much faster and you don't see no android no no no no no no no there is the zak um yeah on android on uh on a real device it happens much faster so you will not see that however if you are on low you don't have a lot of bandwidth like the slow internet you are going to see that loading messages hola come on no i need donald i need i need to open it on my device okay so a lot of waiting indeed you can pass second parameter as the time unit minute seconds okay that's that's something useful [Music] oh come on why i have to restart so many times application on my device do you have any tutorials projects regarding react native web no i don't that's something that i have in mind to do soon can you share the expo link um i don't know if i want to do that that's risky but let's try let's try i'm gonna oh i cannot i'm on two different pc so it's gonna be a bit tough to do it so uh what i wanted to show you i wanted to show you that every second our last updated ad here should update so now remember that digit 19869 if i refresh should be just because i have my application open my set interval should update it constantly but they don't know if it works um i'm the tsx set interval every 5 seconds should call update 19869 something like that hmm doesn't update how do you upload images along with message content did you use react form uh check out the previous video where we implemented the image and also the audio messages i see here last seen online a few seconds ago which is good unless in a line two minutes ago let's let's do it like this so console log uh update last online save and let's check it here now every five seconds we should see update last online one two yes it's happening let's see if it's here is happening as well [Music] so it's four one zero four four one zero four and it's still four one zero four come on you can do it um oh maybe i should look at this one three six five zero five come on i'm worried it might be that my uh here it displays the cache to be honest three five six zero query update last online user maybe console.log maybe it will not have access to this user saving let's check no it's calling or saving uh come on i'd want to see them oh but no so that's very weird because they see that it's saving but they don't see the updates let me try to look directly in the in the database just to make sure so where is it user table view hello manik how are you doing so here oh there is a new view for dynamodb it is complete and becomes your default experience okay so this is the name let's go to items staging staging chatroom user this one and i'm looking at the user and the second one right that dim not just that this one so last online here is 197 here is as well 197 what no it's not working it's not working it's not working hmm it might be user user user yeah we're updating the last online saved so updating savings saved yes then why this one is 197. now it will work if i do refresh where is it seven six eight uh not sure if this one should be a sink if it can be a sink 768 177 come on 177 maybe maybe datastore does not want to save the next one because we are not working with the latest version um response saved user has a version so if i do here [Music] set user to response will you maybe now work update last saving perfect how do you manage to work with all the pressure that comes with coding i don't know like throughout the years you start enjoying this pressure i don't know it's weird whenever something like this happens i know it's it's interesting to find the solution like why is it not updating this yeah that's quite weird to be honest i'm dated console log the user dot last online one two three five updated last online this one two eight two yes i see that it updates yes it should work because i receive a new values 282 but that's this one we're not sand we're not synced but porque a pass version when you update why whenever the version should be incremented automatically and locally data store as you can see it updates because i'm taking it from there but it doesn't have version user dot updated ad you see last updated that is not updating come on am i doing something wrong updated last online ad rick i don't think that you need to send the version because by doing that data source save it will automatically create a new version so once it works but the second time it doesn't so i'm thinking i cannot reason like why that might be happening i'm gonna try something weird instead of but no i'm gonna query right away here i don't know why so user data uh here update last online user away that is okay and then we're gonna work with this user but we just took from here just to see if it works yes now i think it works yeah as you can see here without even refreshing it will update it should at least yes yes yeah i should be happy because it's fixed but i'm not very happy let's try to figure out why um i'm guessing it's because we're overuse interval that it somehow loses track of a user but i'm console logging it and it's there maybe by waiting for updates and updating it i will not have to do it here so for example where i was listening for updating events in the constant components message here subscribing to events so if i would do similar to subscribe to user updates subscription uh user model we are gonna observe user dot id user dot id whenever user changes if user dot if user do return all return null but i'm gonna do it specifically for user dot id so a user [Music] user if no no if user is null subscribe message message if message is a user message type update then set user current user everything from current user and then message element this way we are always listening for updates updating it let's see right now something was not good there i already saw i just subscribed to your youtube channel woo thank you very much i'm a bit tired cannot be cannot show my excitement but i'm really excited uh so updates data store the source object is not a valid model source name image 822 which source object set current user current user message element user if it's update uh that's where is it coming from source the source object source object data store data store data store is it from the subscription yup it's that subscription chill chill the source object is not a valid model object source object deleted last change version created add name status updated that let's check it like this saved okay are you updating come on one two three four five no you don't want to no you want to update it and come one one two three four five six yes it works okay yeah so it was some uh some issues with the model getting out of date yeah i know it was related to the version actually but not when you update it was it was our way around so yeah whenever we update it the version will be changed but in our state we still keep a previous version so yeah that's why okay so now it works um and it will work as expected the the thing now is to adjust like when we want to call these things so for example uh changing setting the interval can be called setting it as online i don't know maybe every minute so one minute multiply by 60 seconds multiplied by a thousand milliseconds or every five minutes i don't know it depends on you i think every minute is not too often like it's not gonna have like a lot of requests like once per minute i think that's okay you can increase it once every five minutes and then in the chatroom header here you can go back and leave it as it was like if it's less than five minutes we consider him online if it's more than six minutes we consider him offline and we show him when he was the last time online okay so this is also done uh let's add the steps here good where is it get add git commit uh user status and last scene online okay so at last online field for user model um update period kelly example every five minutes uh the last online ad field of their authenticated user um last online ad field or property of a user is less than 5 minutes consider him as being online but better to have these two values different so you can update it every one minute or every three minutes and and check it based on a higher value just to make sure that uh you are taking in consideration some some buffer time that might uh take for the things to to change as being online otherwise um show when he was last last seen online last online at okay and that's it so this is the shortly this is the steps that you need to take in order to accomplish this user status online so i think we have time only for one more feature in this video because we previous to took a little bit more time than expected so which one did we choose uh based let's see here this one is finished oh no this one okay this is done i know why purple but okay and message status so which one should be next um based on their should find them somewhere the polls message replies i think was the next one that's a big one message status sent and seen user status yeah i think the next one is message replies based on your votes if we take it democratically or if i decide we can do something easier give me one minute i'm gonna go do something very important and i'm gonna be back and we will continue [Music] hello hello hello replies replies reply okay so replies it should be in terms of database data structure and so on message replies are pretty simple and pretty basic uh what we did we have in our data thing in our data modeling we have added a new field for uh for the message which is reply to message id if the message is uh created in reply to another message we're gonna have here the idea of original message so that's quite easy the challenging part will be the ux like the user experience how we do that and i'm trying to think how to do it like in a simple way yet quite user friendly so i don't know um instead of creating some i don't want to start with um like swiping and stuff like that as our messaging platform do maybe on long press it's gonna set it as a reply so whenever we long press on it we're gonna reply to that message so okay where are we gonna do that we are gonna do that in the message screen chatroom screen chat room screen here we are rendering a list of messages so here on long press equal to two so let's keep in state here the message reply message reply to and set message reply to this is going to be use state come on state of message model or null because we can have initially it's gonna be null null so let's not do on long press because we don't know how the ux is gonna be so let's do uh set as message reply and here we're gonna send a function that will do set message reply to with the item because the item is the message let's go ahead in our message and implement this thing let's destructure it from our props set as message reply and let's implement it this way the whole view of one message is going to be become oppressible and do we have here on long press yeah we have a on long press whenever we press long on one message we're gonna call the function the callback function set as message reply that is coming from our chatroom screen and to the message input we are gonna send the message reply to we're going to send this message reply to let's go ahead here in the message input and the structure of the message reply to message okay all right so here 2 message reply to we can do it we can render it somewhere the same way as we do with the image or with sound oh we have a lot of things going on here so if message reply to exist we're gonna display it here on top of this input field um and it's gonna be a view and a message yeah let's display a simple message thing we're gonna think how to import message from message okay duplicate because this model should be created should be renamed to as message model let's search everywhere we use message and transform it to message model it's gonna be a lot send message i think it's going to be easier to rename the component instead of a model so let's leave it as message model here but this one has message component come on it should be import oh no yeah i don't need to rename it because i can set the name of the import message component and let's render this message component here save so now if i long press on this this is how you implement real time messaging if i long press something should happen but nothing is happening um did it reload uh pressable okay something goes bad here save reload so let's go here let's long press on one of them if i press once nothing happens if i press long it appears here so that's perfect now let's adjust a bit the styles uh to make it look like it's a message reply uh i don't know i can add here on top a text saying reply to this one reply to and for this view i don't know just you can think about better styling but i can do a background color very very light gray color picker will this look good something like this parting five and if i choose a different one and i long press it should change long press let's do it on are you hmm why are you not updating basis is double tap i think do we have a double tap here double no pressable should check if what is our solutions so if i long press reply to this one very long press on this one it's not updating porque um let me check if chatroom screen here message reply set message reply to item where are you listening for incoming messages it's in chatroom screen here observe message if there is an insert of new messages i add it to our state here set message reply to let me do here console log message reply to dot content yeah v yeah it's updating here in state but it's not updating in the child component let's have a look why so we are sending it here message reply to and message input this is state variable you should update message where is content are you working oh i think i know i think i know yes i know i know i know the issue is not here the issue is in our message component so in the message input when we render the message we are basically sending there a new message to build render where is it here message component and if i go back here we are getting the the message yes we are getting the message itself from the props and we are setting it into state and when we are using it from the state but after we receive new props we are not set we are not updating it so that's why our messaging state remains the previous one for that reason use we need to update the messaging state whenever we receive it as a new prop so if [Music] we're gonna depend on uh let's destructure it here better as prop message prop message let's do it prop message prop message set message prop message so whenever our property message the message from property is updated we are going to update it in state so right now if i do it like this is this one if i select whatever one is power one and so on all right okay um perfect and in the message input whenever we send it here we should set uh how is our field called in amplify reply to message id reply to message id to the to our variable here where is it come on message reply to dot id if it exists so let's first of all send a message reply to this one okay and after that after the message is sent also we need to do something like this for the message input we will send remove message reply to this is going to be a function that is going to set message reply to back to null because we need this function in our input in order to provide a way to remove this message either by having here [Music] and i can i can like x how is that x expo vector icons i think we had it somewhere we should have it close come on and design close this one i'm going to copy the pressable with indesign close and i'm going to provide a way to remove remove message reply to and this view is gonna do justify flex direction flex direction roll okay going back there if i do message reply to this one uh for some reason i don't see the recent design this should be what flex one where are you where did he disappear are even updating that's the question are you facing an issue if so what is it i'm facing issues with a very slow pc for some reason it's very slow so yeah let's uh let's see with this remove message reply uh besides that this functionality being on the close button on a xvayer uh we should also do it in the reset fields function where is very set fields here remove message reply and okay let's have a look uh no that's not something that i wanted and flex direction row okay something better flex one yeah yeah yeah it's good because whenever i do it to an hour user here for example this one it appears and i can remove it so let's try to to do thanks send thanks is here uh but in our message component uh in our message component we should display to which message it was a reply to because if i go to amplify admin ui to the content uh we should see that we save the message reply to if i sort by this reply to should be there but it's not [Music] because might be the last one thanks reply to it didn't properly save it that's because in the message input when we send where is it send send message oh but where did we put that one oh we did that in um probably in another send like send image or in the send audio here yeah we should do it in both send message in the send image function and in the send simple message so if i do it here one more time [Music] the nada then let's have a look here reply to some id so it knows that it's a reply to something now the only step is to go into a message component that displays one message here and query the the reply to message so besides keeping the state of one message i'm gonna do const uh replied to set replied to it's gonna be use state it's a message model so slow meh sage model oh my god or null and initially it's gonna be null so um whenever we have a new message use effect whenever we have a new message event message dot uh the field is called how is a field called this one if it's not null get fetch message reply fetch message reply so let's implement this function fetch message reply const fetch message reply here we are gonna do um sad no like this you know we can do it right away here data something similar live is data store query not user but message model message model uh this field then set replied to stop your expo server and vs code and start researched it again let's try let's try because it's really really not possible to work like this i'm gonna stop everything to be honest i can even do a restart because my streaming is on another pc so that's not going to be a problem but let's try let's try it again without the restart i hope it's gonna work what else do i have here yeah let's try again npm start probably from yeah maybe maybe it's still the same it's still the same i hate when this happens and previous week i found uh one reason why this is happening and it was because of a dropbox but now i stopped the dropbox i hope i stop the dropbox it still run ios simulator so what was happening here why i don't like it oh i don't have an equal sign okay we can fix that reload going back here um where did we have that this one yeah so set replied to this and find yeah now it likes it so we will be able to do it like this i think it's even before it or something like that let's just see um reply to replied to and simple text and reply to so if it's true okay not here in reply to something like this okay um let me check some some designs inspiration from i don't know what's up okay um yeah so it's gonna be should we add a message in a message maybe message and the message in a message is gonna contain the reply message equal replied to but this might you might get like very weird like loops if you oh like this so styles container shall it be flex direction should be column yeah and we're gonna need to add something more no i don't want this kind of message it can include a lot of bugs it can include like really a lot of bugs so you can define a new separate thing i will go with a simple text that we had there because if you have like massive reply to message reply to message reply it's gonna get messy by doing this so it should be come on text here text a simple text will work much better with some styles uh styles message reply and we are gonna have to put everything else in another view because we messed a bit the styles and the style of that view is going to be called styles.row because right now our container is not going to be a row our row is going to be a row and reply to that one and [Music] align items flex and it's going to be here but here as well but it depends if it's your or not so um here left container i'm gonna do for a left container it's gonna be start but for a right container it's gonna be flex and to align them to the right word to the left depending on where is it so let's style a bit this message reply let's do background color i don't know something else and gray looks very bad i agree budding five border righteous five and border color the blue where is the blue where is the blue give me that blue here i'm gonna make it look good border color like this and border left a wave it's gonna be free border color why why don't see it border border right with three border why don't you board the right then hmm weird border left oh because it's a text i'm not working with a view okay never mind i'm not going to do that i'm not going to make it look good don't worry border radius not even border radius works so i'm okay with that in reply to gracias and if i do you reply to something else nice it's gonna be in reply to that yeah because it's you reply to audio you have to um to implement some more checks like there are a lot of checks here because even in reply to content or if it's in reply to an image or if it's in reply to a sound uh right now i implement it only in reply to content to display it here but if you do a separate component for this one and include it here you're going to be able to do these checks like if you are in reply to a message or in reply to um to audio but the logic is where it's implemented so it works i cannot send it view you know what i'm gonna create a new message based on message and i'm gonna call it rename message reply something like this message reply and here as well reply yes reply i'm gonna have to remove a lot of things from here because this will just render a message reply uh we will not be able to do that we will not be able to have a reply to reply no set user is me can be sound with data store message user id wait wait wait wait wait i only this one won't need it this one won't need it use effect reply to message id no because a message reply will not have a reply uh we can remove the subscription to listen to that use effect set as read no set use effect okay we can download the audio there i don't know use effect check if me can be that set is read we don't need it for a reply uh pressable we don't need it as a pressable it can be as a view we don't need this one and we will need yeah so back in our message here instead of rendering this one i'm gonna do a message reply and i'm gonna send their message no reply to this one yeah and right now as you can see we are displaying it properly and even you can play the music in the replies and it will work also with reply to messages nice image send you see it will work even with that image like this yeah and now what else you can for for this message reply inside the message you can adjust the styles you can do a lot of things there but for now i think it's it's good so we can consider it as done get status hit commit to the commit message replies let's document everything that we have done here okay message replies add how is the name of that field message reply to message id field to the message model then what did we do we have set the message reply when long pressing on a message in the chat room when you send basically save the message um make sure to add them value to the value basically in the message component we displace one message query and display the original message to which it is a reply very bad wording like i i cannot explain it better maybe i will update it later but right now i'm pretty tired to write so have it there all right so we have implemented the message status sent delivered scene we have implemented the user online status and last seen online and lastly we have implemented the message replies okay guys so we are three hours in i think we should call it a day today um i don't know should we end this this um series or should we keep adding more features until i don't know we are really ready to to deploy to market and to start competing with signal i don't know what do you say but yeah for today pretty happy with what we have this like as more features as you add the feature even if they are smaller we become harder to implement because you start changing one thing here something breaks there and so on so you have to keep in mind whenever you implement something you not break the things that you already have so this is the challenge and um but then we managed to to implement them so guys do you have any questions uh or should we get started with a weekend also don't forget to join the academy the full stack mobile developer course because the this is the last chance when you will be able to join with a 50 discount the next time i will open the course is when it's going to be ready and it's going to be with full price so if you want there is less than 20 hours to join so follow the link enroll and make sure you have a space there still so many features to implement before we can rival signal yes that's true what we are doing here is purely for educational purposes like i'm not saying that we are covering all the features because don't underestimate uh the complexity of an application like a signal or like everything that we have built like instagram amazon and stuff like that uh i don't say that i can possibly build something like that the things that they are building because we are having teams of hundreds of uh developers of very smart developers that are working years on wet applications so it's not possible for a single person to to build everything that they have done however it's possible to compete with them to build something smaller and start uh competing with them that's totally possible that's how all this application started for example instagram uh before it was bought by facebook it was a small application that was focused only on filters when it grew into a community into a social media and then the rest is history the same with our application we started very small to solve a specific problem and then they grew like throughout the years when they had a lot of developers and a lot of resources to to grow the applications so if you are thinking on developing your own application do it do it now and start small start by solving painful problems but try to be focused from the beginning i don't know where the motivational talk after a three hours live stream uh where is it coming from but here it is can you continue this series for more features hmm i really planned something else for the next week but they really like to work with the signal clone what should we do let me know in the comments guys all right uh thank you everyone for joining thank you very much for sticking till the end and for sticking for five four episodes already so that means that you are really eager to learn you're here to to achieve more and to to improve your react native skills and become a full stack developer so kudos to you hug take care stay hydrated write clean code and i'm out but before being out here is the awesome outro and i will never learn with which hand i should point to here is a video here is another video watch them until the next week bye bye

Channel: notJust․dev

Views: 47,283

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native auth, javascript, react tutorial, aws amplify, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app, signal clone, build a signal clone, signal clone react native, signal clone tutorial, signal private messenger, signal app, sonny sangha

Id: uciWe9TvWf8

Length: 209min 49sec (12589 seconds)

Published: Sat Sep 04 2021