Follow users dev

angularSTEP/src/app/converter.ts

@@ -14,7 +14,7 @@ export class Converter {
         username: user.username,
         email: user.email,
         picUrl: user.picUrl,
-        timestamp: user.time,
+        time: user.time,
         recipes: user.recipes,
         wishlist: user.wishlist,
         shoppingList: user.shoppingList,

angularSTEP/src/app/current-profile-page/current-profile-page.component.ts

@@ -19,7 +19,7 @@ export class CurrentProfilePageComponent implements OnInit {
   displayNameForm: FormControl | null = null;
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
     private route: ActivatedRoute,
     private afs: AngularFirestore,

angularSTEP/src/app/email/email.component.ts

@@ -15,7 +15,7 @@ export class EmailComponent implements OnInit {
   logInForm: FormGroup;
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
     private fb: FormBuilder
   ) {

angularSTEP/src/app/login/login.component.ts

@@ -18,7 +18,7 @@ export class LoginComponent implements OnInit {
   //and there is no user in the database linked to the account
   //it will delete the user (in case user refreshes page before
   //setting a username but after signing in with Google
-  constructor(public fAuth: AngularFireAuth, public router: Router) {}
+  constructor(private fAuth: AngularFireAuth, private router: Router) {}
 
   //checks if google user is new, if so, calls setup component to
   //allow the user to create a username, if not new, redirects to home page

angularSTEP/src/app/profile-menu/profile-menu.component.ts

@@ -20,7 +20,7 @@ export class ProfileMenuComponent implements OnInit {
   routerCheck!: Subscription;
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
     private afs: AngularFirestore,
     private zone: NgZone

angularSTEP/src/app/setup/setup.component.ts

@@ -21,7 +21,7 @@ export class SetupComponent implements OnInit {
   picUrl = '';
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
     private fb: FormBuilder,
     private afs: AngularFirestore
@@ -37,12 +37,6 @@ export class SetupComponent implements OnInit {
   //creates and adds a user to Firestore
   addUser(dName: string, email: string, uid: string) {
     return this.afs
-      .collection('usernames')
-      .doc(this.usernameForm.value.username)
-      .ref.withConverter(new Converter().usernameConverter)
-      .set(new Username(this.usernameForm.value.username, uid))
-      .then(() => {
-        this.afs
           .collection('users')
           .doc(uid)
           .ref.withConverter(new Converter().userConverter)
@@ -62,7 +56,13 @@ export class SetupComponent implements OnInit {
             )
           )
           .then(() => {
-            this.router.navigate(['/home']);
+            this.afs
+            .collection('usernames')
+            .doc(this.usernameForm.value.username)
+            .ref.withConverter(new Converter().usernameConverter)
+            .set(new Username(this.usernameForm.value.username, uid))
+            .then(() => {
+              this.router.navigate(['/home']);
           });
       });
   }

angularSTEP/src/app/signup/signup.component.ts

@@ -19,7 +19,7 @@ export class SignupComponent implements OnInit {
   picUrl = '';
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
     private fb: FormBuilder,
     private afs: AngularFirestore
@@ -80,12 +80,6 @@ export class SignupComponent implements OnInit {
   //creates the user and adds it to Firestore
   addUser(uid: string) {
     return this.afs
-      .collection('usernames')
-      .doc(this.signUpForm.value.username)
-      .ref.withConverter(new Converter().usernameConverter)
-      .set(new Username(this.signUpForm.value.username, uid))
-      .then(() => {
-        this.afs
           .collection('users')
           .doc(uid)
           .ref.withConverter(new Converter().userConverter)
@@ -105,7 +99,13 @@ export class SignupComponent implements OnInit {
             )
           )
           .then(() => {
-            this.router.navigate(['/home']);
+            this.afs
+            .collection('usernames')
+            .doc(this.signUpForm.value.username)
+            .ref.withConverter(new Converter().usernameConverter)
+            .set(new Username(this.signUpForm.value.username, uid))
+            .then(() => {
+              this.router.navigate(['/home']);
           });
       });
   }

angularSTEP/src/app/user-page/user-page.component.html

@@ -4,6 +4,8 @@
         <div class="name-header">
             <h1>{{ displayName }}</h1>
             <h3>@{{ username }}</h3>
+            <button *ngIf='!userFollowing && loggedIn' (click)='follow()' mat-button color="primary">Follow <mat-icon>check</mat-icon></button>
+            <button *ngIf='userFollowing && loggedIn' (click)='unfollow()' mat-button color="accent">Unfollow <mat-icon>close</mat-icon></button>
         </div>
     </div>
     <button mat-button routerLink="/users">Back</button>

angularSTEP/src/app/user-page/user-page.component.ts

@@ -1,8 +1,10 @@
 import {ActivatedRoute, Router} from '@angular/router';
 import {AngularFirestore} from '@angular/fire/firestore';
-import {Component, OnInit} from '@angular/core';
+import {AngularFireAuth} from '@angular/fire/auth';
+import {Component, OnInit, NgZone} from '@angular/core';
 import {User} from '../user';
 import {Converter} from '../converter';
+import { templateJitUrl } from '@angular/compiler';
 
 @Component({
   selector: 'app-user-page',
@@ -11,16 +13,33 @@ import {Converter} from '../converter';
 })
 export class UserPageComponent implements OnInit {
   username = '';
+  currentPageUid = '';
   loggedIn = false;
   displayName = '';
   picUrl = 'assets/images/blank-profile.png';
   profileLoaded = false;
+  userFollowing = false;
+  currentUserUid!: string;
+  currentUserData: User | undefined = undefined;
 
   constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private afs: AngularFirestore
-  ) {}
+    private afs: AngularFirestore,
+    private fAuth: AngularFireAuth,
+    private zone: NgZone
+  ) {
+    this.fAuth.onAuthStateChanged(auth => {
+      if (auth) {
+        this.loggedIn = true;
+        this.currentUserUid = auth.uid;
+      } else {
+        this.loggedIn = false;
+        this.currentUserData = undefined;
+        this.userFollowing = false;
+      }
+    });
+  }
 
   ngOnInit() {
     const username = this.activatedRoute.snapshot.paramMap.get('username');
@@ -38,10 +57,12 @@ export class UserPageComponent implements OnInit {
       .ref.withConverter(new Converter().usernameConverter)
       .get();
     if (postUsername !== null && postUsername.data() !== undefined) {
+      this.currentPageUid = postUsername.data()?.uid!;
       const postUser = await this.afs
-        .doc('/users/' + postUsername.data()?.uid + '/')
+        .doc('/users/' + this.currentPageUid + '/')
         .ref.withConverter(new Converter().userConverter)
         .get();
+      this.userFollowing = await this.isUserFollowing();
       if (postUser !== null && postUser.data() !== undefined) {
         const user: User = postUser.data()!;
         this.displayName = user.displayName !== null ? user.displayName : '';
@@ -55,4 +76,61 @@ export class UserPageComponent implements OnInit {
       }
     }
   }
+
+  async isUserFollowing() {
+    if (this.currentPageUid && this.loggedIn && this.currentUserUid) {
+      const postUser = await this.afs.firestore
+        .doc('/users/' + this.currentUserUid + '/')
+        .withConverter(new Converter().userConverter)
+        .get();
+      if (postUser) {
+        this.currentUserData = postUser.data();
+        if (
+          this.currentUserData &&
+          this.currentUserData.following.indexOf(this.currentPageUid) > -1
+        ) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  setFollowing(follow: boolean){
+    if (this.currentUserData && this.currentUserData.following) {
+      if(follow){
+        this.currentUserData.following.push(this.currentPageUid);
+      } else {
+        const index = this.currentUserData.following.indexOf(this.currentPageUid);
+        if (index > -1) {
+          this.currentUserData.following.splice(index, 1);
+        }
+      }
+      this.fAuth.currentUser.then(user => {
+        if (user) {
+          this.afs
+            .collection('users')
+            .doc(this.currentUserUid)
+            .ref.withConverter(new Converter().userConverter)
+            .update({following: this.currentUserData!.following})
+            .then(() => {
+                this.userFollowing = follow;
+            });
+        }
+      });
+    }
+  }
+
+  follow() {
+    this.zone.run(() => {
+      this.setFollowing(true);
+    })
+  }
+
+
+  unfollow() {
+    this.zone.run(() => {
+      this.setFollowing(false)
+    })
+  }
 }

angularSTEP/src/app/view-profiles/view-profiles.component.ts

@@ -2,7 +2,7 @@ import {
   AngularFirestore,
   AngularFirestoreCollection,
 } from '@angular/fire/firestore';
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, NgZone} from '@angular/core';
 
 import {AngularFireAuth} from '@angular/fire/auth';
 import {Observable} from 'rxjs';
@@ -20,9 +20,10 @@ export class ViewProfilesComponent implements OnInit {
   users: Observable<User[]>;
 
   constructor(
-    public fAuth: AngularFireAuth,
+    private fAuth: AngularFireAuth,
     private router: Router,
-    private afs: AngularFirestore
+    private afs: AngularFirestore,
+    private zone: NgZone
   ) {
     this.userCollection = this.afs.collection('users');
     this.users = this.userCollection.valueChanges();
@@ -37,7 +38,9 @@ export class ViewProfilesComponent implements OnInit {
   }
 
   goToUser(username: string) {
-    this.router.navigate(['users/' + username]);
+    this.zone.run(() => {
+      this.router.navigate(['users/', username]);
+    })
   }
 
   ngOnInit() {}