🎨 Style: update ui fireblog

src/app/components/create-post/create-post.component.html

@@ -1,21 +1,19 @@
 <section class="create-post">
-  <div class="footer-grp">
+  <div class="content">
     <div class="profile">
-      <img src="../../../assets/images/avatars/image-juliusomo.png" alt="User avatar">
-      <button class="edit-profile" aria-label="Edit profile">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="15">
-          <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z" />
-        </svg>
-      </button>
-    </div>
-    <div class="post-input">
-      <textarea placeholder="What's on your mind?"></textarea>
-      <button class="create-btn" type="button">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="15">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-        </svg>
-      </button>
+      <img id="profile-img" src="../../../assets/images/avatars/image-juliusomo.png" alt="" title="edit profile">
+      <div>
+        <img src="../../../assets/images/icon-edit.svg" alt="">
+      </div>
     </div>
 
   </div>
+  <div class="content-grp">
+    <textarea name="content" id="post"></textarea>
+    <button (click)="createPost()" title="create post">
+      create post
+    </button>
+  </div>
+
+
 </section>

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;
+    }
   }
 }

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');
+    }
+  }
 }

src/app/components/likes/likes.component.html

@@ -0,0 +1 @@
+<p>likes works!</p>

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<IUser | null>(null);
+  getCurrentUser$: Observable<IUser|null>  = 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<IBlog[]> {
     const blogPostsCollection = collection(this.firestore, 'fireblogPosts');
     return collectionData(blogPostsCollection, { idField: 'id' }) as Observable<IBlog[]>;
   }
 
-  getBlogPost(id: string): Observable<IBlog> {
-    const blogPostDoc = doc(this.firestore, `fireblogPosts/${id}`);
-    return docData(blogPostDoc, { idField: 'id' }) as Observable<IBlog>;
+  async createBlogPost(user: IUser, content: string): Promise<string> {
+    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<string> {

src/app/views/fireblog-page/fireblog-page.component.scss

@@ -9,6 +9,7 @@ section{
 
 
   h2{
+    color: $blueviolet;
     font-family: $titlefont
   }