added the users list, follow/unfollow functionality

src/app/feed/feed.component.html

@@ -1,9 +1,10 @@
 <section class="feed-container">
   <div class="button-container">
-    <CustomButton [buttonName]="'Write'" (click)="toggleWrite()" />
+    <!-- <CustomButton [buttonName]="'Write'" (click)="toggleWrite()" /> -->
+    <button class="custom-button" (click)="toggleWrite()">Write</button>
   </div>
 
-  <post-dialog [isDialogOpen]="openDialogBox" (closeWrite)="toggleWrite()" />
+  <post-dialog [isDialogOpen]="openDialogBox" (closeWrite)="closeWrite()" />
   @for (post of posts$ | async; track post.uid) {
   <div class="feed-item">
     <div class="author-info">
@@ -18,7 +19,7 @@
       <div class="author-details">
         <h3>{{ post.authorName }}</h3>
         <p class="time-stamp">
-          {{ post.timestamp.toDate() | date : "dd/MM/yyyy" }}
+          {{ post.timestamp.toDate() | date : "dd/MM/yyyy hh:mm:ss a" }}
         </p>
       </div>
     </div>

src/app/feed/feed.component.scss

@@ -1,4 +1,5 @@
 @import "../../partials/variables";
+@import "../../partials/buttons";
 
 .feed-container {
   max-width: 600px;
@@ -10,6 +11,10 @@
   padding: 0 0 1rem 0;
 }
 
+.custom-button {
+  @include write-button($accent-color);
+}
+
 .feed-list {
   margin-top: 20px;
 }
@@ -62,9 +67,4 @@
   .feed-container {
     padding: 10px;
   }
-
-  .write-button {
-    padding: 10px 20px;
-    font-size: 0.9rem;
-  }
 }

src/app/feed/feed.component.ts

@@ -1,5 +1,4 @@
 import { Component, inject } from '@angular/core';
-import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
 import { PostDialogComponent } from './post-dialog/post-dialog.component';
 import { Observable, of } from 'rxjs';
 import { Post } from '../shared/types/Post';
@@ -9,7 +8,7 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-feed',
   standalone: true,
-  imports: [CustomButtonComponent, PostDialogComponent, CommonModule],
+  imports: [PostDialogComponent, CommonModule],
   templateUrl: './feed.component.html',
   styleUrl: './feed.component.scss'
 })
