Fix sorting and searching bugs, save sort mode and algo to localStorage

3 files changed, 34 insertions, 41 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 8f6901a..2d3fa7c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -9,8 +9,8 @@
 
     <div id="header2">
         <div id="searchArea">
-            <form id="search-form" #searchForm="ngForm">
-                <input type="text" name="search" class="wide-input sort-scheme" 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>
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'
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 2fbf9d2..b0a012f 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
@@ -19,8 +19,8 @@ export class NeedListComponent implements OnChanges {
     totalPages: number = 0;
 
     ngOnChanges() {
-        this.updateVisibleNeeds()
         this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0;
+        this.updateVisibleNeeds()
     }
 
     getPrefix(need: Need) {