From 128a980d7a360f0048077c8f2c7eb59cffcf88a5 Mon Sep 17 00:00:00 2001
From: Kumiszhan Dybyspayeva <d.kumiszhan@gmail.com>
Date: Thu, 17 Aug 2023 17:16:14 +0100
Subject: [PATCH] Apply saved query

---
 frontend/components/Filter.svelte    | 11 +++++++++--
 frontend/components/QueryList.svelte | 23 +++++++++--------------
 frontend/store.ts                    | 13 ++++++++++++-
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/frontend/components/Filter.svelte b/frontend/components/Filter.svelte
index c16d6d2..d7967cd 100644
--- a/frontend/components/Filter.svelte
+++ b/frontend/components/Filter.svelte
@@ -3,12 +3,18 @@
     import QueryModal from './QueryModal.svelte';
     import { parseDSL } from '../dsl';
     import { debounce } from '../util';
-    import { parsedFilter, stringFilter, filterActive, isAuthenticated } from '../store';
+    import { parsedFilter, stringFilter, filterActive, isAuthenticated, activeFilterId } from '../store';
 
     let filter: string = '';
     let filterValid: boolean = false;
     let saveModal: QueryModal;
 
+    stringFilter.subscribe((value) => {
+        filter = value;
+        applyFilter();
+    });
+
+
     function filterChangeHandler(): () => void {
         return debounce(() => {
             // TODO: validate queries as user types them.
@@ -29,10 +35,11 @@
 
     function applyFilter() {
         console.log(`Going to parse ${filter}`);
-        stringFilter.set(filter);
         if (filter == '') {
             filterActive.set(false);
             parsedFilter.set(undefined);
+            stringFilter.set('');
+            activeFilterId.set(undefined);
             return;
         }
 
diff --git a/frontend/components/QueryList.svelte b/frontend/components/QueryList.svelte
index d9f4050..43b58da 100644
--- a/frontend/components/QueryList.svelte
+++ b/frontend/components/QueryList.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { token, userQueries } from '../store';
-    import { Query, deleteQuery, getQueries, updateQuery } from '../query';
+    import { token, userQueries, stringFilter, activeFilterId } from '../store';
+    import { Query, deleteQuery, getQueries } from '../query';
+    import { parseDSL } from '../dsl';
     import QueryModal from './QueryModal.svelte';
 
     let saveModal: QueryModal;
@@ -20,17 +21,11 @@
         await reloadQueries();
     }
 
-    async function toggleActive(query: Query) {
-        console.log('toggling active in query', query);
+    async function activate(query: Query) {
+        console.log('activating query', query);
 
-        await updateQuery(
-            {
-                id: query.id,
-                active: !query.active,
-            },
-            $token,
-        );
-        await reloadQueries();
+        stringFilter.set(query.content);
+        activeFilterId.set(query.id);
     }
 </script>
 
@@ -46,7 +41,7 @@
                         {#if query.description}{query.description}{/if}
                     </p>
                     <p class="queryList__info-field queryList__active">
-                        {#if query.active}active{:else}inactive{/if}
+                        {#if query.id == $activeFilterId}active{:else}inactive{/if}
                     </p>
                 </div>
             </div>
@@ -54,7 +49,7 @@
                 <QueryModal bind:this={saveModal} />
                 <button on:click={() => saveModal.showModal(query)}>edit</button>
                 <button on:click={() => deleteQueryAndReload(query.id)}>Delete</button>
-                <button on:click={() => toggleActive(query)}>Toggle</button>
+                <button on:click={() => activate(query)}>Activate</button>
             </div>
         </li>
     {/each}
diff --git a/frontend/store.ts b/frontend/store.ts
index 39b5f5c..df031f2 100644
--- a/frontend/store.ts
+++ b/frontend/store.ts
@@ -15,13 +15,24 @@ export const maxNumberOfMessages = writable(50);
 
 export const userQueries: Writable<Query[]> = writable([]);
 
-export const stringFilter: Writable<string> = writable('');
+const storedStringFilter = localStorage.getItem('stringFilter');
+export const stringFilter: Writable<string> = writable(storedStringFilter || '');
+stringFilter.subscribe((value) => {
+    localStorage.setItem('stringFilter', value);
+});
+
 export const filterActive: Writable<boolean> = writable(false);
 
 export const env: Writable<String> = writable(ENV_DEV);
 export const parsedFilter: Writable<QueryCstNode | undefined> = writable(undefined);
 export const currentEvent: Writable<Event | undefined> = writable(undefined);
 
+const storedActiveFilterId = localStorage.getItem('activeFilterId');
+export const activeFilterId: Writable<string | undefined> = writable(storedActiveFilterId || undefined);
+activeFilterId.subscribe((value) => {
+    localStorage.setItem('activeFilterId', value);
+});
+
 const storedToken = localStorage.getItem('token');
 export const token = writable(storedToken);
 token.subscribe((value) => {