redis key loading refactor

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -2,89 +2,38 @@
   import _ from 'lodash';
 
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
-  import LoadingInfo from '../elements/LoadingInfo.svelte';
-  import { apiCall } from '../utility/api';
-
-  const SHOW_INCREMENT = 100;
 
   import DbKeysTreeNode from './DbKeysTreeNode.svelte';
-
-  export let conid;
-  export let database;
+  import { dbKeys_markNodeExpanded, DbKeysChangeModelFunction, DbKeysTreeModel } from 'dbgate-tools';
 
   export let root;
+  export let connection;
+  export let database;
+  export let conid;
   export let indentLevel = 0;
 
-  export let reloadToken = 0;
-  export let connection;
   export let filter;
 
-  let reloadToken2 = 0;
-  let maxShowCount = SHOW_INCREMENT;
-  let loading = false;
-  let loadingWhole = false;
-  let items = [];
+  export let model: DbKeysTreeModel;
+  export let changeModel: DbKeysChangeModelFunction;
 
-  async function loadData() {
-    loading = true;
-    const result = await apiCall('database-connections/load-keys', {
-      conid,
-      database,
-      root,
-      filter,
-      limit: maxShowCount + 1,
-    });
-    items = result;
-    loading = false;
-    loadingWhole = false;
-  }
-
-  $: {
-    conid;
-    database;
-    root;
-    filter;
-    reloadToken;
-    reloadToken2;
-    maxShowCount;
-    loadData();
-  }
-
-  $: {
-    reloadToken;
-    loadingWhole = true;
-  }
+  $: items = model.childrenByKey[root] ?? [];
 </script>
 
-{#if loadingWhole}
-  <LoadingInfo message="Loading key list" wrapper />
-{:else}
-  {#each items.slice(0, maxShowCount) as item}
-    <DbKeysTreeNode
-      {conid}
-      {database}
-      {root}
-      {connection}
-      {item}
-      {filter}
-      {indentLevel}
-      onRefreshParent={() => {
-        reloadToken2 += 1;
-      }}
-    />
-  {/each}
+{#each items as item}
+  <DbKeysTreeNode {conid} {database} {root} {connection} {item} {filter} {indentLevel} {model} {changeModel} />
+{/each}
 
-  {#if loading}
-    <AppObjectCore {indentLevel} title="Loading keys..." icon="icon loading" expandIcon="icon invisible-box" />
-  {:else if items.length > maxShowCount}
-    <AppObjectCore
-      {indentLevel}
-      title="Show more..."
-      icon="icon dots-horizontal"
-      expandIcon="icon invisible-box"
-      on:click={() => {
-        maxShowCount += SHOW_INCREMENT;
-      }}
-    />
-  {/if}
+{#if model.dirsByKey[root]?.shouldLoadNext}
+  <AppObjectCore {indentLevel} title="Loading keys..." icon="icon loading" expandIcon="icon invisible-box" />
+{:else if model.dirsByKey[root]?.hasNext}
+  <AppObjectCore
+    {indentLevel}
+    title="Show more..."
+    icon="icon dots-horizontal"
+    expandIcon="icon invisible-box"
+    on:click={() => {
+      changeModel(model => dbKeys_markNodeExpanded(model, root, true));
+    }}
+  />
 {/if}

packages/web/src/widgets/DbKeysTree.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { findEngineDriver } from 'dbgate-tools';
+  import { dbKeys_loadMissing, dbKeys_refreshAll, findEngineDriver } from 'dbgate-tools';
 
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
-  import runCommand from '../commands/runCommand';
 
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
@@ -17,15 +16,16 @@
   import DbKeysSubTree from './DbKeysSubTree.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import FocusedConnectionInfoWidget from './FocusedConnectionInfoWidget.svelte';
-
+  
   export let conid;
   export let database;
 
   let filter;
-  let reloadToken = 0;
+
+  let model = dbKeys_refreshAll();
 
   function handleRefreshDatabase() {
-    reloadToken += 1;
+    changeModel(model => dbKeys_refreshAll(model));
   }
 
   function handleAddKey() {
@@ -58,6 +58,31 @@
       ($focusedConnectionOrDatabase?.database && $focusedConnectionOrDatabase?.database != database));
 
   $: connection = useConnectionInfo({ conid });
+
+  async function changeModel(modelUpdate) {
+    model = modelUpdate(model);
+    model = await dbKeys_loadMissing(model, async (root, limit) => {
+      const result = await apiCall('database-connections/load-keys', {
+        conid,
+        database,
+        root,
+        filter,
+        limit,
+      });
+      return result;
+    });
+  }
+
+  function reloadModel() {
+    changeModel(model => dbKeys_refreshAll(model));
+  }
+
+  $: {
+    conid;
+    database;
+    filter;
+    reloadModel();
+  }
 </script>
 
 <SearchBoxWrapper>
@@ -74,5 +99,5 @@
   <FocusedConnectionInfoWidget {conid} {database} connection={$connection} />
 {/if}
 <WidgetsInnerContainer hideContent={differentFocusedDb}>
-  <DbKeysSubTree {conid} {database} root="" {reloadToken} connection={$currentDatabase?.connection} {filter} />
+  <DbKeysSubTree root="" {filter} {model} {changeModel} {conid} {database} {connection} />
 </WidgetsInnerContainer>

packages/web/src/widgets/DbKeysTreeNode.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { getIconForRedisType } from 'dbgate-tools';
+  import {
+    dbKeys_markNodeExpanded,
+    dbKeys_reloadFolder,
+    DbKeysChangeModelFunction,
+    DbKeysTreeModel,
+    getIconForRedisType,
+  } from 'dbgate-tools';
 
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
@@ -25,10 +31,10 @@
   export let indentLevel = 0;
   export let filter;
 
-  export let onRefreshParent;
+  export let model: DbKeysTreeModel;
+  export let changeModel: DbKeysChangeModelFunction;
 
-  let isExpanded;
-  let reloadToken = 0;
+  $: isExpanded = model.dirsByKey[item.root]?.isExpanded;
 
   // $: console.log(item.text, indentLevel);
   function createMenu() {
@@ -47,9 +53,7 @@
                   args: [item.key],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -70,9 +74,7 @@
                   args: [item.key, newName],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -81,7 +83,7 @@
         !connection?.isReadOnly && {
           label: 'Reload',
           onClick: () => {
-            reloadToken += 1;
+            changeModel(m => dbKeys_reloadFolder(m, root));
           },
         },
       item.type == 'dir' &&
@@ -99,9 +101,7 @@
                   args: [branch],
                 });
 
-                if (onRefreshParent) {
-                  onRefreshParent();
-                }
+                changeModel(m => dbKeys_reloadFolder(m, root));
               },
             });
           },
@@ -139,12 +139,12 @@
   expandIcon={item.type == 'dir' ? plusExpandIcon(isExpanded) : 'icon invisible-box'}
   on:expand={() => {
     if (item.type == 'dir') {
-      isExpanded = !isExpanded;
+      changeModel(tree => dbKeys_markNodeExpanded(tree, item.root, !isExpanded));
     }
   }}
   on:click={() => {
     if (item.type == 'dir') {
-      isExpanded = !isExpanded;
+      changeModel(tree => dbKeys_markNodeExpanded(tree, item.root, !isExpanded));
     } else {
       openNewTab({
         tabComponent: 'DbKeyDetailTab',
@@ -177,8 +177,9 @@
     {database}
     root={item.root}
     indentLevel={indentLevel + 1}
-    {reloadToken}
     {connection}
     {filter}
+    {model}
+    {changeModel}
   />
 {/if}