refactor(front): custom toast

src/app/connect/_components/conn-params.tsx

@@ -35,42 +35,15 @@ const ConnectionParamsForm = ({ driver }: ConnectionParamsFormProps) => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema)
   })
-  const onClickConnect = async ({
-    connName,
-    username,
-    password,
-    host,
-    port,
-    db
-  }: z.infer<typeof formSchema>) => {
-    const connString = constructConnectionString({
-      driver,
-      username,
-      password,
-      host,
-      port,
-      db
-    })
-    await createConnectionRecord(connName, connString, driver)
+  const onClickConnect = async (values: z.infer<typeof formSchema>) => {
+    const connString = constructConnectionString({ ...values, driver })
+    await createConnectionRecord(values.connName, connString, driver)
     router.push("/connections")
   }
 
-  const onClickTest = async ({
-    username,
-    password,
-    host,
-    port,
-    db
-  }: z.infer<typeof formSchema>) => {
-    const connString = constructConnectionString({
-      driver,
-      username,
-      password,
-      host,
-      port,
-      db
-    })
-    await testConnection(connString)
+  const onClickTest = async (values: z.infer<typeof formSchema>) => {
+    const connString = constructConnectionString({ ...values, driver })
+    await testConnection(connString, driver)
   }
   return (
     <Form {...form}>

src/app/connect/_components/conn-radio.tsx

@@ -9,8 +9,10 @@ interface ConnectionParamsProps {
   driver: Exclude<DriversValues, typeof Drivers.SQLite>
 }
 
-const ConnectionRadio = ({ driver }: ConnectionParamsProps) => {
-  const [radioValue, setRadioValue] = useState("conn_params")
+const ConnectionDetails = ({ driver }: ConnectionParamsProps) => {
+  const [radioValue, setRadioValue] = useState<
+    (string & {}) | "conn_params" | "conn_string"
+  >("conn_params")
   return (
     <>
       <RadioGroup
@@ -45,4 +47,4 @@ const ConnectionRadio = ({ driver }: ConnectionParamsProps) => {
   )
 }
 
-export default ConnectionRadio
+export default ConnectionDetails

src/app/connect/_components/conn-string.tsx

@@ -37,7 +37,7 @@ const ConnectionStringForm = ({ driver }: ConnectionParamsFormProps) => {
   }
 
   const onClickTest = async (values: z.infer<typeof formSchema>) => {
-    await testConnection(values.connString)
+    await testConnection(values.connString, driver)
   }
 
   return (

src/app/connect/_components/sqlite-connection.tsx

@@ -19,7 +19,7 @@ import { z } from "zod"
 import { createConnectionRecord, testConnection } from "../actions"
 
 const SqliteConnection = () => {
-  const [selectedPath, setSelectedPath] = useState<string | null>(null)
+  const [selectedPath, setSelectedPath] = useState<string>()
 
   return (
     <>
@@ -35,7 +35,7 @@ const SqliteConnection = () => {
               }
             ]
           })
-          setSelectedPath((selected as string) ?? null)
+          setSelectedPath(selected as string)
         }}
       >
         Select DB file

src/app/connect/actions.ts

@@ -1,6 +1,6 @@
 import { type DriversValues } from "@/lib/types"
+import { customToast } from "@/lib/utils"
 import { invoke } from "@tauri-apps/api/tauri"
-import toast from "react-hot-toast"
 
 export const testConnection = async (
   connString: string,
@@ -10,16 +10,13 @@ export const testConnection = async (
     connString,
     driver
   })
-  toast.promise(
+  customToast(
     command,
     {
-      loading: "Loading",
       success: (s) => s,
       error: (e: string) => e
     },
-    {
-      id: "connection"
-    }
+    "test_connection"
   )
 }
 

src/app/connect/page.tsx

@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils"
 import { Check, ChevronsUpDown } from "lucide-react"
 import Image from "next/image"
 import { useState } from "react"
-import ConnectionRadio from "./_components/conn-radio"
+import ConnectionDetails from "./_components/conn-radio"
 import SqliteConnection from "./_components/sqlite-connection"
 
 const ConnectionPage = () => {
@@ -69,7 +69,7 @@ const ConnectionPage = () => {
       {selectedDriver === Drivers.SQLite ? (
         <SqliteConnection />
       ) : (
-        selectedDriver && <ConnectionRadio driver={selectedDriver} />
+        selectedDriver && <ConnectionDetails driver={selectedDriver} />
       )}
       <Image
         src={"/bg-2.svg"}

src/app/connections/page.tsx

@@ -18,9 +18,7 @@ const ConnectionsPage = () => {
   const router = useRouter()
   const { data: connections, isLoading } = useQuery({
     queryKey: [],
-    queryFn: async () => {
-      return await getConnections()
-    }
+    queryFn: async () => await getConnections()
   })
 
   if (isLoading) return <LoadingSpinner />

src/app/dashboard/_components/create-row-sheet.tsx

@@ -32,7 +32,7 @@ import { useForm } from "react-hook-form"
 import { z } from "zod"
 import { createRow, getZodSchemaFromCols } from "../actions"
 
-const CreateRowBtn = () => {
+const AddRowBtn = () => {
   const [open, setOpen] = useState(false)
   return (
     <TooltipProvider>
@@ -47,10 +47,10 @@ const CreateRowBtn = () => {
             </TooltipTrigger>
           </SheetTrigger>
           <SheetContent className="overflow-y-auto">
-            <SheetHeader>
+            <SheetHeader className="mb-4">
               <SheetTitle>Add new row</SheetTitle>
             </SheetHeader>
-            <CreateRowForm setOpenSheet={setOpen} />
+            <AddRowForm setOpenSheet={setOpen} />
           </SheetContent>
         </Sheet>
         <TooltipContent
@@ -64,13 +64,13 @@ const CreateRowBtn = () => {
   )
 }
 
-export default CreateRowBtn
+export default AddRowBtn
 
-interface CreateRowFormProps {
+interface AddRowFormProps {
   setOpenSheet: Dispatch<SetStateAction<boolean>>
 }
 
-const CreateRowForm = ({ setOpenSheet }: CreateRowFormProps) => {
+const AddRowForm = ({ setOpenSheet }: AddRowFormProps) => {
   const queryClient = useQueryClient()
   const tableName = useSearchParams().get("tableName")!
   const { data, isLoading } = useQuery({

src/app/dashboard/actions.ts

@@ -4,6 +4,7 @@ import {
   string_data_types
 } from "@/lib/constants"
 import type { ColumnProps, ConnectionDetails, DriversValues } from "@/lib/types"
+import { customToast } from "@/lib/utils"
 import type { QueryClient } from "@tanstack/react-query"
 import { register } from "@tauri-apps/api/globalShortcut"
 import { invoke } from "@tauri-apps/api/tauri"
@@ -103,14 +104,14 @@ export const getZodSchemaFromCols = async (tableName: string) => {
 export const createRow = async (
   tableName: string,
   data: Record<string, any>,
-  setOpenSheet: Dispatch<SetStateAction<boolean>>,
+  setIsSheetOpen: Dispatch<SetStateAction<boolean>>,
   queryClient: QueryClient
 ) => {
   const command = invoke<number>("create_row", { tableName, data })
-  toast.promise(command, {
-    loading: "Creating...",
+
+  customToast(command, {
     success: (s) => {
-      setOpenSheet(false)
+      setIsSheetOpen(false)
       queryClient.invalidateQueries({ queryKey: ["table_rows"] })
       return `Successfully created ${s} row`
     },

src/app/dashboard/details/_components/data-table.tsx

@@ -82,7 +82,9 @@ const DataTable = <TData, TValue>({
     unregister("CommandOrControl+A").then(() =>
       registerSelectAllShortcut(table)
     )
-    unregister("CommandOrControl+C").then(() => registerCopyShortcut(table))
+    unregister("CommandOrControl+C").then(() =>
+      registerCopyShortcut(table, contextMenuRow)
+    )
   })
 
   return (
@@ -201,7 +203,7 @@ const TableContextMenuContent = ({
         Edit
       </ContextMenuItem>
       <ContextMenuItem
-        onClick={async () => await copyRowIntoClipboard(contextMenuRow, table)}
+        onClick={async () => await copyRowIntoClipboard(table, contextMenuRow)}
       >
         Copy
         <ContextMenuShortcut>Ctrl+C</ContextMenuShortcut>

src/app/dashboard/details/_components/edit-row-sheet.tsx

@@ -50,9 +50,10 @@ const EditRowSheet = ({ setIsSheetOpen, row, table }: EditRowSheetProps) => {
   }
 
   if (isLoading) return <LoadingSpinner />
+
   return (
     <SheetContent className="overflow-y-auto">
-      <SheetHeader>
+      <SheetHeader className="mb-4">
         <SheetTitle>Edit row</SheetTitle>
       </SheetHeader>
       <Form {...form}>

src/app/dashboard/details/actions.ts

@@ -1,15 +1,12 @@
+import { customToast } from "@/lib/utils"
 import { type QueryClient } from "@tanstack/react-query"
 import type { Row, Table } from "@tanstack/react-table"
 import { writeText } from "@tauri-apps/api/clipboard"
 import { register } from "@tauri-apps/api/globalShortcut"
 import { invoke } from "@tauri-apps/api/tauri"
-import type { Dispatch, RefObject, SetStateAction } from "react"
+import type { Dispatch, SetStateAction } from "react"
 import toast from "react-hot-toast"
 
-export const getColumns = async (tableName: string) => {
-  return await invoke<string[]>("get_columns", { tableName })
-}
-
 export const getRows = async (tableName: string) => {
   return await invoke<Record<string, any>[]>("get_rows", { tableName })
 }
@@ -36,8 +33,7 @@ export const deleteRows = async (
     rowPkValues: rows,
     tableName
   })
-  toast.promise(command, {
-    loading: "Deleting...",
+  customToast(command, {
     success: (rowsAffected) => {
       queryClient.invalidateQueries({ queryKey: ["table_rows"] })
       return `Successfully deleted ${
@@ -54,51 +50,47 @@ export const updateRow = async (
   pkColName: string,
   pkColValue: string | number,
   data: Record<string, any>,
-  setOpenSheet: Dispatch<SetStateAction<boolean>>
+  setIsSheetOpen: Dispatch<SetStateAction<boolean>>
 ) => {
   const command = invoke("update_row", {
     tableName,
     pkColName,
     pkColValue,
     data
   })
-  toast.promise(command, {
-    loading: "Updating...",
+  customToast(command, {
     success: (s) => {
-      setOpenSheet(false)
+      setIsSheetOpen(false)
       return `Successfully updated rows`
     },
     error: (e: string) => e
   })
 }
 
 export const copyRowIntoClipboard = async (
-  contextMenuRow: Row<any>,
-  table: Table<any>
+  table: Table<any>,
+  contextMenuRow?: Row<any>
 ) => {
-  if (table.getIsSomeRowsSelected()) {
-    writeText(
+  if (contextMenuRow) {
+    const row_values = contextMenuRow
+      .getAllCells()
+      .slice(1)
+      .map((cell) => cell.getValue())
+    return await writeText(row_values.join("|"))
+  } else if (table.getIsSomeRowsSelected()) {
+    return await writeText(
       table
         .getSelectedRowModel()
         .rows!.map((row) =>
           row
             .getAllCells()
-            // to remove the first select column
             .slice(1)
             .map((cell) => cell.getValue())
             .join("|")
         )
         .join("\n")
     )
-    return
   }
-
-  let row_values = contextMenuRow
-    .getAllCells()
-    // to remove the first select column
-    .slice(1)
-    .map((cell) => cell.getValue())
-  await writeText(row_values.join("|"))
 }
 
 export const registerDeleteShortcut = (
@@ -117,34 +109,12 @@ export const registerSelectAllShortcut = (table: Table<any>) => {
     table.toggleAllRowsSelected(!table.getIsAllRowsSelected())
   })
 }
-export const registerScrollUpShortcut = (
-  tableRef: RefObject<HTMLDivElement>
-) => {
-  register("CommandOrControl+Up", () => {
-    if (tableRef.current) {
-      tableRef.current.scroll({
-        top: 0
-      })
-    }
-  })
-}
 
-export const registerCopyShortcut = (table: Table<any>) => {
-  register("CommandOrControl+C", () => {
-    if (table.getIsSomeRowsSelected()) {
-      writeText(
-        table
-          .getSelectedRowModel()
-          .rows!.map((row) =>
-            row
-              .getAllCells()
-              // to remove the first select column
-              .slice(1)
-              .map((cell) => cell.getValue())
-              .join("|")
-          )
-          .join("\n")
-      )
-    }
-  })
+export const registerCopyShortcut = (
+  table: Table<any>,
+  contextMenuRow?: Row<any>
+) => {
+  register("CommandOrControl+C", () =>
+    copyRowIntoClipboard(table, contextMenuRow)
+  )
 }