Chat app with Ionic 3 & Firebase – Ep. 7 – Accepting and ignoring requests

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.

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);
    })
  }

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.

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; 
  }

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()

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; 
    })
  }

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.

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);
    })
  }

}

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.

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);
      })
    
    })
  }

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.

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);
      })
    
    })
  }  

}

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.

<!--
  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>

<!--

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>

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

</ion-avatar>

<h4>{{item.displayName}}</h4>

</ion-item>

<ion-item-options>

<ion-icon name="checkmark"></ion-icon>

ADD

</button>

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

</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..

Follow me

Liked it? Take a second to support admin on Patreon!

Yash Baxi

please help me with logout function of firebase
Generalzod

thanks for your videos it been very helpfull but my image cant upload i dont know why in the profile and profilepics
Generalzod

and is there a way the user can log on just once
after the first login it should auto login
Generalzod

and is it possible to see the every body profile on click
Indranil paul

raja bro… little change you code i think is good for app. Don’t mint. Thank you bro..

getmyfriends() {
let friendsuid = [];
this.firefriends.child(firebase.auth().currentUser.uid).on(‘value’, (snapshot) => {
let allfriends = snapshot.val();
this.myfriends = [];
for (var i in allfriends)
if (i != firebase.auth().currentUser.uid) {// reduce 1 loop..
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);
})

})
}
Angelo James Corsega

anyone can help me
with this error? im hopeless, the app is good but i got this error when i do ionic serve, theres nothing wrong with the codes ive checked it multiple times its same codes since i`d do copy and paste for that and is in the right file. please help me https://uploads.disquscdn.com/images/02ae75fdc1b71d7274191d43af319664cff69194adb56aca82a4f7750039f533.png
- Angelo James Corsega
  
  ive solved my own error by referring to the stackoverflow https://stackoverflow.com/questions/46717574/ionic-property-catch-does-not-exist-on-type-promiselikevoid.
  by adding () in .push and .set after .push() its look like this
  
  sendrequest(req: connreq) {
  var promise = new Promise((resolve, reject) => {
  this.firereq
  .child(req.recipient)
  .push().set({
  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().set({
  uid: buddy.uid
  }).then(() => {
  this.firefriends.child(buddy.uid).push().set({
  uid: firebase.auth().currentUser.uid
  }).then(() => {
  this.deleterequest(buddy).then(() => {
  resolve(true);
  })
  
  }).catch((err) => {
  reject(err);
  })
  }).catch((err) => {
  reject(err);
  })
  })
  return promise;
  }
  - Arkan Harni
    
    my dear friend please help me
    
    i have just one problems
    resolve(true);
    }).catch((err) => {
    reject(err);
    ====================================================
    addnewmessage(msg) {
    if (this.buddy) {
    var promise = new Promise((resolve, reject) => {
    this.firebuddychats.child(firebase.auth().currentUser.uid).child(this.buddy.uid).push({
    sentby: firebase.auth().currentUser.uid,
    message: msg,
    timestamp: firebase.database.ServerValue.TIMESTAMP
    }).then(() => {
    this.firebuddychats.child(this.buddy.uid).child(firebase.auth().currentUser.uid).push({
    sentby: firebase.auth().currentUser.uid,
    message: msg,
    timestamp: firebase.database.ServerValue.TIMESTAMP
    }).then(() => {
    resolve(true);
    }).catch((err) => {
    reject(err);
    })
    })
    })
    return promise;
    }
    }
    - UMESH SHELKE
      
      addnewmessage(msg) {
      if (this.buddy) {
      var promise = new Promise((resolve, reject) => {
      this.firebuddychats.child(firebase.auth().currentUser.uid).child(this.buddy.uid)
      .push().set({
      sentby: firebase.auth().currentUser.uid,
      message: msg,
      timestamp: firebase.database.ServerValue.TIMESTAMP
      }).then(() => {
      this.firebuddychats.child(this.buddy.uid).child(firebase.auth().currentUser.uid)
      .push().set({
      sentby: firebase.auth().currentUser.uid,
      message: msg,
      timestamp: firebase.database.ServerValue.TIMESTAMP
      }).then(() => {
      resolve(true);
      }).catch((err) => {
      reject(err);
      })
      })
      })
      return promise;
      }
      }
  - marcio Quiteque
    
    heyyy thanks alot!!!!!! it helped
- UMESH SHELKE
  
  use
  
  import {Observable} from ‘rxjs/Rx’;
marcio Quiteque

iis it possible to send a message to all your contacts at once!!!!!!!!!!11
Varnakulasingam Ginthozan

//Property ‘then’ does not exist on type ‘void’. please help me with this error

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();
})
}

T-Pub :)

The Techies' pub

Chat app with Ionic 3 & Firebase – Ep. 7 – Accepting and ignoring requests

Read previous post:

Chat app with Ionic 3 & Firebase – Ep. 6 – Sending requests