first commit

frontend/src/hooks/useAuth.ts

@@ -0,0 +1,101 @@
+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,
+  LoginService,
+  type UserPublic,
+  type UserRegister,
+  UsersService,
+} from "../client"
+import useCustomToast from "./useCustomToast"
+
+const isLoggedIn = () => {
+  return localStorage.getItem("access_token") !== null
+}
+
+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>({
+    queryKey: ["currentUser"],
+    queryFn: UsersService.readUserMe,
+    enabled: isLoggedIn(),
+  })
+
+  const signUpMutation = useMutation({
+    mutationFn: (data: UserRegister) =>
+      UsersService.registerUser({ requestBody: data }),
+
+    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")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] })
+    },
+  })
+
+  const login = async (data: AccessToken) => {
+    const response = await LoginService.loginAccessToken({
+      formData: data,
+    })
+    localStorage.setItem("access_token", response.access_token)
+  }
+
+  const loginMutation = useMutation({
+    mutationFn: login,
+    onSuccess: () => {
+      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)
+    },
+  })
+
+  const logout = () => {
+    localStorage.removeItem("access_token")
+    navigate({ to: "/login" })
+  }
+
+  return {
+    signUpMutation,
+    loginMutation,
+    logout,
+    user,
+    isLoading,
+    error,
+    resetError: () => setError(null),
+  }
+}
+
+export { isLoggedIn }
+export default useAuth

frontend/src/hooks/useCustomToast.ts

@@ -0,0 +1,23 @@
+import { useToast } from "@chakra-ui/react"
+import { useCallback } from "react"
+
+const useCustomToast = () => {
+  const toast = useToast()
+
+  const showToast = useCallback(
+    (title: string, description: string, status: "success" | "error") => {
+      toast({
+        title,
+        description,
+        status,
+        isClosable: true,
+        position: "bottom-right",
+      })
+    },
+    [toast],
+  )
+
+  return showToast
+}
+
+export default useCustomToast