From 9c8b15bce17b3094e312e950b14a3260fc6715b8 Mon Sep 17 00:00:00 2001
From: karooolis <hello@karolisram.com>
Date: Thu, 8 Aug 2024 17:06:11 +0300
Subject: [PATCH] remove sql editor

---
 .../explorer/src/app/(home)/DataExplorer.tsx  | 12 +----
 .../explorer/src/app/(home)/SQLEditor.tsx     | 44 -------------------
 .../explorer/src/app/(home)/TablesViewer.tsx  |  9 ++--
 packages/explorer/src/app/api/rows/route.ts   |  6 ++-
 4 files changed, 10 insertions(+), 61 deletions(-)
 delete mode 100644 packages/explorer/src/app/(home)/SQLEditor.tsx

diff --git a/packages/explorer/src/app/(home)/DataExplorer.tsx b/packages/explorer/src/app/(home)/DataExplorer.tsx
index 0ce98528f1..b5b2c58d1b 100644
--- a/packages/explorer/src/app/(home)/DataExplorer.tsx
+++ b/packages/explorer/src/app/(home)/DataExplorer.tsx
@@ -1,16 +1,13 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { SQLEditor } from "./SQLEditor";
 import { TableSelector } from "./TableSelector";
 import { TablesViewer } from "./TablesViewer";
 
 export function DataExplorer() {
   const searchParams = useSearchParams();
-  const [query, setQuery] = useState<string | undefined>();
-  const { data: tables, isLoading: tablesLoading } = useQuery({
+  const { data: tables } = useQuery({
     queryKey: ["tables"],
     queryFn: async () => {
       const response = await fetch("/api/tables");
@@ -25,12 +22,7 @@ export function DataExplorer() {
   return (
     <>
       <TableSelector value={selectedTable} options={tables} />
-      <SQLEditor
-        table={selectedTable}
-        tablesLoading={tablesLoading}
-        setQuery={setQuery}
-      />
-      <TablesViewer table={selectedTable} query={query} />
+      <TablesViewer table={selectedTable} />
     </>
   );
 }
diff --git a/packages/explorer/src/app/(home)/SQLEditor.tsx b/packages/explorer/src/app/(home)/SQLEditor.tsx
deleted file mode 100644
index 90797db33f..0000000000
--- a/packages/explorer/src/app/(home)/SQLEditor.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormEvent, useEffect, useState } from "react";
-
-export function SQLEditor({
-  table,
-  setQuery,
-  tablesLoading,
-}: {
-  table: string | undefined;
-  setQuery: React.Dispatch<React.SetStateAction<string | undefined>>;
-  tablesLoading: boolean;
-}) {
-  const [deferredQuery, setDeferredQuery] = useState<string | undefined>("");
-
-  const submitQuery = (evt: FormEvent) => {
-    evt.preventDefault();
-    setQuery(deferredQuery);
-  };
-
-  useEffect(() => {
-    if (table) {
-      const initialQuery = `SELECT * FROM '${table}' LIMIT 30`;
-      setQuery(initialQuery);
-      setDeferredQuery(initialQuery);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table, tablesLoading]);
-
-  return (
-    <form onSubmit={submitQuery}>
-      {/* <Flex direction="row" gap="2">
-        <TextField.Root
-          style={{ flex: "1" }}
-          placeholder="SQL query…"
-          value={deferredQuery}
-          onChange={(evt) => setDeferredQuery(evt.target.value)}
-        >
-          <TextField.Slot></TextField.Slot>
-        </TextField.Root>
-
-        <Button type="submit">Execute query</Button>
-      </Flex> */}
-    </form>
-  );
-}
diff --git a/packages/explorer/src/app/(home)/TablesViewer.tsx b/packages/explorer/src/app/(home)/TablesViewer.tsx
index 526469768b..b20bd81ab3 100644
--- a/packages/explorer/src/app/(home)/TablesViewer.tsx
+++ b/packages/explorer/src/app/(home)/TablesViewer.tsx
@@ -31,10 +31,9 @@ import { bufferToBigInt } from "./utils/bufferToBigInt";
 
 type Props = {
   table: string | undefined;
-  query: string | undefined;
 };
 
-export function TablesViewer({ table: selectedTable, query }: Props) {
+export function TablesViewer({ table: selectedTable }: Props) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
@@ -66,9 +65,9 @@ export function TablesViewer({ table: selectedTable, query }: Props) {
   });
 
   const { data: rows } = useQuery({
-    queryKey: ["rows", { query }],
+    queryKey: ["rows", { table: selectedTable }],
     queryFn: async () => {
-      const response = await fetch(`/api/rows?query=${query}`);
+      const response = await fetch(`/api/rows?table=${selectedTable}`);
       return response.json();
     },
     select: (data) => {
@@ -83,7 +82,7 @@ export function TablesViewer({ table: selectedTable, query }: Props) {
         );
       });
     },
-    enabled: Boolean(selectedTable) && Boolean(query),
+    enabled: Boolean(selectedTable),
     refetchInterval: 1000,
   });
 
diff --git a/packages/explorer/src/app/api/rows/route.ts b/packages/explorer/src/app/api/rows/route.ts
index 04721dd1fd..57e6eed046 100644
--- a/packages/explorer/src/app/api/rows/route.ts
+++ b/packages/explorer/src/app/api/rows/route.ts
@@ -26,8 +26,10 @@ function convertKeysToCamelCase(rows: RowsResponse): Row[] {
 export async function GET(request: Request) {
   const db = getDatabase();
   const { searchParams } = new URL(request.url);
-  const query = searchParams.get("query");
-  const rows = db?.prepare(query || "").all() as RowsResponse;
+  const table = searchParams.get("table");
+  const rows = db
+    ?.prepare(`SELECT * FROM '${table}' LIMIT 30`)
+    .all() as RowsResponse;
 
   return Response.json({ rows: convertKeysToCamelCase(rows) });
 }