feat(user) view comments added to posts and implement delete

firestore.rules

@@ -17,9 +17,19 @@ service cloud.firestore {
       allow delete: if request.auth != null && request.auth.uid == resource.data.postedBy;
     }
 
+    // Allow read and write access to comments for authorized users.
+    match /posts/{postId}/comments/{commentId} {
+      allow read, write: if request.auth != null;
+    }
+
     // Allow write access only to authenticated users for the "reports" collection
     match /reports/{reportId} {
       allow write: if request.auth != null;
     }
+
+    // Allow read and write access to notifications for authorized users.
+    match /users/{userId}/notifications/{notificationId} {
+      allow read, write: if request.auth != null;
+    }
   }
 }

src/app/components/auth/pages/login/login.page.ts

@@ -23,7 +23,6 @@ export class LoginPage implements OnInit {
         credentials.password
       );
       this.authService.userId = userCredential.user.uid;
-      console.log('Logged in user',userCredential);
       await this.loginForm.hideLoading();
       this.router.navigateByUrl('images');
     } catch (error) {

src/app/components/auth/pages/profile/profile.page.html

@@ -183,8 +183,28 @@ <h2>{{ fullNames || "devvscape_user" }}</h2>
   </ng-container>
 
   <ng-container *ngIf="selectedSegment === 'comments'">
-    <div class="no-comments">
-      Coming soon. Comment on some memes in the app repository to have them
+    <ion-list *ngIf="userPostsComments?.length > 0">
+      <ion-item-sliding *ngFor="let comment of userPostsComments">
+        <ion-item (click)="commentAction(comment)">
+          <ion-label>
+            <h3><b>{{ fullNames || "devvscape_user" }}</b></h3>
+            <p class="comment-body">{{ comment.text }}</p>
+            <p class="timestamp">{{ comment.createdAt | dateAgo }}</p>
+          </ion-label>
+        </ion-item>
+        <ion-item-options side="end">
+          <ion-item-option color="danger">
+            <ion-icon
+            slot="icon-only"
+            name="trash-outline"
+            (click)="deleteComment(comment)"
+          ></ion-icon>
+          </ion-item-option>
+        </ion-item-options>
+      </ion-item-sliding>
+    </ion-list>
+    <div class="no-comments" *ngIf="userPostsComments?.length === 0">
+      Comment on some memes in the app repository to have them
       here.
     </div>
   </ng-container>

src/app/components/auth/pages/profile/profile.page.scss

@@ -69,4 +69,8 @@ ion-avatar {
     #e2e3e4 100%
   );
   background-repeat: no-repeat;
+}
+
+.comment-body {
+  white-space: normal;
 }

src/app/components/auth/pages/profile/profile.page.ts

@@ -13,7 +13,7 @@ import { ProfileService } from 'src/app/core/services/profile.service';
 import { ProfileStore } from './profile.store';
 import { Auth, updateProfile } from '@angular/fire/auth';
 import { ImageService } from 'src/app/core/services/image.service';
