many changes

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet> <app-snackbar />
+<router-outlet></router-outlet> <Snackbar />

src/app/app.routes.ts

@@ -8,7 +8,7 @@ import { UsersComponent } from './users/users.component';
 import { ProfileComponent } from './profile/profile.component';
 import { FollowersComponent } from './profile/followers/followers.component';
 import { FollowingComponent } from './profile/following/following.component';
-import { PostsComponent } from './profile/posts/posts.component';
+import { ProfilePostsComponent } from './profile/profile-posts/profile-posts.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
@@ -23,7 +23,7 @@ export const routes: Routes = [
             {
                 path: 'profile', component: ProfileComponent, canActivate: [authGuard], children: [
                     { path: '', redirectTo: 'posts', pathMatch: 'full' },
-                    { path: 'posts', component: PostsComponent },
+                    { path: 'posts', component: ProfilePostsComponent },
                     { path: 'followers', component: FollowersComponent },
                     { path: 'following', component: FollowingComponent }
                 ]

src/app/feed/post-dialog/post-dialog.component.ts

@@ -43,6 +43,7 @@ export class PostDialogComponent {
       timestamp: serverTimestamp()
     }
     this.firestore.addPost(post, user!.uid);
+    this.postContent = "";
     this.closeDialog();
   }
 

src/app/profile/followers/followers.component.html

@@ -1 +1,8 @@
-<p>followers works!</p>
+@for (user of usersWithFollowStatus$ | async; track $index) {
+<OtherUser
+  [user]="user"
+  [currentUserId]="this?.uid"
+  (follow)="followUser($event)"
+  (unfollow)="unfollowUser($event)"
+/>
+}

src/app/profile/followers/followers.component.ts

@@ -1,12 +1,45 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+import { UserRelationService } from '../../shared/services/firestore/user-relation.service';
+import { Observable, of } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { OtherUserComponent } from '../../shared/components/other-user/other-user.component';
+import { User } from '../../shared/types/User';
 
 @Component({
   selector: 'app-followers',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, OtherUserComponent],
   templateUrl: './followers.component.html',
   styleUrl: './followers.component.scss'
 })
 export class FollowersComponent {
 
+  private readonly auth: Auth = inject(Auth);
+  private readonly userRelations: UserRelationService = inject(UserRelationService);
+  usersWithFollowStatus$: Observable<any[]> = of([]);
+  uid: string | undefined;
+
+  ngOnInit() {
+    this.checkFollowStatus();
+    this.uid = this.auth.currentUser?.uid;
+  }
+
+  checkFollowStatus() {
+    if (this.auth.currentUser) {
+      this.usersWithFollowStatus$ = this.userRelations.getFollowersList(this.auth.currentUser.uid)
+    }
+  }
+
+  followUser(followingUser: User) {
+    if (this.auth.currentUser) {
+      this.userRelations.followUser(this.auth.currentUser.uid, followingUser);
+    }
+  }
+
+  unfollowUser(followingUserId: string) {
+    if (this.auth.currentUser) {
+      this.userRelations.unfollowUser(this.auth.currentUser.uid, followingUserId);
+    }
+  }
 }

src/app/profile/following/following.component.ts

@@ -1,4 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+import { Observable, of } from 'rxjs';
+import { UserRelationService } from '../../shared/services/firestore/user-relation.service';
+import { User } from '../../shared/types/User';
 
 @Component({
   selector: 'app-following',
@@ -9,4 +13,31 @@ import { Component } from '@angular/core';
 })
 export class FollowingComponent {
 
+  private readonly auth: Auth = inject(Auth);
+  private readonly userRelations: UserRelationService = inject(UserRelationService);
+  usersWithFollowStatus$: Observable<any[]> = of([]);
+  uid: string | undefined;
+  ngOnInit() {
+    this.checkFollowStatus();
+    this.uid = this.auth.currentUser?.uid;
+  }
+
+  checkFollowStatus() {
+    if (this.auth.currentUser) {
+      this.usersWithFollowStatus$ = this.userRelations.getUsersWithFollowingStatus(this.auth.currentUser.uid)
+    }
+  }
+
+  followUser(followingUser: User) {
+    if (this.auth.currentUser) {
+      this.userRelations.followUser(this.auth.currentUser.uid, followingUser);
+    }
+  }
+
+  unfollowUser(followingUserId: string) {
+    if (this.auth.currentUser) {
+      this.userRelations.unfollowUser(this.auth.currentUser.uid, followingUserId);
+    }
+  }
+
 }

src/app/profile/profile-posts/profile-posts.component.html

@@ -0,0 +1,3 @@
+@for (post of posts; track $index) {
+<Posts [post]="post" />
+}

