chore: reformat errors

frectonz · Jun 18, 2024 · 6ba6c31 · 6ba6c31
1 parent 174cf9e
commit 6ba6c31
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 49 deletions.
diff --git a/ui/src/components/editor.tsx b/ui/src/components/editor.tsx
@@ -12,7 +12,8 @@ type Props = {
 
 export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
   const currentTheme = useTheme();
-  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [editor, setEditor] =
+    useState<monaco.editor.IStandaloneCodeEditor | null>(null);
   const monacoEl = useRef(null);
 
   useEffect(() => {

diff --git a/ui/src/lib/makeStore.tsx b/ui/src/lib/makeStore.tsx
@@ -1,4 +1,10 @@
-import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react";
+import {
+  Dispatch,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useReducer,
+} from "react";
 
 /**
  * Creates a store with the specified reducer and initial state.
@@ -11,7 +17,7 @@ import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } fr
  */
 export default function createStore<State, Action>(
   reducer: (state: State, action: Action) => State,
-  initialState: State
+  initialState: State,
 ) {
   const StoreContext = createContext(initialState);
   const DispatchContext = createContext<Dispatch<Action>>(() => {});
@@ -21,7 +27,9 @@ export default function createStore<State, Action>(
 
     return (
       <StoreContext.Provider value={store}>
-        <DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider>
+        <DispatchContext.Provider value={dispatch}>
+          {children}
+        </DispatchContext.Provider>
       </StoreContext.Provider>
     );
   }

diff --git a/ui/src/main.tsx b/ui/src/main.tsx
@@ -24,7 +24,7 @@ const ReactQueryDevtools = import.meta.env.PROD
   : React.lazy(() =>
       import("@tanstack/react-query-devtools").then((res) => ({
         default: res.ReactQueryDevtools,
-      }))
+      })),
     );
 
 const queryClient = new QueryClient();
@@ -41,6 +41,6 @@ if (!rootElement.innerHTML) {
         </ThemeProvider>
         <ReactQueryDevtools />
       </QueryClientProvider>
-    </StrictMode>
+    </StrictMode>,
   );
 }
diff --git a/ui/src/provider/theme.provider.tsx b/ui/src/provider/theme.provider.tsx
@@ -11,5 +11,5 @@ export const {
     localStorage.setItem("theme", next);
     return next;
   },
-  (localStorage.getItem("theme") === "dark" ? "dark" : "light") as Theme
+  (localStorage.getItem("theme") === "dark" ? "dark" : "light") as Theme,
 );
