Updated comments tree - you can add comments

Updated stats - you can upvote/downvote Updated upload - you can upload a post
IulianOctavianPreda · May 14, 2020 · fc8532a · fc8532a
1 parent 16a00bd
commit fc8532a
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 23 deletions.
diff --git a/src/app/pages/post/components/comment-tree/comment-tree.component.html b/src/app/pages/post/components/comment-tree/comment-tree.component.html
@@ -7,11 +7,14 @@
         <ion-note slot="end"
             >{{ item.user.name }}
             <!-- <app-stats [stats]="item.stats" [size]="small" [fill]="clear"></app-stats -->
-            ></ion-note
-        >
+        </ion-note>
     </ion-item>
     <ion-item-group class="recursivePadding" *ngIf="!!item.reply && item.reply.length > 0">
         <!-- <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon> -->
         <app-comment-tree [comments]="item.reply"></app-comment-tree>
     </ion-item-group>
 </ng-container>
+<ion-item>
+    <ion-input type="text" [(ngModel)]="newComment"></ion-input>
+    <ion-button type="button" (click)="add()">Submit</ion-button>
+</ion-item>
diff --git a/src/app/pages/post/components/comment-tree/comment-tree.component.ts b/src/app/pages/post/components/comment-tree/comment-tree.component.ts
@@ -1,16 +1,24 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { CommentDetail } from "src/app/api/types/comment-detail";
 
 @Component({
     selector: "app-comment-tree",
     templateUrl: "./comment-tree.component.html",
-    styleUrls: ["./comment-tree.component.scss"]
+    styleUrls: ["./comment-tree.component.scss"],
 })
 export class CommentTreeComponent implements OnInit {
     @Input() comments: CommentDetail[];
     // @Input() depth = 0;
 
+    @Output() addComment: EventEmitter<string> = new EventEmitter<string>();
+
+    newComment = "";
     constructor() {}
 
     ngOnInit() {}
+
+    add() {
+        this.addComment.emit(this.newComment);
+        this.newComment = "";
+    }
 }
diff --git a/src/app/pages/post/components/stats/stats.component.html b/src/app/pages/post/components/stats/stats.component.html
@@ -1,11 +1,11 @@
 <div>
-    <ion-button size="{{ size }}" fill="{{ fill }}"
+    <ion-button size="{{ size }}" fill="{{ fill }}" (click)="upvote()"
         >{{ stats.upvotes }} <fa-icon [icon]="['fas', 'arrow-up']"></fa-icon
     ></ion-button>
-    <ion-button size="{{ size }}" fill="{{ fill }}"
+    <ion-button size="{{ size }}" fill="{{ fill }}" (click)="downvote()"
         >{{ stats.downvotes }} <fa-icon [icon]="['fas', 'arrow-down']"></fa-icon
     ></ion-button>
-    <ion-button size="{{ size }}" fill="{{ fill }}"
+    <!-- <ion-button size="{{ size }}" fill="{{ fill }}"
         ><fa-icon [icon]="['fas', 'share-alt-square']"></fa-icon
-    ></ion-button>
+    ></ion-button> -->
 </div>
diff --git a/src/app/pages/post/components/stats/stats.component.ts b/src/app/pages/post/components/stats/stats.component.ts
@@ -12,10 +12,18 @@ export class StatsComponent implements OnInit {
     @Input() size = "default";
     @Input() fill = "solid";
 
-    @Output() upvoteCallback: EventEmitter<void>;
-    @Output() downvoteCallback: EventEmitter<void>;
+    @Output() upvoteCallback: EventEmitter<void> = new EventEmitter<void>();
+    @Output() downvoteCallback: EventEmitter<void> = new EventEmitter<void>();
 
     constructor() {}
 
     ngOnInit() {}
+
+    upvote() {
+        this.upvoteCallback.emit();
+    }
+
+    downvote() {
+        this.downvoteCallback.emit();
+    }
 }
diff --git a/src/app/pages/post/post-detail/post-detail.component.html b/src/app/pages/post/post-detail/post-detail.component.html
@@ -10,8 +10,16 @@
                         <ion-img [src]="item.path" [alt]="item.title"></ion-img>
                     </div>
                     <ion-card-content>
-                        <app-stats [stats]="item.stats"></app-stats>
-                        <app-comment-tree [comments]="item.comments"></app-comment-tree>
+                        <app-stats
+                            [stats]="item.stats"
+                            (upvoteCallback)="upvote(event)"
+                            (downvoteCallback)="downvote(event)"
+                        ></app-stats>
+                        <ion-text>Comments:</ion-text>
+                        <app-comment-tree
+                            [comments]="item.comments"
+                            (addComment)="addComment($event)"
+                        ></app-comment-tree>
                     </ion-card-content>
                 </ion-card>
             </ion-col>

diff --git a/src/app/pages/post/post-detail/post-detail.component.ts b/src/app/pages/post/post-detail/post-detail.component.ts
@@ -17,4 +17,34 @@ export class PostDetailComponent implements OnInit {
     ngOnInit() {
         this.item = this.activatedRoute.snapshot.data.post;
     }
+
+    upvote(event) {
+        if (this.item["alreadyUpvoted"] === true) {
+        } else {
+            this.service
+                .upvote(this.item.id)
+                .toPromise()
+                .then((post) => {
+                    this.item.stats = post.stats;
+                    this.item["alreadyUpvoted"] = true;
+                });
+        }
+    }
+
+    downvote(event) {
+        if (this.item["alreadyDownvoted"] === true) {
+        } else {
+            this.service
+                .downvote(this.item.id)
+                .toPromise()
+                .then((post) => {
+                    this.item.stats = post.stats;
+                    this.item["alreadyDownvoted"] = true;
+                });
+        }
+    }
+
+    addComment(event) {
+        this.service.addComment(this.item.id, event);
+    }
 }
