Add recurring transaction methods to api service

Add models for recurring transactions
2021-11-25 07:03:20 -07:00 · 2021-11-25 06:58:47 -07:00
39 changed files with 13575 additions and 17107 deletions
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@ -1,12 +0,0 @@
-FROM mcr.microsoft.com/devcontainers/javascript-node:0-16-bullseye
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -1,23 +0,0 @@
-// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
-{
-	"name": "Twigs Web",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
-	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
-
-	// Features to add to the dev container. More info: https://containers.dev/implementors/features.
-	// "features": {},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// This can be used to network with other containers or with the host.
-	"forwardPorts": [4200, "backend:8080"]
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
-
-	// Configure tool-specific properties.
-	// "customizations": {},
-
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@ -1,46 +0,0 @@
-version: '3.8'
-
-services:
-  app:
-    build: 
-      context: .
-      dockerfile: Dockerfile
-
-    volumes:
-      - ../..:/workspaces:cached
-      
-    # Overrides default command so things don't shut down after the process ends.
-    command: sleep infinity
-
-    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
-    network_mode: service:db
-
-    # Uncomment the next line to use a non-root user for all processes.
-    user: node
-    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
-    # (Adding the "ports" property to this file will not forward from a Codespace.)
-
-  backend:
-    image: ghcr.io/wbrawner/twigs-server:main
-    restart: unless-stopped
-    environment:
-      TWIGS_DB_HOST: db
-      TWIGS_DB_NAME: postgres
-      TWIGS_DB_USER: postgres
-      TWIGS_DB_PASS: postgres
-
-  db:
-    image: postgres:latest
-    restart: unless-stopped
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_USER: postgres
-      POSTGRES_DB: postgres
-
-    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
-    # (Adding the "ports" property to this file will not forward from a Codespace.)
-
-volumes:
-  postgres-data:
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@ -1,54 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
-      - name: Install dependencies with npm
-        run: npm ci
-      - name: Build with NPM
-        run: npm run package
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: dist/twigs
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,12 @@
+{
+    "database.connections": [
+        {
+            "type": "mysql",
+            "name": "root@captain.intra.wbrawner.com (MySql)",
+            "host": "captain.intra.wbrawner.com:3306",
+            "username": "root",
+            "database": null,
+            "password": "U7YE8YsmES8LHB2B39WXNjTQk4d48LzQEZG3cj6wSb2fgeRLEYtrrqTwiqAhrpR3"
+        }
+    ]
+}
--- a/README.md
+++ b/README.md
@ -1,7 +1,5 @@
 # Twigs Web Client

-# IMPORTANT: This repository is no longer maintained. The web version of Twigs has been replaced with a server-rendered implementation in the [backend repository](https://github.com/wbrawner/twigs)
-
 Twigs is an open source budgeting app aimed at people who need to share a budget. This project serves as the web front end, and is powered by Angular. The main back end project can be found at [wbrawner/twigs-server](https://github.com/wbrawner/twigs-server)

 ## Building
--- a/angular.json
+++ b/angular.json
@ -82,21 +82,21 @@
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "buildTarget": "twigs:build"
+            "browserTarget": "twigs:build"
          },
          "configurations": {
            "production": {
-              "buildTarget": "twigs:build:production"
+              "browserTarget": "twigs:build:production"
            },
            "codeserver": {
-              "buildTarget": "twigs:build:codeserver"
+              "browserTarget": "twigs:build:codeserver"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "buildTarget": "twigs:build"
+            "browserTarget": "twigs:build"
          }
        },
        "test": {
@ -138,6 +138,7 @@
      }
    }
  },
