From af54297b5da087321bbbc69f41a9744e464f50c2 Mon Sep 17 00:00:00 2001 From: Silas Owu Date: Wed, 2 Oct 2024 10:07:44 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20update=20ui=20fireblog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create-post/create-post.component.html | 28 +++-- .../create-post/create-post.component.scss | 101 +++++++----------- .../create-post/create-post.component.ts | 43 +++++++- src/app/components/likes/likes.component.html | 1 + .../fireblog/fireblog-facade.service.ts | 45 ++++++-- .../fireblog-page.component.scss | 1 + src/assets/images/icon-edit.svg | 2 +- 7 files changed, 134 insertions(+), 87 deletions(-) create mode 100644 src/app/components/likes/likes.component.html diff --git a/src/app/components/create-post/create-post.component.html b/src/app/components/create-post/create-post.component.html index 713fd14..cac54fe 100644 --- a/src/app/components/create-post/create-post.component.html +++ b/src/app/components/create-post/create-post.component.html @@ -1,21 +1,19 @@
-
+
- User avatar - -
-
- - + +
+ +
+
+ + +
+ +
diff --git a/src/app/components/create-post/create-post.component.scss b/src/app/components/create-post/create-post.component.scss index 0b456b9..0dc90b2 100644 --- a/src/app/components/create-post/create-post.component.scss +++ b/src/app/components/create-post/create-post.component.scss @@ -2,85 +2,62 @@ section{ display: flex; - gap: 4rem; + gap: 2.75rem; position: fixed !important; padding: 1.25rem; bottom: 0; background-color: #fff; width: 100%; - height: 7rem; left: 0; right: 0; - height: 7rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - .footer-grp{ + .content{ display: flex; - } - - .profile { - display: flex; - align-items: center; - gap: 12px; - - .profile img { - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; - } - - - .edit-profile { - background: none; - border: none; + gap: 3rem; + .profile{ + display: flex; + gap: .25rem; cursor: pointer; - color: $blueviolet; - transition: color 0.3s ease; - position: relative; - bottom: 1.25rem; - right: .75rem; - } + #profile-img{ + width: 3rem; + height: 3rem; + } + } } - - .post-input { + .content-grp{ display: flex; - gap: .75rem; - - textarea { - flex-grow: 1; - min-height: 80px; - width: 30rem; - padding: .75rem; - border: 1px solid #e0e0e0; - border-radius: 4px; - resize: vertical; - font-family: inherit; - font-size: 14px; - } - - textarea:focus { + flex-direction: column; + gap: .5rem; + width: 100%; + textarea{ + resize: none; + border: none; outline: none; - border-color: #5357B6; - box-shadow: 0 0 0 2px rgba(83, 87, 182, 0.2); + padding: 1rem; + font-size: 1.25rem; + width: 100%; + max-width: 40rem; + min-width: 20rem; + border-radius: 0.375rem; + background-color: #f4f4f4; + color: $palesky; } - } - .create-btn{ - display: flex; - justify-content: center; - align-items: center; - position: relative; - justify-self: end ; - background: $blueviolet; - color: #fff; - border: none; - height: 1.5rem; - width: 1.5rem; - border-radius: 50%; - cursor: pointer; - transition: background-color 0.3s ease; + button{ + cursor: pointer; + align-self: end; + margin-right: 7rem; + width: 8rem; + height: 2.125rem; + border: none; + border-radius: 0.375rem; + background-color: $blueviolet; + color: #fff; + font-size: .875rem; + font-weight: 500; + } } } diff --git a/src/app/components/create-post/create-post.component.ts b/src/app/components/create-post/create-post.component.ts index ce7e001..5b454ea 100644 --- a/src/app/components/create-post/create-post.component.ts +++ b/src/app/components/create-post/create-post.component.ts @@ -1,12 +1,49 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { Subscription } from 'rxjs'; +import { IUser } from '../../services/blog.interface'; // Make sure to import IUser @Component({ selector: 'app-create-post', standalone: true, - imports: [], + imports: [CommonModule, FormsModule], templateUrl: './create-post.component.html', styleUrl: './create-post.component.scss' }) -export class CreatePostComponent { +export class CreatePostComponent implements OnInit, OnDestroy { + currentUser: IUser | null = null; + private userSubscription: Subscription | undefined; + content = ''; + constructor(private blogFacade: FireblogFacadeService) {} + + ngOnInit() { + this.userSubscription = this.blogFacade.getCurrentUser$.subscribe(user => { + this.currentUser = user; + console.log(user); + }); + } + + ngOnDestroy() { + if (this.userSubscription) { + this.userSubscription.unsubscribe(); + } + } + + createPost() { + if (this.currentUser && this.content.trim()) { + this.blogFacade.createBlogPost(this.currentUser, this.content) + .then(() => { + console.log('Post created successfully'); + this.content = ''; + }) + .catch(error => { + console.error('Error creating post:', error); + }); + } else { + console.error('Cannot create post: User not logged in or content is empty'); + } + } } diff --git a/src/app/components/likes/likes.component.html b/src/app/components/likes/likes.component.html new file mode 100644 index 0000000..2195aca --- /dev/null +++ b/src/app/components/likes/likes.component.html @@ -0,0 +1 @@ +

likes works!

diff --git a/src/app/services/fireblog/fireblog-facade.service.ts b/src/app/services/fireblog/fireblog-facade.service.ts index b06f744..d975cfd 100644 --- a/src/app/services/fireblog/fireblog-facade.service.ts +++ b/src/app/services/fireblog/fireblog-facade.service.ts @@ -1,25 +1,58 @@ 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 } from 'firebase/firestore'; import { Firestore } from '@angular/fire/firestore'; -import { Observable } from 'rxjs'; +import { BehaviorSubject, Observable } from 'rxjs'; import { IBlog, IUser } from '../blog.interface'; +import { Auth, User, onAuthStateChanged } from '@angular/fire/auth'; @Injectable({ providedIn: 'root' }) export class FireblogFacadeService { + currentUser = new BehaviorSubject(null); + getCurrentUser$: Observable = this.currentUser.asObservable(); + + constructor(private firestore: Firestore, private auth: Auth) { + this.initializeCurrentUser(); + } + + private initializeCurrentUser() { + onAuthStateChanged(this.auth, (user) => { + if (user) { + const iUser: IUser = { + email: user.email || '', + uid: user.uid, + username: user.displayName || '', + image: user.photoURL || '', + password: '' // We don't store the password + }; + this.currentUser.next(iUser); + } else { + this.currentUser.next(null); + } + }); + } + - constructor(private firestore:Firestore) {} getBlogPosts(): Observable { const blogPostsCollection = collection(this.firestore, 'fireblogPosts'); return collectionData(blogPostsCollection, { idField: 'id' }) as Observable; } - getBlogPost(id: string): Observable { - const blogPostDoc = doc(this.firestore, `fireblogPosts/${id}`); - return docData(blogPostDoc, { idField: 'id' }) as Observable; + async createBlogPost(user: IUser, content: string): Promise { + const newBlog: IBlog = { + content: content, + createdAt: new Date().toISOString(), + likes: '0', + user: user, + authorId: user.uid, + comments: [] + }; + const blogPostsCollection = collection(this.firestore, 'fireblogPosts'); + const docRef = await addDoc(blogPostsCollection, newBlog); + return docRef.id; } async createEmptyBlogPost(user: IUser): Promise { diff --git a/src/app/views/fireblog-page/fireblog-page.component.scss b/src/app/views/fireblog-page/fireblog-page.component.scss index 9d3cb42..f817150 100644 --- a/src/app/views/fireblog-page/fireblog-page.component.scss +++ b/src/app/views/fireblog-page/fireblog-page.component.scss @@ -9,6 +9,7 @@ section{ h2{ + color: $blueviolet; font-family: $titlefont } diff --git a/src/assets/images/icon-edit.svg b/src/assets/images/icon-edit.svg index 4973148..46d93ec 100644 --- a/src/assets/images/icon-edit.svg +++ b/src/assets/images/icon-edit.svg @@ -1 +1 @@ - \ No newline at end of file +