Updating saved search logic to save to backend

CrimeIsDown · Aug 18, 2024 · c3fff9c · c3fff9c
1 parent 50d044b
commit c3fff9c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 28 deletions.
diff --git a/app/components/transcript-search.js b/app/components/transcript-search.js
@@ -32,6 +32,7 @@ export default class TranscriptSearchComponent extends Component {
   @service metrics;
   @service session;
   @service addressLookup;
+  @service store;
 
   @tracked hasAccess = undefined;
   @tracked onTranscriptMapPage = window.location.pathname == '/transcripts/map';
@@ -85,14 +86,6 @@ export default class TranscriptSearchComponent extends Component {
     if (window.location.hash.startsWith('#hit-')) {
       this.selectedHit = window.location.hash.split('#hit-')[1];
     }
-    const savedSearches = localStorage.getItem('savedSearches');
-    if (savedSearches) {
-      let savedSearchesArray = JSON.parse(savedSearches);
-      if (!Array.isArray(savedSearchesArray)) {
-        savedSearchesArray = [];
-      }
-      this.savedSearches = A(savedSearchesArray);
-    }
 
     this.updateLatestIndex.perform();
   }
@@ -329,31 +322,43 @@ export default class TranscriptSearchComponent extends Component {
     this.search.setUiState(state);
   }
 
+  @action
+  async initSavedSearches() {
+    const savedSearches = localStorage.getItem('savedSearches');
+    if (savedSearches) {
+      let savedSearchesArray = JSON.parse(savedSearches);
+      if (Array.isArray(savedSearchesArray)) {
+        for (const savedSearch of savedSearchesArray) {
+          const search = this.store.createRecord('saved-search', savedSearch);
+          await search.save();
+        }
+      }
+      localStorage.removeItem('savedSearches');
+    }
+
+    const searches = await this.store.findAll('saved-search');
+    set(this, 'savedSearches', searches);
+  }
+
   @action saveSearch() {
     let searchName = prompt('Enter a name for this search');
     if (!searchName) {
       return;
     }
     let state = this.search.getUiState();
     delete state[this.indexName]['range'];
-    this.savedSearches.pushObject({
+    const data = {
       name: searchName,
       url: this.search.createURL(state),
-    });
-    try {
-      localStorage.setItem('savedSearches', JSON.stringify(this.savedSearches));
-    } catch (e) {
-      alert('Could not save search, localStorage is disabled.');
-    }
+    };
+    const search = this.store.createRecord('saved-search', data);
+    search.save();
   }
 
-  @action removeSavedSearch(index) {
-    this.savedSearches.removeAt(index);
-    try {
-      localStorage.setItem('savedSearches', JSON.stringify(this.savedSearches));
-    } catch (e) {
-      alert('Could not save search, localStorage is disabled.');
-    }
+  @action
+  async deleteSavedSearch(search) {
+    await search.destroyRecord();
+    await this.initSavedSearches();
   }
 
   @action
@@ -471,6 +476,11 @@ export default class TranscriptSearchComponent extends Component {
   @action
   async setupSearch() {
     await this.login();
+    try {
+      await this.initSavedSearches();
+    } catch (e) {
+      console.error(e);
+    }
 
     this.defaultSort = `${this.indexName}:start_time:desc`;
     this.defaultRouteState = {
@@ -543,6 +553,15 @@ export default class TranscriptSearchComponent extends Component {
       this.currentSearch = uiState;
     });
 
+    this.search.on('error', ({ error }) => {
+      console.error(error);
+      alert(
+        `Could not load search, please try again or logout and log back in.\nGot error: ${
+          error.message || error
+        }`,
+      );
+    });
+
     const systemMenuTransformItems = (items) => {
       const result = items.map((item) => ({
         ...item,

diff --git a/app/models/saved-search.js b/app/models/saved-search.js
@@ -0,0 +1,7 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class SavedSearchModel extends Model {
+  @attr name;
+  @attr url;
+  @attr is_global;
+}
diff --git a/app/styles/_transcript_search.scss b/app/styles/_transcript_search.scss
@@ -44,8 +44,11 @@
   }
 }
 
-#saved-h-menu .list-group-item {
-  padding-top: 0.75rem !important;
+#saved-h-menu .list-group-item:last-child {
+  background-color: var(--bs-btn-bg);
+  color: var(--bs-btn-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .ais-Hits-item, .ais-InfiniteHits-item {

diff --git a/app/templates/components/transcript-search.hbs b/app/templates/components/transcript-search.hbs
@@ -96,16 +96,20 @@
               {{#unless this.savedSearches}}
               No saved searches.
               {{/unless}}
-              {{#each this.savedSearches as |search index|}}
+              {{#each this.savedSearches as |search|}}
               <ul class="list-group list-group-horizontal pb-2">
                 <a href="{{search.url}}" class="list-group-item list-group-item-action">
                   {{search.name}}
                 </a>
+                {{#if search.is_global}}
                 <li class="list-group-item">
-                  <button type="button" class="btn btn-danger btn-sm" aria-label="Delete" {{on "click" (fn this.removeSavedSearch index)}}>
-                    <FaIcon @icon="trash-alt" />
-                  </button>
+                  <FaIcon @icon="earth-americas" />
                 </li>
+                {{else}}
+                <button type="button" class="btn btn-danger btn-sm list-group-item" aria-label="Delete" {{on "click" (fn this.deleteSavedSearch search)}}>
+                  <FaIcon @icon="trash-alt" />
+                </button>
+                {{/if}}
               </ul>
               {{/each}}
             </div>