Make frontend work with the new backend checkout system

1 files changed, 109 insertions, 103 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..3a89a20 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,132 +1,138 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {UsersService} from '../../services/users.service';
+import {userType} from '../../models/User';
+import {catchError, of} from 'rxjs';
+import {AuthService} from '../../services/auth.service';
+
 @Component({
-  selector: 'app-need-list',
-  standalone: false,
-  templateUrl: './need-list.component.html',
-  styleUrl: './need-list.component.css'
+    selector: 'app-need-list',
+    standalone: false,
+    templateUrl: './need-list.component.html',
+    styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
-  needs: Need[] = [];
-  searchResults: Need[] = [];
+    needs: Need[] = [];
+    searchResults: Need[] = [];
 
-  constructor(
-    private cupboardService: CupboardService,
-    private usersService: UsersService
-  ) {}
+    constructor(
+        private cupboardService: CupboardService,
+        private usersService: UsersService,
+        private authService: AuthService
+    ) {}
 
     refresh() {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n)
     }
 
-  ngOnInit(): void {
-    this.refresh()
-   
-     this.close();
-  }
+    ngOnInit(): void {
+        this.refresh()
 
-  private showElement(element: any) {
-    if (element){
-      element.style.visibility = 'visible';
-      element.style.position = 'relative';
+        this.close();
     }
-  }
 
-  private hideElement(element: any) {
-    if (element){
-      element.style.visibility = 'hidden';
-      element.style.position = 'absolute';
+    private showElement(element: any) {
+        if (element) {
+            element.style.visibility = 'visible';
+            element.style.position = 'relative';
+        }
     }
-  }
 
-  private updateSearchStatus(text: string) {
-    let element = document.getElementById('search-status');
-    if (element) {
-      element.innerHTML = text;
+    private hideElement(element: any) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.position = 'absolute';
+        }
     }
-  }
 
-  open() {
-    this.hideElement(document.getElementById('search-button'));
-    this.showElement(document.getElementById('search-form'));
-  }
+    private updateSearchStatus(text: string) {
+        let element = document.getElementById('search-status');
+        if (element) {
+            element.innerHTML = text;
+        }
+    }
 
-  close() {
-    this.hideElement(document.getElementById('search-form'));
-    this.showElement(document.getElementById('search-button'));
-    this.hideElement(document.getElementById('search-status'));
-  }
+    open() {
+        this.hideElement(document.getElementById('search-button'));
+        this.showElement(document.getElementById('search-form'));
+    }
 
-  private searchDelay: any;
+    close() {
+        this.hideElement(document.getElementById('search-form'));
+        this.showElement(document.getElementById('search-button'));
+        this.hideElement(document.getElementById('search-status'));
+    }
 
-  async search(form: any) {
-    //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
+    private searchDelay: any;
 
-    //remove previous search if it exists
-    if (this.searchDelay) {
-      clearTimeout(this.searchDelay);
-    }
+    async search(form: any) {
+        //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
 
-    this.searchDelay = setTimeout(() => {
-      const currentSearchValue = form.search; //latest value of the search
-      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-        this.searchResults = n;
-        console.log(currentSearchValue, this.searchResults);
-        this.showElement(document.getElementById('search-results'));
-        this.showElement(document.getElementById('search-status'));
-        if (this.searchResults.length === this.needs.length) {
-          this.updateSearchStatus("Please refine your search");
-          this.searchResults = [];
-        } else if (this.searchResults.length === 0) {
-          this.updateSearchStatus("No results found");
-        } else {
-          this.updateSearchStatus("Search results:");
+        //remove previous search if it exists
+        if (this.searchDelay) {
+            clearTimeout(this.searchDelay);
         }
-      });
-    }, 250);
-  }
-
-  delete(id : number) {
-    this.cupboardService.deleteNeed(id).subscribe(() => {
-      this.needs = this.needs.filter(n => n.id !== id)
-    })
-  }
-
-  isManager() {
-    const type = this.usersService.getCurrentUser()?.type;
-    return type === ("MANAGER" as unknown as userType);
-  }
-
-  isHelper() {
-    const type = this.usersService.getCurrentUser()?.type;
-    return type === ("HELPER" as unknown as userType);
-  }
-
-  add(need: Need) {
-    const currentUser = this.usersService.getCurrentUser();
-    //console.log("get current user in angular:", currentUser)
-    if (currentUser) {
-      if (!currentUser.basket.includes(need.id)) {
-        currentUser.basket.push(need.id);
-        this.usersService.updateUser(currentUser).subscribe(() => {
-          this.usersService.refreshBasket();
-          error: (err: any) => {
-            console.error(err);
-          }
-        });
-      } else {
-        window.alert("This need is already in your basket!")
-      }
-      
 
+        this.searchDelay = setTimeout(() => {
+            const currentSearchValue = form.search; //latest value of the search
+            this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+                this.searchResults = n;
+                console.log(currentSearchValue, this.searchResults);
+                this.showElement(document.getElementById('search-results'));
+                this.showElement(document.getElementById('search-status'));
+                if (this.searchResults.length === this.needs.length) {
+                    this.updateSearchStatus("Please refine your search");
+                    this.searchResults = [];
+                } else if (this.searchResults.length === 0) {
+                    this.updateSearchStatus("No results found");
+                } else {
+                    this.updateSearchStatus("Search results:");
+                }
+            });
+        }, 250);
+    }
+
+    delete(id: number) {
+        this.cupboardService.deleteNeed(id).subscribe(() => {
+            this.needs = this.needs.filter(n => n.id !== id)
+        })
     }
 
-  }
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err: any, _) => {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                window.alert("This need is already in your basket!")
+            }
+
 
-  back() {
-    this.searchResults = [];
-  }
+        }
+
+    }
+
+    back() {
+        this.searchResults = [];
+    }
 }