bettter delete session

Author: alan345

client/src/components/session/DeleteSession.tsx

@@ -2,24 +2,25 @@ import { useMutation } from "@tanstack/react-query"
 import { useTRPC } from "../../lib/trpc"
 import { Trash } from "@phosphor-icons/react"
 import ErrorMutation from "../../layout/ErrorMutation"
-
+import { tryCatch } from "../../lib/try-catch"
+import { useState } from "react"
 type Props = {
   sessionId: string
   onDelete: () => void
 }
 
 const DeleteSession = (props: Props) => {
   const trpc = useTRPC()
+  const [error, setError] = useState<string | null>(null)
   const mutation = useMutation(trpc.deleteSession.mutationOptions())
 
   const deleteSession = async () => {
-    try {
-      await mutation.mutateAsync({
-        sessionId: props.sessionId,
-      })
+    const result = await tryCatch(mutation.mutateAsync({ sessionId: props.sessionId }))
+    if (result.error) {
+      setError(result.error.message)
+    }
+    if (result.data) {
       props.onDelete()
-    } catch (error) {
-      console.log(error)
     }
   }
 
@@ -33,7 +34,7 @@ const DeleteSession = (props: Props) => {
       >
         <Trash className="mr-2" /> Delete
       </button>
-      {mutation.error && <ErrorMutation data={mutation.error} />}
+      {error && <p className="text-red-600">{error}</p>}
     </div>
   )
 }

client/src/lib/try-catch.ts

@@ -0,0 +1,22 @@
+// Types for the result object with discriminated union
+type Success<T> = {
+  data: T
+  error: null
+}
+
+type Failure<E> = {
+  data: null
+  error: E
+}
+
+type Result<T, E = Error> = Success<T> | Failure<E>
+
+// Main wrapper function
+export async function tryCatch<T, E = Error>(promise: Promise<T>): Promise<Result<T, E>> {
+  try {
+    const data = await promise
+    return { data, error: null }
+  } catch (error) {
+    return { data: null, error: error as E }
+  }
+}