@@ -26,6 +25,10 @@ export class FeedComponent {
 
   toggleWrite() {
     this.openDialogBox = !this.openDialogBox;
+  }
+
+  closeWrite() {
+    this.openDialogBox = !this.openDialogBox;
     this.refreshPosts();
   }
 

src/app/shared/services/firestore/firestore.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core';
-import { Firestore, addDoc, collection, collectionData, doc, orderBy, query, setDoc } from '@angular/fire/firestore';
+import { Firestore, addDoc, collection, collectionData, deleteDoc, doc, docData, increment, orderBy, query, setDoc, updateDoc } from '@angular/fire/firestore';
 import { Post } from '../../types/Post';
-import { Observable } from 'rxjs';
+import { Observable, map } from 'rxjs';
 import { User } from '../../types/User';
 
 @Injectable({
@@ -31,4 +31,31 @@ export class FirestoreService {
     const usersRef = collection(this.firestore, 'users');
     return collectionData(usersRef, { idField: 'uid' }) as Observable<User[]>;
   }
+
+  async followUser(loggedInUserId: string, userToFollowId: string): Promise<void> {
+    const followingData = { uid: userToFollowId };
+    await setDoc(doc(this.firestore, `users/${loggedInUserId}/following`, userToFollowId), followingData);
+    const followerData = { uid: loggedInUserId };
+    await setDoc(doc(this.firestore, `users/${userToFollowId}/followers`, loggedInUserId), followerData);
+    const userToFollowRef = doc(this.firestore, `users/${userToFollowId}`);
+    await updateDoc(userToFollowRef, {
+      followerCount: increment(1)
+    });
+  }
+
+  async unfollowUser(loggedInUserId: string, userToUnfollowId: string): Promise<void> {
+    await deleteDoc(doc(this.firestore, `users/${loggedInUserId}/following`, userToUnfollowId));
+    await deleteDoc(doc(this.firestore, `users/${userToUnfollowId}/followers`, loggedInUserId));
+    const userToUnfollowRef = doc(this.firestore, `users/${userToUnfollowId}`);
+    await updateDoc(userToUnfollowRef, {
+      followerCount: increment(-1)
+    });
+  }
+
+  getFollowingUids(loggedInUserId: string): Observable<string[]> {
+    const followingRef = collection(this.firestore, `users/${loggedInUserId}/following`);
+    return collectionData(followingRef, { idField: 'uid' }).pipe(
+      map(followingDocs => followingDocs.map(doc => doc.uid))
+    );
+  }
 }

src/app/shared/types/User.ts

@@ -3,4 +3,6 @@ export type User = {
     name: string;
     uid: string;
     photoUrl: string;
+    isFollowing: string;
+    followerCount: string;
 }

src/app/sign-up/sign-up.component.ts

@@ -2,7 +2,6 @@ import { Component, inject } from '@angular/core';
 import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile, user } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
 import { FirestoreService } from '../shared/services/firestore/firestore.service';
 import { SnackbarService } from '../shared/components/snackbar/snackbar.service';
 
@@ -16,7 +15,7 @@ type UserData = {
 @Component({
   selector: 'app-sign-up',
   standalone: true,
-  imports: [ReactiveFormsModule, CustomButtonComponent],
+  imports: [ReactiveFormsModule],
   templateUrl: './sign-up.component.html',
   styleUrl: './sign-up.component.scss'
 })

src/app/users/users.component.html

@@ -1,5 +1,6 @@
 <section class="user-container">
-  <div *ngFor="let user of users$ | async" class="user-item">
+  @for (user of usersWithFollowStatus$ | async; track $index) {
+  <div class="user-item">
     <div class="author-info">
       <div class="author-image">
         <img
@@ -10,11 +11,31 @@
       </div>
       <div class="author-details">
         <h3>{{ user.name }}</h3>
-        <p class="user-email">{{ user.email }}</p>
+        <p class="user-followers">{{ user.email }}</p>
+        <p class="user-followers">Followers: {{ user.followerCount }}</p>
       </div>
     </div>
+    @if (user.isFollowing) {
     <div class="button-container">
-      <button class="custom-button" type="submit">Follow</button>
+      <button
+        (click)="unfollowUser(user.uid)"
+        class="custom-following-button"
+        type="submit"
+      >
+        Following
+      </button>
     </div>
+    } @else{
+    <div class="button-container">
+      <button
+        class="custom-button"
+        (click)="followUser(user.uid)"
+        type="submit"
+      >
+        Follow
+      </button>
+    </div>
+    }
   </div>
+  }
 </section>

src/app/users/users.component.scss

@@ -1,4 +1,5 @@
 @import "../../partials/variables";
+@import "../../partials/buttons";
 
 .user-container {
   max-width: 600px;
@@ -17,7 +18,7 @@
   align-items: center;
 }
 
-.user-email {
+.user-followers {
   color: #999;
   font-size: 0.9em;
 }
@@ -53,26 +54,12 @@
   }
 }
 
-.button-container button {
-  padding: 8px 16px;
-  background-color: $accent-color;
-  border: none;
-  font-weight: bold;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  color: white;
-  cursor: pointer;
-
-  &:disabled {
-    background-color: #fff;
-    color: $accent-color;
-    box-shadow: none;
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
+.custom-button {
+  @include write-button($accent-color);
 }
 
-.button-container button:hover {
-  background-color: #e55656;
+.custom-following-button {
+  @include following-button($accent-color);
 }
 
 @media (max-width: 768px) {
@@ -89,9 +76,4 @@
     margin-top: 10px;
     width: 100%;
   }
-
-  .button-container button {
-    width: 100%;
-    margin-bottom: 10px;
-  }
 }

src/app/users/users.component.ts

@@ -1,7 +1,8 @@
+import { Auth, onAuthStateChanged } from '@angular/fire/auth';
 import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FirestoreService } from '../shared/services/firestore/firestore.service';
-import { Observable, of } from 'rxjs';
+import { Observable, combineLatest, map, of } from 'rxjs';
 import { User } from '../shared/types/User';
 
 @Component({
@@ -14,11 +15,30 @@ import { User } from '../shared/types/User';
 export class UsersComponent {
 
   private readonly firestore: FirestoreService = inject(FirestoreService);
+  private readonly auth: Auth = inject(Auth);
 
   users$: Observable<User[]> = of([]);
+  followingUids$: Observable<string[]> = of([]);
+  usersWithFollowStatus$: Observable<any[]> = of([]);
+
 
   ngOnInit() {
-    this.getUsersList()
+    this.getUsersList();
+    this.checkFollowStatus();
+  }
+
+  checkFollowStatus() {
+    if (this.auth.currentUser) {
+      this.followingUids$ = this.firestore.getFollowingUids(this.auth.currentUser.uid);
+      this.usersWithFollowStatus$ = combineLatest([this.users$, this.followingUids$]).pipe(
+        map(([users, followingUids]) =>
+          users.map(user => ({
+            ...user,
+            isFollowing: followingUids.includes(user.uid)
+          }))
+        )
+      );
+    }
   }
 
 
@@ -28,10 +48,18 @@ export class UsersComponent {
 
 
   handleImageError(event: any) {
-    event.target.src = 'https://via.placeholder.com/150';
+    (event.target as HTMLImageElement).style.display = 'none';
+  }
+
+  followUser(followingUserId: string) {
+    if (this.auth.currentUser) {
+      this.firestore.followUser(this.auth.currentUser.uid, followingUserId);
+    }
   }
 
-  followUser(uid: string) {
-    console.log("Follow user with uid: ${uid}");
+  unfollowUser(followingUserId: string) {
+    if (this.auth.currentUser) {
+      this.firestore.unfollowUser(this.auth.currentUser.uid, followingUserId);
+    }
   }
 }