refact: refact fireblog-page and post card with edit and delete imple…

…mentation
Sye0w · Oct 4, 2024 · a7f6977 · a7f6977
1 parent b0fef5e
commit a7f6977
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/app/components/post-card/post-card.component.ts b/src/app/components/post-card/post-card.component.ts
@@ -1,14 +1,16 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { LikesComponent } from "../likes/likes/likes.component";
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { IBlog, IUser } from '../../services/blog.interface';
 import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service';
-// import { FireblogFacadeService } from '../../services/fireblog-facade.service';
+import { CommentsComponent } from "../comments/comments.component";
+import { PrependAtPipe } from '../../pipe/prepend-at.pipe';
 
 @Component({
   selector: 'app-post-card',
@@ -20,13 +22,17 @@ import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.s
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
-    MatIconModule
+    MatIconModule,
+    MatExpansionModule,
+    CommentsComponent,
+    PrependAtPipe
   ],
   templateUrl: './post-card.component.html',
   styleUrl: './post-card.component.scss'
 })
 export class PostCardComponent {
   @Input() blogPost!: IBlog;
+  @Output() commentToggled = new EventEmitter<string>();
 
   randomAvatarUrl: string = '';
   currentUser: IUser | null = null;
@@ -94,4 +100,10 @@ export class PostCardComponent {
         .catch(error => console.error('Error deleting post:', error));
     }
   }
+
+  toggleComments() {
+    if (this.blogPost.id) {
+      this.commentToggled.emit(this.blogPost.id);
+    }
+  }
 }
diff --git a/src/app/services/fireblog/fireblog-facade.service.ts b/src/app/services/fireblog/fireblog-facade.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { collectionData, docData } from '@angular/fire/firestore';
-import { collection, doc, addDoc, updateDoc, deleteDoc } from 'firebase/firestore';
+import { collection, doc, addDoc, updateDoc, deleteDoc, arrayUnion } from 'firebase/firestore';
 import { Firestore } from '@angular/fire/firestore';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IBlog, IUser } from '../blog.interface';
+import { IBlog, IComment, IUser } from '../blog.interface';
 import { Auth, User, onAuthStateChanged } from '@angular/fire/auth';
 
 @Injectable({
@@ -78,4 +78,11 @@ export class FireblogFacadeService {
     const blogPostDoc = doc(this.firestore, `fireblogPosts/${id}`);
     await deleteDoc(blogPostDoc);
   }
+
+  async addCommentToBlogPost(postId: string, comment: IComment): Promise<void> {
+    const blogPostDoc = doc(this.firestore, `fireblogPosts/${postId}`);
+    await updateDoc(blogPostDoc, {
+      comments: arrayUnion(comment)
+    });
+  }
 }