feat: store the current query in context

ui/src/main.tsx

@@ -1,23 +1,21 @@
 import "./index.css";
 
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
-import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+import React, { StrictMode } from "react";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-// Import the generated route tree
-import { ThemeProvider } from "./provider/theme.provider";
 import { routeTree } from "./routeTree.gen";
+import { SqlProvider } from "@/provider/sql.provider";
+import { ThemeProvider } from "@/provider/theme.provider";
 
 let basePath = document.querySelector<HTMLMetaElement>(
   `meta[name="BASE_PATH"]`,
 );
 let basepath = basePath?.content ?? "/";
 
-// Create a new router instance
 const router = createRouter({ routeTree, basepath });
 
-// Register the router instance for type safety
 declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;
@@ -34,18 +32,19 @@ const ReactQueryDevtools = import.meta.env.PROD
 
 const queryClient = new QueryClient();
 
-// Render the app
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider>
-          <RouterProvider router={router} />
-        </ThemeProvider>
-        <ReactQueryDevtools />
-      </QueryClientProvider>
+      <SqlProvider>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider>
+            <RouterProvider router={router} />
+          </ThemeProvider>
+          <ReactQueryDevtools />
+        </QueryClientProvider>
+      </SqlProvider>
     </StrictMode>,
   );
 }

ui/src/provider/sql.provider.tsx

@@ -0,0 +1,22 @@
+import createStore from "@/lib/makeStore";
+
+function initialState(): string {
+  const queries = localStorage.getItem("sql");
+  if (queries !== null) {
+    return queries;
+  }
+
+  return "select 1 + 1;";
+}
+
+export const {
+  StoreProvider: SqlProvider,
+  useDispatch: useSqlDispatch,
+  useStore: useSql,
+} = createStore((_, action: { type: "SET_SQL"; data: string }) => {
+  switch (action.type) {
+    case "SET_SQL":
+      localStorage.setItem("sql", action.data);
+      return action.data;
+  }
+}, initialState());

ui/src/routes/query.lazy.tsx

@@ -19,36 +19,38 @@ import { createFileRoute } from "@tanstack/react-router";
 
 import { cn } from "@/lib/utils";
 import { fetchQuery } from "@/api";
-import { Editor } from "@/components/editor";
-import { Toggle } from "@/components/ui/toggle";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useTheme } from "@/provider/theme.provider";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import {
   useQueries,
   QueriesProvider,
   useQueriesDispatch,
   SavedQuery as SavedQueryType,
 } from "@/provider/queries.provider";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
+import { useSql, useSqlDispatch } from "@/provider/sql.provider";
+
 import {
   Card,
   CardTitle,
   CardHeader,
   CardDescription,
 } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogClose,
+  DialogTitle,
+  DialogFooter,
+  DialogHeader,
+  DialogContent,
+  DialogTrigger,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Editor } from "@/components/editor";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Toggle } from "@/components/ui/toggle";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTheme } from "@/provider/theme.provider";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export const Route = createFileRoute("/query")({
   component: () => (
@@ -160,7 +162,9 @@ type QueryProps = {
 
 function Query({ sql, onChange, onSave, onDelete, onUpdate }: QueryProps) {
   const currentTheme = useTheme();
-  const [codeState, setCode] = useState(sql);
+
+  const codeState = useSql();
+  const setCodeState = useSqlDispatch();
   const code = useDebounce(codeState, 100);
 
   const [autoExecute, setAutoExecute] = useState(true);
@@ -218,7 +222,10 @@ function Query({ sql, onChange, onSave, onDelete, onUpdate }: QueryProps) {
   return (
     <div className="grid gap-8">
       <div className="grid gap-4 grid-cols-1">
-        <Editor value={code} onChange={(val) => setCode(val)} />
+        <Editor
+          value={code}
+          onChange={(val) => setCodeState({ type: "SET_SQL", data: val })}
+        />
 
         <div className="flex gap-2 justify-between">
           <div className="flex gap-2">