diff --git a/ui/src/routes/__root.tsx b/ui/src/routes/__root.tsx
@@ -12,7 +12,7 @@ const TanStackRouterDevtools = import.meta.env.PROD
   : React.lazy(() =>
       import("@tanstack/router-devtools").then((res) => ({
         default: res.TanStackRouterDevtools,
-      }))
+      })),
     );
 
 export const Route = createRootRoute({
@@ -26,10 +26,18 @@ export function Root() {
   const changeTheme = setTheme();
   return (
     <>
-      <div className={cn("flex min-h-screen w-full flex-col bg-background", theme === "dark" && "dark")}>
+      <div
+        className={cn(
+          "flex min-h-screen w-full flex-col bg-background",
+          theme === "dark" && "dark",
+        )}
+      >
         <header className="sticky top-0 flex h-16 items- justify-between gap-4 border-b bg-background px-4 md:px-6 z-50">
           <nav className="hidden flex-col gap-6 text-lg font-medium sm:flex sm:flex-row sm:items-center sm:gap-5 sm:text-sm md:gap-6">
-            <Link to="/" className="flex items-center gap-2 text-lg font-semibold md:text-base">
+            <Link
+              to="/"
+              className="flex items-center gap-2 text-lg font-semibold md:text-base"
+            >
               <Database className="h-6 w-6 text-foreground" />
               <span className="text-foreground">SQLite Studio</span>
             </Link>
@@ -95,24 +103,36 @@ function MobileNav() {
         </SheetTrigger>
         <SheetContent side="left" className={theme}>
           <nav className="grid gap-6 text-lg font-medium text-foreground">
-            <Link href="#" className="flex items-center gap-2 text-lg font-semibold">
+            <Link
+              href="#"
+              className="flex items-center gap-2 text-lg font-semibold"
+            >
               <Database className="size-6 text-foreground" />
               <span className="text-foreground">SQLite Studio</span>
             </Link>
             <Link to="/" className="[&.active]:text-foreground text-foreground">
               Overview
             </Link>
-            <Link to="/tables" className="[&.active]:text-foreground text-foreground">
+            <Link
+              to="/tables"
+              className="[&.active]:text-foreground text-foreground"
+            >
               Tables
             </Link>
-            <Link to="/query" className="[&.active]:text-foreground text-foreground">
+            <Link
+              to="/query"
+              className="[&.active]:text-foreground text-foreground"
+            >
               Query
             </Link>
           </nav>
         </SheetContent>
       </Sheet>
 
-      <Link to="/" className="flex sm:hidden items-center gap-2 text-lg font-semibold md:text-base">
+      <Link
+        to="/"
+        className="flex sm:hidden items-center gap-2 text-lg font-semibold md:text-base"
+      >
         <Database className="h-6 w-6 text-foreground" />
         <span className="text-foreground">SQLite Studio</span>
       </Link>
@@ -138,7 +158,9 @@ function ErrorComponent() {
   return (
     <div className="w-screen h-screen text-red-500 flex flex-col items-center justify-center gap-6">
       <Frown className="w-12 h-12" />
-      <h1 className="scroll-m-20 text-3xl tracking-tight lg:text-4xl">Something Went Wrong</h1>
+      <h1 className="scroll-m-20 text-3xl tracking-tight lg:text-4xl">
+        Something Went Wrong
+      </h1>
     </div>
   );
 }
@@ -147,7 +169,9 @@ function NotFoundComponent() {
   return (
     <div className="py-52 w-full h-full flex flex-col items-center justify-center gap-6">
       <Cat className="w-20 h-20" />
-      <h1 className="scroll-m-20 text-3xl tracking-tight lg:text-4xl">Page Not Found</h1>
+      <h1 className="scroll-m-20 text-3xl tracking-tight lg:text-4xl">
+        Page Not Found
+      </h1>
     </div>
   );
 }
diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx
@@ -1,13 +1,24 @@
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { DatabaseZap, Table as TableIcon, TextSearch, Workflow } from "lucide-react";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  DatabaseZap,
+  Table as TableIcon,
+  TextSearch,
+  Workflow,
+} from "lucide-react";
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 
 import { fetchOverview } from "@/api";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
-export const Route = createLazyFileRoute("/")({
+export const Route = createFileRoute("/")({
   component: Index,
   loader: () => fetchOverview(),
   pendingComponent: IndexSkeleton,
@@ -19,7 +30,8 @@ function Index() {
   return (
     <>
       <h2 className="scroll-m-20 border-b pb-2 text-muted-foreground text-3xl tracking-tight first:mt-0">
-        Exploring <span className="font-bold text-foreground">{data.file_name}</span>
+        Exploring{" "}
+        <span className="font-bold text-foreground">{data.file_name}</span>
       </h2>
 
       <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
@@ -29,8 +41,12 @@ function Index() {
             <TableIcon className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{data.tables.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">The number of tables in the DB.</p>
+            <div className="text-2xl font-bold">
+              {data.tables.toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              The number of tables in the DB.
+            </p>
           </CardContent>
         </Card>
         <Card>
@@ -39,8 +55,12 @@ function Index() {
             <DatabaseZap className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{data.indexes.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">The number of indexes across the whole DB.</p>
+            <div className="text-2xl font-bold">
+              {data.indexes.toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              The number of indexes across the whole DB.
+            </p>
           </CardContent>
         </Card>
         <Card>
@@ -49,8 +69,12 @@ function Index() {
             <TextSearch className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{data.views.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">The number of views in the DB.</p>
+            <div className="text-2xl font-bold">
+              {data.views.toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              The number of views in the DB.
+            </p>
           </CardContent>
         </Card>
         <Card>
@@ -59,8 +83,12 @@ function Index() {
             <Workflow className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{data.triggers.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">The number of triggers in the DB.</p>
+            <div className="text-2xl font-bold">
+              {data.triggers.toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              The number of triggers in the DB.
+            </p>
           </CardContent>
         </Card>
       </div>
@@ -87,7 +115,9 @@ function Index() {
                 <TableRow>
                   <TableCell>
                     <div className="font-medium">File size</div>
-                    <div className="text-sm text-muted-foreground md:inline">The size of the DB on disk.</div>
+                    <div className="text-sm text-muted-foreground md:inline">
+                      The size of the DB on disk.
+                    </div>
                   </TableCell>
                   <TableCell className="text-right">{data.file_size}</TableCell>
                 </TableRow>
@@ -99,7 +129,9 @@ function Index() {
                       The SQLite version the DB was created with.
                     </div>
                   </TableCell>
-                  <TableCell className="text-right">{data.sqlite_version}</TableCell>
+                  <TableCell className="text-right">
+                    {data.sqlite_version}
+                  </TableCell>
                 </TableRow>
 
                 {data.created && (
@@ -110,7 +142,9 @@ function Index() {
                         The date and time when the DB was created.
                       </div>
                     </TableCell>
-                    <TableCell className="text-right">{data.created.toUTCString()}</TableCell>
+                    <TableCell className="text-right">
+                      {data.created.toUTCString()}
+                    </TableCell>
                   </TableRow>
                 )}
 
@@ -121,7 +155,9 @@ function Index() {
                       The date and time when the DB was last modified.
                     </div>
                   </TableCell>
-                  <TableCell className="text-right">{data.modified.toUTCString()}</TableCell>
+                  <TableCell className="text-right">
+                    {data.modified.toUTCString()}
+                  </TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -148,7 +184,13 @@ export function TheBarChart({ counts }: TheBarChartProps) {
   return (
     <ResponsiveContainer width="100%" height={350}>
       <BarChart data={counts}>
-        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <XAxis
+          dataKey="name"
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+        />
         <YAxis
           stroke="#888888"
           fontSize={12}
@@ -162,7 +204,6 @@ export function TheBarChart({ counts }: TheBarChartProps) {
           radius={[4, 4, 0, 0]}
           className="fill-primary"
         />
-        <Bar dataKey="count" fill="currentColor" radius={[4, 4, 0, 0]} className="fill-primary" />
       </BarChart>
     </ResponsiveContainer>
   );