From ac0974d41cb5343d5ef7c43c69909a38cfd23e3f Mon Sep 17 00:00:00 2001
From: Morgan McMillian <gilag@monkeystew.com>
Date: Sat, 10 Jun 2017 11:53:36 -0700
Subject: [PATCH] reformatted stream

---
 package.json                 | 133 ++++++++++++++++++-----------------
 src/app/app.module.ts        |   4 +-
 src/pages/stream/stream.html |  44 +++++++++---
 src/pipes/timeago/timeago.ts |  22 ++++++
 4 files changed, 126 insertions(+), 77 deletions(-)
 create mode 100644 src/pipes/timeago/timeago.ts

diff --git a/package.json b/package.json
index de50adf..486576a 100644
--- a/package.json
+++ b/package.json
@@ -1,68 +1,69 @@
 {
-    "name": "Goober",
-    "version": "0.0.1",
-    "author": "Ionic Framework",
-    "homepage": "http://ionicframework.com/",
-    "private": true,
-    "scripts": {
-        "clean": "ionic-app-scripts clean",
-        "build": "ionic-app-scripts build",
-        "lint": "ionic-app-scripts lint",
-        "ionic:build": "ionic-app-scripts build",
-        "ionic:serve": "ionic-app-scripts serve"
+  "name": "Goober",
+  "version": "0.0.1",
+  "author": "Ionic Framework",
+  "homepage": "http://ionicframework.com/",
+  "private": true,
+  "scripts": {
+    "clean": "ionic-app-scripts clean",
+    "build": "ionic-app-scripts build",
+    "lint": "ionic-app-scripts lint",
+    "ionic:build": "ionic-app-scripts build",
+    "ionic:serve": "ionic-app-scripts serve"
+  },
+  "dependencies": {
+    "@angular/common": "4.1.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/compiler-cli": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/http": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
+    "@ionic-native/core": "3.10.2",
+    "@ionic-native/splash-screen": "3.10.2",
+    "@ionic-native/status-bar": "3.10.2",
+    "@ionic/storage": "2.0.1",
+    "cordova-android": "^6.2.3",
+    "cordova-blackberry10": "^3.8.0",
+    "cordova-plugin-console": "^1.0.5",
+    "cordova-plugin-device": "^1.1.4",
+    "cordova-plugin-inappbrowser": "^1.7.1",
+    "cordova-plugin-splashscreen": "^4.0.3",
+    "cordova-plugin-statusbar": "^2.2.2",
+    "cordova-plugin-whitelist": "^1.3.1",
+    "cordova-windows": "^5.0.0",
+    "ionic-angular": "3.3.0",
+    "ionic-plugin-keyboard": "^2.2.1",
+    "ionicons": "3.0.0",
+    "moment": "^2.18.1",
+    "ng2-cordova-oauth": "0.0.8",
+    "pnut-butter": "^0.8.1",
+    "rxjs": "5.1.1",
+    "sw-toolbox": "3.6.0",
+    "zone.js": "0.8.11"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "1.3.7",
+    "@ionic/cli-plugin-cordova": "1.3.0",
+    "@ionic/cli-plugin-ionic-angular": "1.3.0",
+    "typescript": "2.3.3"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-console": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-whitelist": {},
+      "ionic-plugin-keyboard": {},
+      "cordova-plugin-inappbrowser": {}
     },
-    "dependencies": {
-        "@angular/common": "4.1.2",
-        "@angular/compiler": "4.1.2",
-        "@angular/compiler-cli": "4.1.2",
-        "@angular/core": "4.1.2",
-        "@angular/forms": "4.1.2",
-        "@angular/http": "4.1.2",
-        "@angular/platform-browser": "4.1.2",
-        "@angular/platform-browser-dynamic": "4.1.2",
-        "@ionic-native/core": "3.10.2",
-        "@ionic-native/splash-screen": "3.10.2",
-        "@ionic-native/status-bar": "3.10.2",
-        "@ionic/storage": "2.0.1",
-        "cordova-android": "^6.2.3",
-        "cordova-blackberry10": "^3.8.0",
-        "cordova-plugin-console": "^1.0.5",
-        "cordova-plugin-device": "^1.1.4",
-        "cordova-plugin-inappbrowser": "^1.7.1",
-        "cordova-plugin-splashscreen": "^4.0.3",
-        "cordova-plugin-statusbar": "^2.2.2",
-        "cordova-plugin-whitelist": "^1.3.1",
-        "cordova-windows": "^5.0.0",
-        "ionic-angular": "3.3.0",
-        "ionic-plugin-keyboard": "^2.2.1",
-        "ionicons": "3.0.0",
-        "ng2-cordova-oauth": "0.0.8",
-        "pnut-butter": "^0.8.1",
-        "rxjs": "5.1.1",
-        "sw-toolbox": "3.6.0",
-        "zone.js": "0.8.11"
-    },
-    "devDependencies": {
-        "@ionic/app-scripts": "1.3.7",
-        "@ionic/cli-plugin-cordova": "1.3.0",
-        "@ionic/cli-plugin-ionic-angular": "1.3.0",
-        "typescript": "2.3.3"
-    },
-    "description": "An Ionic project",
-    "cordova": {
-        "plugins": {
-            "cordova-plugin-console": {},
-            "cordova-plugin-device": {},
-            "cordova-plugin-splashscreen": {},
-            "cordova-plugin-statusbar": {},
-            "cordova-plugin-whitelist": {},
-            "ionic-plugin-keyboard": {},
-            "cordova-plugin-inappbrowser": {}
-        },
-        "platforms": [
-            "android",
-            "blackberry10",
-            "windows"
-        ]
-    }
-}
\ No newline at end of file
+    "platforms": [
+      "android",
+      "blackberry10",
+      "windows"
+    ]
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f8fb543..bbcc53d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { PostDetailsPage } from '../pages/post-details/post-details';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { IonicStorageModule } from '@ionic/storage';
+import { TimeagoPipe } from '../pipes/timeago/timeago';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { IonicStorageModule } from '@ionic/storage';
     ListPage,
     LoginPage,
     StreamPage,
-    PostDetailsPage
+    PostDetailsPage,
+    TimeagoPipe
   ],
   imports: [
     BrowserModule,
diff --git a/src/pages/stream/stream.html b/src/pages/stream/stream.html
index ce062a0..022352b 100644
--- a/src/pages/stream/stream.html
+++ b/src/pages/stream/stream.html
@@ -19,22 +19,46 @@
 <ion-content>
 
   <ion-list>
-    <ion-item *ngFor="let post of posts" (click)="showPostDetails(post)" text-wrap>
-      <ion-avatar item-start>
-        <img src="{{ post.user.content.avatar_image.link }}">
-      </ion-avatar>
-      <h1>{{ post.user.username }}</h1>
-      <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+    <ion-card *ngFor="let post of posts">
+      <ion-item>
+        <ion-avatar item-start>
+          <img src="{{ post.user.content.avatar_image.link }}">
+        </ion-avatar>
+        <h2>{{ post.user.name }}</h2>
+        <p>@{{ post.user.username }}</p>
+        <ion-note item-end>{{ post.created_at | timeago }}</ion-note>
+      </ion-item>
+      <ion-card-content>
+        <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+      </ion-card-content>
       <div *ngIf="post.raw">
         <div *ngFor="let r of post.raw">
           <div *ngIf="r.type == 'io.pnut.core.oembed'">
-            <ion-thumbnail>
-              <img src="{{ r.value.url }}">
-            </ion-thumbnail>
+            <img src="{{ r.value.url }}">
           </div>
         </div>
       </div>
-    </ion-item>
+      <ion-row>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="star"></ion-icon>
+            <div *ngIf="post.counts.bookmarks > 0">{{ post.counts.bookmarks }}</div>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="repeat"></ion-icon>
+            <div *ngIf="post.counts.reposts > 0">{{ post.counts.reposts }}</div>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="text"></ion-icon>
+            <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
+          </button>
+        </ion-col>
+      </ion-row>
+    </ion-card>
   </ion-list>
 
 </ion-content>
diff --git a/src/pipes/timeago/timeago.ts b/src/pipes/timeago/timeago.ts
new file mode 100644
index 0000000..60ac239
--- /dev/null
+++ b/src/pipes/timeago/timeago.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+/**
+ * Generated class for the TimeagoPipe pipe.
+ *
+ * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
+ * Angular Pipes.
+ */
+@Pipe({
+  name: 'timeago',
+})
+export class TimeagoPipe implements PipeTransform {
+  now: any;
+  /**
+   * Takes a value and makes it lowercase.
+   */
+  transform(value: string, ...args) {
+    this.now = moment(value).fromNow(true);
+    return this.now;
+  }
+}