2 files changed, 35 insertions, 42 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 4eebc2d..2d3fa7c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -9,14 +9,14 @@
 
     <div id="header2">
         <div id="searchArea">
-            <form id="search-form" #searchForm="ngForm">
-                <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <form id="search-form">
+                <input type="text" name="search" class="wide-input sort-scheme" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" #searchForm>
                 <input type="reset" value="Clear" (click)="search(null)"> <br>
             </form>
         </div>
         <div id="sortArea">
             <label for="sort">Sort by: </label>
-            <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input" (change)="search(searchForm.value)" [value]="currentSortAlgo">
+            <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input sort-scheme" (change)="search(searchForm.value)" [value]="currentSortAlgo">
                 <option *ngFor="let algorithm of Object.keys(SortingAlgorithms)" [value]="algorithm">
                     {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}}
                 </option>
@@ -25,7 +25,7 @@
                 <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
             </button>
             <label>Needs per page: </label>
-            <input type ="number" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}">
+            <input type ="number" class="sort-scheme" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}">
         </div>
     </div>
     <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index f571566..42d920c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {CupboardService} from '../../services/cupboard.service';
 import {Need} from '../../models/Need';
 import {catchError, of} from 'rxjs';
@@ -18,16 +18,16 @@ import {ModalService} from '../../services/modal.service';
 })
 export class CupboardComponent implements OnInit {
 
-    // selectedForm?: string = undefined;
-    // needs: any;
+
     @ViewChild("needList") needList?: NeedListComponent
+    @ViewChild("searchForm") searchForm!: ElementRef<HTMLInputElement>
 
     private searchDelay: any;
     needs: Need[] = [];
     searchResults: Need[] = [];
-    sortMode: 'Ascending' | 'Descending' = 'Ascending'
+    sortMode = localStorage.getItem('sortMode') as 'Ascending' | 'Descending' ?? 'Ascending';
     itemsPerPage = parseInt(localStorage.getItem('itemsPerPage') ?? '5') ?? 5;
-    currentSortAlgo = 'sortByPriority';
+    currentSortAlgo = localStorage.getItem('sortAlgo') ?? 'sortByPriority';
 
     constructor(
         private cupboardService: CupboardService,
@@ -39,52 +39,30 @@ export class CupboardComponent implements OnInit {
     ) {}
 
     ngOnInit(): void {
-        this.cupboardService.getNeeds().subscribe(n => {
-            this.needs = n;
-            // this.refresh()
-            this.search(null)
-        });
-        this.authService.getCurrentUserSubject().subscribe(
-            () => this.usersService.refreshBasket())
+        this.refresh()
     }
 
     refresh() {
         this.cupboardService.getNeeds().subscribe(n => {
-            if (this.sortMode == 'Ascending') {
-                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
-            } else {
-                this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
-            }
-            this.searchResults = this.needs;
-            // this.updateVisibleNeeds();
+            this.needs = n;
+            this.searchResults = this.sortNeeds(this.needs);
         });
-
-        const form = document.getElementById('search-form') as HTMLFormElement;
-        form.reset();
-        this.search(null);
+        this.searchForm.nativeElement.form?.reset()
     }
 
-    async search(form: any) {
-        console.log(this.currentSortAlgo)
+    async search(search: any) {
         //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
 
         //remove previous search if it exists
         if (this.searchDelay) {
             clearTimeout(this.searchDelay);
         }
-        if (form) {
+        if (search) {
             this.searchDelay = setTimeout(() => {
-
-                if (form) {
-
-                    const currentSearchValue = form.search; //latest value of the search
-                    this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-                        if (this.sortMode == 'Ascending') {
-                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func);
-                        } else {
-                            this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
-                        }
-                        // this.updateVisibleNeeds();
+                if (search) {
+                    console.log("IF BLOCK")
+                    this.cupboardService.searchNeeds(search).subscribe((n) => {
+                        this.searchResults = this.sortNeeds(n);
                     });
                 }
             }, 250);
@@ -92,10 +70,25 @@ export class CupboardComponent implements OnInit {
             //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
             //clear timeout to stop pending search
             clearTimeout(this.searchDelay);
-            this.searchResults = this.needs;
+            this.searchResults = this.sortNeeds(this.needs);
+        }
+    }
+
+    sortNeeds(needs: Need[]) {
+        this.saveSortOptions()
+        needs = [...needs] // deep copy
+        if (this.sortMode == 'Ascending') {
+            return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func);
+        } else {
+            return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse();
         }
     }
 
+    saveSortOptions() {
+        localStorage.setItem('sortMode', this.sortMode);
+        localStorage.setItem('sortAlgo', this.currentSortAlgo);
+    }
+
     toggleSortMode(form : any) {
         if (this.sortMode == 'Ascending'){
             this.sortMode = 'Descending'