+  "defaultProject": "twigs",
  "cli": {
    "analytics": "b8304464-255e-47bb-976a-7ed81af63238"
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
-    "start": "ng serve --configuration=production --host '0.0.0.0'",
+    "start": "ng serve --host '0.0.0.0'",
    "code-server": "ng serve --configuration=codeserver --host \"0.0.0.0\" --disable-host-check --poll=2000",
    "build": "ng build",
    "package": "ng build --configuration=production --service-worker",
@ -15,44 +15,45 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.2.3",
-    "@angular/cdk": "^17.2.1",
-    "@angular/common": "^17.2.3",
-    "@angular/compiler": "^17.2.3",
-    "@angular/core": "^17.2.3",
-    "@angular/forms": "^17.2.3",
-    "@angular/material": "^16.2.0",
-    "@angular/platform-browser": "^17.2.3",
-    "@angular/platform-browser-dynamic": "^17.2.3",
-    "@angular/router": "^17.2.3",
-    "@angular/service-worker": "^17.2.3",
-    "chart.js": "^3.7.0",
-    "core-js": "^3.20.3",
-    "ng2-charts": "^3.0.8",
-    "rxjs": "^7.5.2",
+    "@angular/animations": "^13.0.2",
+    "@angular/cdk": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
+    "@angular/material": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
+    "@angular/service-worker": "^13.0.2",
+    "chart.js": "^2.9.3",
+    "core-js": "^3.19.1",
+    "ng2-charts": "^2.4.3",
+    "rxjs": "^6.3.3",
    "tslib": "^2.3.1",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular/cli": "^17.2.2",
-    "@angular/compiler-cli": "^17.2.3",
-    "@angular/language-service": "^17.2.3",
-    "@types/jasmine": "~3.10.3",
+    "@angular-devkit/build-angular": "^13.0.3",
+    "@angular/cli": "^13.0.3",
+    "@angular/compiler-cli": "^13.0.2",
+    "@angular/language-service": "^13.0.2",
+    "@types/jasmine": "~3.10.2",
    "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^17.0.10",
-    "eslint": "^8.7.0",
-    "jasmine-core": "~4.0.0",
+    "@types/node": "^16.11.9",
+    "codelyzer": "^6.0.2",
+    "eslint": "^8.2.0",
+    "jasmine-core": "~3.10.1",
    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.11",
+    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
-    "npm-check-updates": "^15.0.1",
+    "npm-check-updates": "^12.0.2",
    "protractor": "^7.0.0",
    "ts-node": "~10.4.0",
    "tslint": "^6.1.3",
-    "typescript": "5.3.3"
+    "typescript": "4.4.4"
  }
 }
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -33,7 +33,7 @@ const routes: Routes = [

@NgModule({
  imports: [
-    RouterModule.forRoot(routes, {})
+    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
  ],
  exports: [
    RouterModule
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -3,21 +3,19 @@
 </p>
 <mat-sidenav-container *ngIf="online" class="sidenav-container">
  <mat-sidenav #sidenav mode="over" closed>
-    <mat-nav-list (click)="sidenav.close()" *ngIf="loggedIn">
-      <a mat-list-item routerLink="">{{ getUsername() }}</a>
-      <a mat-list-item routerLink="/budgets">Budgets</a>
-      <a mat-list-item (click)="logout()">Logout</a>
-    </mat-nav-list>
-    <mat-nav-list (click)="sidenav.close()" *ngIf="!loggedIn">
-      <a mat-list-item routerLink="/login">Login</a>
-      <a mat-list-item routerLink="/register">Register</a>
+    <mat-nav-list (click)="sidenav.close()">
+      <a mat-list-item *ngIf="loggedIn" routerLink="">{{ getUsername() }}</a>
+      <a mat-list-item *ngIf="loggedIn" routerLink="/budgets">Budgets</a>
+      <a mat-list-item *ngIf="!loggedIn" routerLink="/login">Login</a>
+      <a mat-list-item *ngIf="!loggedIn" routerLink="/register">Register</a>
+      <a mat-list-item *ngIf="loggedIn" (click)="logout()">Logout</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <span>
        <a mat-icon-button *ngIf="backEnabled" (click)="goBack()">
-        <mat-icon>arrow_back</mat-icon>
+          <mat-icon>arrow_back</mat-icon>
        </a>
        <a mat-icon-button *ngIf="!backEnabled" (click)="sidenav.open()">
          <mat-icon>menu</mat-icon>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -9,126 +9,133 @@ import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
 import { Actionable, isActionable } from './shared/actionable';

@Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-    public title = 'Twigs';
-    public backEnabled = false;
-    public user = new BehaviorSubject<User>(null);
-    public online = window.navigator.onLine;
-    public currentVersion = '';
-    public actionable: Actionable;
-    public loggedIn = false;
+  public title = 'Twigs';
+  public backEnabled = false;
+  public user = new BehaviorSubject<User>(null);
+  public online = window.navigator.onLine;
+  public currentVersion = '';
+  public actionable: Actionable;
+  public loggedIn = false;

-    constructor(
-        @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
-        private location: Location,
-        private router: Router,
-        private appRef: ApplicationRef,
-        private updates: SwUpdate,
-        private changeDetector: ChangeDetectorRef,
-        private storage: Storage,
-        @Inject(DOCUMENT) private document: Document
-    ) { }
+  constructor(
+    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+    private location: Location,
+    private router: Router,
+    private appRef: ApplicationRef,
+    private updates: SwUpdate,
+    private changeDetector: ChangeDetectorRef,
+    private storage: Storage,
+    @Inject(DOCUMENT) private document: Document
+  ) { }

-    ngOnInit(): void {
-        const unauthenticatedRoutes = [
-            '',
-            '/',
-            '/login',
-            '/register'
-        ]
-        let auth = this.storage.getItem('Authorization');
-        let userId = this.storage.getItem('userId');
-        let savedUser = JSON.parse(this.storage.getItem('user')) as User;
-        if (auth && auth.length == 255 && userId) {
-            if (savedUser) {
-                this.user.next(savedUser);
-            }
-            this.twigsService.getProfile(userId).then(fetchedUser => {
-                this.storage.setItem('user', JSON.stringify(fetchedUser));
-                this.user.next(fetchedUser);
-                if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
-                    //TODO: Save last opened budget and redirect to there instead of the main list
-                    this.router.navigateByUrl("/budgets");
-                }
-            });
-        } else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
-            this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
+  ngOnInit(): void {
+    const unauthenticatedRoutes = [
+      '',
+      '/',
+      '/login',
+      '/register'
+    ]
+    let auth = this.storage.getItem('Authorization');
+    let userId = this.storage.getItem('userId');
+    let savedUser = JSON.parse(this.storage.getItem('user')) as User;
+    if (auth && auth.length == 255 && userId) {
+      if (savedUser) {
+        this.user.next(savedUser);
+      }
+      this.twigsService.getProfile(userId).subscribe(fetchedUser => {
+        this.storage.setItem('user', JSON.stringify(fetchedUser));
+        this.user.next(fetchedUser);
+        if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
+          //TODO: Save last opened budget and redirect to there instead of the main list
+          this.router.navigateByUrl("/budgets");
        }
-
-        this.updates.versionUpdates.subscribe(
-            event => {
-                if (event.type == "VERSION_READY") {
-                    console.log('current version is', event.currentVersion);
-                    console.log('available version is', event.latestVersion);
-                    // TODO: Prompt user to click something to update
-                    this.updates.activateUpdate();
-                }
-            },
-            err => {
-
-            }
-        );
-
-        const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
-        const everySixHours$ = interval(6 * 60 * 60 * 1000);
-        const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
-        everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
-        this.user.subscribe(
-            user => {
-                if (user) {
-                    this.loggedIn = true;
-                } else {
-                    this.loggedIn = false;
-                }
-            }
-        )
-        const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
-        this.handleDarkModeChanges(darkMode);
-        darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
+      });
+    } else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
+      this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
    }

-    getUsername(): String {
-        return this.user.value.username;
-    }
+    this.updates.available.subscribe(
+      event => {
+        console.log('current version is', event.current);
+        console.log('available version is', event.available);
+        // TODO: Prompt user to click something to update
+        this.updates.activateUpdate();
+      },
+      err => {

-    goBack(): void {
-        this.location.back();
-    }
+      }
+    );
+    this.updates.activated.subscribe(
+      event => {
+        console.log('old version was', event.previous);
+        console.log('new version is', event.current);
+      },
+      err => {

-    logout(): void {
-        this.twigsService.logout().then(_ => {
-            this.location.go('/');
-            window.location.reload();
-        });
-    }
+      }
+    );

-    setActionable(actionable: Actionable): void {
-        this.actionable = actionable;
-        this.changeDetector.detectChanges();
-    }
-
-    setBackEnabled(enabled: boolean): void {
-        this.backEnabled = enabled;
-        this.changeDetector.detectChanges();
-    }
-
-    setTitle(title: string) {
-        this.title = title;
-        this.changeDetector.detectChanges();
-    }
-
-    handleDarkModeChanges(darkMode: any) {
-        const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
-        let themeColorValue: string;
-        if (darkMode.matches) {
-            themeColorValue = '#333333';
+    const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
+    const everySixHours$ = interval(6 * 60 * 60 * 1000);
+    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
+    everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
+    this.user.subscribe(
+      user => {
+        if (user) {
+          this.loggedIn = true;
        } else {
-            themeColorValue = '#F1F1F1';
+          this.loggedIn = false;
        }
-        themeColor.content = themeColorValue;
+      }
+    )
+    const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
+    this.handleDarkModeChanges(darkMode);
+    darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
+  }
+
+  getUsername(): String {
+    return this.user.value.username;
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  logout(): void {
+    this.twigsService.logout().subscribe(_ => {
+      this.location.go('/');
+      window.location.reload();
+    });
+  }
+
+  setActionable(actionable: Actionable): void {
+    this.actionable = actionable;
+    this.changeDetector.detectChanges();
+  }
+
+  setBackEnabled(enabled: boolean): void {
+    this.backEnabled = enabled;
+    this.changeDetector.detectChanges();
+  }
+
+  setTitle(title: string) {
+    this.title = title;
+    this.changeDetector.detectChanges();
+  }
+
+  handleDarkModeChanges(darkMode: any) {
+    const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
+    let themeColorValue: string;
+    if (darkMode.matches) {
+      themeColorValue = '#333333';
+    } else {
+      themeColorValue = '#F1F1F1';
    }
+    themeColor.content = themeColorValue;
+  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -2,20 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCardModule } from '@angular/material/card';

 import { AppComponent } from './app.component';
 import { TransactionsComponent } from './transactions/transactions.component';
@ -40,7 +40,7 @@ import { environment } from 'src/environments/environment';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { CategoryBreakdownComponent } from './categories/category-breakdown/category-breakdown.component';
-import { NgChartsModule } from 'ng2-charts';
+import { ChartsModule } from 'ng2-charts';
 import { TWIGS_SERVICE } from './shared/twigs.service';
 import { AuthInterceptor } from './shared/auth.interceptor';
 import { TwigsHttpService } from './shared/twigs.http.service';
@ -93,7 +93,7 @@ import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component
    FormsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    HttpClientModule,
-    NgChartsModule,
+    ChartsModule,
    MatCheckboxModule,
    MatCardModule,
  ],
--- a/src/app/budgets/add-edit-budget/add-edit-budget.component.html
+++ b/src/app/budgets/add-edit-budget/add-edit-budget.component.html
@ -4,10 +4,10 @@
 </div>
 <div *ngIf="!isLoading && budget" class="form budget-form">
  <mat-form-field>
-    <input matInput [(ngModel)]="budget.name" placeholder="Name" required autocapitalize="words">
+    <input matInput [(ngModel)]="budget.name" placeholder="Name" required>
  </mat-form-field>
  <mat-form-field>
-    <textarea matInput [(ngModel)]="budget.description" placeholder="Description" autocapitalize="sentences"></textarea>
+    <textarea matInput [(ngModel)]="budget.description" placeholder="Description"></textarea>
  </mat-form-field>
  <button mat-raised-button color="accent" (click)="save()">Save</button>
  <button class="button-delete" mat-raised-button color="warn" *ngIf="!create" (click)="delete()">Delete</button>
--- a/src/app/budgets/add-edit-budget/add-edit-budget.component.ts
+++ b/src/app/budgets/add-edit-budget/add-edit-budget.component.ts
@ -3,7 +3,6 @@ import { Budget } from '../budget';
 import { AppComponent } from 'src/app/app.component';
 import { User, UserPermission, Permission } from 'src/app/users/user';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
-import { Router } from '@angular/router';

@Component({
    selector: 'app-add-edit-budget',
@ -20,7 +19,6 @@ export class AddEditBudgetComponent {

    constructor(
        private app: AppComponent,
-        private router: Router,
        @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
    ) {
        this.app.setTitle(this.title)
@ -29,11 +27,11 @@ export class AddEditBudgetComponent {
    }

    save(): void {
-        let promise: Promise<Budget>;
+        let observable;
        this.isLoading = true;
        if (this.create) {
            // This is a new budget, save it
-            promise = this.twigsService.createBudget(
+            observable = this.twigsService.createBudget(
                this.budget.id,
                this.budget.name,
                this.budget.description,
@ -41,10 +39,10 @@ export class AddEditBudgetComponent {
            );
        } else {
            // This is an existing budget, update it
-            promise = this.twigsService.updateBudget(this.budget.id, this.budget);
+            observable = this.twigsService.updateBudget(this.budget.id, this.budget);
        }
        // TODO: Check if it was actually successful or not
-        promise.then(_ => {
+        observable.subscribe(val => {
            this.app.goBack();
        });
    }
@ -52,14 +50,14 @@ export class AddEditBudgetComponent {
    delete(): void {
        this.isLoading = true;
        this.twigsService.deleteBudget(this.budget.id)
-            .then(() => {
-                this.router.navigateByUrl("/budgets");
+            .subscribe(() => {
+                this.app.goBack();
            });
    }

    // TODO: Implement a search box with suggestions to add users
    searchUsers(username: string) {
-        this.twigsService.getUsersByUsername(username).then(users => {
+        this.twigsService.getUsersByUsername(username).subscribe(users => {
            this.searchedUsers = users;
        });
    }
--- a/src/app/budgets/budget-details/budget-details.component.ts
+++ b/src/app/budgets/budget-details/budget-details.component.ts
@ -4,7 +4,9 @@ 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 { ChartDataset } from 'chart.js';
+import { Observable } from 'rxjs';
+import { Label } from 'ng2-charts';
+import { ChartDataSets } from 'chart.js';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 import { Actionable } from '../../shared/actionable';

@ -14,6 +16,7 @@ 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[];
@ -24,46 +27,18 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
  actualIncome = 0;
  expectedExpenses = 0;
  actualExpenses = 0;
-  barChartLabels: string[] = ['Income', 'Expenses'];
-  barChartData: ChartDataset[] = [
+  barChartLabels: Label[] = ['Income', 'Expenses'];
+  barChartData: ChartDataSets[] = [
    { data: [0, 0], label: 'Expected' },
    { data: [0, 0], label: 'Actual' },
  ];
-  from: Date
-  to: Date

  constructor(
    private app: AppComponent,
    private route: ActivatedRoute,
    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
    private router: Router,
-  ) {
-    let fromStr = this.route.snapshot.queryParamMap.get('from');
-    if (fromStr) {
-      let fromDate = new Date(fromStr);
-      if (!isNaN(fromDate.getTime())) {
-        this.from = fromDate;
-      }
-    }
-
-    if (!this.from) {
-      let date = new Date();
-      date.setHours(0);
-      date.setMinutes(0);
-      date.setSeconds(0);
-      date.setMilliseconds(0);
-      date.setDate(1);
-      this.from = date;
-    }
-
-    let toStr = this.route.snapshot.queryParamMap.get('to');
-    if (toStr) {
-      let toDate = new Date(toStr);
-      if (!isNaN(toDate.getTime())) {
-        this.to = toDate;
-      }
-    }
-  }
+  ) { }

  ngOnInit() {
    this.getBudget();
@ -79,7 +54,7 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
  getBudget() {
    const id = this.route.snapshot.paramMap.get('id');
    this.twigsService.getBudget(id)
-      .then(budget => {
+      .subscribe(budget => {
        this.app.setTitle(budget.name)
        this.budget = budget;
        this.getBalance();
@ -112,10 +87,9 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {

  getBalance(): void {
    const id = this.route.snapshot.paramMap.get('id');
-    this.twigsService.getBudgetBalance(id, this.from, this.to)
-      .then(balance => {
-        this.budgetBalance = balance;
-      });
+    this.twigsService.getBudgetBalance(id).subscribe(balance => {
+      this.budgetBalance = balance;
+    });
  }

  getTransactions(): void {
@ -126,41 +100,46 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
    date.setMilliseconds(0);
    date.setDate(1);
    this.twigsService.getTransactions(this.budget.id, null, 5, date)
-      .then(transactions => this.transactions = <Transaction[]>transactions);
+      .subscribe(transactions => this.transactions = <Transaction[]>transactions);
  }

-  async getCategories() {
-    const categories = await this.twigsService.getCategories(this.budget.id)
-    const categoryBalances = new Map<string, number>();
-    let categoryBalancesCount = 0;
-    for (const category of categories) {
-      if (category.expense) {
-        this.expenses.push(category);
-        this.expectedExpenses += category.amount;
-      } else {
-        this.income.push(category);
-        this.expectedIncome += category.amount;
-      }
-      try {
-        const balance = await this.twigsService.getCategoryBalance(category.id, this.from, this.to)
-        console.log(balance);
+  getCategories(): void {
+    this.twigsService.getCategories(this.budget.id).subscribe(categories => {
+      const categoryBalances = new Map<string, number>();
+      let categoryBalancesCount = 0;
+      console.log(categories);
+      for (const category of categories) {
        if (category.expense) {
-          this.actualExpenses += balance * -1;
+          this.expenses.push(category);
+          this.expectedExpenses += category.amount;
        } else {
-          this.actualIncome += balance;
+          this.income.push(category);
+          this.expectedIncome += category.amount;
        }
-        categoryBalances.set(category.id, balance);
-        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.
-          this.categoryBalances = categoryBalances;
-          this.updateBarChart();
-        }
-      } finally {
-        categoryBalancesCount++;
+        this.twigsService.getCategoryBalance(category.id).subscribe(
+          balance => {
+            console.log(balance);
+            if (category.expense) {
+              this.actualExpenses += balance * -1;
+            } else {
+              this.actualIncome += balance;
+            }
+            categoryBalances.set(category.id, balance);
+            categoryBalancesCount++;
+          },
+          error => { categoryBalancesCount++; },
+          () => {
+            // 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();
+            }
+          }
+        );
      }
-    }
+    });
  }

  doAction(): void {
--- a/src/app/budgets/budget.component.ts
+++ b/src/app/budgets/budget.component.ts
@ -32,17 +32,16 @@ export class BudgetsComponent implements OnInit {
        this.app.setTitle('Budgets')
        this.loggedIn = true;
        this.loading = true;
-        this.twigsService.getBudgets()
-          .then(
-            budgets => {
-              console.log(budgets)
-              this.budgets = budgets;
-              this.loading = false;
-            })
-          .catch(error => {
-            console.log(error)
+        this.twigsService.getBudgets().subscribe(
+          budgets => {
+            console.log(budgets)
+            this.budgets = budgets;
            this.loading = false;
-          });
+          },
+          error => {
+            this.loading = false;
+          }
+        );    
      },
      error => {
        this.loading = false;
--- a/src/app/budgets/edit-budget/edit-budget.component.ts
+++ b/src/app/budgets/edit-budget/edit-budget.component.ts
@ -20,7 +20,7 @@ export class EditBudgetComponent implements OnInit {
  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.twigsService.getBudget(id)
-      .then(budget => {
+      .subscribe(budget => {
        this.budget = budget;
      });
  }
--- a/src/app/categories/categories.component.ts
+++ b/src/app/categories/categories.component.ts
@ -1,9 +1,11 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Input, Inject } from '@angular/core';
 import { Category } from './category';
 import { AppComponent } from '../app.component';
+import { Observable } from 'rxjs';
+import { TransactionType } from '../transactions/transaction.type';
+import { Budget } from '../budgets/budget';
 import { ActivatedRoute } from '@angular/router';
 import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
-import { Transaction } from '../transactions/transaction';

@Component({
  selector: 'app-categories',
@ -31,31 +33,27 @@ export class CategoriesComponent implements OnInit {
  }

  getCategories(): void {
-    this.twigsService.getCategories(this.budgetId).then(categories => {
+    this.twigsService.getCategories(this.budgetId).subscribe(categories => {
      this.categories = categories;
      for (const category of this.categories) {
-        this.getCategoryBalance(category).then(balance => this.categoryBalances.set(category.id, balance));
+        this.getCategoryBalance(category).subscribe(balance => this.categoryBalances.set(category.id, balance));
      }
    });
  }

-  getCategoryBalance(category: Category): Promise<number> {
-    return new Promise(async (resolve, reject) => {
-      let transactions: Transaction[]
-      try {
-        transactions = await this.twigsService.getTransactions(this.budgetId, category.id)
-      } catch(e) {
-        reject(e)
-      }
-      let balance = 0;
-      for (const transaction of transactions) {
-        if (transaction.expense) {
-          balance -= transaction.amount;
-        } else {
-          balance += transaction.amount;
+  getCategoryBalance(category: Category): Observable<number> {
+    return Observable.create(subscriber => {
+      this.twigsService.getTransactions(this.budgetId, category.id).subscribe(transactions => {
+        let balance = 0;
+        for (const transaction of transactions) {
+          if (transaction.expense) {
+            balance -= transaction.amount;
+          } else {
+            balance += transaction.amount;
+          }
        }
-      }
-      resolve(balance);
+        subscriber.next(balance);
+      });
    });
  }
 }
--- a/src/app/categories/category-breakdown/category-breakdown.component.html
+++ b/src/app/categories/category-breakdown/category-breakdown.component.html
@ -4,6 +4,6 @@
    [options]="barChartOptions"
    [labels]="barChartLabels"
    [legend]="barChartLegend"
-    [type]="barChartType">
+    [chartType]="barChartType">
  </canvas>
 </div>
--- a/src/app/categories/category-breakdown/category-breakdown.component.ts
+++ b/src/app/categories/category-breakdown/category-breakdown.component.ts
@ -1,8 +1,8 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange, ViewChild } from '@angular/core';
 import { Category } from '../category';
 import { CategoriesComponent } from '../categories.component';
-import { ChartConfiguration, ChartType, ChartDataset } from 'chart.js';
-import { BaseChartDirective } from 'ng2-charts';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { BaseChartDirective, Label } from 'ng2-charts';

@Component({
  selector: 'app-category-breakdown',
@ -10,24 +10,22 @@ import { BaseChartDirective } from 'ng2-charts';
  styleUrls: ['./category-breakdown.component.css']
 })
 export class CategoryBreakdownComponent implements OnInit, OnChanges {
-  barChartOptions: ChartConfiguration['options'] = {
+  barChartOptions: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
-      x: {
+      xAxes: [{
        ticks: {
-          // beginAtZero: true
+          beginAtZero: true
        }
-      },
-      y: {}
+      }], yAxes: [{}]
    },
-    indexAxis: 'y'
  };
-  @Input() barChartLabels: string[];
-  @Input() barChartData: ChartDataset[] = [
+  @Input() barChartLabels: Label[];
+  @Input() barChartData: ChartDataSets[] = [
    { data: [0, 0, 0, 0], label: '' },
  ];
-  barChartType: ChartType = 'bar';
+  barChartType: ChartType = 'horizontalBar';
  barChartLegend = true;
  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

@ -37,9 +35,9 @@ export class CategoryBreakdownComponent implements OnInit, OnChanges {

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
-    // if (changes.barChartLabels) {
-      // this.barChartLabels = changes.barChartLabels.currentValue;
-    // }
+    if (changes.barChartLabels) {
+      this.barChartLabels = changes.barChartLabels.currentValue;
+    }
    if (changes.barChartData) {
      this.barChartData = changes.barChartData.currentValue;
    }
--- a/src/app/categories/category-details/category-details.component.ts
+++ b/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)
-      .then(category => {
+      .subscribe(category => {
        category.amount /= 100;
        this.app.setTitle(category.title)
        this.category = category;
--- a/src/app/categories/category-form/category-form.component.html
+++ b/src/app/categories/category-form/category-form.component.html
@ -2,14 +2,14 @@
  <p>Select a category from the list to view details about it or edit it.</p>
 </div>
 <div *ngIf="currentCategory" class="form category-form">
-  <mat-form-field (keyup.enter)="save()">
-    <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required autocapitalize="words">
+  <mat-form-field (keyup.enter)="doAction()">
+    <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required>
  </mat-form-field>
-  <mat-form-field (keyup.enter)="save()">
-    <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description" autocapitalize="sentences"></textarea>
+  <mat-form-field (keyup.enter)="doAction()">
+    <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description"></textarea>
  </mat-form-field>
-  <mat-form-field (keyup.enter)="save()">
-    <input matInput type="input" [(ngModel)]="currentCategory.amount" placeholder="Amount" required step="0.01">
+  <mat-form-field (keyup.enter)="doAction()">
+    <input matInput type="text" [(ngModel)]="currentCategory.amount" placeholder="Amount" required>
  </mat-form-field>
  <mat-radio-group [(ngModel)]="currentCategory.expense">
    <mat-radio-button [value]="true">Expense</mat-radio-button>
--- a/src/app/categories/category-form/category-form.component.ts
+++ b/src/app/categories/category-form/category-form.component.ts
@ -1,8 +1,7 @@
-import { Component, OnInit, Input, Inject } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, Inject } from '@angular/core';
 import { Category } from '../category';
 import { AppComponent } from 'src/app/app.component';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
-import { decimalToInteger } from 'src/app/shared/utils';

@Component({
  selector: 'app-category-form',
@ -27,35 +26,37 @@ export class CategoryFormComponent implements OnInit {
  }

  save(): void {
-    let promise;
-    this.currentCategory.amount = decimalToInteger(String(this.currentCategory.amount))
+    let observable;
    if (this.create) {
      // This is a new category, save it
-      promise = this.twigsService.createCategory(
+      observable = this.twigsService.createCategory(
        this.currentCategory.id,
        this.budgetId,
        this.currentCategory.title,
        this.currentCategory.description,
-        this.currentCategory.amount,
+        this.currentCategory.amount * 100,
        this.currentCategory.expense
      );
    } else {
      // This is an existing category, update it
-      const updatedCategory: Category = {
-        ...this.currentCategory,
-      }
-      promise = this.twigsService.updateCategory(
+      observable = this.twigsService.updateCategory(
        this.currentCategory.id,
-        this.currentCategory
+        {
+          name: this.currentCategory.title,
+          description: this.currentCategory.description,
+          amount: this.currentCategory.amount * 100,
+          expense: this.currentCategory.expense,
+          archived: this.currentCategory.archived
+        }
      );
    }
-    promise.then(_ => {
+    observable.subscribe(val => {
      this.app.goBack();
    });
  }

  delete(): void {
-    this.twigsService.deleteCategory(this.currentCategory.id).then(() => {
+    this.twigsService.deleteCategory(this.currentCategory.id).subscribe(() => {
      this.app.goBack();
    });
  }
--- a/src/app/categories/edit-category/edit-category.component.ts
+++ b/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)
-      .then(category => {
+      .subscribe(category => {
        category.amount /= 100;
        this.app.setTitle(category.title)
        this.category = category;
--- a/src/app/recurringtransactions/recurringtransaction.ts
+++ b/src/app/recurringtransactions/recurringtransaction.ts
@ -1,7 +1,7 @@
 export class RecurringTransaction {
  id: string = '';
  title: string;
-  description?: string = null;
+  description: string = null;
  frequency: Frequency;
  start: Date = new Date();
  end?: Date;
@ -18,7 +18,7 @@ export class Frequency {
  time: Time;
  amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear);

-  private constructor(unit: FrequencyUnit, count: number, time: Time, amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear)) {
+  private constructor(unit: FrequencyUnit, count: number, time: Time, amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear) = null) {
    this.unit = unit;
    this.count = count;
    this.time = time;
@ -68,20 +68,6 @@ export class Frequency {
        throw new Error(`Invalid Frequency format: ${s}`);
    }
  }
-
-  toString(): string {
-    let parts = [this.unit.toString()]
-    parts.push(this.count.toString())
-    if (this.amount) {
-      if (this.unit === FrequencyUnit.WEEKLY) {
-        parts.push(Array.from(this.amount as Set<DayOfWeek>).join(','))
-      } else {
-        parts.push(this.amount.toString())
-      }
-    }
-    parts.push(this.time.toString())
-    return parts.join(';')
-  }
 }

 export enum FrequencyUnit {
@ -111,7 +97,7 @@ export class Time {
  }

  static parse(s: string): Time {
-    if (!s.match(/[0-9]{2}:[0-9]{2}:[0-9]{2}/)) {
+    if (!s.match(/[0-9]{2}:[0-9]{2}:[0-9]{2}/) {
      throw new Error('Invalid time format. Time must be formatted as HH:mm:ss');
    }
    const parts = s.split(':').map(part => Number.parseInt(part));
@ -170,10 +156,6 @@ export class DayOfMonth {
      return DayOfMonth.PositionalDayOfWeek(position, DayOfWeek[parts[1]]);
    }
  }
-
-  toString(): string {
-    return `${this.position}-${this.day}`
-  }
 }

 export class DayOfYear {
@ -212,10 +194,4 @@ export class DayOfYear {
    }
    return new DayOfYear(parts[0], parts[1]);
  }
-
-  toString(): string {
-    const monthString = this.month.toString().padStart(2, '0')
-    const dayString = this.day.toString().padStart(2, '0')
-    return `${monthString}-${dayString}`
-  }
 }
--- a/src/app/shared/twigs.http.service.ts
+++ b/src/app/shared/twigs.http.service.ts
@ -1,77 +1,109 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { BehaviorSubject, Observable, pipe, Subscriber } from 'rxjs';
 import { User, UserPermission, Permission, AuthToken } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
 import { environment } from '../../environments/environment';
-import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';
+import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
 })
 export class TwigsHttpService implements TwigsService {

+  private options = {
+    withCredentials: true
+  };
  private apiUrl = environment.apiUrl;
+  private budgets: BehaviorSubject<Budget[]> = new BehaviorSubject(null);

  constructor(
+    private http: HttpClient,
    private storage: Storage
  ) { }

-  async login(email: string, password: string): Promise<User> {
-    const url = new URL('/api/users/login', this.apiUrl)
-    const auth: AuthToken = await this.request(url, HttpMethod.POST, {
-      'username': email,
-      'password': password
+  login(email: string, password: string): Observable<User> {
+    return new Observable(emitter => {
+      const params = {
+        '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)
+        );
    });
-    this.storage.setItem('Authorization', auth.token);
-    this.storage.setItem('userId', auth.userId);
-    return await this.getProfile(auth.userId);
  }

-  register(username: string, email: string, password: string): Promise<User> {
-    const body = {
+  register(username: string, email: string, password: string): Observable<User> {
+    const params = {
      'username': username,
      'email': email,
      'password': password
    };
-    const url = new URL('/api/users/register', this.apiUrl)
-    return this.request<User>(url, HttpMethod.POST, body);
+    return this.http.post<User>(this.apiUrl + '/users/register', params, this.options);
  }

-  logout(): Promise<void> {
-    this.storage.removeItem('Authorization');
-    this.storage.removeItem('userId');
-    return Promise.resolve()
-    // TODO: Implement this to revoke the token server-side as well
+  logout(): Observable<void> {
+    return new Observable(emitter => {
+      this.storage.removeItem('Authorization');
+      this.storage.removeItem('userId');
+      emitter.next();
+      emitter.complete();
+    })
+    // TODO: Implement this when JWT auth is implemented
    // return this.http.post<void>(this.apiUrl + '/login?logout', this.options);
  }

  // Budgets
-  getBudgets(): Promise<Budget[]> {
-    const url = new URL('/api/budgets', this.apiUrl)
-    return this.request(url, HttpMethod.GET)
+  getBudgets(): Observable<Budget[]> {
+    this.http.get<Budget[]>(this.apiUrl + '/budgets', this.options)
+      .subscribe(budgets => {
+        this.budgets.next(budgets);
+      });
+    return this.budgets;
  }

-  getBudgetBalance(
-    id: string,
-    from?: Date,
-    to?: Date
-  ): Promise<number> {
-    const url = new URL('/api/transactions/sum', this.apiUrl)
-    url.searchParams.set('budgetId', id)
-    if (from) {
-      url.searchParams.set('from', from.toISOString());
-    }
-    if (to) {
-      url.searchParams.set('to', to.toISOString());
-    }
-    return this.request(url, HttpMethod.GET).then((res: any) => res.balance)
+  getBudgetBalance(id: string): Observable<number> {
+    return this.http.get<any>(`${this.apiUrl}/transactions/sum?budgetId=${id}`, this.options)
+      .pipe(map(obj => obj.balance));
  }

-  getBudget(id: string): Promise<Budget> {
-    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.GET)
+  getBudget(id: string): Observable<Budget> {
+    return new Observable(emitter => {
+      var cachedBudget: Budget
+      if (this.budgets.value) {
+        cachedBudget = this.budgets.value.find(budget => {
+          return budget.id === id;
+        });
+      }
+      if (cachedBudget) {
+        emitter.next(cachedBudget);
+        emitter.complete();
+      } else {
+        this.http.get<Budget>(`${this.apiUrl}/budgets/${id}`, this.options)
+          .subscribe(budget => {
+            var oldBudgets = JSON.parse(JSON.stringify(this.budgets.value));
+            if (!oldBudgets) {
+              oldBudgets = [];
+            }
+            oldBudgets.push(budget);
+            oldBudgets.sort();
+            this.budgets.next(oldBudgets);
+            emitter.next(budget);
+            emitter.complete();
+          })
+      }
+    })
  }

  createBudget(
@ -79,9 +111,8 @@ export class TwigsHttpService implements TwigsService {
    name: string,
    description: string,
    users: UserPermission[],
-  ): Promise<Budget> {
-    const url = new URL('/api/budgets', this.apiUrl)
-    const body = {
+  ): Observable<Budget> {
+    const params = {
      'id': id,
      'name': name,
      'description': description,
@ -92,12 +123,19 @@ export class TwigsHttpService implements TwigsService {
        };
      })
    };
-    return this.request(url, HttpMethod.POST, body)
+    return this.http.post<Budget>(this.apiUrl + '/budgets', params, this.options)
+      .pipe(map(budget => {
+        var updatedBudgets = JSON.parse(JSON.stringify(this.budgets.value));
+        updatedBudgets.push(budget);
+        updatedBudgets.sort();
+        this.budgets.next(updatedBudgets);
+        return budget
+      }))
  }

-  updateBudget(id: string, budget: Budget): Promise<Budget> {
-    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-    const body = {
+  updateBudget(id: string, changes: object): Observable<Budget> {
+    let budget = changes as Budget;
+    const params = {
      'name': budget.name,
      'description': budget.description,
      'users': budget.users.map(userPermission => {
@ -107,47 +145,55 @@ export class TwigsHttpService implements TwigsService {
        };
      })
    };
-    return this.request(url, HttpMethod.PUT, body)
+    return this.http.put<Budget>(`${this.apiUrl}/budgets/${id}`, params, this.options)
+      .pipe(map(budget => {
+        var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
+        var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
+        if (index > -1) {
+          updatedBudgets.splice(index, 1);
+        }
+        updatedBudgets.push(budget);
+        updatedBudgets.sort();
+        this.budgets.next(updatedBudgets);
+        return budget
+      }));
  }

-  deleteBudget(id: String): Promise<void> {
-    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.DELETE)
+  deleteBudget(id: String): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/budgets/${id}`, this.options)
+      .pipe(map(() => {
+        var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
+        var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
+        if (index > -1) {
+          updatedBudgets.splice(index, 1);
+        }
+        updatedBudgets.sort();
+        this.budgets.next(updatedBudgets);
+        return;
+      }));
  }

  // Categories
-  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);
+  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));
  }

-  getCategory(id: string): Promise<Category> {
-    const url = new URL(`/api/categories/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.GET);
+  getCategory(id: string): Observable<Category> {
+    return this.http.get<Category>(`${this.apiUrl}/categories/${id}`, this.options);
  }

-  async getCategoryBalance(
-    id: string,
-    from?: Date,
-    to?: Date
-  ): Promise<number> {
-    const url = new URL(`/api/transactions/sum`, this.apiUrl)
-    url.searchParams.set('categoryId', id)
-    if (from) {
-      url.searchParams.set('from', from.toISOString());
-    }
-    if (to) {
-      url.searchParams.set('to', to.toISOString());
-    }
-    const res: any = await this.request(url, HttpMethod.GET);
-    return res.balance;
+  getCategoryBalance(id: string): Observable<number> {
+    return this.http.get<any>(`${this.apiUrl}/transactions/sum?categoryId=${id}`, this.options)
+      .pipe(map(obj => obj.balance));
  }

-  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 = {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
+    const params = {
      'id': id,
      'title': name,
      'description': description,
@ -155,55 +201,57 @@ export class TwigsHttpService implements TwigsService {
      'expense': isExpense,
      'budgetId': budgetId
    };
-    return this.request(url, HttpMethod.POST, body);
+    return this.http.post<Category>(this.apiUrl + '/categories', params, 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);
+  updateCategory(id: string, changes: object): Observable<Category> {
+    return this.http.put<Category>(`${this.apiUrl}/categories/${id}`, changes, this.options);
  }

-  deleteCategory(id: string): Promise<void> {
-    const url = new URL(`/api/categories/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.DELETE);
+  deleteCategory(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/categories/${id}`, this.options);
  }

  // Transactions
-  async getTransactions(
+  getTransactions(
    budgetId?: string,
    categoryId?: string,
    count?: number,
    from?: Date,
    to?: Date
-  ): Promise<Transaction[]> {
-    const url = new URL(`/api/transactions`, this.apiUrl)
+  ): Observable<Transaction[]> {
+    let httpParams = new HttpParams();
    if (budgetId) {
-      url.searchParams.set('budgetIds', budgetId);
+      httpParams = httpParams.set('budgetIds', `${budgetId}`);
    }
    if (categoryId) {
-      url.searchParams.set('categoryIds', categoryId);
+      httpParams = httpParams.set('categoryIds', `${categoryId}`);
    }
    if (from) {
-      url.searchParams.set('from', from.toISOString());
+      httpParams = httpParams.set('from', from.toISOString());
    }
    if (to) {
-      url.searchParams.set('to', to.toISOString());
+      httpParams = httpParams.set('to', to.toISOString());
    }
-    const transactions: Transaction[] = await this.request(url, HttpMethod.GET)
-    transactions.forEach(transaction => {
-      transaction.date = new Date(transaction.date);
-    })
-    return transactions
+    const params = { params: httpParams };
+    return this.http.get<Transaction[]>(`${this.apiUrl}/transactions`, Object.assign(params, this.options))
+      .pipe(map(transactions => {
+        transactions.forEach(transaction => {
+          transaction.date = new Date(transaction.date);
+        });
+        return transactions;
+      }));
  }

-  async getTransaction(id: string): Promise<Transaction> {
-    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
-    const transaction: Transaction = await this.request(url, HttpMethod.GET)
-    transaction.date = new Date(transaction.date)
-    return transaction
+  getTransaction(id: string): Observable<Transaction> {
+    return this.http.get<Transaction>(`${this.apiUrl}/transactions/${id}`, this.options)
+      .pipe(map(transaction => {
+        transaction.date = new Date(transaction.date);
+        return transaction;
+      }));
  }

-  async createTransaction(
+  createTransaction(
    id: string,
    budgetId: string,
    name: string,
@ -212,9 +260,8 @@ export class TwigsHttpService implements TwigsService {
    date: Date,
    expense: boolean,
    category: string
-  ): Promise<Transaction> {
-    const url = new URL(`/api/transactions`, this.apiUrl)
-    const body = {
+  ): Observable<Transaction> {
+    const params = {
      'id': id,
      'title': name,
      'description': description,
@ -224,147 +271,25 @@ export class TwigsHttpService implements TwigsService {
      'categoryId': category,
      'budgetId': budgetId
    };
-    const transaction: Transaction = await this.request(url, HttpMethod.POST, body)
-    transaction.date = new Date(transaction.date)
-    return transaction
+    return this.http.post<Transaction>(this.apiUrl + '/transactions', params, this.options);
  }

-  async updateTransaction(id: string, transaction: Transaction): Promise<Transaction> {
-    const body: any = transaction;
-    body.date = transaction.date.toISOString()
-    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
-    const updatedTransaction: Transaction = await this.request(url, HttpMethod.PUT, body)
-    updatedTransaction.date = new Date(updatedTransaction.date)
-    return updatedTransaction
+  updateTransaction(id: string, changes: object): Observable<Transaction> {
+    return this.http.put<Transaction>(`${this.apiUrl}/transactions/${id}`, changes, this.options);
  }

-  deleteTransaction(id: string): Promise<void> {
-    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.DELETE)
-  }
-
-  // Recurring Transactions
-  async getRecurringTransactions(
-    budgetId?: string,
-    categoryId?: string,
-    count?: number,
-    from?: Date,
-    to?: Date
-  ): Promise<RecurringTransaction[]> {
-    const url = new URL(`/api/recurringtransactions`, this.apiUrl)
-    if (budgetId) {
-      url.searchParams.set('budgetIds', budgetId);
-    }
-    if (categoryId) {
-      url.searchParams.set('categoryIds', categoryId);
-    }
-    if (from) {
-      url.searchParams.set('from', from.toISOString());
-    }
-    if (to) {
-      url.searchParams.set('to', to.toISOString());
-    }
-    const transactions: RecurringTransaction[] = await this.request(url, HttpMethod.GET)
-    transactions.forEach(transaction => {
-      transaction.frequency = Frequency.parse(transaction.frequency as any)
-    })
-    return transactions
-  }
-
-  async getRecurringTransaction(id: string): Promise<RecurringTransaction> {
-    const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
-    const transaction: RecurringTransaction = await this.request(url, HttpMethod.GET)
-    transaction.frequency = Frequency.parse(transaction.frequency as any)
-    return transaction
-  }
-
-  async createRecurringTransaction(
-    id: string,
-    budgetId: string,
-    name: string,
-    description: string,
-    amount: number,
-    frequency: Frequency,
-    start: Date,
-    expense: boolean,
-    category: string,
-    end?: Date,
-  ): Promise<RecurringTransaction> {
-    const url = new URL(`/api/transactions`, this.apiUrl)
-    const body = {
-      'id': id,
-      'title': name,
-      'description': description,
-      'frequency': frequency.toString(),
-      'start': start.toISOString(),
-      'finish': end?.toISOString(),
-      'amount': amount,
-      'expense': expense,
-      'categoryId': category,
-      'budgetId': budgetId
-    };
-    const transaction: RecurringTransaction = await this.request(url, HttpMethod.POST, body)
-    transaction.frequency = Frequency.parse(transaction.frequency as any)
-    return transaction
-  }
-
-  async updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
-    const body: any = transaction;
-    body.frequency = transaction.frequency.toString()
-    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
-    const updatedTransaction: RecurringTransaction = await this.request(url, HttpMethod.PUT, body)
-    updatedTransaction.frequency = Frequency.parse(updatedTransaction.frequency as any)
-    return updatedTransaction
-  }
-
-  deleteRecurringTransaction(id: string): Promise<void> {
-    const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.DELETE)
+  deleteTransaction(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/transactions/${id}`, this.options);
  }

  // Users
-  getProfile(id: string): Promise<User> {
-    const url = new URL(`/api/users/${id}`, this.apiUrl)
-    return this.request(url, HttpMethod.GET)
+  getProfile(id: string): Observable<User> {
+    return this.http.get<User>(`${this.apiUrl}/users/${id}`, this.options);
  }

-  getUsersByUsername(username: string): Promise<User[]> {
-    return Promise.reject("Not yet implemented")
-  }
-
-  private async request<T>(url: URL, method: HttpMethod, body?: any): Promise<T> {
-    const headers = {
-      'content-type': 'application/json'
-    }
-
-    const token = this.storage.getItem('Authorization')
-    if (token) {
-      headers['authorization'] = `Bearer ${token}`
-    }
-
-    let jsonBody: string;
-    if (body) {
-      jsonBody = JSON.stringify(body)
-    }
-
-    const res = await fetch(url, {
-      credentials: 'include',
-      headers: headers,
-      method: method,
-      body: jsonBody
-    })
-
-    if (res.status === 204) {
-      // No content
-      return
-    }
-    return res.json()
+  getUsersByUsername(username: string): Observable<User[]> {
+    return new Observable(subscriber => {
+      subscriber.error("Not yet implemented")
+    });
  }
 }
-
-enum HttpMethod {
-  GET = "GET",
-  POST = "POST",
-  PUT = "PUT",
-  DELETE = "DELETE",
-}
--- a/src/app/shared/twigs.local.service.ts
+++ b/src/app/shared/twigs.local.service.ts
@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { Observable, Subscriber } from 'rxjs';
 import { User, UserPermission } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
 import { randomId } from '../shared/utils';
-import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';

 /**
 * This is intended to be a very simple implementation of the TwigsService used for testing out the UI and quickly iterating on it.
@ -17,6 +18,7 @@ import { Frequency, RecurringTransaction } from '../recurringtransactions/recurr
 export class TwigsLocalService implements TwigsService {

  constructor(
+    private http: HttpClient
  ) { }

  private users: User[] = [new User(randomId(), 'test', 'test@example.com')];
@ -25,53 +27,63 @@ export class TwigsLocalService implements TwigsService {
  private categories: Category[] = [];

  // Auth
-  login(email: string, password: string): Promise<User> {
-    return new Promise((resolve, reject) => {
+  login(email: string, password: string): Observable<User> {
+    return new Observable(subscriber => {
      const filteredUsers = this.users.filter(user => {
        return (user.email === email || user.username === email);
      });
      if (filteredUsers.length !== 0) {
-        resolve(filteredUsers[0]);
+        subscriber.next(filteredUsers[0]);
      } else {
-        reject('No users found');
+        subscriber.error('No users found');
      }
    });
  }

-  register(username: string, email: string, password: string): Promise<User> {
-    return new Promise((resolve, reject) => {
+  register(username: string, email: string, password: string): Observable<User> {
+    return new Observable(subscriber => {
      const user = new User();
      user.username = username;
      user.email = email;
      user.id = randomId();
      this.users.push(user);
-      resolve(user);
+      subscriber.next(user);
+      subscriber.complete();
    });
  }

-  logout(): Promise<void> {
-    return Promise.resolve()
+  logout(): Observable<void> {
+    return new Observable(subscriber => {
+      subscriber.complete();
+    });
  }

  // Budgets
-  getBudgets(): Promise<Budget[]> {
-    return Promise.resolve(this.budgets)
+  getBudgets(): Observable<Budget[]> {
+    return new Observable(subscriber => {
+      subscriber.next(this.budgets);
+      subscriber.complete();
+    });
  }

-  getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number> {
-    return Promise.resolve(200)
+  getBudgetBalance(id: string): Observable<number> {
+    return new Observable(emitter => {
+      emitter.next(200);
+      emitter.complete()
+    })
  }

-  getBudget(id: string): Promise<Budget> {
-    return new Promise((resolve, reject) => {
+  getBudget(id: string): Observable<Budget> {
+    return new Observable(subscriber => {
      const budget = this.budgets.filter(it => {
        return it.id === id;
      })[0];
      if (budget) {
-        resolve(budget);
+        subscriber.next(budget);
      } else {
-        reject('No budget found for given id');
+        subscriber.error('No budget found for given id');
      }
+      subscriber.complete();
    });
  }

@ -80,20 +92,21 @@ export class TwigsLocalService implements TwigsService {
    name: string,
    description: string,
    users: UserPermission[],
-  ): Promise<Budget> {
-    return new Promise((resolve, reject) => {
+  ): Observable<Budget> {
+    return new Observable(subscriber => {
      const budget = new Budget();
      budget.name = name;
      budget.description = description;
      budget.users = users;
      budget.id = id;
      this.budgets.push(budget);
-      resolve(budget);
+      subscriber.next(budget);
+      subscriber.complete();
    });
  }

-  updateBudget(id: string, budget: Budget): Promise<Budget> {
-    return new Promise((resolve, reject) => {
+  updateBudget(id: string, changes: object): Observable<Budget> {
+    return new Observable(subscriber => {
      const budget = this.budgets.filter(it => {
        return it.id === id;
      })[0];
@ -101,7 +114,7 @@ export class TwigsLocalService implements TwigsService {
        const index = this.budgets.indexOf(budget);
        this.updateValues(
          budget,
-          budget,
+          changes,
          [
            'name',
            'description',
@ -109,49 +122,55 @@ export class TwigsLocalService implements TwigsService {
          ]
        );
        this.budgets[index] = budget;
-        resolve(budget);
+        subscriber.next(budget);
      } else {
-        reject('No budget found for given id');
+        subscriber.error('No budget found for given id');
      }
+      subscriber.complete();
    });
  }

-  deleteBudget(id: string): Promise<void> {
-    return new Promise((resolve, reject) => {
+  deleteBudget(id: string): Observable<void> {
+    return new Observable(subscriber => {
      const budget = this.budgets.filter(it => {
        return budget.id === id;
      })[0];
      if (budget) {
        const index = this.budgets.indexOf(budget);
        delete this.budgets[index];
-        resolve();
+        subscriber.complete();
      } else {
-        reject('No budget found for given id');
+        subscriber.error('No budget found for given id');
      }
    });
  }

  // Categories
-  getCategories(budgetId: string, count?: number): Promise<Category[]> {
-    return new Promise((resolve, reject) => {
-      resolve(this.categories.filter(category => {
+  getCategories(budgetId: string, count?: number): Observable<Category[]> {
+    return new Observable(subscriber => {
+      subscriber.next(this.categories.filter(category => {
        return category.budgetId === budgetId;
      }));
+      subscriber.complete();
    });
  }

-  getCategory(id: string): Promise<Category> {
-    return new Promise((resolve, reject) => {
-      resolve(this.findById(this.categories, id));
+  getCategory(id: string): Observable<Category> {
+    return new Observable(subscriber => {
+      subscriber.next(this.findById(this.categories, id));
+      subscriber.complete();
    });
  }

-  getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number> {
-    return Promise.resolve(20);
+  getCategoryBalance(id: string): Observable<number> {
+    return new Observable(emitter => {
+      emitter.next(20);
+      emitter.complete()
+    })
  }

-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
-    return new Promise((resolve, reject) => {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
+    return Observable.create(subscriber => {
      const category = new Category();
      category.title = name;
      category.description = description;
@ -160,12 +179,13 @@ export class TwigsLocalService implements TwigsService {
      category.budgetId = budgetId;
      category.id = id;
      this.categories.push(category);
-      resolve(category);
+      subscriber.next(category);
+      subscriber.complete();
    });
  }

-  updateCategory(id: string, changes: object): Promise<Category> {
-    return new Promise((resolve, reject) => {
+  updateCategory(id: string, changes: object): Observable<Category> {
+    return new Observable(subscriber => {
      const category = this.findById(this.categories, id);
      if (category) {
        const index = this.categories.indexOf(category);
@ -180,30 +200,31 @@ export class TwigsLocalService implements TwigsService {
          ]
        );
        this.categories[index] = category;
-        resolve(category);
+        subscriber.next(category);
      } else {
-        reject('No category found for given id');
+        subscriber.error('No category found for given id');
      }
+      subscriber.complete();
    });
  }

-  deleteCategory(id: string): Promise<void> {
-    return new Promise((resolve, reject) => {
+  deleteCategory(id: string): Observable<void> {
+    return new Observable(subscriber => {
      const category = this.findById(this.categories, id);
      if (category) {
        const index = this.categories.indexOf(category);
        delete this.transactions[index];
-        resolve();
+        subscriber.complete();
      } else {
-        reject('No category found for given id');
+        subscriber.error('No category found for given id');
      }
    });
  }

  // Transactions
-  getTransactions(budgetId?: string, categoryId?: string, count?: number): Promise<Transaction[]> {
-    return new Promise((resolve, reject) => {
-      resolve(this.transactions.filter(transaction => {
+  getTransactions(budgetId?: string, categoryId?: string, count?: number): Observable<Transaction[]> {
+    return new Observable(subscriber => {
+      subscriber.next(this.transactions.filter(transaction => {
        let include = true;
        if (budgetId) {
          include = transaction.budgetId === budgetId;
@ -213,11 +234,15 @@ export class TwigsLocalService implements TwigsService {
        }
        return include;
      }));
+      subscriber.complete();
    });
  }

-  getTransaction(id: string): Promise<Transaction> {
-    return Promise.resolve(this.findById(this.transactions, id));
+  getTransaction(id: string): Observable<Transaction> {
+    return new Observable(subscriber => {
+      subscriber.next(this.findById(this.transactions, id));
+      subscriber.complete();
+    });
  }

  createTransaction(
@ -229,8 +254,8 @@ export class TwigsLocalService implements TwigsService {
    date: Date,
    isExpense: boolean,
    category: string
-  ): Promise<Transaction> {
-    return new Promise((resolve, reject) => {
+  ): Observable<Transaction> {
+    return new Observable(subscriber => {
      const transaction = new Transaction();
      transaction.title = name;
      transaction.description = description;
@ -241,12 +266,13 @@ export class TwigsLocalService implements TwigsService {
      transaction.budgetId = budgetId;
      transaction.id = randomId();
      this.transactions.push(transaction);
-      resolve(transaction);
+      subscriber.next(transaction);
+      subscriber.complete();
    });
  }

-  updateTransaction(id: string, changes: object): Promise<Transaction> {
-    return new Promise((resolve, reject) => {
+  updateTransaction(id: string, changes: object): Observable<Transaction> {
+    return new Observable(subscriber => {
      const transaction = this.findById(this.transactions, id);
      if (transaction) {
        const index = this.transactions.indexOf(transaction);
@ -265,71 +291,38 @@ export class TwigsLocalService implements TwigsService {
          ]
        );
        this.transactions[index] = transaction;
-        resolve(transaction);
+        subscriber.next(transaction);
      } else {
-        reject('No transaction found for given id');
+        subscriber.error('No transaction found for given id');
      }
+      subscriber.complete();
    });
  }

-  deleteTransaction(id: string): Promise<void> {
-    return new Promise((resolve, reject) => {
+  deleteTransaction(id: string): Observable<void> {
+    return new Observable(subscriber => {
      const transaction = this.findById(this.transactions, id);
      if (transaction) {
        const index = this.transactions.indexOf(transaction);
        delete this.transactions[index];
-        resolve();
+        subscriber.complete();
      } else {
-        reject('No transaction found for given id');
+        subscriber.error('No transaction found for given id');
      }
    });
  }

-  // Recurring Transactions
-  getRecurringTransactions(
-    budgetId?: string,
-    categoryId?: string,
-    count?: number,
-    from?: Date,
-    to?: Date
-  ): Promise<RecurringTransaction[]> {
-    return Promise.reject("Not yet implemented")
-  }
-
-  getRecurringTransaction(id: string): Promise<RecurringTransaction> {
-    return Promise.reject("Not yet implemented")
-  }
-
-  createRecurringTransaction(
-    id: string,
-    budgetId: string,
-    name: string,
-    description: string,
-    amount: number,
-    frequency: Frequency,
-    start: Date,
-    expense: boolean,
-    category: string,
-    end?: Date,
-  ): Promise<RecurringTransaction> {
-    return Promise.reject("Not yet implemented")
-  }
-
-  updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
-    return Promise.reject("Not yet implemented")
-  }
-
-  deleteRecurringTransaction(id: string): Promise<void> {
-    return Promise.reject("Not yet implemented")
-  }
-
  // Users
-  getProfile(id: string): Promise<User> {
-    return Promise.reject("Not yet implemented");
+  getProfile(id: string): Observable<User> {
+    return new Observable(subscriber => {
+      subscriber.error("Not yet implemented")
+    });
  }

-  getUsersByUsername(username: string): Promise<User[]> {
-    return Promise.resolve(this.users.filter(user => user.username.indexOf(username) > -1))
+  getUsersByUsername(username: string): Observable<User[]> {
+    return new Observable(subscriber => {
+      subscriber.next(this.users.filter(user => user.username.indexOf(username) > -1 ));
+    });
  }

  private updateValues(old: object, changes: object, keys: string[]) {
--- a/src/app/shared/twigs.service.ts
+++ b/src/app/shared/twigs.service.ts
@ -1,4 +1,5 @@
 import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
 import { User, UserPermission } from '../users/user';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
@ -7,30 +8,30 @@ import { Transaction } from '../transactions/transaction';

 export interface TwigsService {
  // Auth
-  login(email: string, password: string): Promise<User>;
-  register(username: string, email: string, password: string): Promise<User>;
-  logout(): Promise<void>;
+  login(email: string, password: string): Observable<User>;
+  register(username: string, email: string, password: string): Observable<User>;
+  logout(): Observable<void>;

  // Budgets
-  getBudgets(): Promise<Budget[]>;
-  getBudget(id: string): Promise<Budget>;
-  getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number>;
+  getBudgets(): Observable<Budget[]>;
+  getBudget(id: string): Observable<Budget>;
+  getBudgetBalance(id: string): Observable<number>;
  createBudget(
    id: string,
    name: string,
    description: string,
    users: UserPermission[],
-  ): Promise<Budget>;
-  updateBudget(id: string, budget: Budget): Promise<Budget>;
-  deleteBudget(id: string): Promise<void>;
+  ): Observable<Budget>;
+  updateBudget(id: string, changes: object): Observable<Budget>;
+  deleteBudget(id: string): Observable<void>;

  // Categories
-  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, category: Category): Promise<Category>;
-  deleteCategory(id: string): Promise<void>;
+  getCategories(budgetId?: string, count?: number): Observable<Category[]>;
+  getCategory(id: string): Observable<Category>;
+  getCategoryBalance(id: string): 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>;

  // Transactions
  getTransactions(
@ -39,8 +40,8 @@ export interface TwigsService {
    count?: number,
    from?: Date,
    to?: Date
-  ): Promise<Transaction[]>;
-  getTransaction(id: string): Promise<Transaction>;
+  ): Observable<Transaction[]>;
+  getTransaction(id: string): Observable<Transaction>;
  createTransaction(
    id: string,
    budgetId: string,
@ -50,19 +51,15 @@ export interface TwigsService {
    date: Date,
    isExpense: boolean,
    category: string
-  ): Promise<Transaction>;
-  updateTransaction(id: string, transaction: Transaction): Promise<Transaction>;
-  deleteTransaction(id: string): Promise<void>;
+  ): Observable<Transaction>;
+  updateTransaction(id: string, changes: object): Observable<Transaction>;
+  deleteTransaction(id: string): Observable<void>;

  // Recurring Transactions
  getRecurringTransactions(
-    budgetId?: string,
-    categoryId?: string,
-    count?: number,
-    from?: Date,
-    to?: Date
-  ): Promise<RecurringTransaction[]>;
-  getRecurringTransaction(id: string): Promise<RecurringTransaction>;
+    budgetId: string,
+  ): Observable<RecurringTransaction[]>;
+  getRecurringTransaction(id: string): Observable<RecurringTransaction>;
  createRecurringTransaction(
    id: string,
    budgetId: string,
@ -74,12 +71,12 @@ export interface TwigsService {
    expense: boolean,
    category: string,
    end?: Date,
-  ): Promise<RecurringTransaction>;
-  updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction>;
-  deleteRecurringTransaction(id: string): Promise<void>;
+  ): Observable<RecurringTransaction>;
+  updateRecurringTransaction(id: string, changes: object): Observable<RecurringTransaction>;
+  deleteRecurringTransaction(id: string): Observable<void>;

-  getProfile(id: string): Promise<User>;
-  getUsersByUsername(username: string): Promise<User[]>;
+  getProfile(id: string): Observable<User>;
+  getUsersByUsername(username: string): Observable<User[]>;
 }

 export let TWIGS_SERVICE = new InjectionToken<TwigsService>('twigs.service');
--- a/src/app/shared/utils.ts
+++ b/src/app/shared/utils.ts
@ -5,11 +5,3 @@ export function randomId(): string {
    window.crypto.getRandomValues(bytes)
    return Array.from(bytes, (byte) => CHARACTERS[byte % CHARACTERS.length]).join('')
 }
-
-export function decimalToInteger(amount: string): number {
-    if (amount[amount.length - 3] === "." || amount[amount.length - 3] === ",") {
-      return Number(amount.replace(/[,.]/g, ""))
-    } else {
-      return Number(amount + "00")
-    }
-}
--- a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
+++ b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.html
@ -3,13 +3,13 @@
 </div>
 <div [hidden]="!currentTransaction" *ngIf="currentTransaction" class="form transaction-form">
  <mat-form-field>
-    <input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required autocapitalize="words">
+    <input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required>
  </mat-form-field>
  <mat-form-field>
-    <textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description" autocapitalize="sentences"></textarea>
+    <textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description"></textarea>
  </mat-form-field>
  <mat-form-field>
-    <input matInput type="number" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required step="0.01">
+    <input matInput type="text" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="date" [ngModel]="transactionDate | date:'yyyy-MM-dd'"
--- a/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
+++ b/src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts
@ -4,8 +4,7 @@ import { TransactionType } from '../transaction.type';
 import { Category } from 'src/app/categories/category';
 import { AppComponent } from 'src/app/app.component';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
-import { MatLegacyRadioChange as MatRadioChange } from '@angular/material/legacy-radio';
-import { decimalToInteger } from 'src/app/shared/utils';
+import { MatRadioChange } from '@angular/material/radio';

@Component({
  selector: 'app-add-edit-transaction',
@ -19,6 +18,7 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
  @Input() create: boolean
  public transactionType = TransactionType;
  public categories: Category[];
+  public rawAmount: string;
  public currentTime: string;
  public transactionDate: string;

@ -55,14 +55,15 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {

  updateCategories(change: MatRadioChange) {
    this.twigsService.getCategories(this.budgetId)
-      .then(newCategories => {
+      .subscribe(newCategories => {
        this.categories = newCategories.filter(category => category.expense === change.value)
      })
  }

  save(): void {
-    let promise;
-    this.currentTransaction.amount = decimalToInteger(String(this.currentTransaction.amount))
+    // The amount will be input as a decimal value so we need to convert it
+    // to an integer
+    let observable;
    this.currentTransaction.date = new Date();
    const dateParts = this.transactionDate.split('-');
    this.currentTransaction.date.setFullYear(parseInt(dateParts[0], 10));
@ -73,34 +74,38 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
    this.currentTransaction.date.setMinutes(parseInt(timeParts[1], 10));
    if (this.create) {
      // This is a new transaction, save it
-      promise = this.twigsService.createTransaction(
+      observable = this.twigsService.createTransaction(
        this.currentTransaction.id,
        this.budgetId,
        this.currentTransaction.title,
        this.currentTransaction.description,
-        this.currentTransaction.amount,
+        Math.round(this.currentTransaction.amount * 100),
        this.currentTransaction.date,
        this.currentTransaction.expense,
        this.currentTransaction.categoryId,
      );
    } else {
      // This is an existing transaction, update it
-      const updatedTransaction: Transaction = {
-        ...this.currentTransaction,
-      }
-      promise = this.twigsService.updateTransaction(
+      observable = this.twigsService.updateTransaction(
        this.currentTransaction.id,
-        updatedTransaction
+        {
+          title: this.currentTransaction.title,
+          description: this.currentTransaction.description,
+          amount: Math.round(this.currentTransaction.amount * 100),
+          date: this.currentTransaction.date,
+          categoryId: this.currentTransaction.categoryId,
+          expense: this.currentTransaction.expense
+        }
      );
    }

-    promise.then(() => {
+    observable.subscribe(val => {
      this.app.goBack();
    });
  }

  delete(): void {
-    this.twigsService.deleteTransaction(this.currentTransaction.id).then(() => {
+    this.twigsService.deleteTransaction(this.currentTransaction.id).subscribe(() => {
      this.app.goBack();
    });
  }
--- a/src/app/transactions/transaction-details/transaction-details.component.ts
+++ b/src/app/transactions/transaction-details/transaction-details.component.ts
@ -25,7 +25,7 @@ export class TransactionDetailsComponent implements OnInit {
  getTransaction(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.twigsService.getTransaction(id)
-      .then(transaction => {
+      .subscribe(transaction => {
        transaction.amount /= 100;
        this.transaction = transaction;
        this.budgetId = transaction.budgetId;
--- a/src/app/transactions/transaction-list/transaction-list.component.ts
+++ b/src/app/transactions/transaction-list/transaction-list.component.ts
@ -44,7 +44,7 @@ export class TransactionListComponent implements OnInit {
    }

    let toStr = this.route.snapshot.queryParamMap.get('to');
-    let to: Date;
+    var to;
    if (toStr) {
      let toDate = new Date(toStr);
      if (!isNaN(toDate.getTime())) {
@ -52,8 +52,7 @@ export class TransactionListComponent implements OnInit {
      }
    }

-    this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to)
-    .then(transactions => {
+    this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to).subscribe(transactions => {
      this.transactions = transactions;
    });
  }
--- 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)
-      .then(user => {
+      .subscribe(user => {
        this.app.user.next(user);
        this.router.navigate([this.redirect || '/'])
-      })
-      .catch(error => {
+      },
+      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;
      })
--- a/src/app/users/register/register.component.ts
+++ b/src/app/users/register/register.component.ts
@ -33,10 +33,10 @@ export class RegisterComponent implements OnInit {
      return;
    }
    this.isLoading = true;
-    this.twigsService.register(this.username, this.email, this.password).then(user => {
+    this.twigsService.register(this.username, this.email, this.password).subscribe(user => {
      console.log(user);
      this.router.navigate(['/'])
-    }).catch(error => {
+    }, error => {
      console.error(error);
      alert("Registration failed!")
      this.isLoading = false;
--- a/src/app/users/user.ts
+++ b/src/app/users/user.ts
@ -29,8 +29,8 @@ export class UserPermission {
 }

 export enum Permission {
-  READ = "READ",
-  WRITE = "WRITE",
-  MANAGE = "MANAGE",
-  OWNER = "OWNER"
+  READ,
+  WRITE,
+  MANAGE,
+  OWNER
 }
--- a/src/styles.scss
+++ b/src/styles.scss
@ -4,16 +4,7 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+@include mat.core();

 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@ -32,8 +23,8 @@ $budget-dark-theme: mat.define-dark-theme($budget-app-primary, $budget-app-accen
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.

-@include mat.all-legacy-component-themes($budget-app-theme);
+@include mat.all-component-themes($budget-app-theme);

@media (prefers-color-scheme: dark) {
-    @include mat.all-legacy-component-themes($budget-dark-theme);
+    @include mat.all-component-themes($budget-dark-theme);
 }
--- a/src/test.ts
+++ b/src/test.ts
@ -7,6 +7,8 @@ import {
  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';

+declare const require: any;
+
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
@ -14,3 +16,7 @@ getTestBed().initTestEnvironment(
    teardown: { destroyAfterEach: false }
 }
 );
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
Author	SHA1	Message	Date
William Brawner	5d0be6cd84	Add recurring transaction methods to api service	2021-11-25 07:03:20 -07:00
William Brawner	c3cee37add	Add models for recurring transactions	2021-11-25 06:58:47 -07:00