fix: missing columns after reload

invm · Jan 21, 2024 · 6ffa37f · 6ffa37f
1 parent 92ec634
commit 6ffa37f
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 49 deletions.
diff --git a/src/components/Screens/Console/Content/Content.tsx b/src/components/Screens/Console/Content/Content.tsx
@@ -11,6 +11,8 @@ export const Content = () => {
     connections: { setContentIdx, getConnection, addContentTab, removeContentTab, getContent },
   } = useAppSelector();
 
+  const key = () => getContent().key;
+
   return (
     <div class="flex flex-col h-full">
       <div class="bg-base-300 tabs gap-1">
@@ -36,13 +38,13 @@ export const Content = () => {
       </div>
       <div class="h-full w-full">
         <Switch>
-          <Match when={getContent().key === ContentTab.Query}>
+          <Match when={key() === ContentTab.Query}>
             <QueryTab />
           </Match>
-          <Match when={getContent().key === ContentTab.TableStructure}>
+          <Match when={key() === ContentTab.TableStructure}>
             <TableStructureTab tabIdx={getConnection().idx} />
           </Match>
-          <Match when={getContent().key === ContentTab.Data}>
+          <Match when={key() === ContentTab.Data}>
             <DataTab />
           </Match>
         </Switch>

diff --git a/src/components/Screens/Console/Content/QueryTab/Editor.tsx b/src/components/Screens/Console/Content/QueryTab/Editor.tsx
@@ -1,5 +1,5 @@
 import { createCodeMirror, createEditorControlledValue, createEditorFocus } from 'solid-codemirror';
-import { createEffect, createSignal } from 'solid-js';
+import { createEffect, createSignal, on } from 'solid-js';
 import { EditorView, drawSelection, highlightWhitespace, highlightActiveLine } from '@codemirror/view';
 import { MySQL, sql, SQLite, PostgreSQL } from '@codemirror/lang-sql';
 
@@ -65,6 +65,7 @@ export const Editor = (props: { editorTheme: EditorTheme }) => {
     app: { vimModeOn, toggleVimModeOn },
     messages: { notify },
   } = useAppSelector();
+  const idx = () => store.idx;
   const [code, setCode] = createSignal('');
   const [schema, setSchema] = createStore({});
   const [loading, setLoading] = createSignal(false);
@@ -140,23 +141,22 @@ export const Editor = (props: { editorTheme: EditorTheme }) => {
     navigator.clipboard.writeText(code());
   };
 
-  createEffect(() => {
-    if (!getConnection()) return;
-    const data = getContentData('Query');
-    setCode(data.query ?? '');
-    setAutoLimit(data.auto_limit ?? true);
-  }, getConnection());
-
-  createEffect(() => {
-    const _schema = getSchemaEntity('tables').reduce(
-      (acc, table) => ({
-        ...acc,
-        [table.name]: table.columns.map(({ name }) => name),
-      }),
-      {}
-    );
-    setSchema(_schema);
-  }, store.idx);
+  createEffect(
+    on(idx, () => {
+      if (idx() === -1) return;
+      const _schema = getSchemaEntity('tables').reduce(
+        (acc, table) => ({
+          ...acc,
+          [table.name]: table.columns.map(({ name }) => name),
+        }),
+        {}
+      );
+      setSchema(_schema);
+      const data = getContentData('Query');
+      setCode(data.query ?? '');
+      setAutoLimit(data.auto_limit ?? true);
+    })
+  );
 
   createShortcut(['Control', 'k'], () => {
     if (focused() && vimModeOn()) {

diff --git a/src/components/Screens/Console/Content/QueryTab/Results.tsx b/src/components/Screens/Console/Content/QueryTab/Results.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createResource, createSignal, Show } from 'solid-js';
+import { createEffect, createResource, createSignal, on, Show } from 'solid-js';
 import { search } from '@codemirror/search';
 import { basicSetup, EditorView } from 'codemirror';
 import { json } from '@codemirror/lang-json';
@@ -52,6 +52,7 @@ export const Results = (props: { editorTheme: EditorTheme; gridTheme: string; ed
     columns: [] as Row[],
   });
   const [changes, setChanges] = createStore<Changes>(defaultChanges);
+  const idx = () => getConnection().idx;
 
   const { ref, editorView, createExtension } = createCodeMirror({
     onValueChange: setCode,
@@ -93,7 +94,6 @@ export const Results = (props: { editorTheme: EditorTheme; gridTheme: string; ed
           primary_key,
           setCode,
           editable: !!props.editable,
-          setDrawerOpen,
           setChanges,
           row: result_set?.rows?.[0] ?? {},
           openDrawerForm,
@@ -111,7 +111,6 @@ export const Results = (props: { editorTheme: EditorTheme; gridTheme: string; ed
           primary_key,
           setCode,
           editable: !!props.editable,
-          setDrawerOpen,
           setChanges,
           row: rows[0] ?? {},
           openDrawerForm,
@@ -131,11 +130,12 @@ export const Results = (props: { editorTheme: EditorTheme; gridTheme: string; ed
     }
   );
 
-  createEffect(() => {
-    setPage(0);
-    resetChanges();
-    resetTable();
-  }, [queryIdx, getConnection().idx]);
+  createEffect(
+    on(idx, () => {
+      setPage(0);
+      resetChanges();
+    })
+  );
 
   const onNextPage = async () => {
     if (data()?.exhausted) return;
@@ -230,17 +230,6 @@ export const Results = (props: { editorTheme: EditorTheme; gridTheme: string; ed
     );
   };
 
-  const resetTable = () => {
-    setTable(
-      produce((t) => {
-        t.columns = [];
-        t.foreign_keys = [];
-        t.primary_key = [];
-        t.name = '';
-      })
-    );
-  };
-
   const undoChanges = async () => {
     const undoSize = gridRef.api?.getCurrentUndoSize();
     for (let i = 0; i < undoSize!; i++) {

diff --git a/src/components/Screens/Console/Content/QueryTab/Table/PopupCellRenderer.tsx b/src/components/Screens/Console/Content/QueryTab/Table/PopupCellRenderer.tsx
@@ -40,9 +40,6 @@ export type PopupCellRendererProps = {
   value: string;
   column: { getColId: () => string };
   editable: boolean;
-  setDrawerOpen: (s: DrawerState) => void;
-  columns: Row[];
-  foreign_keys: Row[];
   primary_key: Row[];
   setChanges: SetStoreFunction<Changes>;
   openDrawerForm: (s: Pick<DrawerState, 'mode' | 'rowIndex' | 'data'>) => void;

diff --git a/src/components/Screens/Console/Content/QueryTab/Table/utils.tsx b/src/components/Screens/Console/Content/QueryTab/Table/utils.tsx
@@ -52,16 +52,14 @@ export const getColumnDefs = ({
   primary_key,
   setCode,
   editable,
-  setDrawerOpen,
   setChanges,
   row,
   openDrawerForm,
 }: {
-  setCode: (code: string) => void;
-  setDrawerOpen: (s: DrawerState) => void;
   columns: Row[];
   foreign_keys: Row[];
   primary_key: Row[];
+  setCode: (code: string) => void;
   editable: boolean;
   setChanges: SetStoreFunction<Changes>;
   row: Row;
@@ -70,7 +68,7 @@ export const getColumnDefs = ({
   const cellRenderer = (p: PopupCellRendererProps) => (
     <PopupCellRenderer
       {...p}
-      {...{ setChanges, editable, setCode, setDrawerOpen, columns, foreign_keys, primary_key, openDrawerForm }}
+      {...{ setChanges, editable, setCode, primary_key, openDrawerForm }}
     />
   );
 

diff --git a/src/components/Screens/Console/Content/QueryTab/components/Search.tsx b/src/components/Screens/Console/Content/QueryTab/components/Search.tsx
@@ -90,7 +90,7 @@ export const Search = (props: SearchProps) => {
     if (props.colDef.length > 0 && !formData().column) {
       setFieldValue('column', props.colDef[0].headerName);
     }
-  }, [props.colDef]);
+  });
 
   const submit = async (event: Event) => {
     try {

diff --git a/src/services/Connections.ts b/src/services/Connections.ts
@@ -197,7 +197,10 @@ export const ConnectionsService = () => {
   const addConnectionTab = async (tab: ConnectionTab) => {
     if (store.tabs.length === 10) return;
     if (store.tabs.find((t) => t.id === tab.id)) {
-      setStore('idx', store.tabs.findIndex((t) => t.id === tab.id));
+      setStore(
+        'idx',
+        store.tabs.findIndex((t) => t.id === tab.id)
+      );
       return;
     }
     setStore(