Chat app with Ionic 3 & Firebase – Ep. 12 – Adding options to groups.

Hi Friends,

Hope you are all well. In this post let’s see how to add a couple of action sheets in our groups. These action sheets will have the options that can be performed inside a group.

I assume that you already have read the previous posts in this series and have a copy of the repo.

Let’s begin.

Screencast of this post.

 

The code for this post is available – here.

The complete code for this series is available – here. (Would highly appreciate it if you could leave a star to this repo).

Let’s continue from where we left off.

Create a new page called groupchat using the below command.

Now open up groups.ts file (in the pages directory) and in the openchat() function add the below code.

Note that the before navigating we are calling the getintogroup method in our groups provider.

Open up providers/groups.ts and add the below code.

Open up the newly created groupchat.ts file in the pages directory and add the below code.

Let’s break this down.

We are checking if the person who enters the group is the owner of that group. If he is the owner of the group then he is presented with the owner action sheet. If not, then he is presented the member action sheet and the associated options.

Now open up providers/groups.ts and add the below code.

The above method is to just get the ownership of the group through which the action sheet to be displayed is decided.

Now open up groupchat.html in pages/groupchat and add the below code.

This is to add a button to the top right corner (in the nav bar). Upon clicking this button we’ll be shown an action sheet with a few options (which will vary based on the person who has logged in and his relation to the group i.e., owner/member)

When a owner taps the menu on the groupchat page:

(First group is the name of the group in this case)

Screenshot_2017-09-20-23-28-52

When a member of the group taps the menu on the group chat page.

Screenshot_2017-09-20-23-31-06

So far, So good.

In our next post we’ll start writing code for all these options to work.

Thanks to all those who have been supporting me. If you found this helpful kindly consider supporting me on patreon by clicking here.

If you would like to donate to keep this site alive and the forth-coming series free, then kindly consider donating by clicking here.

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

Thanks for reading guys. Peace.. :)

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