AuthContext.jsx

import { createContext, useContext, useEffect, useState } from 'react'
import { getUser, logout } from 'services/axios'

/**
* getUser() -> Helper function to fetch user information. (basically an axios call)
* logout() -> Helper function to logout users 

*/ 

const AuthContext = createContext()

/**
 * @param {React.ReactNode}  - children - React child
 */
export function AuthProvider({ children }) {
	const [authState, setAuthState] = useState({
		user: null,
		isAuthenticated: false,
	})

	useEffect(() => {
		const getUserInfo = async () => {
			
				const response = await getUser()
				
				if(response.ok){
					setAuthState({
						user,
						isAuthenticated: true,
					})
				}
			
				if(response.status === 'INTERNAL_ERROR'){
					setAuthState({
						user: null,
						isAuthenticated: false,
					})
				}
		}
		getUserInfo()
	}, [])

	// a setter function for setting authInfo
	function setAuthInfo({ user }) {
		setAuthState({
			user,
			isAuthenticated: user && user.id ? true : false,
		})
	}

	async function logoutUser() {
		const response = await logout()
		
		setAuthState({
			user: null,
			isAuthenticated: false,
		})
	}

	return (
		<AuthContext.Provider
			value={{
				user: authState.user,
				isAuthenticated: authState.isAuthenticated,
				setAuthState: (authInfo) => setAuthInfo(authInfo),
				logoutUser,
			}}
		>
			{children}
		</AuthContext.Provider>
	)
}

export function useAuth() {
	// usage : const {user, isAuthenticated} = useAuth();
	return useContext(AuthContext)
}