refactor components

app/src/components/components.module.ts

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

app/src/components/feed/feed.scss

@@ -1,3 +0,0 @@
-feed {
-
-}

app/src/components/feed/feed.ts

@@ -1,5 +1,11 @@
-import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
-import { Refresher } from 'ionic-angular';
+import {
+  Component,
+  Input,
+  Output,
+  ChangeDetectionStrategy,
+  EventEmitter
+} from "@angular/core";
+import { Refresher } from "ionic-angular";
 
 /**
  * Generated class for the FeedComponent component.
@@ -8,17 +14,19 @@ import { Refresher } from 'ionic-angular';
  * Components.
  */
 @Component({
-  selector: 'feed',
-  templateUrl: 'feed.html',
+  selector: "feed",
+  templateUrl: "feed.html",
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FeedComponent {
+  @Input()
+  data: any[];
+  @Output()
+  onRefresh: EventEmitter<any> = new EventEmitter<any>();
+  @Output()
+  onLoadMore: EventEmitter<any> = new EventEmitter<any>();
 
-  @Input() data: any[];
-  @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
-  @Output() onLoadMore: EventEmitter<any> = new EventEmitter<any>();
-
-  constructor() { }
+  constructor() {}
 
   doRefresh(refresher: Refresher) {
     this.onRefresh.emit(refresher);

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

@@ -1,8 +1,8 @@
 <!-- Generated template for the ProfileHeaderComponent component -->
 <div>
   <div class="profile-banner" [style.background]="'url('+ user.profile_banner_url +')'">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
-      viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 300 100"
+      xml:space="preserve" width="100%" class="svg-triangle">
       <polygon points="0,75  0,100 300,100 300,99" fill="#FFFFFF" />
     </svg>
     <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar">
@@ -15,7 +15,8 @@
         <ion-icon name="pin"></ion-icon>&nbsp;{{ user.location }}
       </span>
       <span class="user-website" *ngIf="user.url">
-        <ion-icon name="link"></ion-icon>&nbsp;<span [innerHTML]="user.url | replaceUrls: user.entities.url.urls"></span>
+        <ion-icon name="link"></ion-icon>&nbsp;
+        <span [innerHTML]="user.url | replaceUrls: user.entities.url.urls"></span>
       </span>
     </div>
   </div>

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

@@ -1,19 +1,19 @@
 profile-header {
-    .profile-banner {
-        width: 100%;
-        height: calc(100vw * 0.333333333);
-        background-size: cover;
-        position: relative;
-        .svg-triangle {
-            position: absolute;
-            bottom: -1px;
-        }
+  .profile-banner {
+    width: 100%;
+    height: calc(100vw * 0.333333333);
+    background-size: cover;
+    position: relative;
+    .svg-triangle {
+      position: absolute;
+      bottom: -1px;
     }
-    .avatar {
-        border-radius: 50%;
-        box-shadow: 0px 0px 4px 0px #777;
-        position: absolute;
-        bottom: -10px;
-        left: 15px;
-    }
-}
+  }
+  .avatar {
+    border-radius: 50%;
+    box-shadow: 0px 0px 4px 0px #777;
+    position: absolute;
+    bottom: -10px;
+    left: 15px;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 
 /**
  * Generated class for the ProfileHeaderComponent component.
@@ -7,14 +7,12 @@ import { Component, Input } from '@angular/core';
  * Components.
  */
 @Component({
-  selector: 'profile-header',
-  templateUrl: 'profile-header.html'
+  selector: "profile-header",
+  templateUrl: "profile-header.html"
 })
 export class ProfileHeaderComponent {
+  @Input()
+  user: any;
 
-  @Input() user: any;
-
-  constructor() {
-  }
-
+  constructor() {}
 }

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

@@ -1,31 +1,31 @@
 quoted-status {
-    .quoted-tweet {
-        border: 1px solid #ccc;
-        border-radius: 3px;
-        padding: 5px;
-        margin: 5px 0 0 10px;
+  .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;
     }
-    .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;
-        }
+    .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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 
 /**
  * Generated class for the QuotedStatusComponent component.
@@ -7,17 +7,19 @@ import { Component, Input } from '@angular/core';
  * Components.
  */
 @Component({
-  selector: 'quoted-status',
-  templateUrl: 'quoted-status.html'
+  selector: "quoted-status",
+  templateUrl: "quoted-status.html"
 })
 export class QuotedStatusComponent {
+  @Input()
+  data: any[];
 
-  @Input() data: any[];
-
-  constructor() { }
+  constructor() {}
 
   get hasPhoto() {
-    return this.data["entities"]["media"] && this.data["entities"]["media"][0]["type"] == 'photo';
+    return (
+      this.data["entities"]["media"] &&
+      this.data["entities"]["media"][0]["type"] == "photo"
+    );
   }
-
 }

app/src/components/tweet-actions/tweet-actions.scss

@@ -1,23 +1,23 @@
 tweet-actions {
-    .actions-container {
-        display: flex;
-        flex-direction: row;
+  .actions-container {
+    display: flex;
+    flex-direction: row;
 
-        div {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 1;
-            text-align: center;
-            margin-top: 8px;
+    div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      flex-grow: 1;
+      text-align: center;
+      margin-top: 8px;
 
-            span {
-                margin-left: 5px;
-                font-size: 12px;
-                font-weight: 300;
-                color: #333;
-            }
-        }
+      span {
+        margin-left: 5px;
+        font-size: 12px;
+        font-weight: 300;
+        color: #333;
+      }
     }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 
 /**
  * Generated class for the TweetActionsComponent component.
@@ -7,13 +7,12 @@ import { Component, Input } from '@angular/core';
  * Components.
  */
 @Component({
-  selector: 'tweet-actions',
-  templateUrl: 'tweet-actions.html'
+  selector: "tweet-actions",
+  templateUrl: "tweet-actions.html"
 })
 export class TweetActionsComponent {
+  @Input()
+  data: any[];
 
-  @Input() data: any[];
-
-  constructor() { }
-
+  constructor() {}
 }

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

@@ -1,8 +1,8 @@
 tweet-body {
-    .photo {
-        margin-top: 5px;
-        padding: 2px;
-        border-radius: 3px;
-        border: 1px solid #dfdfdf;
-    }
-}
+  .photo {
+    margin-top: 5px;
+    padding: 2px;
+    border-radius: 3px;
+    border: 1px solid #dfdfdf;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 
 /**
  * Generated class for the TweetBodyComponent component.
@@ -7,25 +7,25 @@ import { Component, Input } from '@angular/core';
  * Components.
  */
 @Component({
-  selector: 'tweet-body',
-  templateUrl: 'tweet-body.html'
+  selector: "tweet-body",
+  templateUrl: "tweet-body.html"
 })
 export class TweetBodyComponent {
-
-  @Input() data: any[];
+  @Input()
+  data: any[];
 
   constructor() {}
 
   get status(): string {
-    if(this.data["retweeted_status"]) {
+    if (this.data["retweeted_status"]) {
       return this.data["retweeted_status"]["full_text"];
     } else {
       return this.data["full_text"];
     }
   }
 
-  get entities(){
-    if(this.data["retweeted_status"]) {
+  get entities() {
+    if (this.data["retweeted_status"]) {
       return this.data["retweeted_status"]["entities"];
     } else {
       return this.data["entities"];
@@ -33,7 +33,8 @@ export class TweetBodyComponent {
   }
 
   get hasPhoto() {
-    return this.entities["media"] && this.entities["media"][0]["type"] == 'photo';
+    return (
+      this.entities["media"] && this.entities["media"][0]["type"] == "photo"
+    );
   }
-
 }

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

@@ -2,8 +2,8 @@
 <div class="header-container">
   <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>
+    {{ user.name }}
+    <span class="twitter-handle">@{{user.screen_name}}</span>
   </div>
   <div class="timestamp">{{ tweetCreatedAt | diffForHumans }}</div>
   <ion-icon name="ios-arrow-down" class="options" (click)="showActions(user.id)"></ion-icon>

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

@@ -1,39 +1,39 @@
 tweet-header {
-    .header-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 4px;
-    }
+  .header-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 4px;
+  }
 
-    .avatar {
-        border-radius: 50%;
-        width: 32px;
-        height: 32px;
-        box-shadow: 0px 0px 4px 0px #777;
-        margin: 4px 8px 4px 4px;
-    }
+  .avatar {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    box-shadow: 0px 0px 4px 0px #777;
+    margin: 4px 8px 4px 4px;
+  }
 
-    .username {
-        display: flex;
-        flex-direction: column;
-        font-size: 13px;
-        font-weight: 500;
-        .twitter-handle {
-            color: #aaa;
-            font-size: 10px;
-            font-weight: 400;
-        }
+  .username {
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    font-weight: 500;
+    .twitter-handle {
+      color: #aaa;
+      font-size: 10px;
+      font-weight: 400;
     }
+  }
 
-    .timestamp {
-        color: #aaa;
-        font-size: 10px;
-        margin-left: auto;
-    }
+  .timestamp {
+    color: #aaa;
+    font-size: 10px;
+    margin-left: auto;
+  }
 
-    .options {
-        margin-left: 5px;
-        color: #666;
-    }
+  .options {
+    margin-left: 5px;
+    color: #666;
+  }
 }

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

@@ -1,7 +1,7 @@
-import { Component, Input } from '@angular/core';
-import { NavController, ActionSheetController } from 'ionic-angular';
-import { ProfilePage } from '../../pages/profile/profile';
-import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
+import { Component, Input } from "@angular/core";
+import { NavController, ActionSheetController } from "ionic-angular";
+import { ProfilePage } from "../../pages/profile/profile";
+import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
 /**
  * Generated class for the TweetHeaderComponent component.
  *
@@ -9,18 +9,20 @@ import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
  * Components.
  */
 @Component({
-  selector: 'tweet-header',
-  templateUrl: 'tweet-header.html'
+  selector: "tweet-header",
+  templateUrl: "tweet-header.html"
 })
 export class TweetHeaderComponent {
-  @Input() user: any[];
-  @Input() tweetCreatedAt: string;
+  @Input()
+  user: any[];
+  @Input()
+  tweetCreatedAt: string;
 
   constructor(
     public navCtrl: NavController,
     public actionSheetCtrl: ActionSheetController,
     private twitter: TwitterApiProvider
-  ) { }
+  ) {}
 
   showProfile(userId) {
     this.navCtrl.push(ProfilePage, { userId });
@@ -28,31 +30,34 @@ export class TweetHeaderComponent {
 
   showActions(userId) {
     let actionSheet = this.actionSheetCtrl.create({
-      title: '@' + this.user["screen_name"],
+      title: "@" + this.user["screen_name"],
       buttons: [
         {
-          text: 'Unfollow',
-          role: 'destructive',
+          text: "Unfollow",
+          role: "destructive",
           handler: () => {
             this.twitter.destroyFriendship(userId);
           }
-        }, {
-          text: 'Mute',
-          role: 'destructive',
+        },
+        {
+          text: "Mute",
+          role: "destructive",
           handler: () => {
             this.twitter.muteUser(userId);
           }
-        }, {
-          text: 'Block',
-          role: 'destructive',
+        },
+        {
+          text: "Block",
+          role: "destructive",
           handler: () => {
             this.twitter.blockUser(userId);
           }
-        }, {
-          text: 'Cancel',
-          role: 'cancel',
+        },
+        {
+          text: "Cancel",
+          role: "cancel",
           handler: () => {
-            console.log('Cancel clicked');
+            console.log("Cancel clicked");
           }
         }
       ]

app/src/components/tweet/tweet.scss

@@ -1,7 +1,7 @@
 tweet {
-    .retweet-info {
-        font-weight: 250;
-        font-size: 10px;
-        margin-bottom: 8px;
-    }
-}
+  .retweet-info {
+    font-weight: 250;
+    font-size: 10px;
+    margin-bottom: 8px;
+  }
+}

app/src/components/tweet/tweet.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
 
 /**
  * Generated class for the TweetComponent component.
@@ -7,17 +7,17 @@ import { Component, Input } from '@angular/core';
  * Components.
  */
 @Component({
-  selector: 'tweet',
-  templateUrl: 'tweet.html'
+  selector: "tweet",
+  templateUrl: "tweet.html"
 })
 export class TweetComponent {
-
-  @Input() data: any[];
+  @Input()
+  data: any[];
 
   constructor() {}
 
   get user() {
-    if(this.data["retweeted_status"]) {
+    if (this.data["retweeted_status"]) {
       return this.data["retweeted_status"]["user"];
     } else {
       return this.data["user"];
@@ -25,11 +25,10 @@ export class TweetComponent {
   }
 
   get createdAt() {
-    if(this.data["retweeted_status"]) {
+    if (this.data["retweeted_status"]) {
       return this.data["retweeted_status"]["created_at"];
     } else {
       return this.data["created_at"];
     }
   }
-
 }