Search: fix loading previous searches, add 'clear history' buttons

src/Logic/Geocoding/RecentSearch.ts

@@ -8,13 +8,11 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 export class RecentSearch {
 
 
-    private readonly _seenThisSession: UIEventSource<GeocodeResult[]>
+    public readonly seenThisSession: UIEventSource<GeocodeResult[]>
-    public readonly seenThisSession: Store<GeocodeResult[]>
 
     constructor(state: { layout: LayoutConfig, osmConnection: OsmConnection, selectedElement: Store<Feature> }) {
         const prefs = state.osmConnection.preferencesHandler.GetLongPreference("previous-searches")
-        this._seenThisSession = new UIEventSource<GeocodeResult[]>([])//UIEventSource.asObject<GeoCodeResult[]>(prefs, [])
+        this.seenThisSession = new UIEventSource<GeocodeResult[]>([])//UIEventSource.asObject<GeoCodeResult[]>(prefs, [])
-        this.seenThisSession = this._seenThisSession
 
         prefs.addCallbackAndRunD(pref => {
             if (pref === "") {
@@ -24,7 +22,7 @@ export class RecentSearch {
 
                 const simpleArr = <GeocodeResult[]>JSON.parse(pref)
                 if (simpleArr.length > 0) {
-                    this._seenThisSession.set(simpleArr)
+                    this.seenThisSession.set(simpleArr)
                     return true
                 }
             } catch (e) {
@@ -72,17 +70,10 @@ export class RecentSearch {
     }
 
     addSelected(entry: GeocodeResult) {
-        const arr = [...(this.seenThisSession.data ?? []).slice(0, 20), entry]
+        const id = entry.osm_type+entry.osm_id
+        const arr = [...(this.seenThisSession.data.reverse() ?? []).slice(0, 5)]
+            .filter(e => e.osm_type+e.osm_id !== id)
 
-        const seenIds = new Set<string>()
+        this.seenThisSession.set([entry, ...arr])
-        for (let i = arr.length - 1; i >= 0; i--) {
-            const id = arr[i].osm_type + arr[i].osm_id
-            if (seenIds.has(id)) {
-                arr.splice(i, 1)
-            } else {
-                seenIds.add(id)
-            }
-        }
-        this._seenThisSession.set(arr)
     }
 }

src/Logic/Geocoding/ThemeSearch.ts

@@ -47,6 +47,7 @@ export default class ThemeSearch implements GeocodingProvider {
         const sorted = MoreScreen.sortedByLowest(query, this._otherThemes, this._layersToIgnore)
         console.log(">>>", sorted)
         return sorted
+            .filter(sorted => sorted.lowest < 2)
             .map(th => th.theme)
             .filter(th => !th.hideFromOverview || this._knownHiddenThemes.data.has(th.id))
             .slice(0, limit)

src/Logic/State/UserRelatedState.ts

@@ -80,8 +80,7 @@ export default class UserRelatedState {
     public readonly preferencesAsTags: UIEventSource<Record<string, string>>
     private readonly _mapProperties: MapProperties
 
-    private readonly _recentlyVisitedThemes: UIEventSource<string[]>
+    public readonly recentlyVisitedThemes: UIEventSource<string[]>
-    public readonly recentlyVisitedThemes: Store<string[]>
 
 
     constructor(
@@ -138,11 +137,10 @@ export default class UserRelatedState {
         this.preferencesAsTags = this.initAmendedPrefs(layout, featureSwitches)
 
         const prefs = this.osmConnection
-        this._recentlyVisitedThemes = UIEventSource.asObject(prefs.GetLongPreference("recently-visited-themes"), [])
+        this.recentlyVisitedThemes = UIEventSource.asObject(prefs.GetLongPreference("recently-visited-themes"), [])
-        this.recentlyVisitedThemes = this._recentlyVisitedThemes
         if (layout) {
             const osmConn = this.osmConnection
-            const recentlyVisited = this._recentlyVisitedThemes
+            const recentlyVisited = this.recentlyVisitedThemes
 
             function update() {
                 if (!osmConn.isLoggedIn.data) {
@@ -158,7 +156,7 @@ export default class UserRelatedState {
             }
 
 
-            this._recentlyVisitedThemes.addCallbackAndRun(() => update())
+            this.recentlyVisitedThemes.addCallbackAndRun(() => update())
             this.osmConnection.isLoggedIn.addCallbackAndRun(() => update())
         }
 

src/UI/Search/GeocodeResult.svelte

@@ -47,7 +47,7 @@
     if (entry.feature?.properties?.id) {
       state.selectedElement.set(entry.feature)
     }
-    state.recentlySearched.addSelected(entry)
+    state.searchState.recentlySearched.addSelected(entry)
     dispatch("select")
   }
 </script>

src/UI/Search/SearchResults.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Store } from "../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
@@ -14,10 +14,11 @@
   import FilterResult from "./FilterResult.svelte"
   import ThemeResult from "./ThemeResult.svelte"
   import SidebarUnit from "../Base/SidebarUnit.svelte"
+  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
 
   export let state: ThemeViewState
   let activeFilters: Store<ActiveFilter[]> = state.layerState.activeFilters.map(fs => fs.filter(f => Constants.priviliged_layers.indexOf(<any>f.layer.id) < 0))
-  let recentlySeen: Store<GeocodeResult[]> = state.searchState.recentlySearched.seenThisSession
+  let recentlySeen: UIEventSource<GeocodeResult[]> = state.searchState.recentlySearched.seenThisSession
   let recentThemes = state.userRelatedState.recentlyVisitedThemes.mapD(thms => thms.filter(th => th !== state.layout.id).slice(0, 6))
   let allowOtherThemes = state.featureSwitches.featureSwitchBackToThemeOverview
   let searchTerm = state.searchState.searchTerm
@@ -92,6 +93,10 @@
       {#each $recentlySeen as entry}
         <SearchResultSvelte {entry} {state} on:select />
       {/each}
+      <button class="as-link flex self-end" on:click={() => {recentlySeen.set([])}}>
+        <TrashIcon class="w-4 h-4"/>
+        Delete history
+      </button>
     </SidebarUnit>
   {/if}
 
@@ -106,6 +111,10 @@
           {state}
           on:select />
       {/each}
+      <button class="as-link flex self-end" on:click={() => {state.userRelatedState.recentlyVisitedThemes.set([])}}>
+        <TrashIcon class="w-4 h-4"/>
+        Delete history
+      </button>
     </SidebarUnit>
   {/if}