Let's build WhatsApp with React Native and AWS Amplify [p3] 🔴

all right knowledge developers welcome back to a new live stream today today we're gonna continue our project that we have started during the previous weeks and we're gonna Implement a lot of exciting features in it in this series we are trying to build a WhatsApp clone a chatting application uh that will allow one-to-one messaging and also group messaging and so far we have managed to implement uh most of the front end we have managed to implement the back end during previous week and today I have a plan for today will be to cover the next three important topics one of them is going to be sorting because we would like our messages to be sorted and when it comes to amplify and dynamodb where it's not that straightforward so we will have to properly cover this topic so that you understand how to do it after that we're gonna get into the real-time updates because what kind of a messaging application if you have to refresh the page in order to see the new messages so uh today we're gonna subscribe to new messages using graphql subscriptions and we're gonna update our user interface as soon as one message is um added to our database and lastly we're gonna cover groups uh I asked you what features you would like to see in these tutorials and other groups groups managing groups creating groups was one of the most requested one so I decided that we should cover it today from the backhand side we are almost ready like we designed it with this in mind to be able to create groups but today we're gonna do it we will implement it on the front-end side where we will create and manage our group messaging so that's the plan for today I think we can get started and start coding the application all right guys so this is our plan for today uh by the way if um you want to follow along uh make sure to follow the previous videos that we have you can find the link in the description below for part one and part two uh in part one we covered the user interface in Portal we covered the backend side and uh in order to follow it would be really good if you at least check that out and see what we managed to build um in that videos otherwise you can download the asset bundle also you can find the link in the description below and by downloading the asset bundle you're gonna get all them files that you need and yeah let me show you here and also you will get the source code in the source code folder here you'll see two folders part one and part two and this is the source code for every single part that we have done so that's also an option you can download best at bundle anzi part 2 you will have to install the dependencies to deploy the back end and after that we can start working on the tasks for today also by downloading the asset bundle you are supposed to um get the URL on your email for the guide that we are following for this tutorial so if you have the URL from the previous um from the previous weeks oh my God yes if you have them via asset bundle in the URL from the next week then that's going to be the same so you can follow for with that one uh now let's go ahead and let me open that where is it let me search quickly okay what's up clone here we have it uh this is our guide for building this project and if you go scroll down a bit to our board you can select like see all the to-do list items and you can select only the board that is split into three separate parts so our goal for today is these back and two and we have prepared uh five tasks um to um to implement but these are quite big tasks so it's gonna take us a bit of time to to cover them properly and Implement them um as we need to be let me know in the live chat where where are you joining us from today uh matios hello how are you doing uh right so with a prerequisite I already covered that download the asset bundle in the description below and then we can get started before actually we get into the details of every specific task I want to go ahead with you and add a couple of changes to our data model deploy it so that until we get to that point our API will be deployed and updated this will be some changes that we will need throughout this tutorial and more details I'm going to explain them uh when we get there now first let let me first uh sign in in my AWS account and then we can do the changes for our back end foreign console let's go ahead and open AWS amplify and from here let's open the application that we have created previously and launch them amplify Studio from where amplify Studio here let's go ahead to our data and let's uh first of all see what changes do we need for the data so one of the changes uh that will help us create groups uh would be to find the chat room and at the moment we don't have any like information about the chat room because we used it only to connect people together now I would like to add two more Fields one of them would be the name of a group and the other one will be the image of a group because we still feels we didn't need them for one-on-one communication but now that we are creating groups with multiple people I think it's going to be nice to be able to create a name for that group and to other image these fields are not going to be required so yeah they they will be undefined for 101 groups now uh The Next Step The Next Step um you know what um because we need one more change to um yeah let's um we need one more chain let's not deploy it right now because we're gonna deploy it in one second from our uh project now um actually we're gonna start with the first task that we have for sorting messages and here I'm gonna explain uh the first step that we need to uh to implement in order to um to update our data model so when it comes to sorting uh what I'm interested in is to sort the messages one on our chat screen so if I go here on this chart I already see that we are not sorted at all like the last one is six hours ago then we have seven days ago and then we have another six hours ago so why this happens is because we never specify how we want it to sort these messages and by default they uh they do not follow a specific sorting order um what we have to do is um first of all yeah like we need to understand what sorting can happen on two levels sorting can happen sorting can happen on their client side on the front end so for example um you query all the messages from the back end and then you sort it on that on your like on the react native level for example but that uh in cases where items are a very long array of data for example in our case messages we can have a lot of messages when this option is not good because uh of course you have to query all of these messages and that query can be quite expensive and then you have to sort and if there are a lot of messages that as well a very expensive call a very expensive operation sorting on the client side is uh suited when the items are um when you have like a defined number of items you have like I don't know 10 tags and you want to sort them in that situation it's okay to sort them on the user interface now back to uh our messages use case uh we will not be able to use like client-side sorting because that's not the right way to uh to do it we have to sort them on the um on the database layer we need to um ask our database to give our to give back this data in a sorted order the way we want it and by doing it on the database layer we will also be able to paginate sorting items so for example the database will first sort them and then we will get like with first 100 items for example so um because our API with data for our API is powered by dynamodb uh we have to implement with sorting on the dynamodb layer lucky for us amplify the graphql transform allows us to create an abstract layer around this sorting and this abstract layer are called indexes so you'll most probably saw already indexes they allowed us to create connections between data but besides that they will also give us the possibility to sort um items so what we have to do is to add an index on our uh on one one of our models for example on the messages model but to do that we will have to update our schema our API model from our project not from them not from the amplify Studio because doing it in amplify studio is not possible at the moment as you cannot provide like sort fields so for that reason we have to go back here and open amplify backend API the name of your project and then schema graphql let me open my window because it's very I don't have a oxygen all right so um as I said we need to update one of our indexes on our message model because we want to sort messages based on their created at the thing is that we do not have a created that field here but it is automatically created for us if you remember like if we look into our source graphql queries we see that uh for example a message will have created that field so let's go ahead and first Define this field ourselves because if we don't provide it it will automatically be created but we also can provide it whenever we need to create some indexes on them so uh yeah it's created Created add and the type is going to be AWS date time and it's going to be required Now using this created at we can provide uh the field created at as a sword key field for our index for example for VC index so this will allow us to query messages by filtering to to a specific chat room ID and if we provide here sort key fields we can provide here what do we want to sort the data on so we want to sort on created at by the way you can provide multiple values here um and lastly uh besides the sort key field we can also specify we want to generate a graphql query that will specifically query this index that we are creating here to do that um we're gonna add the query field query field and we will provide a name for this query field for example list messages by chat room okay list messages by chat room uh let's double check events uh correct so the name is by chat room sword key Fields created at and query field is um yeah all right so behind the scenes this index uh will um yeah like will create them um now I'm not gonna go into that details because it's going to be too complicated um what we have to know is that by specifying this we will have the query a graphql query called list messages by chat room ID where we will be able to filter by chat room and sort on them created at specifically what we need to get all the messages for this screen okay before we uh go ahead and push the changes to the back end let's go ahead and implement the rubber two changes that I was talking about in the previous step and I said like a board so um well yeah it should be here uh yeah we need to add the name in the image for the chat room and we're gonna also add it here um from the schema.driveql let's find the chat room and we have ID here besides uh below of ID let's add the name come on name which is a string and not required uh and also image which is also a string and not required now with these changes let's go ahead and push our changes to amplify so for that we're gonna do uh amplify push and this will update our API to have these new fields and also to have uh the the new index created for us so we see that we will update the API let's say yes and we should also be asked one more question come on so uh this process yeah like this is what I was expecting yes yes to update our graphql statement as well because we will need that new query that is going to be generated for us so now what we have to do is to wait a couple of minutes until amplify will do the changes in the cloud guys um how's it going have you managed to uh to build the WhatsApp clones so far are you following along what are you doing today today we have a third day for the WhatsApp clone and the goal for today um yeah we have three goals to implement in the application today one of them is going to be sorting another one is going to be real-time data using graphql subscriptions and lastly we're gonna have groups and group managing group chatting and so on so uh yeah like pretty exciting features that I know a lot of um people from the community wanted to to see them build foreign for all your work related to react native just wanted to check if we have any tutorial to build web and mobile application using react native like Twitter uh when it comes for uh no yeah we don't have that at the moment specifically Iraq native for web we do not didn't cover it yet but I'm interested to um to prepare a tutorial for that as well foreign I did some research on how to add voice but I couldn't be able to implement it with a double simplify can you guide me when it comes to uh audio and video calling um I'm trying to arrange uh the next episodes of this WhatsApp clone to be specifically with uh audio and video calling we'll see how it goes but yeah I'm gonna try my best to um to do that and in yeah in that case like we're gonna have like a very complete messaging application with both like chatting calling and video calling functionalities foreign hello how are you doing my ideas is asking how can we migrate to a new backend and create all the data models from the front-end project but here is I guess that this is related to um the problem that you got into in the course uh creating a new back end um like I don't think I had to to do that um that process but um from from the knowledge that I have at the moment is the thing that I shared with you um basically creating a empty amplify project in the cloud and then from here uh removing the AWS exports and connecting this local project with your Cloud project uh maybe using AWS amplify in it AWS amplify need not sure if that's going to allow us to connect with an existing project or if that's gonna initialize it or um or maybe you don't need to create the project and amplify Studio first but you have to do a double simplifying it I would try this as well and then like push all the changes and because all our code is under amplify backend for example the schema and so on uh it's gonna create all the models and we'll set up all the databases that we need on our new account or on our new like backend specifically but that's a bit of topic for today's uh tutorial so don't worry guys that was something not related to what we're building at the moment and I was not sharing the screen sorry okay yeah we are still waiting for for our backend to be deployed foreign I just started following you because of Lucas he strongly recommend you great content thank you for creating it keep it up thank you very much and I also Rec highly recommend Lucas content that you can also find on the channel oh why it's taking so long we need to be building not waiting come on uh okay let me see if we can actually do something ahead while we are waiting but I don't think so actually we can do a couple of things but in my case yeah I see update complete so I think it's better to to wait a bit uh your thoughts about your animated free um as far as I know animated free is the same or animated too but we targeted for the new architecture which is really great uh and if you are yeah like our goal would be to move our projects to the new architecture but that implies that all the dependencies that we're using are on the new architecture so um yeah like software mentioned was one of the first companies to invest so much time and effort into moving and adopting all their libraries that we're creating to the new architecture so yeah if that's the question specifically about or animated free and about Eis I I love it like it's uh it makes it so much easier to build and um and deploy application to the store which was always a topic that was kind of frustrating for a lot of developers it was error prawn like you um you had to understand all of this moving Parts about signing replication building it packaging it in order to prepare for the stores and with EAS like it's super simple in our course we actually use yes together with Git actions to create a fully automated pipeline that whenever we push some code on our repository git actions will trigger Eis to start building this project and depending on the environment also test application and finally bring it to Market deploy to Market so that that allows us to focus fully on code like we write code we push for changes and those changes are like why I don't know in half an hour they are on the market ready to to be deployed to the end users so I really like that I think that Expo is doing a great job at um making mobile development experience as good as it is for the web developers where everything is just pushing and everything is taken care for you and now with Expo that's also possible when you're building mobile applications okay that's uh taking quite a while so uh we're almost Advanced so that means that I will go ahead and start with the next steps so let's go ahead and open the code for this page where we will work with sorting our messages this page is in our under Source screens and here we have a chat screen uh at the moment we take them yeah like these messages is our flat list here and the data for the flat list is coming from the chat room messages items so what we are doing here is we are querying the get chat room get chat room and whenever we are querying the chat room if I open it up here the graphql query that we are using also requests information about our the messages that are related to this chat room so just by having one query that will query like the chat room we get both chatroom and its messages the thing is that in the next step we're gonna use um another query to get the messages so and one more step would be that we will have to listen and to update the list of messages this list of messages should be kind of dynamic and we should always be able to update it that means that we're gonna have to store our messages in a separate State variable so let's go ahead and Define this state variable messages set messages equal use State and it's going to be an empty array it's from the beginning now let's go ahead and see where are we working with messages for example okay so if I scroll down I will I'll delete that console log and here in the flat list uh where we have this data let's send messages that we now have invested it's gonna be empty but um as a temporary solution for this not to be empty when we are querying this graphql uh get chat room let's go ahead and here in the result expand this to actually do two things um the first step is to set the chat room from the result and the second one which is temporary is to set the messages with that we will get from the result uh yeah basically like this then dot messages dot items if I'm not mistaken should be like this and also Let's uh safely access them and we see them back again delete this after querying messages directly okay so uh now our messages are stored in a state variable we can call these set messages at any point in time to update it and it's going to be reflected in the user interface perfect we are kinda ready for the next step uh store messages in a state variable uh query the list messages by chat room okay okay we're gonna do that but before we need to see if it's completed I don't know for me like previous days deploying specific librarys to the API uh takes a little bit more than expected but thankfully it is done now so our graphql schema compiled successfully okay and we can already go ahead and see what changes this created by going and checking our upsync so let's go to amplify Studio let's access the graphql API and then let's press on this deployed resources that will open our upsync and here we can go ahead in the queries and for the query here at the top we can find Now list messages by chat room we this is the new query that was created just because we not just because but because we specify our schema graphql that this index we want to query this index by specifying the query field list messages by chat room now because then um the index is created on the chat room ID if we look in the list message by chat room chatroom ID is actually required so we have to provide a chat room ID to get some information from this query um so we're gonna have to provide the chat room ID I don't know one for example and the next step is the sort direction we see another property in our input sort the direction that we can specify ascending or descending in our case we want to solve them descending uh where the latest message is queried first latest yeah um yeah so with that being said um we can go ahead and check these newly generated query in the graphql queries here so if I'm gonna search for list messages by chat room we will find this query here um list messages by chatroom we found it here and we have your messages in chat room I don't think we will need to change anything here so let's actually go back to our chat screen and let's import a couple of things from here for example where we import the get chat room from the queries let's also import the list messages by chat room now um We're Gonna Leave This use effect to be responsible for fetching um fetch uh chat room because we also need information about the chat room and we're gonna create a new use effect that will be responsible for fetching the messages so let's create this use effect like this we're gonna provide the empty dependency array because we want to fetch messages when we Mount our component basically when we Mount this page and here what will we want to do well we're going to start with uh actually let's just copy paste then API query from uh from the top here and we're gonna just change the operation so instead of getchat room we're gonna provide the list message by chat room and here in the input Fields if you remember we have to specify the required the required field chatroom ID and the sword Direction so instead of ID we're gonna provide chat room ID and because we have the same name I can actually remove one and we can also provide sword uh Direction how is it swore Direction like this that is going to be descending like this that descending now when we get the result we will not have to set the chat room let's delete this one lazy leave this comment as well and in the set messages we're gonna set the result dot data dot the same name list messages by chat room and that's it because that's going to be our array of data now because we are querying the messages in a separate use effect let's go back and remove these set messages that we called whenever we queried the chat room so this way it's gonna be we can also delete this one to simplify it a bit all right let's see if we still will get the messages probably we don't but we can console log the result here result and I see already a possible handle exception for what data list messages oh because we need dot items yes dot items so list messages by chat room ID Dot items now now we see them back again but the cool thing is that now they as you can see they are sorted and then most recent message is here on the bottom as it's supposed to be and if we scroll up we see that all of these messages are um older so hey this is going to be a new message it doesn't appear automatically because we still didn't Implement uh subscription but that's going to be the next step let me just simply refresh the page and I should see that message at the end hey a few seconds ago yes so with that being said we have um properly queried our data you and also sorted it on the backhand side foreign let's have a look at our guide here because we will also have to do a couple of more things query yes we did that and um yeah one issue let me check if I'm gonna be able to reproduce [Music] um not sure if I'm gonna be able to reproduce but I'm gonna explain you uh here so because our chat screen can basically mean that it's the same component for different chat screens um we have to query this not when the component mounts but when the chat room ID changes so every time we move to a new chat room ID that means that we need to query again our messages and that's the same for the chat from here let's also add it here and whenever we will change the chat room ID that is coming from the route params then we're gonna query validated data for this specific chat room all right uh that is done sort chat rooms on the main screen all right the next step would be to sort uh the chat rooms that we see here on the main screen and sorting them um in order to implement sorting on the back end for these chat rooms that's a bit more challenging and you would have to basically expand the many-to-many connection that I was um but I was talking about in the previous uh tutorial basically the relationship between the relationship between the chat room and the user in order to be able to uh mirror them together and add an index uh one which we will be able to sort but because um the number of chat rooms is kind of a limited um definite number like it's not infinite where it's not going to be a huge number I'm gonna take a shortcut here and I'm gonna actually show you how you can sort things on the front end so sorting the chat rooms is going to be done on the front end and to do that we need to go ahead and open the screen that is responsible for these chats so in the screens let's go ahead and chats screen in the chat screen here we have a data for the chat room so before setting with chat rooms in our state I want to sort them so to do that let's first of all um save them into a variable and I called it rooms is equal to these response to this response we can also do it kind of safely so if response data dot items or an empty array then we will get the sorted sorted rooms equal to we're going to use that JavaScript sword method and with JavaScript sort method uh expects a um a function that will compare two items in their way one item is going to be um basically room one the second one is going to be room two now uh to sort them what are we gonna sort them on uh we're gonna sort basically on this field that we see here a few seconds ago four minutes ago four hours ago this field if you remember this is them uh timestamp of the last message where actually we should do it on the updated add field for the chat room hmm yeah that's also actually a very good option either on the updated ad on the chat room or on them created that of a last message of a chat room and I think them second option just but the first option to use the updated out field for the chat room is going to make more sense so for that we are gonna do um basically we need to compare to two dates so we're gonna transform The Room 2 dot create updated at updated add minus new date for room one dot updated that update to that and we should compare them too so the result we're gonna set it in state and if I refresh probably nothing is going to happen yet um here in the guide I did oh actually I did also under updated that but this is a chat room user actually so I would have to do room two dot chat room dot update that and hear room one dot chat room similar to what we had here chantrum updated that and now if I refresh will it work no it doesn't um so what did I miss rooms oh it's yeah rooms not sword hmm porque maybe uh my updated ad fields are not actually updated for this let me hmm doesn't make a lot of sense but but it might be true you know if I change room one here and room two here will we be reverted if yes that means that it's working if not my number should be on top no we are not reverted that means that we are not properly sorting them patch chant rooms rooms sorry let me do console.log rooms I might uh chat room and we have oh we don't have updated that yes that's true we are not querying at the moment we updated that so let's look at the list chat rooms that is coming from when this directory queries so this directory queries we have here our very specific uh query that gets our chat rooms so as we can see under the chat room itself we do not have uh we are updated ad field and now if we're gonna add it let's see uh okay come on chats validation error field and if I feel updated that um updated at chat room update updated updated my bad and now we are sorted and I think I should do room two and this one room one because I need them as well descending come on foreign is it working or not I think it's not properly working ah so long rooms so here is our rooms Json formatter we're gonna get to the end of it so the first chat room has an updated ad last message no last message object I'm gonna do it like this or map to easier debug rooms are DOT chat room dot updated at and the same I'm gonna do with the sorted rooms so these this is gonna be our rooms and this is going to be our sorted evaluating chad.lastmessage where is it coming from I think I had the console log somewhere that is causing that error console log this one yeah this one chat dot last message child.lastmessage I don't need John dot last message it should be here so rooms uh created 10 28 and 10 21 10 28 so it's definitely not sorted it's definitely not sorted but why new date updated minus new date if I just gonna copy this from here will you work something is moving I'm really curious what is the problem now if the one with Avatar will be the last one which means that it's working yes it's the last one that means that it's working which is weird if anyone sees their issues from the difference between these two options because I only see that I call them differently yeah weird so okay if it works it works and I'm gonna leave it like this uh that means that we have our chat room sorted by the last updated ad and whenever we will receive a new message um that action will actually update the chat room to show the last message and it will um yeah like update this field update to that and our children will appear at the top here in our list okay perfect um what I want to also do is we see that these chat rooms they do not have a last message but they still show like this field uh in case with a chat room a chat list item in case it doesn't have a last message I don't want to show these uh no the text is not going to be displayed but these days just created that and so on so for this subtitle with this place when was the last message created we're gonna do it only if we chat last message is true we're gonna display it otherwise don't display it and this way we see it only where we have um last messages perfect uh and if I do it here hello and if I refresh foreign hello a few seconds ago it was updated so that means that that's perfect all right so uh render the last message time only yes that means that we are done with the first uh the first task with sorting messages and we saw two ways of sorting our um items one of them is was sorting on the backend side using um using uh in any index here by providing the index that has sort key fields and also provided the query field to be able to query VM specifically on vcindex and sort them on created ad and also we saw how to um sort on the front end actually uh yeah like what we did here is first we queried all the chat rooms and Van on the front end we simply sorted them and display them in the sorted order so with that being said we can go ahead and commit all our changes git those and this is our backend tool sword back into one sword messages and not only messages it's more okay so that means that we are ready for our next task any questions for sorting using dynamodb amplify because if we don't have uh other questions we can go ahead and start our second task for today which is going to be uh working with graphql subscription and listening for new messages so um how we're gonna do that uh we are going to we're gonna take advantage of the graphql subscriptions uh to power the real-time functionalities of our application so whenever you have to display real-time data basically you have to create a connection between your client which is in our case our application and the server um and by creating this connection the server whenever he has to update the client he will directly send the new data or the new messages to the client so doing it yourself like you'd have to work with sockets but in our case we're going to take advantage of the graphql subscriptions and on amplify they are actually behind the scenes they are implemented using websockets so they simplify a lot of low level complexity of this real-time communication and yeah like we just simply use our graphql server graphql API And subscribe to data updates how does it work um well whenever we throw whenever we run a mutation for example in this case let's say from a web application we run a mutation to add a node this notation will be executed by the graphql server in our case that's um that's upsync and upsync will go ahead and notify using a subscription all the connected clients that hey there is a new node this subscription will go back to the web application and also to them another mobile application another client that is that has a active connection with the server so this way we know that whenever we are doing a mutation some actions we will be notified and we can take um take the right steps in order to update our UI so what do we have to uh to do what do we have to do for that um let's go ahead in our source graphql and here we saw about queries queries are operations that we use to get data mutations are operation that we use to update data on the server and we have a third file subscriptions subscriptions are our you guessed it right for our subscriptions and they allow us yet to um to receive updates when something happens what updates are we expecting to see we need to whenever we are on this page on a chat room with a user we need to subscribe to updates of new messages on this chat room and whenever a new message is posted we need to update our UI to show the new message so for that we need the modes the subscription on create message oncreate message is right here and it will give us information about the message that was just created all okay knowing that let's go ahead in our screens chat screen let's go ahead and import this um V subscription from graphql subscriptions and we're gonna import on create message now let's go ahead and use this on create message subscription and actually subscribe for that we're gonna go into the use effect that fetches messages and yeah like first of all we're gonna try to fetch your messages and after we fetch the messages we want to subscribe to updates subscribe to new messages so hahaha so what do we have to do uh we're gonna use the API module the similar way as simply querying our graphql API dot graphql we're gonna again use a graphql operation and here we're going to use the on create message operation now um this is not going to return us a promise but it's gonna allow us to subscribe like this subscribe to uh to changes with subscribe function expects an object with Fields like next and this is going to be the function that is going to be called whenever the subscription will give us the next data and also there is uh another property on error is it without with capital or just error error error and what we're gonna do here we're gonna simply console log that error so console Warren error now let's go ahead and destructure the value from here and let's console log this value to see what do we get here value okay I'm gonna open here let's also do console log new message foreign thing that I'm gonna do I'm gonna connect from my phone to this application and I'm gonna send messages from a different account to simulate two users talking with each other all right let's see foreign I think it's one of these users so um I joined the conversation with a user that I'm signing here on the emulator from another account so I'm gonna say hello now we see here this new message that we receive we see it a couple of times because this information will be um we we see the logs both for our physical device and for my emulator so that's why we see a couple of them but what we see here is the new message has the information including the oncreate message with these newly created message that I sent with hello okay that's good so the new message is in our value.data DOT on create message so what we have to do is to Simply put it in our state variable with the other messages that we already have there how we're gonna do that let's do set messages we're gonna provide here an update function uh We're not gonna work directly with the messages value because we need to update the existing messages from the state variable so existing or let me check how I call them yeah maybe just M for messages uh existing messages we will return a new array that initially will have a value dot data Dot oncreate message and after that will contain the rest of the messages that we are already in the state until this point now if I'm gonna go here and I'm gonna start chatting we see that it right away appeared here without any updates and I just sent the message from my phone I don't know why uh I received a message here an error message on my device foreign no everything is fine so we saw how we can subscribe to new messages and we will uh and how to update the state variable to reflect these messages okay the next steps um is to make sure that whenever we unmount this component that this screen we stop listening for new messages this is very important whenever we subscribe to something we need to unsubscribe in order not to have memory leaks how we're gonna do that well the API graphql will give us back the subscription subscription equal to API graphql and if we return a function from our use effect this function is going to be called whenever the component unmounts and we can use it to unsubscribe so we can do subscription dot on unsubscribe or just yeah and subscribe like this and subscribe and this way when yeah like when we leave this screen we're gonna stop listening for new messages okay perfect uh what else I wanted to say another yeah another issue that I want to point out to you is that with this approach we are basically listening to create to um the operation create message we are listening to any message create uh event that's what makes sense come on with him you can do it so by specifying simply on create message any message that is going to be created in our database will trigger this subscription for basically everyone who is listening to it that means that if from my phone I'm gonna actually go to a different account uh super secret and I'm gonna send a different account a super secret message actually we see the super secret message coming here and for some reason for a couple of times which is kind of weird oh yeah it's coming from a couple of times because we were not unsubscribing so we just created a couple of subscriptions so I just would refresh it but the problem with listening to any message creation is still there so to avoid listening to any message any message we want to listen to specifically messages that are inside this chat room messages that have the chat room ID equal to this one to do that we can provide a filter as um as the input here so filter uh what filter we want to provide uh chat room ID should be equal to chat room ID but we we need to provide an object with equal key and the value would be chat room ID let me double check if that's correct chat room ID equal to chat room ID and now let me save it and let me go ahead and open the conversation here and I'm gonna send the same super secret message again to another user super secret and we shouldn't see the message here yes we didn't see it but if I'm gonna enter the conversation with this user and I'm gonna say um hey there we receive it correctly so now we are listening only to new messages that are created in this specific chat room because we provided a filter for for our subscription perfect so yeah that is done for listening to new messages now uh every time a person will write a message and you will be active in this screen you will see it right away updated on your device by the end of this tutorial by the end of this video uh I'm going to actually share with your code with everyone so we can all join and maybe create some groups together and discuss but now let's go back and let's actually start the next task because it's quite similar to uh to the task but we are that we currently indeed so the next task is to listen to them updates for the chat room why do we need that we need that first of all [Music] um to have like the most up-to-date data about the chat room and what information is uh always updating in the chat room it's the last message so if we want this last message on this screen to be updated every time someone sends a new message we need to listen to updates first of all first of all let's go ahead and the same way as we subscribe to update on create message let's go ahead and subscribe to updates uh whenever our chat room is updated not created but updated so for that um let's yeah start with a subscription equal API Dot graphql and then we're going to have a graphql operation what operation we are interested in we are interested in subscription on shot room update do we have something like this on update chat room this one so let's import on update chat room in our file and let's send it to the graphql operation and what information we will have what yeah like variables input we will give to this operation we can have a look at um and the subscription here to see what it expects so on update chat room uh has a filter and we can filter based on yd to be equal to something so that means that we again have a filter come on filter uh we need on the ID and why this should be equal to chat room ID we want to subscribe to updates for the chat room that we are currently in uh okay that's good and after this we want to subscribe with next we're gonna get the value here we need to do something with the value and also on error we are gonna simply console word error like this and we should not forget to unsubscribe so subscription dot unsubscribe here subscription hey come on oh because return function that will unsubscribe okay perfect and here let's do console log value let's see what information we have console log updated all right so now here if I'm gonna do c and if I'm gonna go to the chat here and let me actually send hello then I'm gonna see uh we have a new message and we also have this updated and updated contains my own update on update chat room and we have a new last message that was created there we have a new um updated that field where is it updated the add field which is exactly the time that we have right now yes it's 15 uh and if I'm gonna do now as you can see it's 15 15 0 0 if I'm gonna do one more time but updating that is gonna be 15 15 again zero zero am I looking at the right thing last changed at um version 11 version 10. yeah this is actually the problem and this is why we need to listen to updates because as you can see the um the last updated ad is actually not updating properly and also the last message ID shouldn't be so chat room last message ID now ends with one B6 and the previous time it ended with actually it was a different one again 1b6 similar to the previous one and if I'm gonna do another one it's gonna be again 1v6 so this should be the last one if I'm gonna send let me actually go back here refresh the page and you will see that it's not properly updating the last message um it was with this Carly and it's still hello but if we go here we see that V should be the last one so that means that um our updating the last message is not working and it's not working because whenever we are trying to update them the chat room we are actually using an out outdated version of a chat room in the components input box when we set the new last message we send here the version of a chat room and here we need to send them most up-to-date version this version is coming from a chat room the chat room is coming from the props and we use this input box in our chat screen in the chat screen if we scroll we have an input box that has a chat room the problem is when the chat room in our application never updates we only query it and we call the set chat room only once when we get the initial data so we are trying to work with an outdated chat room object that's why it doesn't reflect the last changes and to solve that we started working on the subscription in order to update our chat room every time we we receive an update so we solved the value here it contains the data on updated chat room and contains information about the updated chat room let's go ahead and set the chat room foreign we are going to um destructure the existing fields from the chat room and then we're gonna destructure the things from the value dot value dot data dot on update chat room in this way we're gonna keep fields from the existing one and we're we're gonna override only the ones that changed we can also add some um like to safely destructure it if uh the existing chat room is null we're gonna use an empty object so yeah this now should work I'm gonna do it like this one let's do one and then let's do two so we see and let's do three and let's do also four now we expected last message should be four so if I go back here and I refresh this page we should see that the last message is 4 and it was the case we updated it correctly yes it's for that means that it's exactly how we want it and we are yeah listening to updates and updating properly our chat room but that's not it because whenever I write here a message and I go back to this screen I also want this screen to be updated and to reflect without me having to update it like this I wanted to reflect um both changes there um one way to update this information is to actually give um to implement that pull down to refetch mechanism pull down to refresh let me think if that's going to be a good idea um for that we're gonna need a state variable loading to know if we are currently loading the new mass of the new chat rooms set loading and use state it's false we're gonna hmm let's see we're gonna extract these API call inside a separate function called const fetch um chat room let's do it async actually and we're gonna put this API call here in this year's effect let's simply call fetch chartroom now um I think I will move to asinka weight so const result equal a weight and then I'm not gonna need this dot then because I will get the result there and I will set it in the chat room now why I did it like this because I want to also initially set loading to true and when we receive a message and when we set it to State I want to set loading tool back to false so with this function that refetches information and with a loading State we can go ahead for our flat list and we can say uh on refresh let's do fetch uh chat room and this also needs a loading indicator a loading Boolean that we will say loading where it's not loading its Reef refreshing yes it's refreshing it's going to be loading this one we don't need it now if I'm gonna pull down here why it's not working on refresh oh oh I did it into a wrong place I did it in the chat screen but I should have done it in the chats screen with multiple chats so I'm gonna have to move a couple of things there for example the loading State we need it here ah the loading State we need here actually I'm gonna revert back and just implement it there because I messed up a bit it's okay it happens so here we are fetching the rooms that means that this function we can get put it out of a use effect fetch rooms in the use effect just call the function fetch rooms we have loading let's go ahead and set loading to True at the beginning set loading through and at the end let's go ahead and do set loading false now for the flat list we simply say refreshing refreshing equal loading and on refresh just fetch chat rooms now if I'm gonna pull down we're gonna see the loading indicator and now we see the updated list and to test it we can go ahead and write here last message we can send it we can go back and we see that it's not updated and if we want to update we simply pull it down and we update them last message this is very useful also uh whenever we want to to check like newly created chat list it also will work like this and it's quite easy to implement uh the refresh mechanism but that's not everything because I also actually want to subscribe to chat list item updates so I want every item from this room to listen to updates for the chat list um information and whenever the last message changes to actually update it in real time without us having to even pull it down so for that we are gonna go to our components we're gonna go to the chat list item and in the chat list item after we fetch the user chat list item not after with HV user like in a separate use effect we're gonna subscribe to updates for this chat list item [Music] but for that we're gonna have to start working with a state variable so let's go ahead and find the chat room in the state set chat room initially this value is going to come from the property and we're gonna put it in our state now everywhere where we're using the chat let's go ahead and replace it with a chat room for example here instead of chart let's do chat room dot users um here chat room basically we need to move all them references to reference our state variable chat room and here is well chant room so I think now it should be working okay uh now if I'm gonna yeah it still works as expected but uh because we have a state variable we can subscribe to updates and call this set chat room to update it whenever it actually updates so for that uh we're gonna yell it subscribe to our own update chat room similar to what we did in our screens chat screen um we have here the subscription for the chat room so let's copy it from here let's add in our component here uh We're not gonna need the first operation we only need that subscription like this uh with property it's not going to be chat room ID but it's gonna be hmm it's gonna be the property chat.id from props chat.id as well here chat dot ID and we should import from amplify API the graphql operation we need to import from come on uh amplify no graphql subscriptions we need to import on update chat room one of the chat room what else do one of the chat room yeah we have it and I think everything is working now let me go ahead and try to send a message to this user and ask are you updating and if it's working it should automatically without refreshing without doing anything it should update so let's check are you updating yes it's the second one actually yeah with a number yes so we see that it updates automatically and if I'm gonna join the chat room and say here now it works I'm gonna send the message it's gonna appear here automatically I'm gonna go back and I'm gonna see here now it works a few seconds ago awesome so that means that we properly subscribe to all the data changes that we care about for our application in order to provide a very good user experience for our application so that means that we are done with listening for chat room updates so I'm gonna go ahead and I'm gonna commit everything but before that let me double check my console logs to clean them up for example here I don't need it and that's probably it let me do git add and commit our changes our changes is going to be uh back and two and three subscriptions all right perfect so we are um we are done with the first part of this tutorial the first part was related to our sorting and for our real-time messages now the next step is something that you've asked so many of you wanted to see uh it in action and I'm talking about our groups okay that's that's the interesting part guys how are you following along do you enjoy it hmm group messaging group message the benefit of um the design that we have created in our previous when we design our data model the benefit is that we designed it with group messaging in mind from the beginning because in our case a chat room has a relationship of many to many with users which means that by default in our database layer it supports adding multiple users to the same chat room not just two users so from the backhand side in this regards it is ready and it is um it yeah it is ready to actually be created and what's going to be the difference between a chat room between two users and a chat room with more users it's uh when we let me go in the screens in the contact screen contacts uh probably in the components content list item so whenever we press on a contact in this in this list We are following a couple of steps first of all we are creating a new chat room then we are adding the clicked users to the chat room and when we are adding ourselves to a chat room in case we're gonna want to create groups the only difference is going to be this part because we still will create a chat room we will still add ourselves to that chat room but instead of adding only one users one user to that newly created chat room we're gonna add an array of users basically we're gonna add multiple uh chat room users so yeah like technically this is going to be the only difference but we're gonna have a couple of differences from the user interface on how to create them how to select them and so on so let's go ahead and open our groups uh tab here and we already uh have added the name in the image field to our chatroom model in the beginning of this tutorial so for that we are good now we need to add the new group button in the contact screen in the context at the top of this um at the top of this list we need to add a button for new group and I already prepared it for you with Styles not to waste time so let's copy this list header component let's go ahead in our Source screens contact screen and here for our flat list let's give this a header I don't know why I didn't copy properly let's go ahead and give this list header now if I'm Gonna Save uh I think I also need to import a couple of things for example pressable let's go ahead and import it from react native and material icons as well I think yes import material icons from Expo Vector icons now if I'm gonna go here text import text from react native and are you good now yes now we see that at the top of this list we have this new group button whenever we press on this new group button we should be redirected to a new screen where we will be able to set the name of our group and also select people that we want to create the group with so for that let's go ahead and uh create a dummy screen in our screens folder for them new group screen.js let's go ahead and generate a dummy component here and then go ahead and add it to our navigation stack so in the navigation index.js let's um duplicate this chat no it doesn't matter one of them duplicate one of them and let's do new group and the component is going to be new group screen that we should import from our screens now the list the last step is to go back to our contact screen and we will need to navigate whenever we press on this new group button so to navigate we first need the use navigation so let's go ahead and get our navigation using the use navigation hook and in the on press of our component here let's do navigation dot navigate to the new group and if I press on this button I'm redirected to a new group screen perfect so we have created the new group button uh here I actually provided with a dummy a new group screen that is very similar to our contact screen so actually let's copy it from here and replace our new group screen with the component that I provided you and as I said it's very similar to the previous context screen it also has a flat list it also renders contact list items and I have only differences that it has a text input at the top and when I press new group there is this text input that where we can provide the group name I don't know one two three it also has a button in the header for create uh and it yeah like on Android it doesn't look the best but on iOS it really looks nice so I was testing it on iOS when preparing this uh what else it has like this is the header button that it has we get all the users and yeah that's that's mostly what we need now now uh our next steps is to to make our contact list item the component that displays one contact uh item both here in the new group list and in the contacts list we need to make this item a bit more reusable we need to make it uh a bit more abstract and to make these components reusable they should not we should not take care of very specific actions and what do I mean if now I go to the contact list item this component renders the contact list item which is quite General thing to do that's okay but it also handles what should happen when we press on one of these items and because this on press event is not specific to the contact list item but it's specific to the contacts page because on this context page when we press on an item we want to create a group a private group messaging with with a user but this action is not the same everywhere where we will need to display a contact list item because in the new group here we actually want a bit different uh Behavior whenever we press on this item so for that reason instead of implementing the logic of what should happen on when we press here we will go ahead and extract this logic in the screen that is responsible for that so let's go in the screens for the contact screen and this screen like when you think about it is responsible of creating new 101 chat rooms uh so let's go ahead and yeah open back with the contact list item and let's move this on press event with big function let's move it to the contact screen here besides this we're gonna also have to move a couple of import statements so I'm gonna copy these three import statements from here because we don't need them here anymore so let's copy and let's paste them in the context screen but also make sure that we don't have duplicates because this one is a duplicate uh what else mutations it's not a duplicate but we can put them together like this and services is not to duplicate and but I think yeah like we need to adjust them Puffs for the important and now they should be good now with onpress event that in this context can be called actually more specific not very generic because we want when we press we want to create um private uh chat room with the user it's a very specific rate they chat room with a user and what user we will need the actual information about that user here in the parameters now when we render our contact list item let's go ahead and send their own press event on press is going to be a function that will call our create a chat room with a user and with what user with item with item yes with item the last step is to go back in our contact list item here and receive this on press event that we can actually default with an empty function because if we don't send we don't want to break anything and yeah it's automatically going to be sent to this onpress event let's now have a look if we didn't break anything so if I'm gonna go here and I'm gonna try to press on this user it should actually redirect me to the existing chat room with some possible and handled promise rejection we'll see why that is happening but if I'm gonna do with a new user it's working as it was working before why it's not working when I'm trying to go to the same user probably I'm not sending them the right data I'm going to the chat with ID I'm going to a chat with the existing chat room console log existing chat room foreign What's Happening Here if I go here existing oh chat drum dot ID okay so if existing chat room that means that existing chat room Dot chat room dot ID no oh chat room dot ID or simply chat room ID like this so if I'm gonna go here and press on this user come on no it's still not working possible handle location variable ID is null if I'm gonna do dot ID will you work foreign works by why it doesn't query the messages so a bit of debugging Source screens chat screen we received a new chat room ID showed start fetching the messages fetch messages for chat room ID and if I go from here we see fetch messages if I go once again we see if I go from here the ID is not correct you see so we have to console log again the existing chat room to check what's going on there um chat room idea with 78 do we have more chat rooms with this user or what shouldn't be um let's see what which one is this chat room so going to appsync console I want to I'm gonna remove everything and I'm gonna add the query and I want the query get chat room by this ID and I want I don't know ID messages items text and also users users idea no ID name and image so this one doesn't have any messages but has some users oh but it has a lot of users yes so whenever we are checking common chat room with users we need to only look at the private chat rooms not the group one as well because at the moment it's so that it has a common group with that user and it didn't create that so uh get all chat room of user one users yeah it needs to be this item should be of length 2 dot length of equal to and and one of them should be of our user okay and now if I'm gonna go here and open this one yes it redirects me to the right one to the same chant room as we are gonna go from here all right perfect perfect um let's close this one and going back to the page that we were working on yeah we uh what we were doing before is we moved the on press from the contact list item to the contacts screen so this on the contact screen now if we press is going to be manage the on-press event is going to be managed by the screen itself not by the specific item because we want the items to be reusable and on press event will be different for every scenario and we've done that because on the next new group screen what we want to do is to make this um to make this contact list items selectable and what do I mean by that we will receive a property here select Bell selectable selectable it's going to default to false but if it's gonna be true what we want to do is after our content we want here to render something if it's selectable what we want to render well we will render um basically an icon from end design let me check if I uh and if I set true here and design we need to import it Expo Vector icons and now if I'm gonna go to that screen we see event check mark actually the check mark should be only if the user is selected but we're also gonna receive that uh is selected initially it's going to be by default it's going to be false so if the user is selected which is going to be determined by the property and we're going to implement this in a moment then uh we want to render this uh check icon otherwise we want to render an empty check icon which is going to be this font awesome let's make sure to also import font awesome from Expo Vector icons font awesome and now if I'm gonna go here in the new group I see that all of them are not selected if I'm gonna change the the property to true all of them are going to be selected and if I'm gonna change the selectable to false this icon is not going to be visible at all so that means I can go back to selectable false and is selected to also false to default them to false uh and only to enable them on the screens that we need these selectables where do we need it we need on the new group screen so let's go ahead in the source screen new group screen and for the contact list here let's do selectable equal true or if you just press send selectable it's gonna send the value through there so now on their contact screen the items are not selectable and on the new group screen items are selectable but now we should actually implement the feature to select them how we're going to do that we are going to keep an array of IDs for the selected users so selected users ID user IDs and let's do set selected user IDs equal use State and initially it's going to be empty array let me double check if selected user IDs if I name them the same yes now what we need to do is uh we need to create a function that will handle their own press events of these contact list items so the function I called it on contact press on contact press it's gonna receive the the ID of a contact and we're gonna have to do a couple of things for example uh yeah we're gonna need to update the selected IDs and we're going to provide where an update function based on the user IDs that are already in state and how we're gonna update these user IDs well we should check if the user IDs already includes vid includes by D then we need to remove it basically remove from remove ID from selected and otherwise we want to add the ID add ID tool selected how we're gonna remove uh we are going to return uh the user IDs array by filtering only the user ID that is not equal to this ID so uid is different than ID how to add it well we're gonna return an array where we destructure we user IDs and also with the structure via ID now let's go ahead and send this on contact press to our contact list item as well on press event which is gonna be which is gonna call the on contact press item Dot what's item dot ID item dot ID and if you remember correctly we also need to send one more property is selected and how do we know if it's selected or not whether the state variable for the selected user ID if it includes the item dot ID then we need to send true okay with that being said we can go here new group and we can start clicking on users and we see how we add them to here perfect perfect perfect uh new group screen contact screen probably I'm gonna add some padding to the content where is it this one to the content I'm going to add margin right 10 to add some spacing yeah now it looks better and like this we can select users and we will have them selected in our where is it new group screen in them State variable okay so we have an array of of users we have a name of a group that we want to create the last step is to actually create the group with that name and with that array of users uh our is disabled if we don't have a name actually let's uh add one more um check to our button if it's disabled or not because at the moment and it only is disabled when the name is null but if we didn't select any users it's going to be enabled which doesn't make sense so it should be disabled when either of a name is missing or the selected users ids.length is less than one selected users IDs oh and we need to call this whenever it up it to add it to the dependency array to update the button whenever we change the selected user's ID and yeah it will require us to at least to select at least one user with which we will create the group Can You remake Uber Eats with a new UI I'm wondering what's the new UI I haven't seen it but yeah not sure we have our plans for our interesting projects and ubereats is quite up to date so if you want you can follow along with um the uberees that we have on the channel we have done it this year so it's it's very up to date so guys as I said the last step for us is to actually create the group with this list of users uh for that let's go ahead in the context screen and let's grab this create a chat room with user function I'm gonna grab everything I'm gonna go in the new group screen and uh underwear on create group press let's press that function let's scroll up here and let's replace the name for the function like this now inside this function I said that we when creating a group we don't have to check if we already have a user a chat room with that user because we yeah like if we create a group we want to create a new group even if we already have a group with that user now uh the next step is to create an actual chat room and that's what we need then we have a chat room here add the clicked user to the chat room okay this is the part that we are gonna have to update because we don't have only one user we have multiple selected users but the last step is actually the same because we want to add ourselves there and then we want to navigate so let's comment out this part and think how uh to to add the selected users to the chat room well we will need to for we will need to call this function for every single selected users user that we have so that means that we will do a selected user IDs dot let's map for every user ID there and for every user ID let's call this api.graphql without a wait I'm gonna show you what are we doing with a weight in a moment let's remove this from here now let's send the user ID to this user ID here and actually we can remove this from here and simply call the parameter user ID with capital it should be with capital mixture so this will call the create user chat room for every single user ID that we selected here and by mapping by mapping on this array we get back an array of promises because we simply return this promise we are not awaiting This Promise now let's wrap our array of promises in the promise.all like this and when you wrap them in the promise at all we can await this promise that all and what is going to happen is we're gonna initiate the creation of all objects and then promise that all will wait until every single user was added to the chat room to the chat room and after that it's going to continue the execution uh here let's see if it will work so I'm gonna create it with actually two users here two users let's create and we see yes because we need to import a couple of things here and also why I'm not using the user because we don't need it yes um as I said we need to import a couple of things for example API graphql operation we need Authentication for the queries we need not for the mutation we need create chat room and create user chat room so let's do that here and that's it let's try again and we are redirected to the chat room hello now at the moment we don't know if it worked correctly but what we can do is is in the chat screen to go ahead and do console.log Json Dot stringify and let's stringify that chat room okay here we have it let's grab this big object and let's put it into Json format formatter to see to see if it created correctly so here we have it it has some messages with our hello it has users and let's see how many users it has one user it has the second user and it has the third user exactly the two users that we selected and our self okay that's good um we can also remove the select from here when we finish this so in the new group screen after we before we navigate to the next screen we can do set selected users ID to an empty array and then set name to an empty string and this will reset it after creating it so um I think creating group is finished and the next step would be to display some information about the group uh the group to to see how many members are there and to be able to yeah like to to have some more details about that uh for before we do that let's go ahead and commit everything git add git commit minus M and here we're gonna have um back end two four and groups okay why so quiet today guys how is it doing everything is clear do you have any questions maybe for regarding the groups foreign so we were moving pretty well today we are almost done with a planned features uh the last step is to display information about our groups and yeah we're gonna do that now so moving back to our board let's see group information what do we want to do and where do we want to display these group information well let's do that as a separate screen and we're gonna get there by pressing like a free dots icon in the header of this screen but for that let's first of all Define the screen um group info screen new file group info screen dot Js here let's generate the dummy component and let's add it in the navigation index uh uh below the chart we're gonna have them group info and the component is going to be group info screen okay now the last step is to add the free dots icon until when we press on it to navigate to our newly created screen to add this um event let's go in our chat screen here and where we are updating the title of our page let's also update the header right component and let's provide there an icon but I can already prepared it for you here where did I provide it no probably I didn't so we're gonna go and find it Expo Vector icons free dots more this one is gonna work what should we do horizontal um which one works better I don't know let's try this one so the head right is going to be a fever I can so let's also copy the import statement and import it here all right now if I'm gonna go here we see the icon and we can make it gray and then on press what do we want to do on press we want to navigate navigation dot navigate to that group info and we also need to send by the over group so by D over group is going to be chart uh the idea of a group is going to be let's do chat room ID and for that reason we need to add the chat room ID in the dependency list as well so now if I press on this I go to the group info screen and on the group info screen I'm gonna receive ID and I'm gonna be able to query the information about this group and display it here foreign for the screen for the details um we can get the user interface from here so let's copy this file for the group info screen and let's go in our group info screen and we simply replace it with this one so what do we do here let's first see how it looks it looks something like this and what do we do here we simply display a group name at the top and actually I need to properly display it like chat room dot name do we have chatroom.name I need to add it in our query chat room name so if I go here name chat room get chat room oh I know I know I know when we created the chat room the group yeah when we created the group let's go to the new group screen we didn't send the name there for example in them create a new chat room here the input should have a name that we mentioned there so now if I'm gonna go and create a new group uh not just Dev and I'm gonna select two users or even three let's create and if I'm gonna go here now I see that title not just Dev here at the top so in the group info screen we need to query back the name and we needed to make sure that we are saving the name when creating a group item now we are displaying it here after that we are simply displaying the number of users in the group for example here four participants and in a flat list using the contact list item we are displaying all the users from this group so these are all the users that I selected in the previous screen and it's going to work the same for um for 101 messaging as well for example here if I'm gonna check I see two participants it's basically me and valver user um you know what in the main screen here if it's a group I need to render the group name uh with bold here instead of a name of a person so that's coming from our components um chat list item and chat list item where we have our username we need to try to render that chat room dot name and if that's not defined then we're gonna default to the username room chat room let me check if it has chat console log chat room uh where we're doing fetch for chat room on the in the screens in the chats screens here in the queries we need to make sure that for that chat room we are getting the name as well and also the image save chat room name and image yeah now I see that the first one is not just Dev because that's the name and if the group doesn't have a name it's gonna fall back to displaying the name of a user so chat room name or user who Mateo is saying hello first I'm here five plus years of react native experience just gonna judge you silently okay let's do it uh I am always open to learning something new so if you have anything to share feel free okay but we are actually coming closer to the end of today's episode because we actually uh displayed the group information for our chat room we have all our users here um the next step is probably to show you how we can delete a user from a group uh deleting a user from a group that's also very common use case um and yeah let's let's do that so when we're gonna delete a user from a group and how is that's going to happen from the user experience standpoint so I was thinking that I will simplify the ux I'm not gonna add any crazy menus I'm just gonna uh whenever we press on the item I'm gonna open up simple alert from react native and I just want to show you how we can connect with a backend and actually delete um user a chat room user so for the components in them no not in the components in our screens group info screen let's send to our contact list item where on press event I don't know on press on contact press let's define this function here on contact press and we're gonna simply use an alert here alert alert um removing removing the user yeah I cannot think about the labels removing the users and here like are you sure you want to remove we can also provide the username so for that I'm gonna switch to template strings um but to display the username we need the information about the users so on contact press will receive them the user information here so let's make sure to send it when we call the function on contact press item dot user not item.user it's actually item because this is a not a user but a user chat chat room user so we're gonna get chat room user Dot user.name and then from this group let's check if that's at least working uh let's go to this group let's go to the information and if I press on one of these users removing the user are you sure you want to remove Carly spoor from this group yeah that's the right name now we need to provide the buttons that we will have there so for the buttons the first one we can have um cancel and the type Style can be cancel and the second one the second button is going to be one that will remove the style it's gonna be destructive to have uh to have it with red and Well on press event will be removed uh chat room user uh remove chat room user by providing the chatroom user here and that's going to be our other function that will implement the actual deletion of them chatroom user for now we don't have to do anything bigger but if I press here removing the user is it actually title no it's text foreign function like if a user wants to delete the chat it should happen from his her side only not from both sides uh uh that's um if you want to remove a group that probably should happen like from like removing the group as an admin and that means that you'll remove it for everyone if you want to just leave a group then you would simply remove a chat room user and that's actually I think what you asked if you want to remove a conversation with a person you don't want to see that conversation but that person should still be seeing that conversation so what you should do is you simply remove yourself from that group and in that situation yeah like it's gonna work like the messages are still going to be there for the other users to see but you're not gonna see it because you are not a chat room user in that particular chat room uh I could move this logic to the list item component to this contact list item uh I don't want to do that because my contact list item is a very reusable component so the logic of what should happen when I press on it is quite different in every use case so for example when we are in the context whenever I press on one of his users I am creating a chat room with him when I'm in a group when I'm clicking on this chat contact list item I'm just selecting them so that's why we refactor it to actually extract the specific logic of what should happen to extract it outside foreign so uh going back yeah like I was trying to test if it works yeah cancel and remove should actually remove that user that chat from user from our list so to remove a user we're gonna run emotation because every time we want to update some data for with our on our back end we are working with a mutation so in this case the mutation is going to be delete chat room no delete user chat room and the inputs should be version and ID okay let's go ahead and import this query in our group info screen uh we're gonna import from graphql mutations and we're gonna import the delete uh delete user chat room all right so in the remove chart from here which is going to be an async function let's do a weight API Dot graphql and we want to run the graphql operation delete chat room user delete user chat room delete I'd call it delete chat room user but they call it differently like amplify um uh you're missing a function wrap around the button on press button on on press yes definitely yeah thank you like this we need a function for the own press and when we press on this function we need to call the remove chat user so in the remove chat user yeah we're deleting the user but we need to provide the input so for the input we said that we need uh we need input and we need version and ID we need input and inside the input we need the version is it yeah underscore version that we're gonna get from the parameters that will send down here so the version will come from the chat room user Dot version and the ID is going to be ID chatroom user dot ID okay so deleting that one uh let's just console log the response to see what we have there because yeah it's not going to be that straightforward to delete and I'm going to explain you in a moment why uh let's try to delete this user remove date I delete user chat room we see the updated object um and we don't see any errors and we expect this user to be deleted from this uh chat group if I refresh come on and if I'm gonna go back to that group to check the users well he's actually still there and why does that happen that happens because of way because of a way upsync will handles deleting objects so whenever we have versioned enabled in our upsync and in our case we have it and I'm not going to get into the details of the versioning but what you need to know in this context is that upsync will use soft deletion what soft deletion means it means that instead of removing the item from the database I'm gonna try to remove it once again instead of removing the item from the database we simply add a underscore deleted through uh field on the user and also technically we add one more field that I don't see it here because we are not querying it but on the database layer if we check this object we're gonna see it that field is called TTL which stands from time to leave and time to leave is a timestamp that specify how long should we retain the deleted user in our database the deleted item in our database and by default it's set for 30 days which means that for 30 days your deleted items will still be here and this is done to prevent um some situations where um yeah like you want um you deleted an item without um I'm trying to explain you without confusing it uh confusing you more so yeah like this this helps upsync merge different data with different versions and that's why we need it but um it adds a bit of work on our side because we now have to manually filter these deleted items from our front end and if I'm not mistaken uh let me check like where do we query this data from in the group chat room chat room we have flat list chat room users so uh problem is that hmm if I'm gonna check a mutation for example list chat list user chat rooms there is no filter on the deleted field so there is no way to provide a graphql filter so that our backend automatically filters and doesn't return us with items um yeah this is the disadvantage and when you're working with data store this happens automatically behind the scenes for you but when we are working directly with graphql we need to take a next step and to filter out deleted items from here to do that it's pretty simple but we need to make sure we are handling this filtering everywhere where we are displaying the items for example I'm gonna go ahead and simply um Define our users by mapping through that chat room actually let's do it like below to make sure that we have a chat room so chat room users items and let's do filter where the item is not deleted so I deleted deleted item item and where it's not deleted so we need to filter out all the deleted items deleted now if I'm going to go to the node.js dev here and if I'm gonna check with users I still see them because I need to send this uh users array to our flat list and now I don't see that user because he is deleted all right so that's how we delete it and don't be afraid if you don't see them like delete it completely they are deleted their deleted using soft deletion by simply mentioning the underscore deleted and dynamodb will take care automatically for you to remove them completely after 30 days so don't worry you're not gonna collect a lot of data that is not necessary it's going to be there only for an expert today's and then it's gonna go away so this is how we delete items from here but again like it's quite error prone so we need to make sure that we are filtering wherever we have to for example right on this screen I see an a problem I see that it still displays that we are four participants in this group which is not true so I need to update here the length of my users array which is free yeah um and another thing is [Music] yeah make sure to um to filter on this underscore deleted in vowel places for example in this chats we also have to to filter on this so I'm gonna do uh chats let me let me do it this way I'm going to I'm going to remove myself from this group so this is my user I think and I shouldn't see this not just Dev here because I am deleted so in the chat screen in my chat screen let's think where do we have it we have a flat list of message no not in the chat screen but in the chats screen so we have charts uh we have chat room for that data why it's not in plural chat rooms should be chat rooms that was weird and um fetch chat rooms we are going to fetch using them list chat rooms what's this list chat rooms expecting list chat rooms it's coming from Aquarius foreign queries here so get user we will need to get the underscore deleted for the thing for these chat rooms if I'm not mistaken deleted I can check that here so we had a get user field on in the get user we have chat rooms that have items deleted so yeah it should be in which chat rooms deleted yeah it shouldn't be there should be inside the chat room here should be underscore deleted and chat rooms and then we need to filter out so how do we filter out rooms equal to that one then we have two oh we simply filter here filter based on their item not to be deleted item item dot underscore deleted foreign console log to response let me check this one foreign some of them things that I don't need like console logs to be able to see the console log that I'm expecting so if I refresh foreign items let me grab this array let me put formatted here inserted missing codes what I need to stringify it where I simply have to check the data chat room chat room this is an object for get user dot chat rooms response.data.getuser that is coming here then chat rooms then items and then underscore deleted do they make a mistake deleted his null do you see it here items dot map item I just want item dot delete and Define any finally find any finally find all of them are undefined did I add it correctly here chat room no no no no it should be in the items yes I made a mistake here by putting the by querying the deleted over chat room but I should have queried the deleted of the user chat room this is actually user chat room so now uh no no no no no true no no no no no no that means that one of them is deleted and it should filter it out the group not just Dev should disappear yes it's not here and I can like go ahead and remove myself from every group here remove user and with Erna shouldn't be here after updating are you yes it's gone perfect uh that's that's good with uh that's that's perfect if I'm thinking I'm I'm thinking about subscription on update chat room will you also update no this one will yeah user items deleted so yeah this this works but again this is not everything like you should be make sure that you implement this filtering on the deleted in every other place where it's important I don't know receiving notifications or receiving updates stuff like that are also important okay so uh with that being said we are done with deleting a user done deleting a user today also work on a feature to add more users here we can do that actually let's see uh oh we we started seeing messages um what if we delete chat for a private chat in that case if we remove participates from from Members array then where there would be only one left in the room will we be will that be called the room if only one member is left yeah it's still going to be a a room that will hold the history of messages even if everyone leaves their room like we are still going to be able to to have that information and data in our database so that's that's the advantage of how we designed our rooms not necessarily to be to have like user one and user two but to have like zero one two or even more users inside it so with the same database design we can handle 101 messaging and also group messaging as well foreign you can use Expo for these tutorials yes we are using Expo for this tutorial can we encrypt files with AWS amplify yes you can encrypt files with AWS uh it's mostly yeah like for for AWS and there are a couple of ways like uh first of all all the data in transit is automatically encrypted for us so we don't have to take any steps to encrypt data in transit but you can also encrypt data at rest basically to keep the data in your S3 buckets encrypted but yeah like that's a bit more advanced and you have to set some encryption keys and um implement it there but it's possible definitely salute salute hello Adam how are you doing thanks for sharing with Mateo Mata is saying that he prefers naming a race with least suffix um yeah I I don't prefer that uh and yeah like at the end of the day it's a simple preference so it doesn't mean that that's wrong or that's um that's how it's supposed to be I don't like uh using um yeah too too difficult to explain what what I wanted to say but if that works for you good for you guess who is uh year one at software engineering and Cambridge oh my God Mary Mario's congratulations it's so nice are you uh have you moved there or are you studying like online these days very good tip for using Json stringify in order not to have to copy it in the Json formatter yeah that's something that I will use definitely thank you can we do it without updating can we do it without updating what do you mean uh which one specifically oh to remove it without having to update yeah for that we're gonna have to implement the same filters with um we've deleted for our own update mutation so yeah it's a bit more tricky but we can do it foreign Firebase with your stream playing on workspace a virtual coding body that's so nice and twilio for real-time phone calls or what we can use on AWS solution without reload uh uh no we we cannot do it simply with a use effect if we're talking about like removing things from here because we um on our let me for you an idea in our chat screen we filter based on the deleted only when we fetch the chat rooms but when we uh when we listen for updates in the component chat list items here we are listening for updates we are actually listening to the own update chat room what we would be interested in is to listen to the own update um let's do it like this on update user chat room and to see if the user was updated and the deleted appeared layer on delete chat room you would um use a filter for subscribing to a couple of user chat rooms or maybe to yeah you would first have to find your user chat room in this chat room and subscribe to their own uh either on delete or on update but I think it's going to be the own update because the delete operation is simply an update operation and based on that like again like remove it from from the state I'm thinking to yeah like maybe in the next weeks we are gonna cover uh audio and voice calling um so I'm gonna give a try for a couple of uh tools I worked with Vox implant and I really liked uh their solution um we'll see what we're gonna use okay so I promised you one more task I promised you adding people to a chat room so we saw how we can remove things now let's go ahead and see how we can add people to the chat room so for that look we're gonna have a very similar uh screen as the new group screen because we still have to display a list of users to be able to select them and then based on the selected ones to Simply add them there so let's go ahead and duplicate our new group screen let's go and duplicate it here and we're gonna call it add contacts to group screen very specific name now in our navigation let's add this screen and and here as uh contacts [Music] add contacts to group screen add contacts to group screen add contacts now add contacts Mega line thank you very much I appreciate that so now uh what do we have to do is somewhere in this uh page to add a button uh add contacts I don't know invite people so let's go ahead in our let's go ahead in our group info screen here and where we have our yeah here we will need navigation let's grab the navigation object and where we have our title participants to the right I want to add another title uh another text that will say invite friends we will I will put them into the same view that will have a style justify content um Flex Direction row I want them in the same row Flex Direction row and justify content space between space between let's close this view after the two texts like this uh and let's also do a line item Center so coming here we have invite friends online items Center why you're not centered I don't know but I'm not gonna spend a lot of time on that one here and I'm gonna say uh style for this one is gonna be I don't know font font weight bold and I want the color royal blue and whenever we press on this text on press we're gonna redirect the user using navigation we're gonna navigate to um odd contacts or how did we call it contacts uh the contacts yeah and we're gonna send vayer some data because we need to know um the information about the chat room itself so chat room let's just simply send the whole chat room I always say that it's not a best approach to send whole objects but rather you should send IDs and in that part to query it but for this specific case I'm gonna make an exception and send the whole chat room object to have it there so now if I'm gonna go to one of the groups and if I'm gonna do invite friends yes I can go here to the add contacts page okay let's uh adjust a bit our add contacts page uh let's do it this way where is it screens add contact contacts to group screen first of all We're not gonna have a name uh We're not gonna have a name We're not gonna have the name state um let's search name here where disable the name okay where else name here and yeah here for the input We're not gonna have it set name also go away um what else we will have invite friends after we select them instead of create the button is going to be called invite or add to group their own press is gonna be on on add to group press and the logic let's adjust a bit the logic of this function so the logic will be we don't have to create a new chat room so we are gonna have to remove this one remove these lines that are responsible for creating a new chat room we simply want to add all the selected users to the existing chat rooms so that's what this part does uh the only thing is that we need the chat room ID where do we take it from we're gonna take it from then route use navigation use navigation and our chat room is going to be route Dot params dot uh chat room I think I called it chat room so we can simply use this chat room here instead of a new chat room um we don't need the last step to adding our cell because we are already there so let's remove that we will reset the selected users and we are going to instead of navigating to that chat room we can do navigate navigation uh go back simply to go back one screen and I think that's good so in this situation uh if I'm going to we have currently two users one with number one Cassie Kachi I don't know route params chat room not there let's see oh because it should be used route okay let's go ahead one more time invite friends let's add Carol here add to group it's gonna come back here uh we can Implement as well on this screen like pull to refresh that's going to be easier than subscribing to data updates and for this situation I think that's perfectly fine so in the group in form uh I will add here we need two or two things we need their const loading set loading I use State false uh where are we querying the data it's here so we will add it into a function fetch uh users we're waiting the users from chat room users item user user so fetch chat room is gonna be here so the logic will be this one API call uh we will transform it to uh a single weight so let's do const result equal a weight and I'm gonna remove this one from here without the dot then uh like this and this will allow us to set loading to True at the beginning easier and set loading to false at the end in this use effect we still have to make sure to call the first chat room because we want to fetch the chat room when we Mount the component but we also want to call this function whenever we um pull down our list so on refresh is going to equal to fast chat rooms and is refreshing equal loading now if I'm gonna go here to the user info I already see two users and I see the Carly that I added so if I'm gonna invite one more for example Erna here to group I'm gonna come back and I can pull down to refresh and I see Erna right away here and if that was a mistake I can press and remove it update it one more time and she is not here anymore um Perfect Look What I also want to do I want to in order not to be able to add the same user twice in the group as I did right now I want to add a check on the invite friends here to kinda remove items that are already selected uh how we're gonna do that um so data is users users is in the state foreign users yeah probably I'm gonna do uh the the items before setting them in state I'm gonna filter out the user battle are already there so item item um chat room Dot man I need information about the chat room chat room chat room has what does chat room has chatroom has users items chat room has user items Dot if some of that already existing items are matching existing user oh okay that's complicated and I'm pretty sure it's not gonna work from first time so if item dot ID equal to existing dot ID so we need to filter I think it varies no user in that array I don't know Carly is here Carl is still here um I need to console log some things here in order to to get to the to the route so console log uh result and here we're gonna use the trick that we learned today in the live stream so Json stringify uh uh items then what was here I don't know null and space too like this and also I want to query the chat room foreign thank you thank you that's so useful so this is the chat room and this is our results the results have idea in his name so it's right that we are working with the ID here that's the idea of a user so result item dot ID that's correct now let's check the structure of our chat room chat room here the ID is actually not of it of a user it's actually of a chat room so we need to take to work with user ID from here yes user ID so existing chat room dot you exist uh chat room user chat room user dot user ID and now it's gone and really I managed to do filter with some right away from the beginning because if I remove it I see only our existing items here okay but you know what for example uh now I'm gonna remove this Carly I'm gonna remove him I refresh it and I'm not gonna be able to invite him one more time because when we are um hiding these results here we need to also take into consideration that the item is not deleted so we need them we need the chat room user deleted oh my God we add more logic here so chat room user uh if this if the ID matches and the item is not deleted and the item is not deleted save yes it works I'm gonna add him here update he is here I'm gonna go to invite friends he is not here and if I'm gonna remove him then I'm gonna be able to invite him one more time to group yes yes I think it works I think it worked you know how to test if everything works as expected is to open it up and for us to sign up and register and have a chat with me here um so let me open it with a tunnel and let's see if we will uh npm start tunnel oh so that means that we've also implemented uh um free invite users to a group chat uh okay so guys scan this QR code right now I'm gonna put it here with your Expo go application or paste in the URL that I sent to there in the chat and sign up for an account and let's have a conversation but until you do that I think I'm gonna go ahead and no I don't have to do anything because you will yeah it should be fine so before everything let me actually go and add everything go ahead get commit minus M that's our backend tool and the task number five this is group management um let's um let's have a look at some of the questions that we receive here what is my theme I have a video on my top vs code extensions and there I also mentioned the theme that I use if I'm not missing that's material Community icon material community theme or something like that foreign opening an AWS account um just follow the registration guide on AWS here in WS the requirement is that yeah like you need to provide a valid credit card so creating an AWS account it's pretty straightforward to um to do that but yeah you need um to provide a valid credit card update chat room listener filter can you show the QR code on the screen yes sorry for that let me do that or you can also do them the URL that I pasted there that's that should also work I'm wondering if there is anyone Noel is not an object to response data get user chat rooms I need to add much more error handling and one of the issues I see that multiple people get is this response let me check where I have it in the chats screen have console log here and rooms face chat rooms rooms is a response yeah here I will have to do it like this um um yeah oh we already have some users there let me check so the user should be the one with some digits because we didn't implement it like updating them the image so creating a chat room doesn't work did we mess up something yeah something is not working to create a chat room with a new users that are joining if I go here no it actually works red Brown I see you or no I need to updated on my device as well um foreign features guys you would like to see in our application because I plan to continue working on this project for a couple of more episodes and some of my ideas are enriching the messages itself to be able to send more types of messages except with text messages uh that would include like images videos audio audio what else links I'm really curious on how to [Music] um to enrich the links themselves with their thumbnails and URLs titles and so on we can work on message reactions we can work on um displaying the number displaying whether the person read the message or not and that will allow also to show us how many unread messages you have in a chat room um what else in terms storage definitely to be able to send messages to attach media files and also to use like as a profile picture a proper image because at the moment we don't have that uh what else we can do I have like a lot of ideas and maybe of course like uh calling and audio giphy okay that's also that's also a good idea I would love yeah give it let me note it down actually because that's a great idea message reactions uh push notifications good idea push notifications okay mentioning people from a group chat that was one idea of from one of our subscribers when you send a message to someone you you could tag them what else replying to messages oh my God like if we if we want like this project can go so much in depth like to cover so many things foreign command and someone is saying that npm create right native application is not working if you want to use Expo you could try this command copy this one voice calling a video calling search for a user that's good this will be the next not just messenger Facebook I definitely don't intend to uh to publish this but it's a very good educational material because it covers so many aspects of building an application and if you enjoy this guys don't forget to subscribe to my channel leave a like uh I already am tired after three hours of coding uh so bear with me I really want to to read through some of the questions and yeah if you still have some suggestions ideas please leave them in the comments uh and I will take them into consideration next week when we continue this build next week also on Friday at the same time we continue web build with more features and I still haven't decided which specific features but we definitely will um will do that so make sure to subscribe to the channel turn on the notification Bell not to miss that video very very important um I think that uh that's it for today guys thank you very much for watching till the end I'm gonna see you next Friday and I wish you a very enjoyable weekend and yeah keep coding keep writing amazing application

Channel: notJust․dev

Views: 52,134

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 aws amplify auth, react native auth, javascript, react tutorial, whatsapp clone, build a whatsapp clone, whatsapp clone react native, whatsapp clone tutorial, aws amplify, chat app, react native, react native tutorial, javascript tutorial, real time chat app, socket io, programming, react native chat app

Id: -m-4_DRLmrc

Length: 190min 13sec (11413 seconds)

Published: Fri Oct 28 2022