From 7fa6f2a1b9edcf53ca5d922bd0943417ebc40a30 Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Tue, 8 Nov 2022 04:36:00 +0000
Subject: [PATCH] Use fetch API for login and getProfile calls

---
 src/app/app.component.ts               |  2 +-
 src/app/shared/twigs.http.service.ts   | 40 +++++++++++++++-----------
 src/app/shared/twigs.local.service.ts  | 14 ++++-----
 src/app/shared/twigs.service.ts        |  4 +--
 src/app/users/login/login.component.ts |  8 +++---
 5 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cb29f19..8ad4a71 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -47,7 +47,7 @@ export class AppComponent implements OnInit {
       if (savedUser) {
         this.user.next(savedUser);
       }
-      this.twigsService.getProfile(userId).subscribe(fetchedUser => {
+      this.twigsService.getProfile(userId).then(fetchedUser => {
         this.storage.setItem('user', JSON.stringify(fetchedUser));
         this.user.next(fetchedUser);
         if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
diff --git a/src/app/shared/twigs.http.service.ts b/src/app/shared/twigs.http.service.ts
index c2d0c65..35594a3 100644
--- a/src/app/shared/twigs.http.service.ts
+++ b/src/app/shared/twigs.http.service.ts
@@ -25,23 +25,23 @@ export class TwigsHttpService implements TwigsService {
     private storage: Storage
   ) { }
 
-  login(email: string, password: string): Observable<User> {
-    return new Observable(emitter => {
-      const params = {
+  login(email: string, password: string): Promise<User> {
+    return fetch(this.apiUrl + '/users/login', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
         'username': email,
         'password': password
-      };
-      this.http.post<AuthToken>(this.apiUrl + '/users/login', params, this.options)
-        .subscribe(
-          auth => {
-            // TODO: Use token expiration to determine cookie expiration
-            this.storage.setItem('Authorization', auth.token);
-            this.storage.setItem('userId', auth.userId);
-            this.getProfile(auth.userId).subscribe(user => emitter.next(user), error => emitter.error(error));
-          },
-          error => emitter.error(error)
-        );
-    });
+      })
+    })
+      .then(res => res.json())
+      .then((auth: AuthToken) => {
+        this.storage.setItem('Authorization', auth.token);
+        this.storage.setItem('userId', auth.userId);
+        return this.getProfile(auth.userId);
+      });
   }
 
   register(username: string, email: string, password: string): Observable<User> {
@@ -307,8 +307,14 @@ export class TwigsHttpService implements TwigsService {
   }
 
   // Users
-  getProfile(id: string): Observable<User> {
-    return this.http.get<User>(`${this.apiUrl}/users/${id}`, this.options);
+  getProfile(id: string): Promise<User> {
+    return fetch(`${this.apiUrl}/users/${id}`, {
+      credentials: 'include',
+      headers: {
+        'Authorization': `Bearer ${this.storage.getItem('Authorization')}`
+      }
+    })
+      .then(res => res.json());
   }
 
   getUsersByUsername(username: string): Observable<User[]> {
diff --git a/src/app/shared/twigs.local.service.ts b/src/app/shared/twigs.local.service.ts
index 67fe3a7..97148f2 100644
--- a/src/app/shared/twigs.local.service.ts
+++ b/src/app/shared/twigs.local.service.ts
@@ -27,15 +27,15 @@ export class TwigsLocalService implements TwigsService {
   private categories: Category[] = [];
 
   // Auth
-  login(email: string, password: string): Observable<User> {
-    return new Observable(subscriber => {
+  login(email: string, password: string): Promise<User> {
+    return new Promise((resolve, reject) => {
       const filteredUsers = this.users.filter(user => {
         return (user.email === email || user.username === email);
       });
       if (filteredUsers.length !== 0) {
-        subscriber.next(filteredUsers[0]);
+        resolve(filteredUsers[0]);
       } else {
-        subscriber.error('No users found');
+        reject('No users found');
       }
     });
   }
@@ -313,9 +313,9 @@ export class TwigsLocalService implements TwigsService {
   }
 
   // Users
-  getProfile(id: string): Observable<User> {
-    return new Observable(subscriber => {
-      subscriber.error("Not yet implemented")
+  getProfile(id: string): Promise<User> {
+    return new Promise((resolve, reject) => {
+      reject("Not yet implemented")
     });
   }
 
diff --git a/src/app/shared/twigs.service.ts b/src/app/shared/twigs.service.ts
index a581f3a..ea6cb8b 100644
--- a/src/app/shared/twigs.service.ts
+++ b/src/app/shared/twigs.service.ts
@@ -7,7 +7,7 @@ import { Transaction } from '../transactions/transaction';
 
 export interface TwigsService {
   // Auth
-  login(email: string, password: string): Observable<User>;
+  login(email: string, password: string): Promise<User>;
   register(username: string, email: string, password: string): Observable<User>;
   logout(): Observable<void>;
 
@@ -54,7 +54,7 @@ export interface TwigsService {
   updateTransaction(id: string, changes: object): Observable<Transaction>;
   deleteTransaction(id: string): Observable<void>;
 
-  getProfile(id: string): Observable<User>;
+  getProfile(id: string): Promise<User>;
   getUsersByUsername(username: string): Observable<User[]>;
 }
 
diff --git a/src/app/users/login/login.component.ts b/src/app/users/login/login.component.ts
index 2863c1a..ed643ad 100644
--- a/src/app/users/login/login.component.ts
+++ b/src/app/users/login/login.component.ts
@@ -32,13 +32,13 @@ export class LoginComponent implements OnInit {
   login(): void {
     this.isLoading = true;
     this.twigsService.login(this.email, this.password)
-      .subscribe(user => {
+      .then(user => {
         this.app.user.next(user);
         this.router.navigate([this.redirect || '/'])
-      },
-      error => {
+      })
+      .catch(error => {
         console.error(error)
-        //TODO: Replace this with an in-app dialog
+        // TODO: Replace this with an in-app dialog
         alert("Login failed. Please verify you have the correct credentials");
         this.isLoading = false;
       })