Hi Friends,
Hope you are all well. In this part let’s see how to accept or ignore the friend requests received. I presume you have read all the previous parts of this series.
Let’s begin from where we left off.
A screencast of this post:
The complete code for this part – here.
The complete code for this series – here.
Open up chats.ts and add the functions for accepting a request and ignoring a request as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
accept(item) { this.requestservice.acceptrequest(item).then(() => { let newalert = this.alertCtrl.create({ title: 'Friend added', subTitle: 'Tap on the friend to chat with him', buttons: ['Okay'] }); newalert.present(); }) } ignore(item) { this.requestservice.deleterequest(item).then(() => { alert('Request ignored'); }).catch((err) => { alert(err); }) } |
Now open up requests.ts and let’s add the code for the functions acceptrequest() and deleterequest() respectively.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
acceptrequest(buddy) { var myfriends = []; var promise = new Promise((resolve, reject) => { this.firefriends.child(firebase.auth().currentUser.uid).push({ uid: buddy.uid }).then(() => { this.firefriends.child(buddy.uid).push({ uid: firebase.auth().currentUser.uid }).then(() => { this.deleterequest(buddy).then(() => { resolve(true); }) }).catch((err) => { reject(err); }) }).catch((err) => { reject(err); }) }) return promise; } deleterequest(buddy) { var promise = new Promise((resolve, reject) => { this.firereq.child(firebase.auth().currentUser.uid).orderByChild('sender').equalTo(buddy.uid).once('value', (snapshot) => { let somekey; for (var key in snapshot.val()) somekey = key; this.firereq.child(firebase.auth().currentUser.uid).child(somekey).remove().then(() => { resolve(true); }) }) .then(() => { }).catch((err) => { reject(err); }) }) return promise; } |
Things to notice:
1) Note that I am pushing the uid’s into a friends collection. (Created nodes with both id’s as keys because, once the person accepts the request, he should show up as a friend in both their accounts).
2) I am also deleting the request once a friend request has been accepted. I guess this is pretty much self-explanatory.
Now wait. We have added code for accepting a request. We have created a new collection called friends for storing these friendships, but have we displayed it on the screen ? Not yet.
Open up chats.ts file and add the below code in ionViewWillEnter()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ionViewWillEnter() { this.requestservice.getmyrequests(); this.requestservice.getmyfriends(); this.myfriends = []; this.events.subscribe('gotrequests', () => { this.myrequests = []; this.myrequests = this.requestservice.userdetails; }) this.events.subscribe('friends', () => { this.myfriends = []; this.myfriends = this.requestservice.myfriends; }) } |
The complete chats.ts file would look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, Events, AlertController } from 'ionic-angular'; import { RequestsProvider } from '../../providers/requests/requests'; /** * Generated class for the ChatsPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-chats', templateUrl: 'chats.html', }) export class ChatsPage { myrequests; myfriends; constructor(public navCtrl: NavController, public navParams: NavParams, public requestservice: RequestsProvider, public events: Events, public alertCtrl: AlertController) { } ionViewWillEnter() { this.requestservice.getmyrequests(); this.requestservice.getmyfriends(); this.myfriends = []; this.events.subscribe('gotrequests', () => { this.myrequests = []; this.myrequests = this.requestservice.userdetails; }) this.events.subscribe('friends', () => { this.myfriends = []; this.myfriends = this.requestservice.myfriends; }) } ionViewDidLeave() { this.events.unsubscribe('gotrequests'); this.events.unsubscribe('friends'); } addbuddy() { this.navCtrl.push('BuddiesPage'); } accept(item) { this.requestservice.acceptrequest(item).then(() => { let newalert = this.alertCtrl.create({ title: 'Friend added', subTitle: 'Tap on the friend to chat with him', buttons: ['Okay'] }); newalert.present(); }) } ignore(item) { this.requestservice.deleterequest(item).then(() => { }).catch((err) => { alert(err); }) } } |
Now let’s write the getmyfriends() function in the requests.ts file. Open it up and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
getmyfriends() { let friendsuid = []; this.firefriends.child(firebase.auth().currentUser.uid).on('value', (snapshot) => { let allfriends = snapshot.val(); this.myfriends = []; for (var i in allfriends) friendsuid.push(allfriends[i].uid); this.userservice.getallusers().then((users) => { this.myfriends = []; for (var j in friendsuid) for (var key in users) { if (friendsuid[j] === users[key].uid) { this.myfriends.push(users[key]); } } this.events.publish('friends'); }).catch((err) => { alert(err); }) }) } |
The complete requests.ts file would look as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
import { Injectable } from '@angular/core'; import { Events } from 'ionic-angular'; import { connreq } from '../../models/interfaces/request'; import { UserProvider } from '../user/user'; import firebase from 'firebase'; /* Generated class for the RequestsProvider provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI. */ @Injectable() export class RequestsProvider { firereq = firebase.database().ref('/requests'); firefriends = firebase.database().ref('/friends'); userdetails; myfriends; constructor(public userservice: UserProvider, public events: Events) { } sendrequest(req: connreq) { var promise = new Promise((resolve, reject) => { this.firereq.child(req.recipient).push({ sender: req.sender }).then(() => { resolve({ success: true }); }).catch((err) => { resolve(err); }) }) return promise; } getmyrequests() { let allmyrequests; var myrequests = []; this.firereq.child(firebase.auth().currentUser.uid).on('value', (snapshot) => { allmyrequests = snapshot.val(); myrequests = []; for (var i in allmyrequests) { myrequests.push(allmyrequests[i].sender); } this.userservice.getallusers().then((res) => { var allusers = res; this.userdetails = []; for (var j in myrequests) for (var key in allusers) { if (myrequests[j] === allusers[key].uid) { this.userdetails.push(allusers[key]); } } this.events.publish('gotrequests'); }) }) } acceptrequest(buddy) { var promise = new Promise((resolve, reject) => { this.myfriends = []; this.firefriends.child(firebase.auth().currentUser.uid).push({ uid: buddy.uid }).then(() => { this.firefriends.child(buddy.uid).push({ uid: firebase.auth().currentUser.uid }).then(() => { this.deleterequest(buddy).then(() => { resolve(true); }) }).catch((err) => { reject(err); }) }).catch((err) => { reject(err); }) }) return promise; } deleterequest(buddy) { var promise = new Promise((resolve, reject) => { this.firereq.child(firebase.auth().currentUser.uid).orderByChild('sender').equalTo(buddy.uid).once('value', (snapshot) => { let somekey; for (var key in snapshot.val()) somekey = key; this.firereq.child(firebase.auth().currentUser.uid).child(somekey).remove().then(() => { resolve(true); }) }) .then(() => { }).catch((err) => { reject(err); }) }) return promise; } getmyfriends() { let friendsuid = []; this.firefriends.child(firebase.auth().currentUser.uid).on('value', (snapshot) => { let allfriends = snapshot.val(); this.myfriends = []; for (var i in allfriends) friendsuid.push(allfriends[i].uid); this.userservice.getallusers().then((users) => { this.myfriends = []; for (var j in friendsuid) for (var key in users) { if (friendsuid[j] === users[key].uid) { this.myfriends.push(users[key]); } } this.events.publish('friends'); }).catch((err) => { alert(err); }) }) } } |
Note that I am publishing an event called friends (which I have subscribed to in chats).
Wait.. There’s one more task. Open up chats.html and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!-- Generated template for the ChatsPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar color="hcolor"> <ion-title>Chats</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addbuddy()"> <ion-icon name="person-add"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-list no-lines> <ion-list-header> Requests </ion-list-header> <ion-item-sliding *ngFor="let item of myrequests"> <ion-item> <ion-avatar item-left> <img src="{{item.photoURL}}"> </ion-avatar> <h4>{{item.displayName}}</h4> </ion-item> <ion-item-options> <button ion-button color="secondary" (click)="accept(item)"> <ion-icon name="checkmark"></ion-icon> ADD </button> <button ion-button color="danger" (click)="ignore(item)"> <ion-icon name="trash"></ion-icon> NOPE </button> </ion-item-options> </ion-item-sliding> <ion-list-header> Friends </ion-list-header> <ion-item *ngFor="let item of myfriends" (click)="buddychat(item)"> <ion-avatar item-left> <img src={{item.photoURL}}> </ion-avatar> <h3>{{item.displayName}}</h3> </ion-item> </ion-list> </ion-content> |
This will show the friends in a list. Now run the app and if everything goes fine you should see the below screens.
What we have done so far:
We have created an app with authentication, profile management and a provision to add friends.
Going forth we will see how to use firebase and events to build a real-time chat system.
Hope this helped you guys. If you found this helpful kindly consider supporting me on patreon or by clicking the donate button and donating on paypal – Click here or just sharing this post on social media would help me too.
Thanks for reading. Peace.. 
