Migrate categories backend calls to promise api

src/app/budgets/budget-details/budget-details.component.ts

@@ -4,8 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AppComponent } from 'src/app/app.component';
 import { Transaction } from 'src/app/transactions/transaction';
 import { Category } from 'src/app/categories/category';
-import { Observable } from 'rxjs';
-// import { Label } from 'ng2-charts';
 import { ChartDataset } from 'chart.js';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 import { Actionable } from '../../shared/actionable';
@@ -16,7 +14,6 @@ import { Actionable } from '../../shared/actionable';
   styleUrls: ['./budget-details.component.css']
 })
 export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
-
   budget: Budget;
   public budgetBalance: number;
   public transactions: Transaction[];
@@ -132,11 +129,10 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
       .subscribe(transactions => this.transactions = <Transaction[]>transactions);
   }
 
-  getCategories(): void {
-    this.twigsService.getCategories(this.budget.id).subscribe(categories => {
+  async getCategories() {
+    const categories = await this.twigsService.getCategories(this.budget.id)
     const categoryBalances = new Map<string, number>();
     let categoryBalancesCount = 0;
-      console.log(categories);
     for (const category of categories) {
       if (category.expense) {
         this.expenses.push(category);
@@ -145,8 +141,8 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
         this.income.push(category);
         this.expectedIncome += category.amount;
       }
-        this.twigsService.getCategoryBalance(category.id, this.from, this.to).subscribe(
-          balance => {
+      try {
+        const balance = await this.twigsService.getCategoryBalance(category.id, this.from, this.to)
         console.log(balance);
         if (category.expense) {
           this.actualExpenses += balance * -1;
@@ -154,21 +150,17 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
           this.actualIncome += balance;
         }
         categoryBalances.set(category.id, balance);
-            categoryBalancesCount++;
-          },
-          error => { categoryBalancesCount++; },
-          () => {
+        if (categoryBalancesCount === categories.length - 1) {
           // This weird workaround is to force the OnChanges callback to be fired.
           // Angular needs the reference to the object to change in order for it to
           // work.
-            if (categoryBalancesCount === categories.length) {
           this.categoryBalances = categoryBalances;
           this.updateBarChart();
         }
+      } finally {
+        categoryBalancesCount++;
       }
-        );
     }
-    });
   }
 
   doAction(): void {

src/app/categories/categories.component.ts

@@ -33,7 +33,7 @@ export class CategoriesComponent implements OnInit {
   }
 
   getCategories(): void {
-    this.twigsService.getCategories(this.budgetId).subscribe(categories => {
+    this.twigsService.getCategories(this.budgetId).then(categories => {
       this.categories = categories;
       for (const category of this.categories) {
         this.getCategoryBalance(category).subscribe(balance => this.categoryBalances.set(category.id, balance));

src/app/categories/category-details/category-details.component.ts

@@ -45,7 +45,7 @@ export class CategoryDetailsComponent implements OnInit, OnDestroy, Actionable {
   getCategory(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getCategory(id)
-      .subscribe(category => {
+      .then(category => {
         category.amount /= 100;
         this.app.setTitle(category.title)
         this.category = category;

src/app/categories/category-form/category-form.component.ts

@@ -26,10 +26,10 @@ export class CategoryFormComponent implements OnInit {
   }
 
   save(): void {
-    let observable;
+    let promise;
     if (this.create) {
       // This is a new category, save it
-      observable = this.twigsService.createCategory(
+      promise = this.twigsService.createCategory(
         this.currentCategory.id,
         this.budgetId,
         this.currentCategory.title,
@@ -39,7 +39,7 @@ export class CategoryFormComponent implements OnInit {
       );
     } else {
       // This is an existing category, update it
-      observable = this.twigsService.updateCategory(
+      promise = this.twigsService.updateCategory(
         this.currentCategory.id,
         {
           name: this.currentCategory.title,
@@ -50,13 +50,13 @@ export class CategoryFormComponent implements OnInit {
         }
       );
     }
-    observable.subscribe(val => {
+    promise.then(_ => {
       this.app.goBack();
     });
   }
 
   delete(): void {
-    this.twigsService.deleteCategory(this.currentCategory.id).subscribe(() => {
+    this.twigsService.deleteCategory(this.currentCategory.id).then(() => {
       this.app.goBack();
     });
   }

src/app/categories/edit-category/edit-category.component.ts

@@ -28,7 +28,7 @@ export class EditCategoryComponent implements OnInit {
   getCategory(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getCategory(id)
-      .subscribe(category => {
+      .then(category => {
         category.amount /= 100;
         this.app.setTitle(category.title)
         this.category = category;

src/app/shared/twigs.http.service.ts

@@ -122,38 +122,38 @@ export class TwigsHttpService implements TwigsService {
   }
 
   // Categories
-  getCategories(budgetId: string, count?: number): Observable<Category[]> {
-    const params = {
-      params: new HttpParams()
-        .set('budgetIds', `${budgetId}`)
-        .set('archived', false)
-    };
-    return this.http.get<Category[]>(`${this.apiUrl}/categories`, Object.assign(params, this.options));
+  getCategories(budgetId: string, count?: number): Promise<Category[]> {
+    const url = new URL(`/api/categories`, this.apiUrl)
+    url.searchParams.set('budgetIds', budgetId)
+    url.searchParams.set('archived', 'false')
+    return this.request(url, HttpMethod.GET);
   }
 
-  getCategory(id: string): Observable<Category> {
-    return this.http.get<Category>(`${this.apiUrl}/categories/${id}`, this.options);
+  getCategory(id: string): Promise<Category> {
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.GET);
   }
 
-  getCategoryBalance(
+  async getCategoryBalance(
     id: string,
     from?: Date,
     to?: Date
-  ): Observable<number> {
-    let httpParams = new HttpParams();
+  ): Promise<number> {
+    const url = new URL(`/api/transactions/sum`, this.apiUrl)
+    url.searchParams.set('categoryId', id)
     if (from) {
-      httpParams = httpParams.set('from', from.toISOString());
+      url.searchParams.set('from', from.toISOString());
     }
     if (to) {
-      httpParams = httpParams.set('to', to.toISOString());
+      url.searchParams.set('to', to.toISOString());
     }
-    const params = { params: httpParams };
-    return this.http.get<any>(`${this.apiUrl}/transactions/sum?categoryId=${id}`, { ...this.options, ...params })
-      .pipe(map(obj => obj.balance));
+    const res: any = await this.request(url, HttpMethod.GET);
+    return res.balance;
   }
 
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
-    const params = {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
+    const url = new URL(`/api/categories`, this.apiUrl)
+    const body = {
       'id': id,
       'title': name,
       'description': description,
@@ -161,15 +161,17 @@ export class TwigsHttpService implements TwigsService {
       'expense': isExpense,
       'budgetId': budgetId
     };
-    return this.http.post<Category>(this.apiUrl + '/categories', params, this.options);
+    return this.request(url, HttpMethod.POST, body);
   }
 
-  updateCategory(id: string, changes: object): Observable<Category> {
-    return this.http.put<Category>(`${this.apiUrl}/categories/${id}`, changes, this.options);
+  updateCategory(id: string, changes: object): Promise<Category> {
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.PUT, changes);
   }
 
-  deleteCategory(id: string): Observable<void> {
-    return this.http.delete<void>(`${this.apiUrl}/categories/${id}`, this.options);
+  deleteCategory(id: string): Promise<void> {
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.DELETE);
   }
 
   // Transactions

src/app/shared/twigs.local.service.ts

@@ -134,31 +134,26 @@ export class TwigsLocalService implements TwigsService {
   }
 
   // Categories
-  getCategories(budgetId: string, count?: number): Observable<Category[]> {
-    return new Observable(subscriber => {
-      subscriber.next(this.categories.filter(category => {
+  getCategories(budgetId: string, count?: number): Promise<Category[]> {
+    return new Promise((resolve, reject) => {
+      resolve(this.categories.filter(category => {
         return category.budgetId === budgetId;
       }));
-      subscriber.complete();
     });
   }
 
-  getCategory(id: string): Observable<Category> {
-    return new Observable(subscriber => {
-      subscriber.next(this.findById(this.categories, id));
-      subscriber.complete();
+  getCategory(id: string): Promise<Category> {
+    return new Promise((resolve, reject) => {
+      resolve(this.findById(this.categories, id));
     });
   }
 
-  getCategoryBalance(id: string, from?: Date, to?: Date): Observable<number> {
-    return new Observable(emitter => {
-      emitter.next(20);
-      emitter.complete()
-    })
+  getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number> {
+    return Promise.resolve(20);
   }
 
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
-    return Observable.create(subscriber => {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
+    return new Promise((resolve, reject) => {
       const category = new Category();
       category.title = name;
       category.description = description;
@@ -167,13 +162,12 @@ export class TwigsLocalService implements TwigsService {
       category.budgetId = budgetId;
       category.id = id;
       this.categories.push(category);
-      subscriber.next(category);
-      subscriber.complete();
+      resolve(category);
     });
   }
 
-  updateCategory(id: string, changes: object): Observable<Category> {
-    return new Observable(subscriber => {
+  updateCategory(id: string, changes: object): Promise<Category> {
+    return new Promise((resolve, reject) => {
       const category = this.findById(this.categories, id);
       if (category) {
         const index = this.categories.indexOf(category);
@@ -188,23 +182,22 @@ export class TwigsLocalService implements TwigsService {
           ]
         );
         this.categories[index] = category;
-        subscriber.next(category);
+        resolve(category);
       } else {
-        subscriber.error('No category found for given id');
+        reject('No category found for given id');
       }
-      subscriber.complete();
     });
   }
 
-  deleteCategory(id: string): Observable<void> {
-    return new Observable(subscriber => {
+  deleteCategory(id: string): Promise<void> {
+    return new Promise((resolve, reject) => {
       const category = this.findById(this.categories, id);
       if (category) {
         const index = this.categories.indexOf(category);
         delete this.transactions[index];
-        subscriber.complete();
+        resolve();
       } else {
-        subscriber.error('No category found for given id');
+        reject('No category found for given id');
       }
     });
   }

src/app/shared/twigs.service.ts

@@ -25,12 +25,12 @@ export interface TwigsService {
   deleteBudget(id: string): Promise<void>;
 
   // Categories
-  getCategories(budgetId?: string, count?: number): Observable<Category[]>;
-  getCategory(id: string): Observable<Category>;
-  getCategoryBalance(id: string, from?: Date, to?: Date): Observable<number>;
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category>;
-  updateCategory(id: string, changes: object): Observable<Category>;
-  deleteCategory(id: string): Observable<void>;
+  getCategories(budgetId?: string, count?: number): Promise<Category[]>;
+  getCategory(id: string): Promise<Category>;
+  getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number>;
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category>;
+  updateCategory(id: string, changes: object): Promise<Category>;
+  deleteCategory(id: string): Promise<void>;
 
   // Transactions
   getTransactions(

src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts

@@ -54,7 +54,7 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
 
   updateCategories(change: MatRadioChange) {
     this.twigsService.getCategories(this.budgetId)
-      .subscribe(newCategories => {
+      .then(newCategories => {
         this.categories = newCategories.filter(category => category.expense === change.value)
       })
   }