Connect The Client side messaging to the backend

client/secureChatIonic/app/app.ts

@@ -1,21 +1,24 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ionicBootstrap, Platform, Nav } from 'ionic-angular';
 import { StatusBar } from 'ionic-native';
 
-//Import our pages
-import { Home } from './pages/home/home';
-import { AllMessagesPage } from './pages/all-messages/all-messages';
-import { AuthLoginPage } from './pages/auth-login/auth-login';
-
 //Import our providers (services)
 import { AppSettings } from './providers/app-settings/app-settings';
+import { AppNotify } from './providers/app-notify/app-notify';
 import { AppAuth } from './providers/app-auth/app-auth';
-import { AppNotification } from './providers/app-notification/app-notification';
-import { AppLoading } from './providers/app-loading/app-loading';
+import { AppMessaging } from './providers/app-messaging/app-messaging';
+
+//Import our pages
+import { Home } from './pages/home/home';
+import { AuthLoginPage } from './pages/auth-login/auth-login';
+import { AllConversationsPage } from './pages/all-conversations/all-conversations';
+import { ConversationPage } from './pages/conversation/conversation';
 
+//Change detection needed for updating "this" AKA $scope
 @Component({
   templateUrl: 'build/app.html',
-  providers: [AppAuth, AppSettings, AppNotification, AppLoading]
+  providers: [AppSettings, AppAuth, AppMessaging, AppNotify],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 class MyApp {
   @ViewChild(Nav) nav: Nav;
@@ -28,7 +31,7 @@ class MyApp {
   noAuthPages: Array<{ title: string, component: any }>;
   authPages: Array<{ title: string, component: any }>;
 
-  constructor(public platform: Platform, public authProvider: AppAuth) {
+  constructor(public platform: Platform, private authProvider: AppAuth, private appNotify: AppNotify) {
     this.initializeApp();
 
     // used for an example of ngFor and navigation
@@ -39,11 +42,11 @@ class MyApp {
       { title: 'Login', component: AuthLoginPage }
     ];
     this.authPages = [
-      { title: 'Messages', component: AllMessagesPage }
+      { title: 'Messages', component: AllConversationsPage }
     ];
 
     //Set our root page
-    if (this.isLoggedIn()) this.rootPage = AllMessagesPage;
+    if (this.isLoggedIn()) this.rootPage = AllConversationsPage;
     else this.rootPage = Home;
 
   }
@@ -67,12 +70,34 @@ class MyApp {
 
   //Check if we are logged in
   isLoggedIn() {
-    return this.authProvider.authStatus();
+
+    //Get the auth Status
+    return this.authProvider.authStatus;
   }
 
   //Logout the user
   logout() {
+    //Start Loading
+    this.appNotify.startLoading('Logging out...');
+
     this.authProvider.logout();
+
+    //Store reference to this for timeout
+    let self = this;
+
+    //Stop Loading
+    this.appNotify.stopLoading().then(function() {
+      //Toast What Happened
+      //In a timeout to avoid colliding with loading
+      setTimeout(function() {
+
+        //Go back home
+        self.rootPage = Home;
+        self.nav.setRoot(Home);
+
+        self.appNotify.showToast('Logout Successful!');
+      }, 250)
+    });
   }
 }
 

client/secureChatIonic/app/pages/all-conversations/all-conversations.html

@@ -0,0 +1,40 @@
+<!--
+  Generated template for the AllMessagesPage page.
+
+  See http://ionicframework.com/docs/v2/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<!-- Navbar -->
+<ion-header>
+  <ion-navbar>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Messages</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content padding>
+
+  <!-- ngFor through all of our messages -->
+  <ion-list class="recentMessagesList">
+
+    <!-- If no Messages found -->
+    <div *ngIf="!hasConversations()">
+      <h2 class="centerText">No Conversations Found!</h2>
+      <h6 class="centerText">(Add some friends using the side menu)</h6>
+    </div>
+
+    <!-- If we have messages -->
+    <div *ngIf="hasConversations()">
+      <button ion-item class="messageItem" *ngFor="let conversation of convoList; let i = index;" (click)="convoClick(conversation)">
+          <!-- Our user name -->
+          <h3 class="messageUser">{{getConvoMembers(conversation)}}</h3>
+          <!-- Our message text -->
+          <div class="messageText">{{getConvoLatestText(conversation)}}</div>
+        </button>
+    </div>
+
+  </ion-list>
+</ion-content>

client/secureChatIonic/app/pages/all-messages/all-messages.scss → client/secureChatIonic/app/pages/all-conversations/all-conversations.scss

@@ -1,7 +1,3 @@
-.all-messages {
-
-}
-
 .recentMessagesList {
     width: 100%;
 }

client/secureChatIonic/app/pages/all-conversations/all-conversations.ts

@@ -0,0 +1,166 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+//Import to conversation view
+import { ConversationPage } from '../../pages/conversation/conversation';
+
+//Import our providers
+import { AppSettings } from '../../providers/app-settings/app-settings';
+import { AppNotify } from '../../providers/app-notify/app-notify';
+import { AppMessaging } from '../../providers/app-messaging/app-messaging';
+
+@Component({
+  templateUrl: 'build/pages/all-conversations/all-conversations.html'
+})
+export class AllConversationsPage {
+
+  //Our recent conversations
+  convoList: any;
+
+  //Our message Polling
+  pollingRequest: any;
+
+  constructor(private changeDetector: ChangeDetectorRef, private navCtrl: NavController, private appNotify: AppNotify, private appMessaging: AppMessaging) {
+
+    //polling done and requests done on very request
+  }
+
+  //Function called once the view is full loaded
+  ionViewDidEnter() {
+
+    //Start Loading
+    this.appNotify.startLoading('Getting Messages...');
+
+    //Get the messages on view load, and start a polling request
+
+    //Grab our user from localstorage
+    let user = JSON.parse(localStorage.getItem(AppSettings.shushItemName))
+
+    //Start polling to get messages
+    let request = this.appMessaging.conversationRequest(user.access_token);
+
+    //Get a reference to this
+    let self = this;
+
+    //Get our current conversation
+    request.subscribe(function(success) {
+      //Success!
+      //Stop loading
+      self.appNotify.stopLoading().then(function() {
+        self.messageGetSuccess(success);
+      });
+    }, function(error) {
+      //Error!
+      //Stop Loading
+      self.appNotify.stopLoading().then(function() {
+        self.messageGetError(error);
+      });
+
+    }, function() {
+      //Completed
+    })
+
+    //Start polling to get messages
+    let poll = this.appMessaging.conversationRequestPoll(user.access_token);
+
+    this.pollingRequest = poll.subscribe(function(success) {
+      //Success!
+      self.messageGetSuccess(success);
+    }, function(error) {
+      //Error!
+      self.messageGetError(error);
+    }, function() {
+      //Completed
+    });
+  }
+
+  //Functions to handle observable responses
+  messageGetSuccess(success) {
+    //Add our messages
+    this.appMessaging.conversations = success
+    this.convoList = this.appMessaging.conversations;
+
+    //Update the UI
+    this.changeDetector.detectChanges();
+  }
+
+  messageGetError(error) {
+
+    //reference to this
+    let self = this;
+
+    //Pass to Error Handler
+    this.appNotify.handleError(error, [{
+      status: 404,
+      callback: function() {
+        //Simply set all conversations to an empty array
+        self.convoList = [];
+
+        //Update the UI
+        self.changeDetector.detectChanges();
+      }
+    }]);
+  }
+
+  //Function to return if we have conversations
+  hasConversations() {
+    if (this.convoList && this.convoList.length == 0) return true;
+    else return true;
+  }
+
+  //Function to reutn the users in a conversations
+  getConvoMembers(convo: any) {
+
+    //Get the last message sender
+
+    //Get the names of the members spilt by spaces
+    let members = '';
+    for (let i = 0; i < convo.memberNames.length; ++i) {
+      members += convo.memberNames[i].split(' ')[0];
+      if (i < convo.memberNames.length - 1) members += ', ';
+    }
+
+    return this.shortenText(members, 20);
+
+  }
+
+  getConvoLatestText(convo: any) {
+
+    //Get the last message sender
+    let lastMessage = convo.message[convo.message.length - 1];
+
+    let lastSender = lastMessage.from.split(' ')[0];
+    let lastText = lastMessage.message;
+
+    return this.shortenText(lastSender + ': ' + lastText, 35)
+  }
+
+  //Function to return
+  //Get shortened text with elipses
+  shortenText(text: string, textMax) {
+
+    //First check if the text is already short
+    if (text.length < textMax) return text;
+    else {
+      //Get a substring of text
+      text = text.substring(0, (textMax - 3));
+      text = text + '...';
+      return text;
+    }
+  }
+
+  //Fucntion to run when an item is clicked
+  convoClick(convo) {
+    //Go to the conversation page, and pass the conversation id
+    this.navCtrl.push(ConversationPage, {
+      conversation: convo
+    });
+  }
+
+  //Run on page leave
+  ionViewWillLeave() {
+    //Stop
+    this.pollingRequest.unsubscribe();
+  }
+
+}