diff --git a/src/app/pages/post/post-overview/post-overview.component.html b/src/app/pages/post/post-overview/post-overview.component.html
@@ -1,6 +1,6 @@
 <ion-content>
     <ion-grid>
-        <ion-virtual-scroll [items]="items" [trackBy]="trackByFn" approxItemHeight="800px">
+        <ion-virtual-scroll [items]="items" [trackBy]="trackByFn" approxItemHeight="600px">
             <ion-row
                 class="ion-justify-content-center"
                 *virtualItem="let item; let itemBounds = bounds"
@@ -14,11 +14,17 @@
                         </ion-card-header>
                         <div [style]>
                             <a [routerLink]="['./', item.id]">
-                                <ion-img [src]="item.path" [alt]="item.title"></ion-img>
+                                <img [src]="item.path" [alt]="item.title" />
+
+                                <!-- <ion-img [src]="item.path" [alt]="item.title"></ion-img> -->
                             </a>
                         </div>
                         <ion-card-content>
-                            <app-stats [stats]="item.stats"></app-stats>
+                            <app-stats
+                                [stats]="item.stats"
+                                (upvoteCallback)="upvote(event, item.id)"
+                                (downvoteCallback)="downvote(event, item.id)"
+                            ></app-stats>
                         </ion-card-content>
                     </ion-card>
                 </ion-col>

diff --git a/src/app/pages/post/post-overview/post-overview.component.ts b/src/app/pages/post/post-overview/post-overview.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { IonInfiniteScroll, IonVirtualScroll } from "@ionic/angular";
+import { IonInfiniteScroll, IonVirtualScroll, Platform } from "@ionic/angular";
 
 import { PostApiService } from "../../../api/apis/posts.api";
 import { PostDetail } from "../../../api/types/post-detail";
@@ -16,9 +16,16 @@ export class PostOverviewComponent implements OnInit {
 
     items: PostDetail[] = [];
 
-    constructor(private service: PostApiService, private activatedRoute: ActivatedRoute) {}
+    constructor(
+        private service: PostApiService,
+        private activatedRoute: ActivatedRoute,
+        private platform: Platform
+    ) {}
 
     ngOnInit() {
+        // this.platform.backButton.subscribe(() => {
+        //     navigator["app"].exitApp();
+        // });
         this.items = this.activatedRoute.snapshot.data.initialPosts;
     }
 
@@ -37,6 +44,34 @@ export class PostOverviewComponent implements OnInit {
         }, 2000);
     }
 
+    upvote(event, id) {
+        const item = this.items.find((x) => x.id === id);
+        if (item["alreadyUpvoted"] === true) {
+        } else {
+            this.service
+                .upvote(id)
+                .toPromise()
+                .then((post) => {
+                    item.stats = post.stats;
+                    item["alreadyUpvoted"] = true;
+                });
+        }
+    }
+
+    downvote(event, id) {
+        const item = this.items.find((x) => x.id === id);
+        if (item["alreadyDownvoted"] === true) {
+        } else {
+            this.service
+                .downvote(id)
+                .toPromise()
+                .then((post) => {
+                    item.stats = post.stats;
+                    item["alreadyDownvoted"] = true;
+                });
+        }
+    }
+
     trackByFn(index, item) {
         if (!!item) {
             return item.id;

diff --git a/src/app/shared/upload/upload.component.html b/src/app/shared/upload/upload.component.html
@@ -27,7 +27,11 @@
                             <ion-img [src]="uploadedImage"> </ion-img>
                         </ion-item> -->
 
-                        <ion-button fill="solid" type="submit" (click)="upload()"
+                        <ion-button
+                            fill="solid"
+                            type="submit"
+                            (click)="upload()"
+                            [disabled]="!uploadedImage || !title"
                             >Submit</ion-button
                         >
                     </ion-card-content>

diff --git a/src/app/shared/upload/upload.component.ts b/src/app/shared/upload/upload.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
+import { Router } from "@angular/router";
 
 import { PostApiService } from "./../../api/apis/posts.api";
 import { CameraService } from "./../services/camera.service";
@@ -16,7 +17,8 @@ export class UploadComponent implements OnInit {
     constructor(
         private cameraService: CameraService,
         private sanitizer: DomSanitizer,
-        private postService: PostApiService
+        private postService: PostApiService,
+        private route: Router
     ) {}
 
     ngOnInit() {}
@@ -41,9 +43,12 @@ export class UploadComponent implements OnInit {
     }
 
     upload() {
-        this.postService.upload({
-            title: this.title,
-            path: this.uploadedImage,
-        });
+        if (!!this.title && !!this.uploadedImage) {
+            const id = this.postService.upload({
+                title: this.title,
+                path: this.uploadedImage,
+            });
+            this.route.navigate(["posts", id]);
+        }
     }
 }