users fetch from firestore and styling

src/app/feed/feed.component.ts

@@ -1,7 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { Auth } from '@angular/fire/auth';
 import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
-import { SnackbarService } from '../shared/components/snackbar/snackbar.service';
 import { PostDialogComponent } from './post-dialog/post-dialog.component';
 import { Observable, of } from 'rxjs';
 import { Post } from '../shared/types/Post';
@@ -17,8 +15,8 @@ import { CommonModule } from '@angular/common';
 })
 export class FeedComponent {
 
-  private readonly auth: Auth = inject(Auth);
-  private readonly firestore: FirestoreService = inject(FirestoreService)
+
+  private readonly firestore: FirestoreService = inject(FirestoreService);
   openDialogBox: boolean = false;
   posts$: Observable<Post[]> = of([]);
 

src/app/shared/components/custom-button/custom-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, signal } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'CustomButton',

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

@@ -1,7 +1,8 @@
 import { Injectable, inject } from '@angular/core';
-import { Firestore, addDoc, collection, collectionData, doc, orderBy, query, serverTimestamp, setDoc } from '@angular/fire/firestore';
+import { Firestore, addDoc, collection, collectionData, doc, orderBy, query, setDoc } from '@angular/fire/firestore';
 import { Post } from '../../types/Post';
 import { Observable } from 'rxjs';
+import { User } from '../../types/User';
 
 @Injectable({
   providedIn: 'root'
@@ -25,4 +26,9 @@ export class FirestoreService {
     const orderedPostsQuery = query(postsRef, orderBy('timestamp', 'desc'));
     return collectionData(orderedPostsQuery, { idField: 'id' }) as Observable<Post[]>;
   }
+
+  getUsers() {
+    const usersRef = collection(this.firestore, 'users');
+    return collectionData(usersRef, { idField: 'uid' }) as Observable<User[]>;
+  }
 }

src/app/shared/types/User.ts

@@ -0,0 +1,6 @@
+export type User = {
+    email: string;
+    name: string;
+    uid: string;
+    photoUrl: string;
+}

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

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile } from '@angular/fire/auth';
+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';
@@ -10,6 +10,7 @@ type UserData = {
   uid: string;
   name: string | null;
   email: string | null;
+  photoUrl: string | null
 }
 
 @Component({
@@ -45,11 +46,14 @@ export class SignUpComponent {
       const { name, email, password } = this.registerForm.value;
       createUserWithEmailAndPassword(this.auth, email, password)
         .then(userCredential => {
+
           const uid = userCredential.user.uid;
+          const photoUrl = userCredential.user.photoURL
           const userDetails: UserData = {
             uid,
             name,
             email,
+            photoUrl
           };
           this.firestoreService.addUserDetails(uid, userDetails)
             .then(() => {
@@ -76,10 +80,12 @@ export class SignUpComponent {
         const uid = result.user.uid;
         const email = result.user.email;
         const name = result.user.displayName;
+        const photoUrl = result.user.photoURL
         const userDetails: UserData = {
           uid,
           name,
           email,
+          photoUrl
         };
         this.firestoreService.addUserDetails(uid, userDetails)
           .then(() => {

src/app/users/users.component.html

@@ -1 +1,20 @@
-<p>users works!</p>
+<section class="user-container">
+  <div *ngFor="let user of users$ | async" 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-email">{{ user.email }}</p>
+      </div>
+    </div>
+    <div class="button-container">
+      <button class="custom-button" type="submit">Follow</button>
+    </div>
+  </div>
+</section>

src/app/users/users.component.scss

@@ -0,0 +1,97 @@
+@import "../../partials/variables";
+
+.user-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.user-item {
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  padding: 20px 20px 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-email {
+  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;
+  }
+}
+
+.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;
+  }
+}
+
+.button-container button:hover {
+  background-color: #e55656;
+}
+
+@media (max-width: 768px) {
+  .user-container {
+    padding: 10px;
+  }
+
+  .user-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .button-container {
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  .button-container button {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}

src/app/users/users.component.ts

@@ -1,12 +1,37 @@
-import { Component } from '@angular/core';
+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 { User } from '../shared/types/User';
 
 @Component({
   selector: 'app-users',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './users.component.html',
   styleUrl: './users.component.scss'
 })
 export class UsersComponent {
 
+  private readonly firestore: FirestoreService = inject(FirestoreService);
+
+  users$: Observable<User[]> = of([]);
+
+  ngOnInit() {
+    this.getUsersList()
+  }
+
+
+  getUsersList() {
+    this.users$ = this.firestore.getUsers();
+  }
+
+
+  handleImageError(event: any) {
+    event.target.src = 'https://via.placeholder.com/150';
+  }
+
+  followUser(uid: string) {
+    console.log("Follow user with uid: ${uid}");
+  }
 }