🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/src/hooks/useAuth.ts

@@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { useState } from "react"
 
-import { AxiosError } from "axios"
 import {
   type Body_login_login_access_token as AccessToken,
   type ApiError,
@@ -11,7 +10,7 @@ import {
   type UserRegister,
   UsersService,
 } from "../client"
-import useCustomToast from "./useCustomToast"
+import { handleError } from "../utils"
 
 const isLoggedIn = () => {
   return localStorage.getItem("access_token") !== null
@@ -20,9 +19,8 @@ const isLoggedIn = () => {
 const useAuth = () => {
   const [error, setError] = useState<string | null>(null)
   const navigate = useNavigate()
-  const showToast = useCustomToast()
   const queryClient = useQueryClient()
-  const { data: user, isLoading } = useQuery<UserPublic | null, Error>({
+  const { data: user } = useQuery<UserPublic | null, Error>({
     queryKey: ["currentUser"],
     queryFn: UsersService.readUserMe,
     enabled: isLoggedIn(),
@@ -34,20 +32,9 @@ const useAuth = () => {
 
     onSuccess: () => {
       navigate({ to: "/login" })
-      showToast(
-        "Account created.",
-        "Your account has been created successfully.",
-        "success",
-      )
     },
     onError: (err: ApiError) => {
-      let errDetail = (err.body as any)?.detail
-
-      if (err instanceof AxiosError) {
-        errDetail = err.message
-      }
-
-      showToast("Something went wrong.", errDetail, "error")
+      handleError(err)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })
@@ -67,17 +54,7 @@ const useAuth = () => {
       navigate({ to: "/" })
     },
     onError: (err: ApiError) => {
-      let errDetail = (err.body as any)?.detail
-
-      if (err instanceof AxiosError) {
-        errDetail = err.message
-      }
-
-      if (Array.isArray(errDetail)) {
-        errDetail = "Something went wrong"
-      }
-
-      setError(errDetail)
+      handleError(err)
     },
   })
 
@@ -91,7 +68,6 @@ const useAuth = () => {
     loginMutation,
     logout,
     user,
-    isLoading,
     error,
     resetError: () => setError(null),
   }

frontend/src/hooks/useCustomToast.ts

@@ -1,23 +1,25 @@
-import { useToast } from "@chakra-ui/react"
-import { useCallback } from "react"
+"use client"
+
+import { toaster } from "../components/ui/toaster"
 
 const useCustomToast = () => {
-  const toast = useToast()
+  const showSuccessToast = (description: string) => {
+    toaster.create({
+      title: "Success!",
+      description,
+      type: "success",
+    })
+  }
 
-  const showToast = useCallback(
-    (title: string, description: string, status: "success" | "error") => {
-      toast({
-        title,
-        description,
-        status,
-        isClosable: true,
-        position: "bottom-right",
-      })
-    },
-    [toast],
-  )
+  const showErrorToast = (description: string) => {
+    toaster.create({
+      title: "Something went wrong!",
+      description,
+      type: "error",
+    })
+  }
 
-  return showToast
+  return { showSuccessToast, showErrorToast }
 }
 
 export default useCustomToast