Hi Friends,

Hope you are all well. This is part 6 of my chat app using Ionic 3 and firebase series. In this post we are going to send requests to other users to add them to our friends list. Let’s just jump into the code.

I presume you have read all the previous parts of this series. Just grab a copy of the repo of part-5 and continue from there.

A screencast of this post.

 

The code for this post can be found here.

The complete for this series can be found here. (Please note that this is a work in progress).

Let’s continue from where we left off.

Open up buddies.ts file and add the below code.

The if statement where I check whether the logged-in user also gets displayed is just for fun. You could simply replace the alert with a splice as shown in the above then() function.

Now the buddies.ts file would look like this.

Wait, what’s that connreq..?

Well let’s go ahead and create an interface inside our model directory.

Inside our models/interfaces directory create a file called request.ts and add the below code.

Going forth, I will simply create the variables as local variables in the file itself. Now that you have got a grasp of interfaces, I guess you could create your own interfaces in your applications as you please.

Now let’s create a provider for handling the requests.

Open up this provider file and add the below code.

Now please notice that I have created a new collection called requests and then storing this data as a node under the recipient’s uid. You’ll understand this in a moment.

Let’s run this on a device.

Just swipe the user to the left and then click on sendrequest. Once the request is sent, an alert will be displayed as shown below.

Okay, Now the request has been sent, but shouldn’t the recipient of the request be able to view all the requests sent to him ?

Open up chats.ts and add the below code.

This might look new, but I am simply calling a function when the user enters the chats screen.

Kindly read the docs for a clear explanation on events. I am using events here to simply design a publish/subscribe mechanism to create a real-time effect.

Now open up our requests provider and add the below code.

Now, The code is pretty much self-explanatory. We are simply pulling a list of all users and then comparing the uids of the requests with the uids in the users collection. Then the matches are pushed into a userdetails array.

Now this is a method that can be understood and easily implemented. But this is NOT the optimal one. The optimal one would be to get the uid’s from the requests collection and then make direct requests to the firebase collection thereby cherry-picking only the users that we need from the collection itself. This would save us a lot of time when the app is scaled up and has thousands of users.

NoSQL data-modelling is a bit different from our conventional data-modelling techniques. In simple terms, you can store and retrieve data however you want, as you use it more and become experienced, you will start identifying the easiest way to link collections and start using the unique ids created every time you push data in an effective way.

Now whenever we enter the chats tab, the getmyrequests() function is called. When the userdetails are extracted, an event is published with the gotrequests flag. Now since we are subscribing to this event in our chats.ts file, the user details would get pushed onto myrequests array as shown in the code block below.

Open up chats.html and add the below code.

We are simply having a list of requests with accept and ignore buttons on the screen. That’s it.

Now when you receive a request you will see that it gets displayed on your chats screen under a requests header.

 

 

Let’s wrap this up here and continue in our next episode.

If you found this helpful, kindly share it with someone else and help them too.

If you found this content great, then kindly consider supporting me on patreon by clicking here.

Thanks for reading guys. Peace..