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

hey what's up everyone hello not just developers welcome to a new live stream and today we are gonna continue with our signal clone implementing even more features even more uh more advanced and exciting features so we have a lot of things to do today all right so first of all hi to everyone who is in chat and let me introduce the plan for today if you are joining this video and you don't know about our project we are building here a signal clone and we already have on the channel four videos on the signal clone in the first video we have covered the user interface second video we have covered back end third video we covered more advanced features like audio messages gifs not gifs we covered emojis and what else and sending photos as messages and in the previous week we have covered even more features uh like user online offline status and uh ability to display when as well the user last seen online this is a common feature in a lot of messaging and social media applications and yeah it was um interesting to implement it when we have covered the message status and here we implemented sent delivered and seen were read and again this is also a common feature in a lot of messaging applications so um yeah the next step was message replies ability to reply to a message and to display it in the ui in a way but it's clear to what message you're replying so that was a previous week into in this week we are gonna continue with uh features like groups ability to create groups with more more people to um have an admin who will be able to kick people from the group uh to invite more people and so on uh pagination this is um quite boring but very important feature in order to be able to load more messages when you scroll or to load more users again when you scroll and so on also deleting messages very important part in a lot of applications and it's not very difficult so we might manage to do it in this video message reactions like liking a message or giving a heart or something like that also interesting feature and also one one idea which depending on how you will vote vote in a moment we will implement or not uh and these are gifs using the gif api i am have never used gif api but i am quite interested in learning how it works so first of all let me create the uh poll and to understand what should we start with as we did previous time so first one is going to be groups or not here and groups then we have [Music] pagination and let's say also delete message i'll put them together because it can only add four options then we have message reactions come on and the last one is gifts okay let's see what you'd like to see and for everyone who is new on this channel you are welcome here i'm a full stack developer my name is vadim and on this channel i'm trying to share my experience and knowledge when it comes to full stack development and more specifically mobile development we have created a lot of clones on this channel of applications that you probably are using every day like whatsapp uber airbnb instagram and i think 16 more so if you are interested and if you are learning mobile development check them out and also subscribe to the channel not to miss any future videos we are going live every friday at the same time so yeah better be subscribed because a lot of you are not i'm looking in your eyes all right so uh what else what else prerequisites if you are if you want to follow along uh you can download the assets from this url you already know if you have followed other videos i will include the updated bundle with this pdf and so on so you can download it from here also aws account to host our backend and yeah this is part 5. so if you want to follow part one and two and three and four check them out check them out on my channel and um yeah i would recommend you starting from there to have an idea of the project structure where we are at the moment and how we are going to implement the next features but also you can start from this point without following our parts by cloning the repository from here and if we open repository i have created a separate branch that will keep the code that we will start today so if you're gonna go to the part for um branch this is the branch that will contain all the code that we have finished in part four now is part five we start from here and we will implement more features so make sure to start from here i'm going to open the project in my vs code and i'm going to do git check out part four and then i can do git pull to make sure that and get pull origin part four in order to make sure that they have everything yes okay so once we are all on the same page let me open starve application npm start this will open our develop developer tools for expo and from here we can run it on our emulator simulator device your i don't know tetris page or whatever you have i i'm running it on ios simulator because on my machine it works a bit faster so let's wait hey guys how are you doing today let's see uh people want a referral system all right i'm gonna add it that's a very interesting topic to be honest i should make sure to add it to our list so let's do it right now referral system yeah let's referral system all right have a good live stream thank you very much a referral system yep i thought the app already had the ability to scale chats for many users yes exactly our application is almost there when it comes to using groups so we design it in a way that it will it does not limit at the moment from the data perspective and from the backend perspective uh only to people joining the chat room we made it in a way so a lot of people like zero one two three four one hundred people can join a chat room and we did that with the flexibility in mind to make sure that we can very easily add support for groups so what we're going to do in terms of groups in this video is adding the admin abilities where only the admin can the person who created the group can add more users he can um remove users from a chatroom and so on and also uh most of the things from the ui standpoint like to connect everything the ability to add more and see all the members and so on so that's the part for the groups love from sri lanka hello glad to be here chart yes we have our coffee let's go all right so let's see what yeah groups has 53 percent so most probably we're gonna start with groups well what do we have here pagination uh delete messages message reactions and gifs okay so most people are not interested in gives because only me probably maybe i can do a separate video about give api i don't know so yeah all right so uh here we have our application as it is right now here we see a list of our chat rooms uh so if i open a chat from here we will see our chat with that user so we have ability to write a message we have ability to add some smiles in our messages we can record sounds and send sound messages like this yes it's there we can play them back we can send pictures basically we can do a lot of things with with this um clones yeah we integrated a lot of stuff here we see the loading bar of sending the image which is nice image pops up there we see the status of a message if it was delivered uh red or red yeah if it's one check mark that means that it was delivered however if i'm gonna open this application on my phone then you will see how the status automatically changes to a red because i'm gonna open it here so i'm gonna let my phone to download everything so later on i'm going to show you and also message replies so for example if you see a message like this you can long press it reply to it appears here and you can say uh yeah send and this message will show up here as a reply when it comes to styles i think you can do better and implement uh these things to work to look even better but uh it's pretty much um it looks good in my opinion and the most important is that it's working properly so also we see that last seen online seven days ago and this is because with this account was used previous week when we did the live stream that's why it's last seen seven days ago but when we are going to open the project it's going to say lasting online or the status was going to be online all right use context okay we'll see like if we will need context we we will use it and greetings from mexico hello hello there is flutter better than react native i don't have a lot of experience with flutter so i cannot be very objective for v sounds for and i'm biased towards react native how about audio video calls regarding audio video calls i want to create a separate tutorial uh and that's gonna come somewhere in future and um yeah it's not gonna be part of a signal clone maybe we're gonna use signal as a base for that tutorial but it's gonna be like a separate video i really want to do to do that coinbase clone please check out the uh the 12 hour stream on my channel where we have created a clone similar to based on the coin base so check out that video all right so let's get started let me arrange everything here and then we can get started okay like that probably is good so the first thing let's open our um aws console to open amplify and see what do we need for this group [Music] functionality for the groups i'm gonna log in real quick there one second and yeah here we have it so let's go for amplify here amplify make sure that you have selected the region in which you created the application because otherwise you're not going to see it here in the console i'm using ireland but in your case it might be something different so all applications come on yeah i'm gonna select signal clone here and let's open admin ui by pressing on this button uh do you reply to emails from your students i'm trying my best to reply to all of you who are writing me in private but from time to time i miss some emails it it can happen or i add it to unread just because i need to get back to him like i i want to help you and then i it just is getting lost in my emails and but yeah try to reach out and i'm going to try to help you so first of all let's look at our data model and how did we model them these chat rooms that we have so where is it a chatroom is nothing more than a database table in the middle that we have and i did that nice diagram explaining how we are doing this so the chatroom is in the middle then we have our users on one side and connecting a chatroom with a user because this is a many-to-many relationship which means that one user can be part of many chat rooms and one chatroom can have multiple users that's why it's a many too many in this situation we need a table in the middle that will make the connection between these two and the table in the middle is our chatroom user where is it [Music] it is automatically created because i don't see it here yes it's automatically created because we have this many-to-many relationship inside the user table with the chatrooms and inside chatroom we have where chatroom users also many too many and if we look in our code um we are going to see for example in the models i'm not sure yeah here chad we have mas we have chatroom we have user and in between we have this chatroom user that connects a chat room with a user and if we look at them it just contains ids of a chat room an id for a user all right so now to uh like this schema supports automatically groups because by just creating uh more chat from users you add more users to a specific chat room so if you have two chatroom users you're gonna have two users free free hopefully that makes sense so the only change as i said here would need to add to limit only an admin to do some kind of actions like deleting a user and so on so in our case a chat room now will have a relationship to a user so a user one chatroom to one user yes one chatroom will have only one admin or should it be more admins i think we're gonna go for this use case to keep it simple one chatroom will have one user and this is gonna be admin the relationship name and let's save it okay uh one-to-one relationship okay so what else what else um a group besides users and so on will also probably have a name i'm not sure if we are going to implement this but let's add the name for the group because when it's two people in the group you can display on the screen the username but if it's more people it's nice to have a name there and also probably a banner like an image uri again not sure if i'm gonna use them but let's prepare them because it's going to take some time to deploy it what else probably that's it let's try to save and deploy wait until everything is being deployed love a new studio thank you hello easy way out coding so let's wait until everything is deployed here but meanwhile let's think about um user interfaces and how we are gonna handle it yeah we have a lot of work in this uh tutorial on the user interface on how we will create this group how we will add users how we'll display the list of users in the group the name and so on so um what i think is going to be the best approach is whenever we press on this create new message i think i saw that in signal and whatsapp is to have a first option as create a group so yeah let me check on my phone whenever i try it here yeah the first one is new group when you select you have a list of users that you can select to add in that group okay let's let's try let's try doing that so okay source where is it this screen is our screens users screens so in the users in the flat list we are going to have some some components on top so to do that above all the items here the flat list can accept um top how is it top component header component list header component yeah list header component is going to be shall we create a new component or just code it here okay let's let's create it as a new component new group button or row or something like this button or not rendering it but actually sending it here so now uh we need to take this and implement it all right so let's go in our components folder and just keep it there so i'm going to create a new folder for new group button and i'm gonna simply add here the index dot tsx and i'm gonna define the component right away here react native function component new group button so yeah our button is going to be instead of a view is going to be oppressible pressable because we need to get the clicks there come on yeah because i messed up here pressable pressable and the text is going to be new group let's save let's go to that screen can fire will can find a variable new group yeah because we forgot to import it from here uh let's import new group button from components new group button okay and going back to the screen i see here at the top new group all right so uh let's add some styles there right styles well i'm gonna add here view our row will gonna contain one icon and one text so let's add the text inside the view let's import our view oh i'm working nowadays both on a windows and a mug and i'm getting confused with copy shortcuts and so on and for the icon let's do a quick search on icons.expo and here let's search for a group group from here will be good and also let's import this font awesome from vector icons which can be done here why do i have so many miss clicks today not react what the come on come on you can do it all right so let's check that one okay let's now define the styles or for the sake of this i'm gonna add some inline styles just to keep going at a faster pace because we have a lot of things to do today so i want to display them in the same row uh for that we use flex direction row save should always go back to that group okay then this row will have some padding 10 because it is very cramped there okay like this um it's gonna also align the text vertically so justify content center no i meant a line items center perfect and for the text style first of all margin left 10 and font weight i want to do it as bold new group here for the color i want a gray probably because it takes too much color picker some gray like this yeah that's that looks a bit better and yeah like from from this design and style i think that's that's good enough now whenever we will press on this whenever we will press on this we are going to be able to select users out of one list okay select users from a list and i think that we are gonna use the same list of users uh to select this user that we want to add to our group right so yeah i think that's going to be the easiest part let's first of all let's have a look at our admin ui the deployment status is uh successful so let's grab the amplify pull command from here go back to our terminal open a new terminal by pressing on the plus sign here and pasting in the amplify pool command in order to get all the changes with our new admin functionalities from amplify so we're gonna wait a bit for this to complete let's end this poll so what's going on there did we receive all the changes um what do you think was it actually updated i mean the models in the schema here let's check what do we have there the chatroom chat room chat room it should be something like this yeah chatroom fails it has id it has new messages last message chatroom users and also admin yeah it has the admin which means that it was updated successfully and yeah probably it will have everything that we need okay let's have a look a bit advanced chat 533 uh but you may have watched your uber clone video in that you use up sync what is the difference with admin ui uh actually there is not a lot of difference because admin ui is yet another layer on top of uh everything that we used before so behind the scenes we are still using up sync and yeah we can go back to our admin ui here admin ui is just a user interface for creating our amplify project so instead of doing from the cli for example amplify odd authentication or something like that amplify team made it even easier just by doing it from this um dashboard you go for example for authentication and you configure it but the the things that are here are the same as the cli so everything that you can do here you can do it in cli but some things here are not ready yet so for example let's look at the storage you cannot do a lot of things here what it shows you it shows you how you can install them using cli yeah it shows you a link to the s3 bucket for example but with time this dashboard is going to be very very very useful and easy to use what the dashboard has and we didn't have before and this is mostly the reason that i started using admin ui is the content tab from here you can right away have a dashboard to manage all your content in your application without the need of developing a custom dashboard in i don't know react.js or something like that you can come here you see all the content all the messages for example all the users you can look at them you can save it okay we need to ban this user i don't know and also you can add different users that will be able to access your admin ui and to manage your content here so this is the difference and yeah when working with admin ui we need to work with datastore just because admin ui is using datastore to synchronize the data between uh the clients so that's why nowadays we are using most of the time datastore to be able to to use admin ui hopefully that makes sense hey when are you releasing the course so robert if you uh have bought a course during the pre-sale campaign if you are part of the batch zero the course is going to be the first modules uh module the first module and the second module is finished is filmed now i'm waiting for the result from uh our video editor and it's going to be available probably next week or the week after that however if you didn't enjoy in the course during the pre-sale campaign the course the next time when you'll be able to enroll is going to be when the course is going to be fully finished and that's most probably by the end of this year so join the waiting list and i'm gonna make sure to send you an email when the enrollment is back on hey sky skies is saying that today is the first time joining the live stream that's awesome welcome here watching from uganda oh there are more people from uganda nice from netherlands hello mahira what's the time in my place in my place it's uh 3 38. okay guys so let's uh let's continue data store versus dynamodb varies we do not compare with each other we are using datastore as a client library and on the back we are using dynamodb but from our perspective as a like front-end developer or let's say when using amplify you don't work a lot directly with dynamodb we work with um for example creating this data modeling here creating the relationship here but behind the scenes everything is dynamodb and when you need some very custom functionality for example when we did authentication we implemented some custom logic for in lambda function that was directly working with dynamodb so the database in our case is dynamodb and the library that we are using to query our api to cache our data and to synchronize the data from local cache with the data from the cloud is datastore okay okay okay okay okay let's get back to to business so as i said next step is whenever i press new group i should be able to i should be able to select users from here user item okay let's think about how we can reuse some logic what should be refactored what should be changed and so on so um one thing that i want to see is the user item right now because user item has a function called on press whenever we press on a user it creates the chatroom and it adds everything there however if we press new group then we should switch to a different mode and pressing on a user should add should select him so to do that what we're gonna have to change we're gonna have to take the logic of creating a group from here this is creating a new chat room i'm going to take it from here and we're going to do it in user screen because we needed two different logic in two different use cases so this is gonna be create chat room or something like that then user then then then our user item will receive this function on press yes and yeah when we press here it's gonna do call the own press that is gonna come from our user screen here let's grab van navigation also because we don't need it here but we will need it in our user screen in our user screen we're gonna need the navigation let's import navigation from the react navigation native um we're gonna have to also take these two lines valve of data so from amplify and all our models taking them from here importing them in our user screen oh no like this yeah i'm going to delete vowels here it's not the access to the models is not correct so i'm going to delete a pair of double dots because it's only one folder up [Music] user screen user create chatroom and i i would like to keep this function to create it more abstract so this function should work with both creating a chat room with only one user and creating a chat room with many users so i'm going to have here a users array this is going to be create chat room with these users plus the user that is authenticated and the function will create a chat room okay it will connect the authenticated user with a chatroom authenticated user the database user uh yeah here we should check if there is any database user so if db user exists then we should add it here that's more correct way to do it uh and then connect uh you the user that are coming from this parameter these users we are going to connect with a chatroom so um we are gonna have to map through all that all those users map for each user we need to basically tell save to as i save as a chat room user so to save as a chatroom user this is the the call right so let's take this one from here paste in here it's a bit tough this one is not users but it's user already so for each user in our users add it as a chat room but because datastore.save is asynchronous uh our user.map will re will return an array of promises so to a way to await all those promises to finish before going to the next step is doing is inc wrapping them into a promise not all so this is the call so we uh yeah if we look from the lowest part to the top the first step is to save one user in the how is it called in the database right i can actually extract this into another function to make it clearer for you so const save user as or no let's add user to chat room this is gonna be much more clearer clear for you so this is the call oh no not this one but data store say this one add user to chatroom this one this is going to be a sync function and our user and chatroom is going to come from here user and chat room so user in chat room it's not new chatroom because we rename it to chat from here so we can do it like this but because we have a same name no we we're gonna make it to have some same same name and because they do have same names we can skip the value it's going to take it automatically so this function is pretty basic like it calls data store save new chat from user and passing in the user and the chatroom so let's use it down below we can replace even this one so instead of doing data store save we're gonna call add user to chatroom which user the database user to the new chatroom as simple as that so yeah that function is going to do the same thing as before and here for user mapping yeah for each user we want to add him add user to chatroom this user to our new chatroom and again because users.map will map to an array of promises just because add user to chatroom returns a promise that we need to we will uh start all this the execution of all these steps and by doing await promise.all we are not going to go to when the next line which is navigation until all of these users have been added to our chat room here and now i can delete it this one here okay with that we have made with our create chatroom be able to work with a list of users so let's uh fix the issue that we have right now for example here on press is missing because we didn't add on press on press let's say on user press and the user is going to be this item so let's implement this function here on user press uh and here is gonna be the user on which we are pressing it can be um but yeah where okay so when user press what should happen let's only handle the case that we had before like creating a chatroom with one user so what do we need to do this is going to be a sync of course we will simply do a weight add users to chatroom and which users we're going to add an array that will contain only this user an array of one user does it work expected two arguments no no no no no i wanted create chatroom this one create chatroom and we send an array with only one user and by doing that we should be back to the functionality that we had before whenever i press on someone for example test i create a chat room with him hello it will add me and that user to the chatroom however whenever i will press on the new group i should switch to a different mode where i'll be able to select multiple users and then i'll have a confirmation button here at the bottom of the screen do we have a component for our buttons no we don't do we have any buttons that they can copy do we i don't think so okay i'm gonna create a simple button here oppressible or should we do it as a component okay maybe later if we will need it and pressable inside of that it's going to have a text and the text is going to do create group save group or i don't know save group so let me import from react native here text and pressable and here i'm gonna have two styles for repressible style dot button and for the text style it's gonna be styles dot button text let's add the styles here button and button text so the button first of all we'll have background color we need that [Music] we need that how is it called the blue the blue color we should have saved it in a file with as a constant uh just not uh to have to search for it every time that's better i see no that's not better actually i took it a wrong one home screen no somewhere in components i'll find it message input this one yeah that's better i guess where is it so let's do some margin 10. and some padding 10 and align items center okay i can do margin margin but um i can do even 20 or we can fix this issue by adding the whole screen into a safe area view i think that's gonna be better if we import because our button here as you can see is displayed under the uh this notch or this part at the bottom here so we if we use safe area view and replace our top view with a safe area view now it looks better because we are sure that the button is not overlapped with anything there on the screen so for the margin i can do only margin horizontal 10 just to add this margin margins horizontally and for the button text color white and i don't know font weight bold okay and some border radius 10 and we are good to go not sure if it's based on the styles from signal but i'm pretty happy with it what's going on there are people spawning so for yeah for okay all right so for everyone who is joining to uh right now and who missed the first part in today's video we are continuing our signal clone this is part 5 of our signal clone and we are implementing even more bonus features i think this is the biggest clone and a lot of you have asked for this so in the first video if you remember we have implemented some extra features like user status online offline when he was last seen online also message status for sent delivered and read and also message replies in today's video we are starting everything with groups we want to be able to create groups with multiple people to chat between them have admin functionality who is able to uh kick users and who is able to add more users then um based on your replies and votes we're gonna go into pagination we're gonna speak a bit about that deleting messages message reactions like like and so on and most probably we're not going to have time for gifts but that's also something interesting so yeah at the moment we are still at the group's part we are working on that and welcome you're very welcome here okay oh my god i see here a cool story uh a b check hopefully uh spelled your name correctly he's saying i got hired as a react native developer just by practicing and learning from your videos thanks a lot with you oh my god that's super awesome like messages like this success stories like this means so much to me and it shows the result of what i'm doing here because i'm trying to impact as many uh lives as possible not just having this as entertainment video or so on but i just want to help as many people as possible to learn and get jobs start their own projects deploy their application to marketplace start making money and yeah when i read this congrats what can i say so let's get back to work um where which model should i use this one so we have here this button but this button should be should be visible only when we press on this new group so let's add a state variable that will specify if we are creating a new group or we are just creating a 101 group so is i don't know new group set is new group this is going to be use state in use state initially it's going to be false uh and with that we can conditionally render this pressable with the save group because we want to show it only if we are creating a new group is new group like this okay and now it's not visible but for our uh new group button here we're gonna send let's add it to an arrow function here because we want to render it and want to send some extra parameters that's why we cannot send it directly but we are going to add it as an arrow function and here we can add some more parameters so on press on press what should happen we should set his new group with uh inverted value of existing is new group field so if it's true it's going to be false and vice versa we should be added to an arrow function as well so let's go to our own new group button and receive our own press that we just sent we're gonna simply send it down to our pressable on press save and if i go to our screen here if i press on new group i see the save group button if i press again i don't see it so okay this is the first step the next step is the ability to select users ability to select users again first of all let's have a look at from the ui standpoint how we're going to do it we're going to probably do it with a check mark check but i wanted i want a empty circle as well because if it's not selected it should be empty uh circle i don't know oh this one maybe it's to check and design check circle oh check circle all right and typo come on need one empty circle circle circle come on something good here this one oh cirque check circle and just circle we're gonna use these two probably yeah this is the best so it's from movies fever let's copy it and we're gonna add it uh so here we have user name right container image right container it's gonna be at the end here so let's import the fever from vector icons let's have a look here okay for the color again i'm gonna use a lighter gray 20s 24 is probably too much 20 is okay and also what also we are going to receive here is selected so basically is selected will have free potentially free values either null null or undefined then it can have where is it false and it will also be true if it's false we should display this circle with an empty if it's true we should display the check circle so for that actually it's pretty easy we can do it like this so is selected if it's true then we're gonna render circle otherwise check circle no check circle should be here and i can do here a default value of true so if it's true it's selected okay if it's false it should be empty false should be empty here but if it's undefined or null we shouldn't render it at all because in that case we are not creating a new group we are just um yeah we just want to create 101 groups and in that case we don't need them at all so if is selected equal null then we're gonna display it here or actually it's not null but undefined i think it's better or no actually no okay so if selected is null we are doing it like this okay so back to our user screen here we should send is selected to true or false or undefined oh no no no no here is actually undefined undefined if selected is not undefined or null is selected are we sending here true yeah so user item is selected uh is selected is going to be if we are is new group where is it if we are creating a new group let's say for now is false otherwise is null or actually undefined so in this case we don't see them at all if i turn on new group i see them but now whenever i press on one of them i should make it selected so for vet we need to have a state variable for the selected users you selected users set selected users it's going to be use state come on basically the same as this users so uh we have this on user press right now it just creates a chatroom with that user but with our new functionality we should check in what mode are we if we are is new group then something else should happen otherwise we are doing the same as we did before but if we are right now creating a new group when pressing on a user we should either add him to the selected or remove it from the selected based on the if it's already there or not so let's add a function is user selected this will receive a user and will return true or false if it's selected or not so how we're to do it return selected selected users dot um i think it's sum yeah an array.sum will return uh true or false if at least one element from that array match uh fulfills the condition that we are gonna give here so for each user layer selected user so if selected user dot id is equal to the user that we are searching dot id so by doing this selected user property selected user not users like this so yeah if at least one of the selected user have the same id with our user that we are searching that means that he is selected so with this is user selected we can go in our uh here and instead of sending false whenever we're creating a new group we're gonna use this is user selected of item so if i create a new user right now nothing is happening but whenever i press on a user in this function if i just simply set selected users to the uh existing selected user so selected users plus the user that we are pressing then we're gonna see that whenever i press on one of them it becomes selected second one selected third one selected but if i press it again it does not deselect it will actually add added two times there so here in this function we need to check if is user selected we need to re if it's selected remove it from selected otherwise add it there otherwise as added there as we saw here removing it where sad selected users is going to happen by filtering the existing selected user users so um selected user we are gonna filter and uh keep in our array only the selected user that is different than the user on which we are clicking id so if i press it right now and jeff no you see it will deselect everything except this one so we're gonna change the condition here from equal to different so right now if i select more of them if i press one more time i deselect them perfect and right now in in the save group i can add here also a number which will say selected users dot length by doing this whenever i new group and i select i see them here how many users i want to create a group with perfect so uh one last step is to implement the logic whenever we press on this save group but the logic is pretty simple on on press uh let's let's separate let's give it a function name here on save or just save group this safe group is going to be our custom function here const save group async and what should happen there we should simply do a weight create chatroom and send their selected users right because our create chatroom we already have changed it to receive an array of users our selected users is an array of users so by doing that we simply do we call that function with our array of selected users so let's have a look at that let's create a chat room with test and jeff let's create it okay it shows us test here but if we go in our amplifier here content not sure how we will better understand it chatroom which one is have zero idea which one but jim and jeff let's see the last one messages no no no no no it's gonna be tough to to understand which one we just created [Music] yeah maybe let's have a look directly in dynamodb so back in our aws amplify console here i can do api and from api i can open the vevo the chat room table i'll open it here and i want to res to get the idea of this chant room [Music] the new dynamodb console uh what are we searching chat room is it that one yes it's this one and where do we see the items view items here and this is the the last one right but we just created nom i don't think so id is it this one created add no it's not this one come on i'm gonna yeah this one created that today yes is this one so i can take the id from here and let's copy this id and now let's go to our chatroom user table that will display all the users part of a chat room so by filtering based on this id that we just added we will be able to let's go to view items here and let's do some filters the based on this field chatroom id chat room id type string equal to our copied id and let's run and we see free users in this chat room two users that we selected from the list and the user vet was authenticated so now we know that we have created successfully a group and everything else from the perspective of sending messages receiving messages updating them automatically will work as before the red status will uh it will be displayed as red uh as soon as the at least one user from the group has read it so this just to keep it in mind all right that's our groups so yeah i'm gonna implement some some more features in a moment let's have a look at the chat do you have any questions by the way till now is was that clear of how we created the the yeah this adding a new group and so on of selecting deselecting saving the group oh come on so i'm from nigeria and this course has helped me a lot please can you teach us how to host our project uh that's awesome i'm very glad that you found it valuable we will cover deploying it to markets in future videos i'm doing that for the course but in future maybe we will do it on youtube as well the best tutorial on youtube we are working on the first part but i'm here to say hi keep up good work thank you very much i'm really glad and happy that this build is so interesting to you guys and you're always pushing like come on let's do one more let's do one more jim can you update us on the course uh yeah uh of course uh i already talked about that in uh the beginning of the video for everyone who has joined the badge zero the course the first two modules first one is the environment setup for windows and the second one is react native fundamentals uh where we cover all the basic fundamentals in order to be able to take even beginners from zero to be able to follow along in the next part which is going to be much more advanced and complicated so this module focuses on these fundamentals we are creating also a full stack project i'm gonna send an email update about the project very soon so yeah these two modules are ready i filmed them now i'm waiting for the editor to edit them and i hope that next week they're going to be ready and i'm going to be able to add them there and after that we will create the community the private community and from there we will get started what is the theme of a course uh the course is the full stack mobile development with racknative and aws amplify it will have a similar style with my youtube courses my free youtube courses but it will go much more deeper into the features into the systems like a following system like notifications in-app notification push notification deploying your application to market implementing a lot more in-depth and advanced features also from a devops perspective how to integrate automatic builds and updates to the store using ci cd so it's a lot of stuff here it's everything that you would need to know as a full stack mobile developer you can find the course at academy.notjust.dev or follow the link in the description below okay let me let me see some other questions so if you send the chat in the group our participants will get the message as well yeah that's true it will work similarly as before because uh because of how we model the data so in our case the only thing that we have to do is change a bit the ui of how we add these groups so right now let's uh we're going to go ahead and have ability to see the list of users from the group and something else so in a moment we're going to get back to this bella thank you very much for joining and for appreciating it it's really cool to see we have implemented so many features for the signal clone yeah like we i almost feel that it's like 90 percent ready like to be deployed to the market but no actually in order to deploy such an application to market there is still a lot of things to do like we are only covering the most important and most exciting features of a signal this looks interesting and just got recommended to me i'm subscribed sir that's awesome thank you very much all right so let's uh let's get back to our coding so what uh what i wanted to do next is gonna be seeing more information about the group itself for example seeing all the users in that group uh yeah let's try to do it where yeah i'm gonna run it again on ios simulator here and let me get some inspiration for from signal itself come on signal okay where are the users here huh come on reload look what we're gonna do [Music] when creating a chatroom here i'm gonna look if we have more than one user here which means that theoretically it's a group and in that case i'm gonna add a chatroom name also by the way the admin we didn't save the admin there yeah so admin all right okay um okay so uh let's do it like this const new chat room data is equal to this one new chatroom data here uh okay chatroom here chat a room where is it chat room id new messages last messages uh admin admin yes that's what we want admin so the admin admin is going to be this database user so uh because we need it there i'm gonna have to query these things on top okay we get the database user and he's going to be the admin because he is creating this group okay the name of a group name i'm gonna add if if we are trying to create a group which means that the users.length is more than one without us then our new chatroom dot name is gonna be an new group two new messages admin and our new chatroom data dot how is it called the image uri will be oh that's tough we need some group image [Music] so group group group group group i can but not i can group on momento no no no no no banner i don't know something like this will work so i'm gonna upload it to s3 just for you to also have it if we take it from here so i'm gonna go to my s3 buckets come on and we have their some dummy datum images thumbnails images avatars yeah avatar is gonna be okay let's upload where is our group icon here and for the permissions i'm gonna add it you don't need to do that by the way don't worry grant public access and upload i needed to rename it um come on can i do it here rename rename group save and here is going to be the url of our image group have a look and add it as well if i open it here it should be okay yeah okay so by doing that we are adding userslamp okay now let's create this let's create a new group with with these specifications with our admin with name and the image okay new group i'm gonna select a couple of people from here save group and right now in our amplify for the chat room we should see what a chatroom with an image image here yes we see it and with a name new group so back in our let's right now adjust our header here for the chatroom to display either the image and the name of a chat room if they exist or the image of our user in the case is not a group so back in our navigation chatroom header here is where we're displaying this header right so what are we doing here we are chatroom header this is the idea of a chatroom we are never querying the chatroom itself so let's also save a chat room here in our chat [Music] a room set chat room it's gonna be use state chat room or null initially it's going to be null let's import the chatroom uh what's going on here it's not yeah comma it's war so let's fetch it um you know what i'm gonna take the fetch users outside of that use effect i'm gonna create a new fetch chat room which is going to be quite simple it's going to be data store dot query chat room with a id that we have here but we should also check if our id is null and when we get the result uh we will set it in our state there set chat room let's work with undefined here okay and also let's call it besides fetching the users but we don't need this one because we already check it here okay so fetch chatroom okay okay okay okay so for the image uh let's check if chatroom dot image uri is not null then we are gonna display the chatroom chatroom image uri otherwise we're gonna display the user uri user image so if i go to here for jeff we see jeff however if i go to the last one probably with this one i see the group icon as you can see there same things for the name so we're gonna check if chat room name if it has a name we're gonna display the chatroom name otherwise the username so here if i go to the last one which is a group i see the name new group same things should happen there but yeah actually this should this can be formatted as like this so the uri should be chatroom image uri but if it's null fall back to this value i think it's much simpler this way less characters you know what else i want to do in a group if it's a group name i want to add a second i want to add a list of usernames for example if it's free users they're going to be displayed under the group name here so for that we will need all users set all users use state um it's going to be similar to use state it's going to be user array initially it's going to be an empty array when we fetch the users let's do it like this because we had it already set all users to fetched users and going here let's do let's have a function is uh is group will return to true or false depending on how many users are in this group so return all users length if it's more than two it's a group otherwise it's a 101 chart and with that we can decide what do we want to show the get last online text or get user names so if is group get user names otherwise get lost online text so let's implement this get user names function const get user names uh so this is going to be user all users all users dot map we're gonna map to an array of just names so user is gonna be user dot name and we're gonna join with a comma so by doing this we receive one text one string with all the usernames joined with a comma let's hope that it works test what's happening there what's wrong i think that is group doesn't have to be a function it can it can be a variable if all users.length is more than two so get user names uh i forgot to return here return all users that's what why it was like that so if i go to the last one test here okay i see a list of all the users from this group but because our usernames are the emails they're here like this [Music] yeah so this for this tags we can add here uh number of lines one and this will automatically add this dot dot advanced and yeah this way if i talk with this one we see the get lost online because it's a group of only two people however if i look at this one i see the group name the group icon and the list of group members so let's do the same thing for our for this case here in our list of chatrooms where is it in the components chatroom item so for the chatroom item uh do we have here chatroom yes we do have chatroom so the image will be chatroom dot image uri uh or the user and here at the bottom we see the uri of the group for the group that's already better same thing for the name where is it username so here we're gonna display chatroom.name name or user.name so here we see the new group and in other places we see the name of a person great okay now i think from the user from the ui and ux standpoint it's a bit more clear which one is a group and which one is just a one-on-one private talk i think we're pretty far ahead and i can do guitar get cam meet m groups and then but i still i still have some ideas for these groups to make them even better thanks for beginner lessons uh now i'm learning it and get motivation from you thank you very much thanks i really appreciate that i can be of help to you what film are you using on vs code it's i think material darker but if you want to learn more about that i have created um a video on my channel regarding all my vs code setup you can find it there i have a dm i'm building a spotify clone where can i find an audio uri to test expo av did you check the spotify clone that we have on the channel if you didn't you're in luck because we have done a spotify clone on this channel and yeah you can find it there larry that's a good question how do we implement the logic of checking if a chat or group chat exist and not create new chat or groups with the same users uh yeah that's a good question we might stop to implement that at the end of a video like very fast how that would happen is where is in our users screen users where we create a chat room here we will we should yeah i still have this to do if there is already a chat room between these two users then redirect the existing chatroom otherwise create a new chat from with these users so in case we are pressing on the same user but we already started a chat we shouldn't create a new chat chatroom to do that we are gonna query should we do it right now maybe we should what yeah i'm gonna think about it i'm gonna think about it and we'll see phone number authentication yeah we can do that in future a lot of people are asking for that okay all right so let's um the next step about groups i want to add the screen that will show a little bit more information about the group for example a list of users that's the most important stuff to see about one group so let's add a new screen a new screen let's start to add the screens with folders because usually my components and screens are inside the folder so this new screen is going to be called [Music] group info screen grouping for screen let's add the group info screen dot tsx and the index dot ts that will simply export default from here d fold and in our group info screen tsx let's do react native functional component export perfect group info okay let's also in the navigation in the index add a new stack screen here uh yeah we can copy the chatroom stack screen here and add it below it doesn't necessarily have to be below it it should be somewhere in v stack navigator and it's going to be chat room info info components chat room info or group okay it's called group info screen okay let's name it like this as well for the header no i'm not gonna do it the same simply like this grouping for screen so whenever i press on this header i should open the grouping for screen so in the chat room header here chat room header whenever i press on the image and on the this view for example that contains the text so pressable i'm going to transform it to oppressible and on press open info open info here redirect to info page but before that let's import pressable from react native save and and what else from should we also do get the navigation const the gation from use navigation it's imported from react navigation core and by doing that i can navigate dot navigate to our group info screen and also i want to pass the id of a group so the id of a group is going to be you have basically the id that we have here save so let's try it new group if i press it here yes group info screen back to the chat room yeah perfect so now in this group info screen what do we have to do we have to first query the data about the group itself i want to sneeze come on come on come please all right so uh in our grouping for screen first of all we need to query the data about the group okay so data about the group we're gonna steal from chatroom screen here chatroom we're gonna copy chatroom we're gonna copy fetch chatroom yep and we are gonna copy the yeah this fetch chatroom function route route okay and also the route around from here to be able to get the id of a chatroom so let's start importing stuff use effect use date from react chat room from our models here use route from react navigation core use effect from react data store from amplify and that's it i can do here i don't know chatroom dot name if i go here new group press i see new group here okay awesome for this view yeah what i want to do here is render a list of users text users style is that root let's add some styles styles dot style should create create and at least for the root i want to add a background what's going on no styles not from here we need to just import style sheet from react native back ground color white and and to add some pageant padding to the whole page so that it will look better yeah like this and also we can add flex one to take the whole page to be everything white perfect and for the title font size 18 and font weight bold save new group perfect i can do the same styles here for the users okay but for the users uh back in our chat room screens we also have now here we have messages you know where we had users in the header so in the navigation chatroom header here we have this list of all users we will basically need it as well in our group screen info so all users will be here and fetch users we will take the same logic here fetch users and let's call it here fetch users okay we have all users what we can do with them import from our source models but it imported separately so i'm just gonna add them in the same line okay so what we can do with our old users is set no this part we don't have it and this one we don't have it only set all users and here we can do we can display a flat list of these users flat list where data is all users and where render item is gonna be item we're gonna use the same component as we are using to display users there so user item user is the item save users what's going on here users user item uh yeah but on press on on selected vets we don't need to send it and understand why we all users let's add here that all dot length zero y is zero fetch users data store query this one yeah let's import i don't know why we didn't import but it didn't crash our application so that's good data store query this one okay where chatroom chatroom id equal with id cannot find id fetch user with the with this route params id yeah now we see the users for the title i'm going to add some vertical tan just to separate okay so we have four users here it displays all of them if i go in another chat room we're gonna see also for if i go in a chatroom with only one user we're gonna see only two so basically it's still a group but it's with only two users so doing this we have ability to see um the the list of users from each group here okay all right um what else what else i want you to do here uh for the group user item in the user item we can also display who is the current admin right so i don't know username why do we have a username inside a row i don't know why not directly like this yeah it works and another text that will say admin and is admin will have a default value of false admin and we're gonna render this is admin conditionally if we send the property is the admin to true we're going to render it as with a is admin thing there how do we do that uh here we need to ch to send is admin a value uh and as you remember we have added in our data a relationship from our chatroom itself to the admin user so by doing chatroom dot admin dot id if it's equal to this item id then we know that it's item dot id it's the admin and here again like this so if i go to the last group if i open the details uh nothing nobody is admin here still okay but if i open this one again um does our chatroom have an admin id no chatroom dot admin dot i d uh let's see if it was saved correctly content um one that has an image there this one new group does it have a chatroom users admin it doesn't have an admin when we create the group which happens in our chatroom screen no no chatroom screen users user screen uh we attach the admin as a database user but i think it should be admin with capital admin capital yeah let's try to create a new group new group with jeff test and save and if i go now here now i see that i am the admin because my id where is because my id matched the id of the admin of a group so by doing that yeah we we display who is the admin there what else ability to ability to delete users from the group [Music] we can do that actually ability to delete users from the group so const on user press on user or let's do a confirm delete and uh delete user we'll see how they go so how how will the user experience be with deleting i think we will uh instead of instead of complicating ourselves with some uh swipes or things like that we are going to simply implement the user delete on long press and we are also going to have a confirm confirm deleting so in the user item besides vol press we're going to receive a on long press event i mean callback function and on long press it's gonna call on long press and from our grouping for screen uh like this like this like this on long press is gonna be um confirm delete with the item with the user confirm delete user item and here is confirm delete user so what should happen in confirm delete we should use an alert this is the simplest way to do it uh confirm delete the message is gonna be are you sure you want to delete here we can also add more details like user dot name from the group and then we have our buttons our buttons no this the buttons is an array and one button is gonna have the title and delete on press is going to call delete user on press delete user with our user where user here let's simply do console worn deleting user title string on press wait is not assignable to type alert button to do known properties and title does not exist in alert button alert button but how is them alert come on title message callback or buttons type alert type default plain text secure login password callbacks or buttons alert buttons text oh it's text on press and style destructive it's text and for the style style it's gonna be destructive to be with red and we're gonna have another one with text cancel save let's long press on one user confirm delete are you sure you want to delete jeff from this group cancel does nothing if i press delete i should see deleting user here perfect from here i can also do a check here not to delete myself so if user a dot id is equal to chatroom dot admin dot id alert alert can't you are the admin you cannot delete yourself i don't know something like this and return save if i long press on my your admin you cannot delete yourself for the hours it works so with deleting the user when actually we want to delete a user we're gonna do a weight sync delete user await data store dot delete we want to delete a model which model um one second let's let's have a look at where amplify docs come on give me something data store data store do you see it libraries data store delete uh yeah we are gonna just send the user that we want to delete there so if i delete jeff jeff from here delete and now i if i refresh my chatroom my application if i look at the last one which yeah i'm already i'm already lost with everything here we have so many of them uh let's try with this new group for people i'm gonna delete one of the dim for example this one node is not an object chatroom admin id uh i need wad here question mark because in this case where i had no admins so let's delete him and let's refresh refresh yeah what's going on there not android not on drawing no no no uh something bad happened let's just restart our server and let's close some of our tabs here all right going back here let's do npm start run android run ios simulator come on since like i lost the internet on my device what chat rooms i did a mistake there what's going on there oh i think i know what happened i think we just deleted all the chat rooms yeah most probably we have deleted all the chat rooms not very good to happen that in production but in our case it's not a big problem it's good because yeah we [Music] ohio why did you change to ohio signal clone notifier reachability is um yeah like reachability is if you have internet or not so whenever you move from not having internet to having internet there is an event on this and it notifies datastore that like cloud is reachable so that datastore can start syncing with a cloud it's coming from netinfo net info module react native net info if you want to learn more about it uh let's open admin ui see what's going on there and content chat room chat rooms are not deleted but none of them have any users i think let's check the last two chat room user no this one did it just delete myself from all the chatrooms let's start the chat room with why whereas only these users what's going on there with test okay let's create a group with everyone except me okay um what is happening okay okay let's um drink some water and think what's going on there so screens user screen let let me just do a new group one to be able to distinguish which group we are just creating so new group i'm gonna create a new group with these two people and that should be called new group one this one and it has only both two people without the admin you see the admin is not even linked uh what something related to the authenticated authenticated users with database user from here hey uh thank you very much sumo mia deep paul thank you for your kind donation so okay can you check if you are still a user um yeah like something something weird happen with our database user because it's null users yeah i'm not user here and that happened when i tried to delete oh when i tried to delete a user from a group it deleted a lot of thing there data store delete user and it automatically deleted other things for from from here okay um let's have a look at the documentation amplify docs see what we did wrong and then we will have to register once again libraries data store delete simply pass in an instance you can also pass predicates operator to delete multiple items for example we'll delete all draft additionally you can perform a conditional delete for instance only delete if a post is in draft status or when you delete a parent object in one to many relationship the children will also be removed from a data store and mutation for visualization will be sent over the network for example following operation would remove a post with id one two three as well as any related comments that i think is the issue because we uh have a really one one-to-many relationship between a user and a chatroom user where is it yeah i don't see it here but so a chatroom user is one but it shouldn't happen whenever i do of course yeah whenever i delete oh now i realize so when the what i read here is when deleting a parent object in one-to-many relationship the children will also be removed that makes sense because whenever you delete a user we also delete all the chatroom users because user and chatroom user has a one-to-many relationship where a user can have multiple chat room users so the user is the parent chatroom users is the children whenever we delete a user it automatically deletes the chat from users because without a user there is no chat from user that's true but here what we deleted was not a chat room user it was an actual user so yeah that's that was the issue there uh delete user okay okay it's gonna be a little bit different group um can we do here because we deleted the user completely yeah yeah before going there we need to register once again right yeah i'm gonna go um in i'm gonna log out and i remember in our chat or in our home screen we had this commented out pressable but i'll comment it out again that will help me log out and here in order let's open authentication and view users incognito i just want to make sure that i have another email or if i don't i remove a user with the same email because i'm not going to be able to register there users confirm support by dim which one should i delete i think this one disable and delete so now i can sign up with a new user here sign up let me get the confirmation code and seven nine four five 255 and let's login sign in perfect we are back in with a new account i'm gonna comment out again the logout button i don't like how it looks but we need it from time to time so let's start a new chart with the test for example hello there send oh did it create if i reload what not again there should be a new user yes it's this one messages it has a message but it doesn't have chatrooms what chatrooms name let's try a group was it with new group or new group one already new group 1 should be this one yeah it should be fair yeah i don't get it why why is no display here because if i look at this new group one i see a chatroom user support wait a second again i don't see myself yeah again i don't see myself nice create chat room uh let's do here console log of user and then console console log db user and let's do if database user is null then i'm gonna stop the execution here and i'm gonna simply alert alert there was an error creating the group because if i cannot add the authenticated users there doesn't have a point to create a group there was an error creating the group let's check the logs iphone here sub where is the user attribute sub this one so there is you are telling me that there is no user with this id user table view items we have oh the good thing was that i could come here and set delete it to false and everything goes back to normal created at 0 9 this one isn't it the same idea yes it is then why are you not working [Music] yeah the user is here maybe bypass cache here to true not to take it from cash no but the issue is not here because we are getting it the issue is here data store query user with this id and i see that it exists we are in home screen we do the same we are getting all of them where let's not do this filtering let's comment it out so yeah we we see them the issues with this filter hola why is not working alex most probably yeah i cannot but but but it was working come on it's in the user screen here now you you should be there all in one hello database user oh i i think i might know why or no no no no ah it hurts my brain so here we have i happens to all the devs definitely so this id in our database is saved successfully you have it there it's here can you login as another user let's try to log in with the support let's log out and when we log out you see we only do our off sign out but i also want to do datastore.clear maybe it does issues with datastore where let's also wait so i'm going to enter again as uh with him here and ah come on i want to for you oh not just the dev what kind of com and let's try to log out again in order to clear everything from datastore and now if i go back to not just if i create a test now it works yes guys it was the data store and right now here if i reload the page i should see the new chatroom yes hello hello it works perfectly and if i do a new group i see all of us here oh we are back to normal all in one hello sarah thank you so much for teaching us thank you very much for your kind donation i really appreciate it you see a donation and everything started working as as expected so let's uh go back to where where we were working user screen i want to clear here but this console logs the group name will be back to new group one new group and yeah now back to our screens grouping for screen because here is where we messed up we deleted a user but we had to delete chat room user not a user uh let's do some console console here console.log user and console.log a room chatroom i just want to see if we might already have a data there so if i go here clear everything and try to delete this support are you sure you want to delete delete user okay but where is our console chat room it has admin yeah you see that we don't have our data about the chatroom users here so for that reason we are gonna do it like this const chatroom users is equal to a weight datastore datastore.query basically where are we querying the chat from users [Music] where where we are in components okay no no yeah no worries chatroom users yeah we are querying chat room [Music] user navigation let's have a look there in the header where is it here and we are gonna filter filter chatroom user we want only chat from users where chatroom dot id is equal to our chatroom dot id and now let's do a console.log chat room users remove let's try delete okay here is a list of all our chatroom users one two three four so by having a list of chatroom users we can find by id the chatroom user for this user actually we can do it in uh one uh filtering so where the chatroom user chatroom id is equal to this one and chatroom user dot user dot id is equal to the user id but we want to delete user dot id but we are trying to delete now users to delete or user chat room user to delete users because this is an array right so let's do chatroom users to delete now it should be only one if i press delete array chat from user and it's this one with the name test yes if i do on support delete it's this chatroom user we've here where name support okay so now instead of deleting a user we actually want to delete the chatroom user at position zero but only if it exists so if chatroom users to delete dot length is more than zero then delete it delete it with fire so let's do it here let's delete test delete and if i will refresh come on reload our which one you group this one yeah our new group doesn't have a test anymore uh we can also automatically delete it from here all users because we know that we are deleting him so we can actually do here set all users to all users dot filter filter filter user or you where you is equal u dot id is equal to this one the user dot id is equal or is different i always mess up so if i delete this one which is not admin delete didn't work as i expected let's create a new chatroom new group with everyone group so we are five here let's delete support delete no it's different here so let's delete now test delete test is gone and if i refresh the the info should be the same i mean reload where is it was this was it this one or no or this one i already i'm lost so yeah like with this feature we have a little bit more control over managing groups not only creating them but also deleting people seeing who is in that group and here regarding deleting we can also do you know what we can make this as an sync function um check if if authenticated user is admin of this group so uh let's check it [Music] okay so check if authenticated user is an admin so const of data equal a weight a weight authentication get let's import it from where from amplify of course authentication dot get current authenticated user and we can check if chatroom admin dot id is not the same as the authentication data dot attributes dot sub which is the id of a user then we're gonna do something similar you are not the admin you cannot delete you are not the admin of this group save so let's try right now to delete someone and we are admin we should be able to delete him delete perfect however if someone else wants to add us in another group i don't know let's just create a new group here create i'm going to create it with a different name just to see it user screen new group 2. so let's go back and let's try to create a new one create this is going to be new group two then i want to go back to amplify console admin ui i mean content i want to find that chat room this one new group 2 and i want to delete the admin i want to delete it from here basically nobody is the admin in this group just to test this feature save let's refresh reload and in the new group tool this one nobody is an admin you see so if i try to delete someone you're not that mean of this group you cannot do anything so this way we can limit who can uh delete users from the group and who cannot do that all right [Music] so that's pretty much everything that i wanted to cover regarding groups so we can do here get add git commit group management right group management okay all right so is there anything else that we need to cover regarding the groups because i'm thinking to focus this live stream solely on groups and because we are already for three hours live and i don't think that we can start another feature so we either do something else regarding groups where we stop it here so our groups are done let's do them deleting messages i think we can do deleting messages [Music] yeah deleting messages is not that complicated to be honest let's try to do it so in our uh in our chatroom screen we have this message so whenever we will long press on this message we're going to try to delete it so let's send there on long press it will call the same the same logic as before delete confirmation but we should also pass where them the item that we want to delete okay delete confirmation is going to be a function here const that will receive the message okay uh we're chatting with contact lists i'm not gonna do it today but we might do it in future i don't know larry let's let's uh let people comment don't delete all the comments about contact list we're gonna take it in consideration but not today definitely not today and yes i read the comment there is no need to paste it so many times we'll think about it in the next videos so delete confirmation okay let's go back to our message here and we're going to need a pressable yes we have a pressable but we already have a long press there for a message thank you you are sweetheart we have already there the long press set message as a reply the long press will send the message as reply like this you know what i wanted to try uh i wanted to show you guys how to work with for example in this case one long press i want to have different actions like delete or reply or comment or something like that so there is this react native action actions action sheet is it this one is the one from x y thing action model yeah this one so the uh red native action sheet will allow us to have an action menu similar to what we have in ios like so let's try to to use it okay let's do it like this so we need to wrap our top level component with an action sheet provider okay that's in our case our app.tsx up dot tsx here um let's do it here action provider and it's gonna end here let's import it from export native action sheet and then we can get access to opening it two ways with higher water component but i think with with a hook is much easier so we can do it like this the logic will happen in our message.tsx here so first of all on top of our message here we will need access to show action sheet with use action action sheet uh that we're going to import from our module save and where is it show action sheet options open action menu so the open action menu will do show action sheet with options and the options are going to be const options and object wave options for this action sheet so what options do we need there the options as you can see is a list of buttons delete save and cancel in our case we have reply we have delete and we have cancel cancel and the second one is our function that will okay two more values here for the destructive button index and our destructive button is at index one the delete should be with red and the cancel button is at index two okay so this is should be an object option with destructive button index and cancel button index and the last the second parameter is is a callback function const on action menu on action press and we're gonna receive the index of action so if we press reply we're gonna receive here zero delete one cancel two so we can do console one for now index and here i'm gonna send that on action pressed so open action menu is gonna happen whenever we long press on an image on a message let's open some of them here hola send and if i long press i see reply and delete and cancel cancel does nothing okay that's that's nice so for the index if index is zero that means where we want to reply if index equal zero we will call um we will call set message as reply set message as reply else confirm delete actually going back into chatroom screen we don't need this delete confirmation here and we don't need on long press here either because everything is gonna happen in the message here okay console const uh confirm delete is gonna do what it's gonna show an alert alert alert uh confirm delete the message is gonna be are you sure you want to delete the message and the buttons will be first one is going to be text delete on press oh come on oh i forgot here the comma on press is going to call delete message a lot of functions but we implement these all pop-ups so that's why we need all of them we can call the delete delete message right away but i think it's better ux if you confirm this kind of stuff and the other button is going to be text can sell the style here can be destructive so if i press long press on the message delete i will see confirm delete very sure we want to delete this message uh and if i delete we're going to call this function okay so calling this function what should happen should happen data store dot delete and what should be deleted we should delete the message that we receive as a prop or the message from the state delete message delete message and i can do set is deleted to true and let's add the is deleted set is deleted use state initially it's going to be is deleted false and whenever we delete it we set it to is deleted but before that let's wait i think set is deleted to true and here instead of message content if is deleted i will display message deleted save let's try right now um hello and if i delete the second one here let's try to do it long press and delete delete error data store object is not an instance of a valid model model content data okay user id why it's not message oh message deleted uh why in that case it didn't work delete delete message deleted and the next time uh let's delete everything here delete this is the only message send and now let's uh refresh to see if they are actually deleted come on reload this is the only message yeah the rest are deleted and disappear from our life there we should also you know what make sure that we're this is our message is me because if it's not my message i shouldn't be able to delete it i shouldn't even have a delete button here so reply should be to for everyone right cancel should be for everyone so options dot options dot no i'm not gonna do it this way but actually i'm gonna do it this way and here if is me if is me options dot push delete so right now we have it but in a different group with someone else [Music] i need a message from someone else i'm gonna have to open them the easiest way is to probably open the application in my account so let me switch to a tunnel here expo go try again come on and let me try uh chat with support because this is my phone hello hello phone look at this beautiful picture downloading it here okay and it has been sent two times just because i pressed two times of a button that is also an ux improvement that you can do meaning that if you are already sending the message whenever you press on that button it shouldn't send it second time so you should add one more check there for the whenever you press this send button so new updates available downloading let's wait a bit come on update come on why didn't you say that i'm not on full screen sorry for that did you miss a lot hopefully no okay okay okay okay come on downloading okay so we have it we have it [Music] yes hi there okay i see it right away the message we receive here so if i press on my message long press here i see the delete button but if i do it cancel but if i do it here i can only reply what if i press on the cancel it does confirm delete but you know why because we are checking here oh yeah uh else if index equal to one then we do confirm delete but that's tricky to be honest the way they implemented with index because because right now if i do cancel it still confirm delete because because we don't have a delete button our index one the button at index one is this cancel so we can either have an array somewhere outside and be able to map to understand which actual button they pressed to be honest they don't like this this approach we can hmm yeah i don't like it i don't like it the easiest way there are a couple of options like to hack it around to have it where and to map between index and values but i'll do it a bit different so i'll move this one here i'm gonna leave as it was before here with delete like this and if is me we're gonna call confirm delete otherwise we're gonna call alert dot alert can't perform action the this is not your message very polite this is not your message you cannot delete it can't perform action this is not your message perfect if i do it for mine confirm delete are you sure you want to delete this message no i don't want to do it okay that works and one other thing is [Music] yeah in the subscription you will also receive these message types like if it was deleted or not we can check here if message okay let's move this if statement here if and else if set is deleted i'm doing this just because to be able to let's do it here delete to update in real time that deleted message whenever it happens from another device so if from my device here i'm going to delete a message in our screen here it should be automatically have and also whenever we delete here we can we don't have to set it to the delete because it will happen nonetheless so if i do here delete confirm message deleted and i'm gonna try to show you how deleting a message on my phone will instantly set a message to message deleted here so let me open the chart here uh how are you and i'm gonna delete hi there so let's do delete delete and you see here on my device on my emulator i already see message deleted right away instantly so yeah i know that okay on i wanted to say that your task your homework would be to implement to observe as many information as possible and to do updates in real time because we are not doing that everywhere i just show you how you can do it for a message to update everything in real time but you can do it uh for example for um for this screen whenever you receive a new message or so on you can do it here to update the chat rooms automatically so yeah that's on your own i'm not sure why these rooms are not loading do you know why why not of them are loading um let's have a look there component message chatroom item this one chatroom item if user activity indicator if there is no user to display user where do we set it set user i think i know because we deleted some things from there uh we can do here instead of that approach another approach like is loading set is loading use state initially it's going to be true because we are loading and we will display the activity indicator if it's loading uh if it's loading is true and we're gonna stop loading whenever we yeah here probably fetch user [Music] set low loading true false save okay now we see all of them we support here we have a chat yeah perfect right now it works as expected but so what do we have finished we also finished deleting messages deleting messages finished um message reactions will would be actually so easy or should i do them should i do pagination no i think that for today we have covered a lot of stuff we have covered the groups which we went in depth there and also we have covered the delete message with the action um action list so i think that's that would be enough for today uh can we some logic to delete chat roms yes yes definitely we can use the chat the same logic to delete chat roms and because as i read previously in the documentation whenever you will delete a chatroom you will delete the chat from users does that mean no it doesn't mean so when you'll delete chat rooms you will also delete chat from users are we able to chat users with user names or email or do they all appear on the same screen as users right now the way we did it whenever you try to start a new chat we are displaying here a list of all the users this can be improved with screens with having i don't know friend list to chat with a list of your friends or with contact list uh to chat with your contacts or by searching on emails and so on like on different application this is different so that's why i have here like just all the users to to make it simpler can you show us the qr code do you want to crash my application here it is try it or actually i think i can [Music] paste in the youtube oh no jazz development is live have you seen him man he's doing such a great job here is the url for the expo if you want to send some messages send it to the support channel to the user with support name i'm gonna chat with you while we are here all right guys so i think uh that's it for today uh and what do i want to tell you at the end uh all right so i'm not sure if we are done with signal clone or if we will continue with even more features uh what i can say is the next three weeks i'm not gonna be here in spain in my studio i am going to my home country moldova so i'm not gonna be able to take all my equipment to stream there so i'm gonna take a couple of weeks to spend it with my family and to work a lot like almost all my free time to work on the course uh most probably i'm gonna do some short videos on youtube if i'll have time and if my editors will have time so if i manage to film these videos that i want to do by the vive monday which is the day we leave then we're gonna have some small videos on the channel in the next two weeks however when i come back which is in the beginning of october we are we have some very big plans so better get prepared build more projects and get ready because we have something uh exciting to announce something that will involve all of you and you'll be able to be part of it so yeah this is the plans for the next couple of weeks thank you very much for watching till the end this is the fifth episode of signal it's crazy the journey we we went with this application i'm really excited about this and we might come back to it in the future we'll see but yeah for now you in the beginning of october subscribe to the channel not to miss any future videos any future announcements updates because we have some plans all right so um that's it i think shall we run the outro let's do it so go check out this video not this video okay i always mess it up this video this video check it out uh and continue learning continue building and i'm gonna see you soon bye bye i'm so tired i cannot even turn off a stream are you still here hello why are you still here why are you still watching it's

Channel: notJust․dev

Views: 5,170

Rating: 4.9358287 out of 5

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

Length: 205min 59sec (12359 seconds)

Published: Fri Sep 10 2021