delete posts

This commit is contained in:
Benedek László 2024-04-29 19:24:58 +02:00
parent df27bf8d81
commit 8693c06757
7 changed files with 100 additions and 29 deletions

View File

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

View File

@ -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();
}
}

View File

@ -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]) })
});
}

View File

@ -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>

View File

@ -14,20 +14,46 @@
border-radius: 4px;
}
.likes {
display: block;
margin: 10px auto;
width: 10px;
aspect-ratio: 1;
}
.icons {
display: flex;
margin: 10px;
.likes::before {
content: "❤️";
filter: saturate(0);
}
span {
flex: 1;
text-align: center;
display: inline-block;
height: fit-content;
}
.likes.liked::before {
filter: saturate(1) !important;
.likes::before {
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;
}

View File

@ -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");
})
}
}

View File

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