delete posts

src/app/services/auth/auth.service.ts

@@ -18,7 +18,7 @@ export class AuthService {
     }
   }
 
-  getToken() {
+  getUser() {
     return this.auth.user;
   }
 

src/app/services/data/post.service.ts

@@ -10,19 +10,32 @@ import { user } from '@angular/fire/auth';
   providedIn: 'root'
 })
 export class PostService {
-
   constructor(private auth: AuthService, private afs: AngularFirestore) { }
 
   getFeed(length: Number, start: Number): Promise<Array<Post>> {
     return new Promise<Array<Post>>((resolve, reject) => {
+      let posts = Array<Post>();
+
       if (this.auth.checkAllowed()) {
-        this.afs.collection<Post>('post').valueChanges().subscribe(data => {
+        this.afs.collection<Post>('post').valueChanges({idField: 'id'}).subscribe(data => {
           data.forEach(i => {
             this.afs.doc((i as any).user).valueChanges().subscribe(user => {
-              i.user = user as User;
+              posts.push({
+                user: {
+                  username: (user as User).username,
+                  email: (user as User).email,
+                  picture: (user as User).picture,
+                  followed: (user as User).followed
+                },
+                content: i.content,
+                image: i.image,
+                likes: i.likes,
+                liked: i.liked,
+                id: i.id
+              })
             });
           });
-          resolve(data);
+          resolve(posts);
         });
       } else {
         reject()
@@ -31,13 +44,12 @@ export class PostService {
   }
 
   getPosts(username: String, lenght: Number, start: Number) {
-    console.log(username)
     return new Promise<Array<Post>>((resolve, reject) => {
       if (this.auth.checkAllowed()) {
         if (username == undefined) {
-          this.auth.getToken().subscribe(cred => {
+          this.auth.getUser().subscribe(cred => {
             this.afs.collection<User>('user', ref => ref.where('id', '==', cred?.uid)).valueChanges().subscribe(user => {
-              this.afs.collection<Post>('post', ref => ref.where('user', '==', this.afs.doc('/user/' + user[0].username).ref)).valueChanges().subscribe(data => {
+              this.afs.collection<Post>('post', ref => ref.where('user', '==', this.afs.doc('/user/' + user[0].username).ref)).valueChanges({idField:'id'}).subscribe(data => {
                 data.forEach(i => {
                   i.user = user[0] as User;
                 })
@@ -47,7 +59,7 @@ export class PostService {
           });
         } else {
           this.afs.collection<User>('user').doc(username as string).valueChanges().subscribe(user => {
-            this.afs.collection<Post>('post', ref => ref.where('user', '==', this.afs.doc('/user/' + username).ref)).valueChanges().subscribe(data => {
+            this.afs.collection<Post>('post', ref => ref.where('user', '==', this.afs.doc('/user/' + username).ref)).valueChanges({idField:'id'}).subscribe(data => {
               data.forEach(i => {
                 i.user = user as User;
               })
@@ -66,7 +78,7 @@ export class PostService {
     return new Promise<void>((resolve, reject) => {
       console.log('new post')
       if (this.auth.checkAllowed()) {
-        this.auth.getToken().subscribe(data => {
+        this.auth.getUser().subscribe(data => {
           this.afs.collection<User>('user', ref => ref.where('id', '==', data?.uid)).valueChanges().subscribe(user => {
             this.afs.collection('post').add({
               user: this.afs.doc('/user/' + user[0].username).ref,
@@ -82,4 +94,8 @@ export class PostService {
       }
     });
   }
+
+  removePost(id: String) {
+    return this.afs.doc('/post/'+id).delete();
+  }
 }

src/app/services/data/user.service.ts

@@ -16,7 +16,7 @@ export class UserService {
         if (username != undefined) {
           this.afs.collection<User>('user', ref => ref.where('username', '==', username)).valueChanges().subscribe(data => { resolve(data[0] as User) });
         } else {
-          this.auth.getToken().subscribe(cred => {
+          this.auth.getUser().subscribe(cred => {
             this.afs.collection<User>('user', ref => ref.where('id', '==', cred?.uid)).valueChanges().subscribe(user => { resolve(user[0]) })
           });
         }

src/app/shared/views/post/post.component.html

@@ -1,6 +1,9 @@
-<div class="post-container outline">
+<div [ngClass]="{'post-container':true, 'outline':true, 'deleted': deleted}">
     <app-small-user [user]="post?.user"></app-small-user>
     <div>{{post?.content}}</div>
     <img *ngIf="post?.image" [src]="post?.image" alt="">
-    <span [classList]="post?.liked ?  'liked likes' : 'likes'">{{post?.likes}}</span>
+    <div class="icons">
+        <span [classList]="post?.liked ?  'likes liked' : 'likes'">{{post?.likes}}</span>
+        <span (click)="remove()" [classList]="isOwned ?  'owned' : ''"></span>
+    </div>
 </div>

src/app/shared/views/post/post.component.scss

@@ -14,20 +14,46 @@
         border-radius: 4px;
     }
 
-    .likes {
+    .icons {
-        display: block;
+        display: flex;
-        margin: 10px auto;
+        margin: 10px;
-        width: 10px;
-        aspect-ratio: 1;
-    }
 
-    .likes::before {
+        span {
-        content: "❤️";
+            flex: 1;
-        filter: saturate(0);
+            text-align: center;
-    }
+            display: inline-block;
+            height: fit-content;
+        }
 
-    .likes.liked::before {
+        .likes::before {
-        filter: saturate(1) !important;
+            content: "❤️";
+            filter: saturate(0);
+        }
+
+        .likes.liked::before {
+            filter: saturate(1) !important;
+        }
+
+        .owned::before {
+            content: "❌";
+        }
     }
 }
 
+@keyframes delete {
+    0% {
+        transform: scaleY(1);
+        opacity: 100%;
+    }
+
+    100% {
+        transform: scaleY(0);
+        display: none;
+        opacity: 0%;
+    }
+}
+
+.deleted {
+    transform-origin: top center;
+    animation: delete 1s forwards;
+}

src/app/shared/views/post/post.component.ts

@@ -1,16 +1,41 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-
+import { CommonModule } from '@angular/common';
 import { SmallUserComponent } from '../small-user/small-user.component';
 import { Post } from '../../../../model/Post';
 import { NgIf } from '@angular/common';
+import { AuthService } from '../../../services/auth/auth.service';
+import { PostService } from '../../../services/data/post.service';
 
 @Component({
   selector: 'app-post',
   standalone: true,
-  imports: [SmallUserComponent, NgIf],
+  imports: [SmallUserComponent, NgIf, CommonModule],
   templateUrl: './post.component.html',
   styleUrl: './post.component.scss'
 })
-export class PostComponent {
+export class PostComponent implements OnInit {
+
   @Input() post: Post | undefined;
+
+  isOwned: boolean = false;
+  deleted: boolean = false;
+
+  constructor(private auth: AuthService, private postSv: PostService) { }
+
+  ngOnInit(): void {
+    this.auth.getUser().subscribe(user => {
+      this.isOwned = user?.email == this.post?.user.email;
+    });
+  }
+
+  remove() {
+    this.postSv.removePost(this.post?.id as String)
+      .then(() => {
+        this.deleted = true;
+        console.log(this.deleted);
+      })
+      .catch(() => {
+        alert("failed to delete post");
+      })
+  }
 }

src/model/Post.ts

@@ -6,4 +6,5 @@ export interface Post {
     image: String;
     likes: Number;
     liked: Boolean;
+    id: String;
 }