src/app/profile/profile-posts/profile-posts.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilePostsComponent } from './profile-posts.component';
+
+describe('ProfilePostsComponent', () => {
+  let component: ProfilePostsComponent;
+  let fixture: ComponentFixture<ProfilePostsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfilePostsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfilePostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/profile-posts/profile-posts.component.ts

@@ -0,0 +1,37 @@
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+import { Post } from '../../shared/types/Post';
+import { PostsComponent } from '../../shared/components/posts/posts.component';
+import { UserRelationService } from '../../shared/services/firestore/user-relation.service';
+import { SnackbarService } from '../../shared/components/snackbar/snackbar.service';
+
+@Component({
+  selector: 'app-profile-posts',
+  standalone: true,
+  imports: [PostsComponent],
+  templateUrl: './profile-posts.component.html',
+  styleUrl: './profile-posts.component.scss'
+})
+export class ProfilePostsComponent {
+
+  private readonly auth: Auth = inject(Auth);
+  private readonly userRelations: UserRelationService = inject(UserRelationService);
+  private readonly snack: SnackbarService = inject(SnackbarService)
+
+  posts: Post[] = [];
+
+
+  ngOnInit() {
+    if (this.auth.currentUser) {
+      this.userRelations.getPostsFromFollowing(this.auth.currentUser.uid)
+        .subscribe({
+          next: (posts) => {
+            this.posts = posts;
+          },
+          error: (error) => {
+            this.snack.show(error);
+          }
+        });
+    }
+  }
+}

src/app/profile/profile.component.html

@@ -1,7 +1,9 @@
 <section class="profile-container">
   @if (userDetails) {
   <div class="user-profile">
-    <div class="author-image"></div>
+    <div class="author-image">
+      <img [src]="userDetails.photoUrl" />
+    </div>
     <div class="user-details">
       <p class="user-name">{{ userDetails.name }}</p>
       <div class="user-stats">

src/app/profile/profile.component.scss

@@ -19,8 +19,8 @@
   margin-right: 10px;
   grid-column: 1;
   img {
-    width: 50px;
-    height: 50px;
+    width: 100px;
+    height: 100px;
     background-color: #ddd;
     border-radius: 50%;
     margin-right: 10px;
@@ -59,6 +59,7 @@
   }
   li {
     padding: 10px 0;
+    cursor: pointer;
   }
 }
 @media (max-width: 768px) {

src/app/profile/profile.component.ts

@@ -1,8 +1,8 @@
 import { Component, inject } from '@angular/core';
 import { Auth } from '@angular/fire/auth';
-import { FirestoreService } from '../shared/services/firestore/firestore.service';
 import { CommonModule } from '@angular/common';
-import { RouterModule, RouterOutlet } from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { UserRelationService } from '../shared/services/firestore/user-relation.service';
 
 @Component({
   selector: 'app-profile',
@@ -14,13 +14,16 @@ import { RouterModule, RouterOutlet } from '@angular/router';
 export class ProfileComponent {
 
   private readonly auth: Auth = inject(Auth);
-  private readonly firestore: FirestoreService = inject(FirestoreService);
+  private readonly userRelations: UserRelationService = inject(UserRelationService);
   userDetails: any = {};
   ngOnInit() {
     if (this.auth.currentUser) {
-
-      this.firestore.getUserById(this.auth.currentUser.uid).subscribe((data) => this.userDetails = data);
+      this.userRelations.getUserById(this.auth.currentUser.uid).subscribe((data) => this.userDetails = data);
     }
   }
 
+  handleImageError(event: any) {
+    (event.target as HTMLImageElement).style.display = 'none';
+  }
+
 }

src/app/shared/components/other-user/other-user.component.html

@@ -0,0 +1,34 @@
+@if(user.uid!==currentUserId) {
+<div class="user-item">
+  <div class="author-info">
+    <div class="author-image">
+      <img
+        [src]="user.photoUrl"
+        (error)="handleImageError($event)"
+        alt="{{ user.name }}"
+      />
+    </div>
+    <div class="author-details">
+      <h3>{{ user.name }}</h3>
+      <p class="user-followers">{{ user.email }}</p>
+
+      <p class="user-followers">Followers: {{ user.followerCount }}</p>
+    </div>
+  </div>
+  <div class="button-container">
+    @if (user.isFollowing) {
+    <button
+      (click)="unfollowUser()"
+      class="custom-following-button"
+      type="submit"
+    >
+      Following
+    </button>
+    } @else{
+    <button class="custom-button" (click)="followUser()" type="submit">
+      Follow
+    </button>
+    }
+  </div>
+</div>
+}

src/app/shared/components/other-user/other-user.component.scss

@@ -0,0 +1,61 @@
+@import "../../../../partials/buttons";
+@import "../../../../partials/variables";
+
+.user-item {
+  background: #fff;
+  border-bottom: 0.5px solid rgb(190, 190, 190);
+  margin-bottom: 20px;
+  padding: 20px 20px 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-followers {
+  color: #999;
+  font-size: 0.9em;
+}
+
+.user-followers {
+  color: #999;
+  font-size: 0.9em;
+}
+
+.author-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.author-image {
+  width: 50px;
+  height: 50px;
+  background-color: #ddd;
+  border-radius: 50%;
+  margin-right: 10px;
+  img {
+    width: 50px;
+    height: 50px;
+    background-color: #ddd;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+}
+
+.author-details {
+  h3 {
+    margin: 0;
+  }
+  .time-stamp {
+    color: #999;
+    font-size: 0.9em;
+  }
+}
+
+.custom-button {
+  @include write-button($accent-color);
+}
+
+.custom-following-button {
+  @include following-button($accent-color);
+}

src/app/profile/posts/posts.component.spec.ts → src/app/shared/components/other-user/other-user.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PostsComponent } from './posts.component';
+import { OtherUserComponent } from './other-user.component';
 
-describe('PostsComponent', () => {
-  let component: PostsComponent;
-  let fixture: ComponentFixture<PostsComponent>;
+describe('OtherUserComponent', () => {
+  let component: OtherUserComponent;
+  let fixture: ComponentFixture<OtherUserComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PostsComponent]
+      imports: [OtherUserComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PostsComponent);
+    fixture = TestBed.createComponent(OtherUserComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });