Show quoted tweet

app/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { ProfilePage } from '../pages/profile/profile';
 import { ProfileHeaderComponent } from '../components/profile-header/profile-header';
 import { PipesModule } from '../pipes/pipes.module';
 import { WriteTweetPage } from '../pages/write-tweet/write-tweet';
+import { QuotedStatusComponent } from '../components/quoted-status/quoted-status';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { WriteTweetPage } from '../pages/write-tweet/write-tweet';
     TweetHeaderComponent,
     TweetBodyComponent,
     TweetActionsComponent,
-    ProfileHeaderComponent
+    ProfileHeaderComponent,
+    QuotedStatusComponent
   ],
   imports: [
     BrowserModule,

app/src/components/components.module.ts

@@ -5,19 +5,22 @@ 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';
+import { QuotedStatusComponent } from './quoted-status/quoted-status';
 @NgModule({
 	declarations: [FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
     TweetBodyComponent,
     TweetActionsComponent,
-    ProfileHeaderComponent],
+    ProfileHeaderComponent,
+    QuotedStatusComponent],
 	imports: [],
 	exports: [FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
     TweetBodyComponent,
     TweetActionsComponent,
-    ProfileHeaderComponent]
+    ProfileHeaderComponent,
+    QuotedStatusComponent]
 })
 export class ComponentsModule {}

app/src/components/quoted-status/quoted-status.html

@@ -0,0 +1,13 @@
+<!-- Generated template for the QuotedStatusComponent component -->
+<div class="quoted-tweet">
+  <div class="header">
+    <img src="{{ data.user.profile_image_url_https }}" alt="{{ data.user.name }}" class="avatar">
+    <span>{{ data.user.name }}</span>
+    <span class="twitter-handle">@{{ data.user.screen_name }}</span>
+    <span class="timestamp">{{ data.created_at | diffForHumans }}</span>
+  </div>
+  <div class="body">
+    <p [innerHTML]="data.full_text | replaceUrls: data.entities.urls | replaceHashtags: data.entities.hashtags"></p>
+    <img *ngIf="hasPhoto" src="{{ data.entities.media[0]['media_url_https'] }}" alt="Photo">
+  </div>
+</div>

app/src/components/quoted-status/quoted-status.scss

@@ -0,0 +1,31 @@
+quoted-status {
+    .quoted-tweet {
+        border: 1px solid #ccc;
+        border-radius: 3px;
+        padding: 5px;
+        margin: 5px 0 0 10px;
+    }
+    .header {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        color: #555;
+        font-size: 12px;
+        margin-bottom: 3px;
+        .avatar {
+            border-radius: 50%;
+            width: 28px;
+            margin: 3px 6px 3px 3px;
+        }
+        .twitter-handle {
+            color: #aaa;
+            font-weight: 250;
+            margin-left: 5px;
+        }
+        .timestamp {
+            margin-left: auto;
+            color: #aaa;
+            font-size: 10px;
+        }
+    }
+}

app/src/components/quoted-status/quoted-status.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the QuotedStatusComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'quoted-status',
+  templateUrl: 'quoted-status.html'
+})
+export class QuotedStatusComponent {
+
+  @Input() data: any[];
+
+  constructor() { }
+
+  get hasPhoto() {
+    return this.data["entities"]["media"] && this.data["entities"]["media"][0]["type"] == 'photo';
+  }
+
+}

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

@@ -2,4 +2,5 @@
 <div>
   <p [innerHTML]="text | replaceUrls: entities.urls | replaceHashtags: entities.hashtags"></p>
   <img *ngIf="hasPhoto" src="{{ entities.media[0]['media_url_https'] }}" alt="Photo" class="photo">
-</div>
+  <quoted-status *ngIf="data.quoted_status" [data]="data.quoted_status"></quoted-status>
+</div>

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

@@ -12,11 +12,18 @@ import { Component, Input } from '@angular/core';
 })
 export class TweetBodyComponent {
 
-  @Input() text: string;
-  @Input() entities: any[];
+  @Input() data: any[];
 
   constructor() {}
 
+  get text(): string {
+    return this.data["full_text"];
+  }
+
+  get entities(){
+    return this.data["entities"];
+  }
+
   get hasPhoto() {
     return this.entities["media"] && this.entities["media"][0]["type"] == 'photo';
   }

app/src/components/tweet/tweet.html

@@ -1,5 +1,5 @@
 <ion-item text-wrap>
   <tweet-header [user]="data.user" [tweetCreatedAt]="data.created_at"></tweet-header>
-  <tweet-body [text]="data.full_text" [entities]="data.entities"></tweet-body>
+  <tweet-body [data]="data"></tweet-body>
   <tweet-actions [data]="data"></tweet-actions>
 </ion-item>

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

@@ -64,6 +64,7 @@ export class TwitterApiProvider {
   public fetchUserTimeline(userId) {
     return this.client.get('statuses/user_timeline', { user_id: userId, include_entities: true, tweet_mode: "extended" })
       .then(res => {
+        console.log(res.data);
         return res.data;
       })
       .catch(err => {