-import { Image } from 'src/app/core/interface/image.interface';
+import { Comment, Image } from 'src/app/core/interface/image.interface';
 import {
   collection,
   deleteDoc,
@@ -39,7 +39,8 @@ export class ProfilePage implements OnDestroy, OnInit {
   selectedSegment = 'posts';
   // eslint-disable-next-line @typescript-eslint/member-ordering
   imageLoaded = false;
-  comments: any[];
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  userPostsComments: Comment[] = [];
 
   constructor(
     private auth: Auth,
@@ -51,7 +52,7 @@ export class ProfilePage implements OnDestroy, OnInit {
     private alertCtrl: AlertController,
     public toastCtrl: ToastController,
     private readonly profileStore: ProfileStore
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.currentUser = this.auth.currentUser.uid;
@@ -61,6 +62,7 @@ export class ProfilePage implements OnDestroy, OnInit {
         this.profileStore.setState(userProfile);
         this.fullNames = userProfile.fullName;
         this.fetchImages();
+        this.fetchUserPostComments();
       });
   }
 
@@ -70,6 +72,7 @@ export class ProfilePage implements OnDestroy, OnInit {
 
   refresh(ev) {
     this.fetchImages();
+    this.fetchUserPostComments();
     setTimeout(() => {
       ev.detail.complete();
     }, 3000);
@@ -92,7 +95,7 @@ export class ProfilePage implements OnDestroy, OnInit {
         {
           text: 'Cancel',
           role: 'cancel',
-          handler: () => { },
+          handler: () => {},
         },
         {
           text: 'Logout',
@@ -153,7 +156,7 @@ export class ProfilePage implements OnDestroy, OnInit {
     if (user) {
       try {
         await updateProfile(user, { displayName: newDisplayName });
-      } catch (error) { }
+      } catch (error) {}
     }
   }
 
@@ -201,19 +204,23 @@ export class ProfilePage implements OnDestroy, OnInit {
     return await alert.present();
   }
 
-  segmentChanged() { }
+  segmentChanged() {}
 
   async fetchImages() {
     if (this.selectedSegment === 'posts') {
       this.images = await this.imageService.getUserPosts();
-      console.log(this.images)
+      //console.log(this.images);
     } else if (this.selectedSegment === 'comments') {
-      this.comments = await this.imageService.getUserPostsComments();
-      console.log(this.comments)
+      this.fetchUserPostComments();
     } else if (this.selectedSegment === 'stars') {
+
     }
   }
 
+  async fetchUserPostComments(){
+    this.userPostsComments = await this.imageService.getUserPostsComments(this.currentUser);
+  }
+
   formatCommentCard(comment: any): string {
     return this.formatCommentCardSubtitle({ comment });
   }
@@ -240,16 +247,72 @@ export class ProfilePage implements OnDestroy, OnInit {
     return `${formattedTextWithLineBreaks}`;
   }
 
+  async commentAction(comment: Comment) {
+    //console.log(comment);
+    this.router.navigate(['image', comment.postId]);
+  }
+
+  async deleteComment(comment: Comment) {
+    if (this.currentUser === comment.postedBy) {
+      const confirm = await this.alertCtrl.create({
+        header: 'Delete',
+        message: 'Are you sure you want to delete this comment?',
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            handler: () => { },
+          },
+          {
+            text: 'Delete',
+            role: 'exit',
+            handler: async () => {
+              try {
+                await this.imageService.deleteComment(comment.postId,comment.id);
+
+                const toast = await this.toastCtrl.create({
+                  message: 'Your comment has been deleted from the app repository!',
+                  duration: 5000,
+                  position: 'bottom',
+                  color: 'danger',
+                });
+                await toast.present();
+
+                this.userPostsComments = null;
+                await this.fetchUserPostComments();
+              } catch (error) {
+                console.error('Error deleting comment:', error);
+                await this.presentErrorToast('Error deleting comment');
+              }
+            },
+          },
+        ],
+      });
+      await confirm.present();
+    } else {
+
+    }
+  }
+
+  async presentErrorToast(message: string): Promise<void> {
+    const toast = await this.toastCtrl.create({
+      message,
+      duration: 5000,
+      position: 'bottom',
+      color: 'danger',
+    });
+    await toast.present();
+  }
+
   async deleteImage(image: Image) {
     const confirm = this.alertCtrl.create({
       header: 'Delete',
-      message:
-        'About to delete a post. 🤠 Ready to hit `delete` on that post?',
+      message: 'About to delete a post. 🤠 Ready to hit `delete` on that post?',
       buttons: [
         {
           text: 'Cancel',
           role: 'cancel',
-          handler: () => { },
+          handler: () => {},
         },
         {
           text: 'Delete',

src/app/components/auth/pages/signup/signup.page.ts

@@ -29,7 +29,7 @@ export class SignupPage implements OnInit {
 
       const notification: Notification = {
         title: 'Welcome, Memelord!',
-        body: 'Congratulations, you have officially joined the league of the finest memers in the developer world. Prepare your keyboard for some epic coding and memeing adventures!',
+        body: 'Welcome to the elite league of developer memers! Get ready for epic coding and meme adventures!',
         isRead: false,
         type: 'newUser',
         userId: user.uid,

src/app/components/home/home.page.ts

@@ -165,7 +165,7 @@ export class HomePage implements OnInit, OnDestroy {
   }
 
   openImage(selectedImage: any): void {
-    console.log(selectedImage);
+    //console.log(selectedImage);
     // Open the selected image in the ImageDetailComponent or navigate to a new route
     // You can use a router or any other method to display the ImageDetailComponent
     // Pass the selectedImage data to the ImageDetailComponent
@@ -228,7 +228,7 @@ export class HomePage implements OnInit, OnDestroy {
           this.imageFile,
           this.postText.replace(/\n/g, '\\n'),
           user.uid,
-          user.displayName 
+          user.displayName
         );
 
         this.hideLoading();

src/app/components/image-details/image-details.component.ts

@@ -197,7 +197,7 @@ export class ImageDetailsComponent implements OnInit {
 
         const isCommentedByOwner = user.uid === image.postedBy;
 
-        let notificationMessage = isCommentedByOwner
+        const notificationMessage = isCommentedByOwner
           ? 'You added a comment on your post'
           : `${user.displayName} commented on your post`;
 
@@ -276,7 +276,7 @@ export class ImageDetailsComponent implements OnInit {
   }
 
   async downloadImage(image: Image): Promise<void> {
-    console.log(image);
+    //console.log(image);
     const permissionResult = await this.androidPermissions.checkPermission(
       this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
     );
@@ -358,7 +358,7 @@ export class ImageDetailsComponent implements OnInit {
             this.image = image;
           } else {
             this.errorMessage = 'Something wrong happen while loading the post';
-            this.router.navigateByUrl('images')
+            this.router.navigateByUrl('images');
           }
         })
         .catch((error) => {
@@ -416,12 +416,6 @@ export class ImageDetailsComponent implements OnInit {
                 const imageId = image.id;
                 const reason = data.reason;
 
-                console.log(
-                  'CurrentUid:' + currentUserUid,
-                  'imageId' + imageId,
-                  'reason' + reason
-                );
-
                 try {
                   await this.imageService.reportImage(
                     imageId,

src/app/components/image/image.component.ts

@@ -31,7 +31,7 @@ export class ImageComponent implements OnInit, OnDestroy {
     private androidPermissions: AndroidPermissions,
     private alertCtrl: AlertController,
     public toastCtrl: ToastController
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.currentUser = this.auth.currentUser.uid;
@@ -79,7 +79,7 @@ export class ImageComponent implements OnInit, OnDestroy {
   }
 
   openProfile(author: string) {
-    console.log(`Opening profile of ${author}`);
+    //console.log(`Opening profile of ${author}`);
   }
 
   openImage(id: string): void {
@@ -110,7 +110,7 @@ export class ImageComponent implements OnInit, OnDestroy {
   }
 
   toggleText(): void {
-    console.log('Working clicked');
+    //console.log('Working clicked');
     this.isTextTruncated = !this.isTextTruncated;
   }
 
@@ -132,7 +132,7 @@ export class ImageComponent implements OnInit, OnDestroy {
   }
 
   async downloadImage(image: Image): Promise<void> {
-    console.log(image);
+    //console.log(image);
     const permissionResult = await this.androidPermissions.checkPermission(
       this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
     );
@@ -145,12 +145,13 @@ export class ImageComponent implements OnInit, OnDestroy {
       if (!hasPermission.hasPermission) {
         const confirm = await this.alertCtrl.create({
           header: 'Permission Denied',
-          message: 'Time to unleash the memes! Storage access needed for some pixel partying',
+          message:
+            'Time to unleash the memes! Storage access needed for some pixel partying',
           buttons: [
             {
               text: 'OK',
               role: 'cancel',
-              handler: () => { },
+              handler: () => {},
             },
           ],
         });