finish post component split from stream and thread pages

platforms/android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<manifest android:hardwareAccelerated="true" android:versionCode="603" android:versionName="0.6.3" package="com.monkeystew.goober_m" xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest android:hardwareAccelerated="true" android:versionCode="604" android:versionName="0.6.4" package="com.monkeystew.goober_m" xmlns:android="http://schemas.android.com/apk/res/android">
     <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
     <uses-permission android:name="android.permission.INTERNET" />
     <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">

platforms/android/app/src/main/res/xml/config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.monkeystew.goober_m" version="0.6.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.monkeystew.goober_m" version="0.6.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <feature name="FileChooser">
         <param name="android-package" value="com.megster.cordova.FileChooser" />
     </feature>

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { ThreadPage } from '../pages/thread/thread';
 import { SettingsPage } from '../pages/settings/settings';
 import { AboutPage } from '../pages/about/about';
 import { ProfilePage } from '../pages/profile/profile';
+import { PostComponent } from '../components/post/post';
 
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { IonicStorageModule } from '@ionic/storage';
@@ -33,7 +34,8 @@ import { ParserPipe } from '../pipes/parser/parser';
     TimeagoPipe,
     NewPostModal,
     PostMenu,
-    ParserPipe
+    ParserPipe,
+    PostComponent
   ],
   imports: [
     BrowserModule,

src/components/post/post.html

@@ -53,12 +53,12 @@
 
 <ion-row>
   <ion-col>
-    <button ion-button icon-left clear small block (click)="showReplyPost(post)">
+    <button ion-button icon-left clear small block (click)="showReplyPost(post,'reply')">
       <ion-icon name="ios-undo"></ion-icon>
     </button>
   </ion-col>
   <ion-col>
-    <button ion-button icon-left clear small block (click)="showQuotedPost(post)">
+    <button ion-button icon-left clear small block (click)="showReplyPost(post,'quote')">
       <ion-icon name="quote"></ion-icon>
     </button>
   </ion-col>

src/components/post/post.ts

@@ -1,4 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NavController, NavParams, ModalController, ToastController, PopoverController } from 'ionic-angular';
+import { ProfilePage } from '../../pages/profile/profile';
+import { ThreadPage } from '../../pages/thread/thread';
+import { LoginPage } from '../../pages/login/login';
+import { NewPostModal } from '../../pages/stream/new-post';
+import { PostMenu } from '../../pages/stream/post-menu';
+
+import * as pnut from 'pnut-butter';
 
 /**
  * Generated class for the PostComponent component.
@@ -12,11 +20,101 @@ import { Component } from '@angular/core';
 })
 export class PostComponent {
 
-  text: string;
+  @Input() public post: Object;
+  @Input() public hideImg: boolean;
+  @Input() public ccOnReply: boolean;
+  @Input() public myUsername: string;
 
-  constructor() {
-    console.log('Hello PostComponent Component');
-    this.text = 'Hello World';
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+    public modalCtrl: ModalController, public toastCtrl: ToastController,
+    public popoverCtrl: PopoverController) {}
+
+  fetchThread(threadid) {
+    pnut.thread(threadid, {include_deleted: 0, include_raw: 1, count: 140}).then(res => {
+      if (res.meta.code === 401) {
+        // this.storage.clear();
+        this.navCtrl.setRoot(LoginPage);
+      } else {
+        this.navCtrl.push(ThreadPage, {posts: res.data, me: this.myUsername});
+      }
+    });
+  }
+
+  showImage(url) {
+    window.open(url, '_system');
+  }
+
+  showProfile(user) {
+    this.navCtrl.push(ProfilePage, {user: user});
+  }
+
+  showReplyPost(postData, repType) {
+    let newPostModal = this.modalCtrl.create(NewPostModal, {
+      type: repType,
+      post: postData,
+      me: this.myUsername,
+      cc: this.ccOnReply});
+    newPostModal.present();
+  }
+
+  repost(postid, reposted) {
+    if (reposted) {
+      pnut.deleteRepost(postid).then(res => {
+        this.updatePost(res.data.id);
+        this.presentToast("Repost updated.");
+      }).catch(err => {
+        console.log(err);
+      });
+    } else {
+      pnut.repost(postid).then(res => {
+        this.updatePost(res.data.id);
+        this.presentToast("Repost updated.");
+      }).catch(err => {
+        console.log(err);
+      });
+    }
+  }
+
+  bookmark(postid, bookmarked) {
+    if (bookmarked) {
+      pnut.deleteBookmark(postid).then(res => {
+        this.updatePost(res.data.id);
+        this.presentToast("Bookmark updated.");
+      }).catch(err => {
+        console.log(err);
+      });
+    } else {
+      pnut.bookmark(postid).then(res => {
+        this.updatePost(res.data.id);
+        this.presentToast("Bookmark updated.");
+      }).catch(err => {
+        console.log(err);
+      });
+    }
+  }
+
+  updatePost(postid) {
+    pnut.post(postid, {include_raw: 1}).then(res => {
+      this.post = res.data;
+    }).catch(err => {
+      console.log(err);
+    });
+  }
+
+  presentToast(text) {
+    let toast = this.toastCtrl.create({
+      position: 'top',
+      message: text,
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  presentPostMenu(myEvent, postData) {
+    let popover = this.popoverCtrl.create(PostMenu, {
+      post: postData,
+      me: this.myUsername});
+    popover.present({ev: myEvent});
   }
 
 }

src/pages/stream/stream.html

@@ -24,7 +24,8 @@
 
   <ion-list>
     <ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
-      <ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
+      <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
+      <!-- <ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
         <ion-avatar item-start (click)="showProfile(post.user)">
           <img src="{{ post.user.content.avatar_image.link }}">
         </ion-avatar>
@@ -106,7 +107,7 @@
             <ion-icon name="more"></ion-icon>
           </button>
         </ion-col>
-      </ion-row>
+      </ion-row> -->
     </ion-card>
   </ion-list>
 

src/pages/stream/stream.ts

@@ -1,11 +1,8 @@
 import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { NavController, NavParams, ModalController, Content, ToastController, PopoverController } from 'ionic-angular';
-import { ThreadPage } from '../thread/thread';
+import { NavController, NavParams, ModalController, Content } from 'ionic-angular';
 import { Storage } from '@ionic/storage';
 import { Events } from 'ionic-angular';
 import { LoginPage } from '../login/login';
-import { ProfilePage } from '../profile/profile';
-import { PostMenu } from '../stream/post-menu';
 import { NewPostModal } from '../stream/new-post';
 
 import * as pnut from 'pnut-butter';
@@ -36,10 +33,9 @@ export class StreamPage {
   ccOnReply: boolean = false;
   hideImg: boolean = false;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController,
-    private changeDetectorRef: ChangeDetectorRef, public toastCtrl: ToastController, private storage: Storage,
-    public popoverCtrl: PopoverController, public events: Events) {
-    // console.log(JSON.stringify(navParams));
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+    public modalCtrl: ModalController, private storage: Storage,
+    private changeDetectorRef: ChangeDetectorRef, public events: Events) {
 
     this.storage.get('cc').then((val) => {
       this.ccOnReply = val;
@@ -212,17 +208,6 @@ export class StreamPage {
     return pdata;
   }
 
-  fetchThread(threadid) {
-    pnut.thread(threadid, {include_deleted: 0, include_raw: 1, count: 140}).then(res => {
-      if (res.meta.code === 401) {
-        this.storage.clear();
-        this.navCtrl.setRoot(LoginPage);
-      } else {
-        this.navCtrl.push(ThreadPage, {posts: res.data, me: this.myUsername});
-      }
-    });
-  }
-
   fetchMyPosts() {
     console.log('-- fetching mentions --');
     this.fetcher('me', {include_raw: 1, count: 40}).then(res => {
@@ -239,97 +224,11 @@ export class StreamPage {
     });
   }
 
-  bookmark(postid, bookmarked) {
-    if (bookmarked) {
-      pnut.deleteBookmark(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Bookmark updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    } else {
-      pnut.bookmark(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Bookmark updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    }
-  }
-
-  repost(postid, reposted) {
-    if (reposted) {
-      pnut.deleteRepost(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Repost updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    } else {
-      pnut.repost(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Repost updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    }
-  }
-
-  updatePost(postid) {
-    pnut.post(postid, {include_raw: 1}).then(res => {
-      for (var i = 0; i < this.posts.length; i++) {
-        if (this.posts[i]['id'] === postid) {
-          this.posts[i] = res.data;
-          break;
-        }
-      }
-    }).catch(err => {
-      console.log(err);
-    });
-  }
-
   showNewPost() {
     let newPostModal = this.modalCtrl.create(NewPostModal, {me: this.myUsername});
     newPostModal.present();
   }
 
-  showReplyPost(postData) {
-    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'reply', post: postData, me: this.myUsername, cc: this.ccOnReply});
-    newPostModal.present();
-  }
-
-  showQuotedPost(postData) {
-    console.log(postData);
-    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'quote', post: postData, me: this.myUsername, cc: this.ccOnReply});
-    newPostModal.present();
-  }
-
-  showImage(url) {
-    window.open(url, '_system');
-  }
-
-  showProfile(user) {
-    this.navCtrl.push(ProfilePage, {user: user});
-  }
-
-  presentToast(text) {
-    let toast = this.toastCtrl.create({
-      position: 'top',
-      message: text,
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  presentPostMenu(myEvent, postData) {
-    let popover = this.popoverCtrl.create(PostMenu, {post: postData, me: this.myUsername});
-    popover.present({ev: myEvent});
-  }
-
   scrollToTop() {
     this.content.scrollToTop();
   }

src/pages/thread/thread.html

@@ -15,66 +15,11 @@
 
 </ion-header>
 
-
 <ion-content>
 
   <ion-list>
     <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 right>
-          <div text-right>
-            {{ post.created_at | timeago }}<br/>
-            {{ post.source.name }}
-          </div>
-        </ion-note>
-      </ion-item>
-      <ion-card-content>
-        <div *ngIf="post.is_deleted; else renderBlock"></div>
-        <ng-template #renderBlock >
-          <div [innerHTML]="post.content.html | parser"></div>
-        </ng-template>
-      </ion-card-content>
-      <div *ngIf="post.raw">
-        <div *ngFor="let r of post.raw">
-          <div *ngIf="r.type == 'io.pnut.core.oembed'">
-            <img src="{{ r.value.url }}">
-          </div>
-        </div>
-      </div>
-      <ion-row>
-        <ion-col>
-          <button ion-button icon-left clear small block (click)="showReplyPost(post)">
-            <ion-icon name="ios-undo"></ion-icon>
-          </button>
-        </ion-col>
-        <ion-col>
-          <button ion-button icon-left clear small block (click)="showQuotedPost(post)">
-            <ion-icon name="quote"></ion-icon>
-          </button>
-        </ion-col>
-        <ion-col>
-          <button ion-button icon-left clear small block (click)="bookmark(post.id, post.you_bookmarked)">
-            <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 (click)="repost(post.id, post.you_reposted)">
-            <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 (click)="presentPostMenu($event, post)">
-            <ion-icon name="more"></ion-icon>
-          </button>
-        </ion-col>
-      </ion-row>
+      <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
     </ion-card>
   </ion-list>
 

src/pages/thread/thread.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { NavController, NavParams, ModalController, ToastController, PopoverController } from 'ionic-angular';
-import { NewPostModal } from '../stream/new-post';
-import { PostMenu } from '../stream/post-menu';
+import { NavController, NavParams } from 'ionic-angular';
+import { Storage } from '@ionic/storage';
 
 import * as pnut from 'pnut-butter';
 
@@ -20,89 +19,22 @@ export class ThreadPage {
   title: string;
   posts: Array<Object> = [];
   myUsername: string;
+  hideImg: boolean = false;
+  ccOnReply: boolean = false;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController,
-    public popoverCtrl: PopoverController, public toastCtrl: ToastController) {
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+    private storage: Storage) {
     this.posts = this.navParams.data.posts;
     this.myUsername = this.navParams.data.me;
-  }
 
-  showReplyPost(postData) {
-    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'reply', post: postData});
-    newPostModal.present();
-  }
-
-  showQuotedPost(postData) {
-    console.log(postData);
-    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'quote', post: postData});
-    newPostModal.present();
-  }
-
-  bookmark(postid, bookmarked) {
-    if (bookmarked) {
-      pnut.deleteBookmark(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Bookmark updated.");
-      }).catch(err => {
-        console.log(err);
+    this.storage.get('hideimg').then((val) => {
+      this.hideImg = val;
     });
-    } else {
-      pnut.bookmark(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Bookmark updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    }
-  }
 
-  repost(postid, reposted) {
-    if (reposted) {
-      pnut.deleteRepost(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Repost updated.");
-      }).catch(err => {
-        console.log(err);
+    this.storage.get('cc').then((val) => {
+      this.ccOnReply = val;
     });
-    } else {
-      pnut.repost(postid).then(res => {
-        console.log(res);
-        this.updatePost(res.data.id);
-        this.presentToast("Repost updated.");
-      }).catch(err => {
-        console.log(err);
-      });
-    }
-  }
 
-  updatePost(postid) {
-    pnut.post(postid, {include_raw: 1}).then(res => {
-      for (var i = 0; i < this.posts.length; i++) {
-        if (this.posts[i]['id'] === postid) {
-          this.posts[i] = res.data;
-          break;
-        }
-      }
-    }).catch(err => {
-      console.log(err);
-    });
-  }
-
-  presentPostMenu(myEvent, postData) {
-    let popover = this.popoverCtrl.create(PostMenu, {post: postData, me: this.myUsername});
-    popover.present({ev: myEvent});
-  }
-
-  presentToast(text) {
-    let toast = this.toastCtrl.create({
-      position: 'top',
-      message: text,
-      duration: 2000
-    });
-    toast.present();
   }
 
 }