src/app/components/expense/expense.component.ts

@@ -47,6 +47,7 @@ export class ExpenseComponent {
     const snackId = this.snackBar.staticBar('Tracking new expense...');
     try {
       await this.expenseService.postExpense(postExpense);
+      await this.expenseService.fetchExpenses();
       this.resetForm();
       this.snackBar.dismiss(snackId);
       this.snackBar.autoBar('Expense tracked!');

src/app/components/metadata/categories/categories.component.ts

@@ -18,7 +18,8 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async createCategory(name: string): Promise<void> {
-    console.log('Creating new category', name);
+    await this.categoryService.createCategory({ name });
+    await this.categoryService.fetchCategories();
   }
 
   public async updateCategory(category: Category): Promise<void> {

src/app/components/metadata/metadata-form/metadata-form.component.html

@@ -15,11 +15,9 @@
       </mat-form-field>
 
       <div class="metadata-edit-buttons">
-        @if (metadata()) {
-          <button matIconButton (click)="reset()">
-            <mat-icon>undo</mat-icon>
-          </button>
-        }
+        <button matIconButton (click)="reset()">
+          <mat-icon>undo</mat-icon>
+        </button>
 
         <button matIconButton (click)="saveMetaData()" [disabled]="!nameValid()">
           <mat-icon>save</mat-icon>

src/app/services/category.service.ts

@@ -17,6 +17,10 @@ export class CategoryService {
     this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
   }
 
+  public async createCategory(category: CreateCategory): Promise<Category> {
+    return await this.http.post<Category>(this.categoryPath, category);
+  }
+
   public async updateCategory(category: Category): Promise<Category> {
     return await this.http.put<Category>(this.categoryPath, category);
   }

src/app/services/expense.service.ts

@@ -22,10 +22,7 @@ export class ExpenseService {
   }
 
   public async postExpense(createExpense: CreateExpense): Promise<Expense> {
-    const createdExpense = await this.http.post<Expense>(this.expensePath, createExpense);
-    await this.fetchExpenses();
-
-    return createdExpense;
+    return await this.http.post<Expense>(this.expensePath, createExpense);
   }
 
   public async updateExpense(updateExpense: UpdateExpense): Promise<Expense> {