private liking

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

@@ -7,8 +7,18 @@
     <span>{{ data.retweet_count | friendlyNumber }}</span>
   </div>
   <div class="likes" *ngIf="!data.private_tweet">
-    <ion-icon *ngIf="data.favorited" name="ios-heart" (click)="removeLike(data.id_str)" color="danger"></ion-icon>
-    <ion-icon *ngIf="!data.favorited" name="ios-heart-outline" (click)="like(data.id_str)"></ion-icon>
+    <span class="icon-stack" (click)="toggleLike(data.id_str)">
+      <ion-icon class="primary-icon" *ngIf="data.favorited" name="ios-heart" color="danger"></ion-icon>
+      <ion-icon class="primary-icon" *ngIf="!data.favorited" name="ios-heart-outline"></ion-icon>
+      <ion-icon class="secondary-icon" name="logo-twitter"></ion-icon>
+    </span>
     <span>{{ favoriteCount | friendlyNumber }}</span>
   </div>
+  <div class="private-likes" *ngIf="!data.private_tweet">
+    <span class="icon-stack" (click)="addPrivateLike(data.id_str)">
+      <ion-icon class="primary-icon" name="ios-heart-outline"></ion-icon>
+      <ion-icon class="secondary-icon" name="glasses"></ion-icon>
+    </span>
+    <span>{{ privateFavoriteCount | friendlyNumber }}</span>
+  </div>
 </div>

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

@@ -2,7 +2,6 @@ tweet-actions {
   .actions-container {
     display: flex;
     flex-direction: row;
-
     div {
       display: flex;
       flex-direction: row;
@@ -11,7 +10,6 @@ tweet-actions {
       flex-grow: 1;
       text-align: center;
       margin-top: 8px;
-
       span {
         margin-left: 5px;
         font-size: 12px;
@@ -19,5 +17,17 @@ tweet-actions {
         color: #333;
       }
     }
+    .icon-stack {
+      position: relative;
+      .secondary-icon {
+        font-size: 0.7em;
+        position: absolute;
+        bottom: 10%;
+        left: 50%;
+        background: #fff;
+        border-radius: 50%;
+        padding: 1px;
+      }
+    }
   }
 }

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

@@ -2,13 +2,9 @@ import { Component, Input, ChangeDetectorRef } from "@angular/core";
 import { TwitterApiProvider } from "../../providers/twitter-api/twitter-api";
 import { NavController } from "ionic-angular";
 import { WriteTweetPage } from "../../pages/write-tweet/write-tweet";
+import { P2pDatabaseGunProvider } from "../../providers/p2p-database-gun/p2p-database-gun";
+import { Vibration } from "@ionic-native/vibration";
 
-/**
- * Generated class for the TweetActionsComponent component.
- *
- * See https://angular.io/api/core/Component for more info on Angular
- * Components.
- */
 @Component({
   selector: "tweet-actions",
   templateUrl: "tweet-actions.html"
@@ -16,13 +12,20 @@ import { WriteTweetPage } from "../../pages/write-tweet/write-tweet";
 export class TweetActionsComponent {
   @Input()
   data: any[];
+  privateFavoriteCount: number = 0;
 
   constructor(
     private twitter: TwitterApiProvider,
     private ref: ChangeDetectorRef,
-    private navCtrl: NavController
+    private navCtrl: NavController,
+    private gun: P2pDatabaseGunProvider,
+    private vibration: Vibration
   ) {}
 
+  ngOnInit() {
+    this.getPrivateLikes(this.id);
+  }
+
   get favoriteCount() {
     if (this.data["retweeted_status"]) {
       return this.data["retweeted_status"]["favorite_count"];
@@ -39,26 +42,46 @@ export class TweetActionsComponent {
     }
   }
 
-  like(id: string): void {
-    if (!this.data["private_tweet"]) {
-      this.twitter.likeTweet(id).then(() => {
-        this.data["favorited"] = true;
-        this.data["favorite_count"]++;
-        this.ref.detectChanges();
-      });
-    }
+  private async getPrivateLikes(id: string) {
+    const likeEntry = await this.gun.getLikes(this.id);
+    this.privateFavoriteCount = likeEntry.likes;
+    this.ref.detectChanges();
+  }
+
+  addPrivateLike(id: string) {
+    this.vibration.vibrate([100, 50, 100]);
+    console.log(id);
+    this.gun.addLike(id).then(() => {
+      this.privateFavoriteCount++;
+      this.ref.detectChanges();
+    });
   }
 
-  removeLike(id: string): void {
-    if (!this.data["private_tweet"]) {
-      this.twitter.unlikeTweet(id).then(() => {
-        this.data["favorited"] = false;
-        this.data["favorite_count"]--;
-        this.ref.detectChanges();
-      });
+  toggleLike(id: string) {
+    this.vibration.vibrate([100, 50, 100]);
+    if (this.data["favorited"]) {
+      this.removeLike(id);
+    } else {
+      this.like(id);
     }
   }
 
+  private like(id: string): void {
+    this.twitter.likeTweet(id).then(() => {
+      this.data["favorited"] = true;
+      this.data["favorite_count"]++;
+      this.ref.detectChanges();
+    });
+  }
+
+  private removeLike(id: string): void {
+    this.twitter.unlikeTweet(id).then(() => {
+      this.data["favorited"] = false;
+      this.data["favorite_count"]--;
+      this.ref.detectChanges();
+    });
+  }
+
   retweetStatus(id: string): void {
     this.navCtrl.push(WriteTweetPage, { tweetId: id });
   }

app/src/providers/p2p-database-gun/p2p-database-gun.ts

@@ -76,4 +76,26 @@ export class P2pDatabaseGunProvider {
       return [];
     }
   }
+
+  public async addLike(id: string) {
+    const likeEntry = await this.getLikes(id);
+
+    const hashtags = this.gun.get(id).put({
+      likes: likeEntry.likes + 1
+    });
+
+    this.gun.get(this.osnPrefix + "/likes").set(hashtags);
+  }
+
+  public async getLikes(id: string) {
+    const likeEntry = await this.gun.get(this.osnPrefix + "/likes").get(id);
+
+    if (likeEntry === undefined) {
+      return {
+        likes: 0
+      };
+    } else {
+      return likeEntry;
+    }
+  }
 }