FirestoreContextProvider.tsx

import React, { createContext, ReactNode, useEffect, useState } from "react"
import { User as FirebaseUser } from "firebase/app"
import { Firestore } from "firebaseTypes"
import FirebaseApp from "../index"
import { User } from "state/users/userTypes"
import UserModel from "state/users/userModel"

type FirestoreContextType = {
  firestore: Firestore | null
  currentUser: User | null
}

export const FirestoreContext = createContext<FirestoreContextType>({
  firestore: null,
  currentUser: null,
})

export default function FirestoreContextProvider({ children }: { children: ReactNode }) {
  const firestore = FirebaseApp.firestore()
  const [firebaseUserObject, setFirebaseUserObject] = useState<FirebaseUser | null>(null)
  const [currentUser, setCurrentUser] = useState<User | null>(null)
  const UserCollection = new UserModel(firestore)

  useEffect(() => {
    (async () => {
      if (firebaseUserObject) {
        const user: User = await UserCollection.getCurrentUser(firebaseUserObject.uid)
        setCurrentUser(user)
      } else {
        setCurrentUser(null)
      }
    })()
  }, [firebaseUserObject])

  useEffect(() => {
    const unsubscribe = FirebaseApp.auth().onAuthStateChanged(setFirebaseUserObject)
    return () => {
      unsubscribe()
    }
  }, [])

  return <FirestoreContext.Provider value={{ firestore, currentUser }}>{children}</FirestoreContext.Provider>
}