User profile

app/src/app/app.module.ts

@@ -19,6 +19,8 @@ import { TweetComponent } from '../components/tweet/tweet';
 import { TweetHeaderComponent } from '../components/tweet-header/tweet-header';
 import { TweetBodyComponent } from '../components/tweet-body/tweet-body';
 import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions';
+import { ProfilePage } from '../pages/profile/profile';
+import { ProfileHeaderComponent } from '../components/profile-header/profile-header';
 
 @NgModule({
   declarations: [
@@ -27,11 +29,13 @@ import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions
     SearchPage,
     SettingsPage,
     LoginPage,
+    ProfilePage,
     FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
     TweetBodyComponent,
-    TweetActionsComponent
+    TweetActionsComponent,
+    ProfileHeaderComponent
   ],
   imports: [
     BrowserModule,
@@ -45,7 +49,8 @@ import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions
     HomePage,
     SearchPage,
     SettingsPage,
-    LoginPage
+    LoginPage,
+    ProfilePage
   ],
   providers: [
     StatusBar,

app/src/components/components.module.ts

@@ -4,17 +4,20 @@ import { TweetComponent } from './tweet/tweet';
 import { TweetHeaderComponent } from './tweet-header/tweet-header';
 import { TweetBodyComponent } from './tweet-body/tweet-body';
 import { TweetActionsComponent } from './tweet-actions/tweet-actions';
+import { ProfileHeaderComponent } from './profile-header/profile-header';
 @NgModule({
 	declarations: [FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
     TweetBodyComponent,
-    TweetActionsComponent],
+    TweetActionsComponent,
+    ProfileHeaderComponent],
 	imports: [],
 	exports: [FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
     TweetBodyComponent,
-    TweetActionsComponent]
+    TweetActionsComponent,
+    ProfileHeaderComponent]
 })
 export class ComponentsModule {}

app/src/components/feed/feed.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
-import { InfiniteScroll, Refresher } from 'ionic-angular';
+import { Refresher } from 'ionic-angular';
 
 /**
  * Generated class for the FeedComponent component.

app/src/components/profile-header/profile-header.html

@@ -0,0 +1,17 @@
+<!-- Generated template for the ProfileHeaderComponent component -->
+<div>
+  <img src="{{ user.profile_banner_url }}" alt="{{ user.name }} - Banner" class="profile-banner">
+  <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="profile-picture">
+  <div padding>
+    <p class="profile-stats">{{ user.followers_count }} Followers | {{ user.friends_count }} Following</p>
+    <p class="profile-description" *ngIf="user.description">{{ user.description }}</p>
+    <div class="profile-infos">
+      <span class="user-location" *ngIf="user.location">
+        <ion-icon name="pin"></ion-icon>&nbsp;{{ user.location }}
+      </span>
+      <span class="user-website" *ngIf="user.url">
+        <ion-icon name="link"></ion-icon>&nbsp;{{ user.url }}
+      </span>
+    </div>
+  </div>
+</div>

app/src/components/profile-header/profile-header.scss

@@ -0,0 +1,3 @@
+profile-header {
+
+}

app/src/components/profile-header/profile-header.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the ProfileHeaderComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'profile-header',
+  templateUrl: 'profile-header.html'
+})
+export class ProfileHeaderComponent {
+
+  @Input() user: any;
+
+  constructor() {
+  }
+
+}

app/src/components/tweet-header/tweet-header.html

@@ -1,7 +1,7 @@
 <!-- Generated template for the TweetHeaderComponent component -->
 <div class="header-container">
-  <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar">
-  <div class="username">
+  <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar" (click)="showProfile(user.id)">
+  <div class="username" (click)="showProfile(user.id)">
       {{ user.name }}
       <span class="twitter-handle">@{{user.screen_name}}</span>
   </div>

app/src/components/tweet-header/tweet-header.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-
+import { NavController } from 'ionic-angular';
+import { ProfilePage } from '../../pages/profile/profile';
 /**
  * Generated class for the TweetHeaderComponent component.
  *
@@ -14,5 +15,11 @@ export class TweetHeaderComponent {
   @Input() user: any[];
   @Input() tweetCreatedAt: string;
 
-  constructor() {}
+  constructor(
+    public navCtrl: NavController
+  ) { }
+
+  showProfile(userId) {
+    this.navCtrl.push(ProfilePage, { userId });
+  }
 }

app/src/pages/home/home.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { HomePage } from './home';
+
+@NgModule({
+  declarations: [
+    HomePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(HomePage),
+  ],
+})
+export class HomePageModule {}

app/src/pages/home/home.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
-import { NavController, MenuController, InfiniteScroll } from 'ionic-angular';
+import { IonicPage, NavController, MenuController, InfiniteScroll } from 'ionic-angular';
 import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
 
+@IonicPage()
 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
@@ -38,7 +39,6 @@ export class HomePage {
   }
 
   loadMore(infiniteScroll: InfiniteScroll) {
-    console.log("loading more tweets now...");
     this.twitter.fetchHomeFeedSince(this.data[this.data.length - 1].id)
       .then(res => {
         this.data = this.data.concat(res.data);

app/src/pages/profile/profile.html

@@ -0,0 +1,19 @@
+<!--
+  Generated template for the ProfilePage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>{{ user.name }}</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+  <profile-header [user]="user"></profile-header>
+  <feed [data]="tweets" (onRefresh)="doRefresh($event)" (onLoadMore)="loadMore($event)"></feed>
+</ion-content>

app/src/pages/profile/profile.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ProfilePage } from './profile';
+
+@NgModule({
+  declarations: [
+    ProfilePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ProfilePage)
+  ],
+})
+export class ProfilePageModule {}

app/src/pages/profile/profile.scss

@@ -0,0 +1,3 @@
+page-profile {
+
+}

app/src/pages/profile/profile.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, InfiniteScroll } from 'ionic-angular';
+import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
+
+/**
+ * Generated class for the ProfilePage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-profile',
+  templateUrl: 'profile.html',
+})
+export class ProfilePage {
+
+  userId: string;
+  user: any = [];
+  tweets: any[];
+
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    private twitter: TwitterApiProvider
+  ) {
+  }
+
+  ionViewDidLoad() {
+    this.userId = this.navParams.get('userId');
+
+    this.twitter.fetchUser(this.userId)
+      .then(res => {
+        this.user = res;
+      });
+
+    this.twitter.fetchUserTimeline(this.userId)
+      .then(res => {
+        this.tweets = res;
+      })
+  }
+
+  doRefresh(refresher) {
+    this.twitter.fetchUserTimeline(this.userId)
+      .then(res => {
+        this.tweets = res.data;
+        refresher.complete();
+      })
+  }
+
+  loadMore(infiniteScroll: InfiniteScroll) {
+    this.twitter.fetchUserTimelineSince(this.userId, this.tweets[this.tweets.length - 1].id)
+      .then(res => {
+        this.tweets = this.tweets.concat(res.data);
+        infiniteScroll.complete();
+      })
+  }
+}

app/src/providers/twitter-api/twitter-api.ts

@@ -43,7 +43,6 @@ export class TwitterApiProvider {
   }
 
   public fetchHomeFeedSince(id) {
-    console.log("Making the request now...");
     return this.client.get('statuses/home_timeline', { max_id: id, count: 15 })
       .then(res => {
         return res;
@@ -52,4 +51,35 @@ export class TwitterApiProvider {
         console.log(err);
       });
   }
+
+  public fetchUser(userId) {
+    return this.client.get('users/lookup', { user_id: userId })
+      .then(res => {
+        return res.data[0];
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  public fetchUserTimeline(userId) {
+    return this.client.get('statuses/user_timeline', { user_id: userId })
+      .then(res => {
+        return res.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+
+  public fetchUserTimelineSince(userId, maxId) {
+    return this.client.get('statuses/user_timeline', { user_id: userId, max_id: maxId })
+      .then(res => {
+        return res.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
 }