changed from promises to async/await and then modified some styles

Gururajj77 · Jan 14, 2024 · c725aa6 · c725aa6
1 parent 0f7d0c6
commit c725aa6
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 117 deletions.
diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html
@@ -1,6 +1,5 @@
 <section class="feed-container">
   <div class="button-container">
-    <!-- <CustomButton [buttonName]="'Write'" (click)="toggleWrite()" /> -->
     <button class="custom-button" (click)="toggleWrite()">Write</button>
   </div>
 
@@ -19,7 +18,7 @@
       <div class="author-details">
         <h3>{{ post.authorName }}</h3>
         <p class="time-stamp">
-          {{ post.timestamp.toDate() | date : "dd/MM/yyyy hh:mm:ss a" }}
+          {{ post.timestamp?.toDate() | date : "dd/MM/yyyy hh:mm:ss a" }}
         </p>
       </div>
     </div>

diff --git a/src/app/feed/feed.component.scss b/src/app/feed/feed.component.scss
@@ -62,7 +62,6 @@
   color: #666;
 }
 
-// Responsive styling
 @media (max-width: 768px) {
   .feed-container {
     padding: 10px;

diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss
@@ -1,4 +1,3 @@
-// header.component.scss
 @import "../../../../partials/variables";
 
 .header {
@@ -35,12 +34,11 @@
   font-size: 48px;
   font-weight: bold;
   color: transparent;
-  font-family: "Luckiest";
-  -webkit-text-stroke: 1px #ed546b;
+  -webkit-text-stroke: 1px $accent-color;
   background-image: repeating-linear-gradient(
     45deg,
-    #ed546b,
-    #ed546b 2px,
+    $accent-color,
+    $accent-color 2px,
     transparent 2px,
     transparent 10px
   );

diff --git a/src/app/shared/components/loader/loader.component.scss b/src/app/shared/components/loader/loader.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../partials/variables";
+
 .full-page-loader {
   position: fixed;
   top: 0;
@@ -36,12 +38,11 @@
   font-size: 48px;
   font-weight: bold;
   color: transparent;
-  font-family: "Luckiest", sans-serif; /* Ensure this font is loaded or choose an alternative */
-  -webkit-text-stroke: 1px #ed546b;
+  -webkit-text-stroke: 1px $accent-color;
   background-image: repeating-linear-gradient(
     45deg,
-    #ed546b,
-    #ed546b 2px,
+    $accent-color,
+    $accent-color 2px,
     transparent 2px,
     transparent 10px
   );

diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts
@@ -12,18 +12,32 @@ export class AuthService {
   private readonly auth: Auth = inject(Auth);
   private readonly router: Router = inject(Router);
   private readonly snackbarService: SnackbarService = inject(SnackbarService);
-  signInWithGoogle() {
-    const provider = new GoogleAuthProvider();
-    signInWithPopup(this.auth, provider)
-      .then((result) => {
-        this.snackbarService.show('Logged In Successfully');
-        this.router.navigateByUrl('/feed')
-      }).catch((error) => {
-        this.snackbarService.show('Error in Logging in to the App');
-      });
+
+  async signInWithGoogle() {
+    try {
+      const provider = new GoogleAuthProvider();
+      await signInWithPopup(this.auth, provider);
+      this.snackbarService.show('Logged In Successfully');
+      this.router.navigateByUrl('/app/feed');
+    } catch (error) {
+      this.snackbarService.show('Error in Logging in to the App');
+    }
   }
 
   isAuthenticated$(): Observable<boolean> {
     return of(this.auth.currentUser !== null);
   }
+
+  getCurrentUserDetails() {
+    if (this.auth.currentUser) {
+      const user = this.auth.currentUser
+      return {
+        uid: user.uid,
+        email: user.email,
+        photoUrl: user.photoURL,
+        name: user.displayName
+      }
+    }
+    return null;
+  }
 }
diff --git a/src/app/shared/services/firestore/firestore.service.ts b/src/app/shared/services/firestore/firestore.service.ts
@@ -3,13 +3,15 @@ import { Firestore, addDoc, collection, collectionData, deleteDoc, doc, docData,
 import { Post } from '../../types/Post';
 import { Observable, map } from 'rxjs';
 import { User } from '../../types/User';
+import { AuthService } from '../auth/auth.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FirestoreService {
 
   private readonly firestore: Firestore = inject(Firestore);
+  private readonly auth: AuthService = inject(AuthService);
 
   addUserDetails(userId: string, userDetails: any) {
     const userDocRef = doc(this.firestore, `users/${userId}`);
@@ -32,17 +34,15 @@ export class FirestoreService {
     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}`);
+  async followUser(loggedInUserId: string, userToFollow: any): Promise<void> {
+    await setDoc(doc(this.firestore, `users/${loggedInUserId}/following`, userToFollow.uid), userToFollow);
+    const followerData = this.auth.getCurrentUserDetails();
+    await setDoc(doc(this.firestore, `users/${userToFollow.uid}/followers`, loggedInUserId), followerData);
+    const userToFollowRef = doc(this.firestore, `users/${userToFollow.uid}`);
     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));
@@ -54,8 +54,9 @@ export class FirestoreService {
 
   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))
+    return collectionData(followingRef).pipe(
+      map(followingDocs => followingDocs.map(doc => doc['uid']))
     );
   }
+
 }
diff --git a/src/app/sign-in/sign-in.component.scss b/src/app/sign-in/sign-in.component.scss
@@ -134,7 +134,6 @@ input[type="password"] {
   font-size: 48px;
   font-weight: bold;
   color: transparent;
-  font-family: "Luckiest";
   -webkit-text-stroke: 1px $accent-color;
   background-image: repeating-linear-gradient(
     45deg,

diff --git a/src/app/sign-in/sign-in.component.ts b/src/app/sign-in/sign-in.component.ts
@@ -40,21 +40,22 @@ export class SignInComponent {
   }
 
 
-  signIn() {
+  async signIn() {
     if (this.loginForm.valid) {
-      const { email, password } = this.loginForm.value;
-      signInWithEmailAndPassword(this.auth, email, password)
-        .then((result) => {
-          this.snackbarService.show('Signed In Successfully', 5000);
-          this.router.navigateByUrl('app/feed');
-        })
-        .catch((error) => {
-          this.ERROR_CODE = error.code
-          console.log(this.ERROR_CODE)
-        });
+      try {
+        const { email, password } = this.loginForm.value;
+        await signInWithEmailAndPassword(this.auth, email, password);
+        this.snackbarService.show('Signed In Successfully', 5000);
+        this.router.navigateByUrl('app/feed');
+      } catch (error: any) {
+        this.ERROR_CODE = error.code;
+        console.log(this.ERROR_CODE);
+        this.snackbarService.show('Error Signing In');
+      }
     }
   }
 
+
   persistLoggedInUser() {
     this.auth.onAuthStateChanged((user) => {
       this.isLoading = false;
@@ -74,16 +75,15 @@ export class SignInComponent {
     this.router.navigateByUrl('/register-user');
   }
 
-  resetPassword() {
+  async resetPassword() {
     if (this.loginForm && this.loginForm.get('email') && this.loginForm.get('password')) {
-      const email = this.loginForm.get('email')!.value;
-      sendPasswordResetEmail(this.auth, email)
-        .then(() => {
-          this.snackbarService.show('Password reset email sent', 5000);
-        })
-        .catch((error) => {
-          this.snackbarService.show('Error sending password reset email', 2500);
-        });
+      try {
+        const email = this.loginForm.get('email')!.value;
+        await sendPasswordResetEmail(this.auth, email);
+        this.snackbarService.show('Password reset email sent', 5000);
+      } catch (error) {
+        this.snackbarService.show('Error sending password reset email', 2500);
+      }
     }
   }
 }
diff --git a/src/app/sign-up/sign-up.component.scss b/src/app/sign-up/sign-up.component.scss
@@ -15,7 +15,6 @@
   font-size: 48px;
   font-weight: bold;
   color: transparent;
-  font-family: "Luckiest";
   -webkit-text-stroke: 1px #ed546b;
   background-image: repeating-linear-gradient(
     45deg,

diff --git a/src/app/sign-up/sign-up.component.ts b/src/app/sign-up/sign-up.component.ts
@@ -40,65 +40,57 @@ export class SignUpComponent {
   }
 
 
-  register() {
+  async register() {
     if (this.registerForm.valid) {
-      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(() => {
-              this.snackbarService.show('User details added to Firestore');
-            })
-            .catch((error) => {
-              this.snackbarService.show('Error adding user details to Firestore');
-            });
-          return updateProfile(userCredential.user, { displayName: name });
-        })
-        .then(() => {
-          this.router.navigateByUrl('app/feed');
-        })
-        .catch(error => {
-          console.error('Registration error:', error);
-        });
-    }
-  }
+      try {
+        const { name, email, password } = this.registerForm.value;
+        const userCredential = await createUserWithEmailAndPassword(this.auth, email, password);
+
+        const uid = userCredential.user.uid;
+        const photoUrl = userCredential.user.photoURL;
 
-  signInWithGoogle() {
-    const provider = new GoogleAuthProvider();
-    signInWithPopup(this.auth, provider)
-      .then((result) => {
-        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(() => {
-            this.snackbarService.show('User details added to Firestore');
-          })
-          .catch((error) => {
-            this.snackbarService.show('Error adding user details to Firestore');
-          });
-        this.router.navigateByUrl('app/feed')
-      }).catch((error) => {
-        this.snackbarService.show('Error in Registering new User');
-      });
+
+        await this.firestoreService.addUserDetails(uid, userDetails);
+        this.snackbarService.show('User details added to Firestore');
+
+        await updateProfile(userCredential.user, { displayName: name });
+
+        this.router.navigateByUrl('app/feed');
+      } catch (error) {
+        this.snackbarService.show('Error during registration.');
+      }
+    }
+  }
+
+
+  async signInWithGoogle() {
+    try {
+      const provider = new GoogleAuthProvider();
+      const result = await signInWithPopup(this.auth, provider);
+
+      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 };
+
+      await this.firestoreService.addUserDetails(uid, userDetails);
+      this.snackbarService.show('User details added to Firestore');
+
+      this.router.navigateByUrl('app/feed');
+    } catch (error) {
+      this.snackbarService.show('Error in Registering new User');
+    }
   }
 
+
   toLoginPage() {
     this.router.navigateByUrl('sign-in');
   }

diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
@@ -1,6 +1,6 @@
 <section class="user-container">
-  @for (user of usersWithFollowStatus$ | async; track $index) { @if
-  (user.uid!==uid) {
+  @for (user of usersWithFollowStatus$ | async; track $index) {
+  @if(user.uid!==uid) {
   <div class="user-item">
     <div class="author-info">
       <div class="author-image">
@@ -26,11 +26,7 @@ <h3>{{ user.name }}</h3>
         Following
       </button>
       } @else{
-      <button
-        class="custom-button"
-        (click)="followUser(user.uid)"
-        type="submit"
-      >
+      <button class="custom-button" (click)="followUser(user)" type="submit">
         Follow
       </button>
       }

diff --git a/src/app/users/users.component.scss b/src/app/users/users.component.scss
@@ -9,8 +9,7 @@
 
 .user-item {
   background: #fff;
-  border-radius: 15px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-bottom: 0.5px solid rgb(190, 190, 190);
   margin-bottom: 20px;
   padding: 20px 20px 0 20px;
   display: flex;

diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
@@ -52,9 +52,9 @@ export class UsersComponent {
     (event.target as HTMLImageElement).style.display = 'none';
   }
 
-  followUser(followingUserId: string) {
+  followUser(followingUser: string) {
     if (this.auth.currentUser) {
-      this.firestore.followUser(this.auth.currentUser.uid, followingUserId);
+      this.firestore.followUser(this.auth.currentUser.uid, followingUser);
     }
   }