Pass query by event

app/src/components/hashtag/hashtag.ts

@@ -13,6 +13,6 @@ export class HashtagComponent {
   constructor(private appCtrl: App) {}
 
   search(hashtag) {
-    this.appCtrl.getRootNav().push(SearchPage, { keyword: hashtag });
+    this.appCtrl.getRootNav().push(SearchPage, { query: hashtag });
   }
 }

app/src/pages/search-results-tweets-popular/search-results-tweets-popular.ts

@@ -4,7 +4,8 @@ import {
   NavController,
   NavParams,
   Refresher,
-  InfiniteScroll
+  InfiniteScroll,
+  Events
 } from "ionic-angular";
 import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
 
@@ -14,25 +15,35 @@ import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
   templateUrl: "search-results-tweets-popular.html"
 })
 export class SearchResultsTweetsPopularPage {
-  keyword: string;
+  query: string;
   tweets = [];
 
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
-    private twitter: TwitterApiProvider
+    private twitter: TwitterApiProvider,
+    private events: Events
   ) {
-    this.keyword = navParams.data;
+    this.query = this.navParams.data;
+
+    this.events.subscribe("query:changed", query => {
+      if (query.length) {
+        this.twitter
+          .searchPopularTweets(query)
+          .then(res => (this.tweets = res));
+        this.query = query;
+      }
+    });
   }
 
   async ionViewDidLoad() {
-    if (this.keyword.length) {
-      this.tweets = await this.twitter.searchPopularTweets(this.keyword);
+    if (this.query.length) {
+      this.tweets = await this.twitter.searchPopularTweets(this.query);
     }
   }
 
   doRefresh(refresher: Refresher) {
-    this.twitter.searchPopularTweets(this.keyword).then(tweets => {
+    this.twitter.searchPopularTweets(this.query).then(tweets => {
       this.tweets = tweets;
       refresher.complete();
     });
@@ -40,7 +51,7 @@ export class SearchResultsTweetsPopularPage {
 
   loadMore(infiniteScroll: InfiniteScroll) {
     this.twitter
-      .searchPopularTweets(this.keyword, this.oldestTweet)
+      .searchPopularTweets(this.query, this.oldestTweet)
       .then(tweets => {
         this.tweets["statuses"] = this.tweets["statuses"].concat(
           tweets["statuses"]
@@ -60,10 +71,10 @@ export class SearchResultsTweetsPopularPage {
   }
 
   get enableRefresh() {
-    return this.keyword.length > 0;
+    return this.query.length > 0;
   }
 
   get enableInfiniteScroll() {
-    return this.keyword.length > 0;
+    return this.query.length > 0;
   }
 }

app/src/pages/search-results-tweets-recent/search-results-tweets-recent.ts

@@ -4,7 +4,8 @@ import {
   NavController,
   NavParams,
   Refresher,
-  InfiniteScroll
+  InfiniteScroll,
+  Events
 } from "ionic-angular";
 import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
 
@@ -14,25 +15,33 @@ import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
   templateUrl: "search-results-tweets-recent.html"
 })
 export class SearchResultsTweetsRecentPage {
-  keyword: string;
+  query: string;
   tweets = [];
 
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
-    private twitter: TwitterApiProvider
+    private twitter: TwitterApiProvider,
+    private events: Events
   ) {
-    this.keyword = navParams.data;
+    this.query = this.navParams.data;
+
+    this.events.subscribe("query:changed", query => {
+      if (query.length) {
+        this.twitter.searchRecentTweets(query).then(res => (this.tweets = res));
+        this.query = query;
+      }
+    });
   }
 
   async ionViewDidLoad() {
-    if (this.keyword.length) {
-      this.tweets = await this.twitter.searchRecentTweets(this.keyword);
+    if (this.query.length) {
+      this.tweets = await this.twitter.searchRecentTweets(this.query);
     }
   }
 
   doRefresh(refresher: Refresher) {
-    this.twitter.searchRecentTweets(this.keyword).then(tweets => {
+    this.twitter.searchRecentTweets(this.query).then(tweets => {
       this.tweets = tweets;
       refresher.complete();
     });
@@ -40,7 +49,7 @@ export class SearchResultsTweetsRecentPage {
 
   loadMore(infiniteScroll: InfiniteScroll) {
     this.twitter
-      .searchRecentTweets(this.keyword, this.oldestTweet)
+      .searchRecentTweets(this.query, this.oldestTweet)
       .then(tweets => {
         this.tweets["statuses"] = this.tweets["statuses"].concat(
           tweets["statuses"]
@@ -60,10 +69,10 @@ export class SearchResultsTweetsRecentPage {
   }
 
   get enableRefresh() {
-    return this.keyword.length > 0;
+    return this.query.length > 0;
   }
 
   get enableInfiniteScroll() {
-    return this.keyword.length > 0;
+    return this.query.length > 0;
   }
 }

app/src/pages/search-results-tweets-tabs/search-results-tweets-tabs.html

@@ -1,6 +1,6 @@
 <ion-content no-padding>
   <ion-tabs selectedIndex="0" tabsPlacement="top">
-    <ion-tab [root]="searchResultsRecentTweets" [rootParams]="keyword" tabTitle="Recent"></ion-tab>
-    <ion-tab [root]="searchResultsPopularTweets" [rootParams]="keyword" tabTitle="Popular"></ion-tab>
+    <ion-tab [root]="searchResultsRecentTweets" [rootParams]="query" tabTitle="Recent"></ion-tab>
+    <ion-tab [root]="searchResultsPopularTweets" [rootParams]="query" tabTitle="Popular"></ion-tab>
   </ion-tabs>
 </ion-content>

app/src/pages/search-results-tweets-tabs/search-results-tweets-tabs.scss

@@ -1,3 +1,2 @@
 page-search-results-tweets-tabs {
-    margin-top: 56px;
-}
+}

app/src/pages/search-results-tweets-tabs/search-results-tweets-tabs.ts

@@ -11,10 +11,10 @@ import { SearchResultsTweetsPopularPage } from "../search-results-tweets-popular
 export class SearchResultsTweetsTabsPage {
   searchResultsRecentTweets = SearchResultsTweetsRecentPage;
   searchResultsPopularTweets = SearchResultsTweetsPopularPage;
-  keyword: string;
+  query: string;
 
   constructor(public navCtrl: NavController, public navParams: NavParams) {
-    this.keyword = navParams.data;
+    this.query = this.navParams.data;
   }
 
   ionViewDidLoad() {}

app/src/pages/search-results-users/search-results-users.html

@@ -1,5 +1,5 @@
 <ion-content no-padding fullscreen>
-  <ion-refresher (ionRefresh)="doRefresh($event)" enabled="keyword.length">
+  <ion-refresher (ionRefresh)="doRefresh($event)" enabled="query.length">
     <ion-refresher-content pullingText=" Pull to refresh" refreshingText="Refreshing...">
     </ion-refresher-content>
   </ion-refresher>
@@ -18,7 +18,7 @@
     </ion-item>
   </ion-list>
 
-  <ion-infinite-scroll (ionInfinite)="loadMore($event)" enabled="keyword.length">
+  <ion-infinite-scroll (ionInfinite)="loadMore($event)" enabled="query.length">
     <ion-infinite-scroll-content loadingText="Loading more users..."></ion-infinite-scroll-content>
   </ion-infinite-scroll>
 </ion-content>

app/src/pages/search-results-users/search-results-users.scss

@@ -1,5 +1,4 @@
 page-search-results-users {
-  margin-top: 56px;
   .icon-verified,
   .icon-protected {
     font-size: 1em;

app/src/pages/search-results-users/search-results-users.ts

@@ -5,7 +5,8 @@ import {
   NavParams,
   Refresher,
   InfiniteScroll,
-  App
+  App,
+  Events
 } from "ionic-angular";
 import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
 import { ProfilePage } from "../profile/profile";
@@ -16,7 +17,7 @@ import { ProfilePage } from "../profile/profile";
   templateUrl: "search-results-users.html"
 })
 export class SearchResultsUsersPage {
-  keyword: string;
+  query: string;
   nextPage: number = 2;
   users: any[] = [];
 
@@ -24,14 +25,22 @@ export class SearchResultsUsersPage {
     public navCtrl: NavController,
     public navParams: NavParams,
     private appCtrl: App,
-    private twitter: TwitterApiProvider
+    private twitter: TwitterApiProvider,
+    private events: Events
   ) {
-    this.keyword = navParams.data;
+    this.query = this.navParams.data;
+
+    this.events.subscribe("query:changed", query => {
+      if (query.length) {
+        this.twitter.searchUsers(query).then(res => (this.users = res));
+        this.query = query;
+      }
+    });
   }
 
   async ionViewDidLoad() {
-    if (this.keyword.length) {
-      this.users = await this.twitter.searchUsers(this.keyword);
+    if (this.query.length) {
+      this.users = await this.twitter.searchUsers(this.query);
     }
   }
 
@@ -41,7 +50,7 @@ export class SearchResultsUsersPage {
   }
 
   doRefresh(refresher: Refresher) {
-    this.twitter.searchUsers(this.keyword).then(users => {
+    this.twitter.searchUsers(this.query).then(users => {
       this.users = users;
       this.nextPage = 2;
       refresher.complete();
@@ -49,7 +58,7 @@ export class SearchResultsUsersPage {
   }
 
   loadMore(infiniteScroll: InfiniteScroll) {
-    this.twitter.searchUsers(this.keyword, this.nextPage).then(users => {
+    this.twitter.searchUsers(this.query, this.nextPage).then(users => {
       this.users = this.users.concat(users);
       infiniteScroll.complete();
       this.nextPage = this.nextPage + 1;

app/src/pages/search/search.html

@@ -2,14 +2,12 @@
     <ion-navbar><button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
         </button>
-        <ion-title>Search</ion-title>
+        <ion-searchbar [(ngModel)]="query" (ionInput)="onInput()" debounce="500"></ion-searchbar>
     </ion-navbar>
 </ion-header>
 <ion-content no-padding>
-    <ion-searchbar [(ngModel)]="keyword" (ionInput)="onInput($event)" (ionCancel)="onCancel($event)" class="searchbar"
-        debounce="500"></ion-searchbar>
     <ion-tabs selectedIndex="0" tabsLayout="icon-start" tabsPlacement="bottom">
-        <ion-tab [root]="searchResultsTweets" [rootParams]="keyword" tabTitle="Tweets" tabIcon="logo-twitter"></ion-tab>
-        <ion-tab [root]="searchResultsUsers" [rootParams]="keyword" tabTitle="Users" tabIcon="person"></ion-tab>
+        <ion-tab [root]="searchResultsTweets" [rootParams]="query" tabTitle="Tweets" tabIcon="logo-twitter"></ion-tab>
+        <ion-tab [root]="searchResultsUsers" [rootParams]="query" tabTitle="Users" tabIcon="person"></ion-tab>
     </ion-tabs>
 </ion-content>

app/src/pages/search/search.scss

@@ -1,7 +0,0 @@
-.searchbar {
-    z-index: 10;
-}
-
-ion-content.content-md {
-    background-color: #f8f8f8;
-}

app/src/pages/search/search.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { NavController, NavParams } from "ionic-angular";
+import { NavController, NavParams, Events } from "ionic-angular";
 import { SearchResultsUsersPage } from "../search-results-users/search-results-users";
 import { SearchResultsTweetsTabsPage } from "../search-results-tweets-tabs/search-results-tweets-tabs";
 
@@ -10,13 +10,17 @@ import { SearchResultsTweetsTabsPage } from "../search-results-tweets-tabs/searc
 export class SearchPage {
   searchResultsTweets = SearchResultsTweetsTabsPage;
   searchResultsUsers = SearchResultsUsersPage;
-  keyword: string;
+  query: string;
 
-  constructor(public navCtrl: NavController, private navParams: NavParams) {
-    this.keyword = this.navParams.get("keyword");
+  constructor(
+    public navCtrl: NavController,
+    private navParams: NavParams,
+    private events: Events
+  ) {
+    this.query = this.navParams.get("query");
   }
 
-  onInput(event) {
-    console.log(event, this.keyword);
+  onInput() {
+    this.events.publish("query:changed", this.query.trim());
   }
 }