🪝 React Hooks for T4 App

useUser Hook

The useUser hook is a custom React hook that provides the current user and loading state for the Supabase authentication.

Usage

const { user, loading, setUser } = useUser()

Return Values

The useUser hook returns an object with the following properties:

• user (object): The current user object returned by Supabase authentication.
• loading (boolean): A flag indicating whether the user data is still being fetched.
• setUser (function): A function to set the current user object.

Example

import { useUser } from './useUser'
 
const UserProfile = () => {
  const { user, loading, setUser } = useUser()
 
  if (loading) {
    return <div>Loading...</div>
  }
 
  if (!user) {
    return <div>No user found</div>
  }
 
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={() => setUser(null)}>Log Out</button>
    </div>
  )
}

In the example above, the useUser hook is used to fetch the current user and loading state. If the loading state is true, a loading message is displayed. If no user is found, a message is displayed. Otherwise, the user's name is displayed along with a log out button.

Implementation Details

The useUser hook internally uses the useSupabaseUser and useUserLoading hooks to get the user and loading state, respectively. It also uses the useEffect hook to fetch the user data when the component mounts. The user data is fetched using the supabase.auth.getUser() method. Once the user data is fetched, the setUser function is called to update the user state. Finally, the loading state is set to false. The effect runs only once when the component mounts, as indicated by the empty dependency array [].

Note: The UserResponse type is not provided in the code snippet, but it should be defined to match the response structure returned by the supabase.auth.getUser() method.