Hook for user based firestore calls

[codercatdev]

The Issue

There is an idea out there right now that we should allow a null call to firestore, but this probably isn't the most ideal option.
This is all being discussed in several spots #463 #178 #176

@jhuleatt highlighted his reasoning within this thread about why it isn't the suggested method.
#178 (comment)

A thought about how to fix

I think it is worth talking about further because I think there is an opportunity here for a possible feature request. I like to have my profiles on users allow for overrides to their profile. So I typically will get the User type date from something like useSigninCheck or useUser and this will return the User for me, then when this is loaded though I also like to "extend" this to override the default Photo or other attributes like below.

export interface UserInfoExtended extends UserInfo {
  memberships?: UserMembership[];
  token?: string;
  basicInfo?: BasicUserInfo;
}

Typically I will wait for the getUser call to resolve in the Observable and then I have a switchMap to a firestore call which then fetches the remainder of this profile data. As explained in the other examples though you cannot use useFirestoreDocData as a hook call without already knowing the uid from the user.

Jeff has already pointed out that it would be best to wrap your auth call with another component and then when this becomes visible to react make your call to useFirestoreDocData to get the data.

Example

Here is how a normal profile would work ( I will try and do a stackblitz soon).

import Link from 'next/link';
import Image from 'next/image';

import ActiveLink from '@/components/ActiveLink';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { useFirestoreDocData, useSigninCheck } from 'reactfire';
import { signOut, getAuth } from '@firebase/auth';
import { getApp } from '@firebase/app';
import { UserInfoExtended } from '@/models/user.model';

export default function UserSignin({
  userMenu,
  setUserMenu,
  positionClass = 'right-0',
}: {
  userMenu: boolean;
  setUserMenu: Dispatch<SetStateAction<boolean>>;
  positionClass?: string;
}): JSX.Element {
  const [profile, setProfile] = useState<UserInfoExtended | null>(null);
  const app = getApp();
  const auth = getAuth(app);
  const { data: signInCheckResult } = useSigninCheck();

  useEffect(() => {
    if (signInCheckResult && signInCheckResult.user) {
      setProfile(signInCheckResult.user);
    }
  }, [signInCheckResult]);

  return (
    <>
      <div className="relative">
        {signInCheckResult && signInCheckResult.signedIn === true ? (
          <button
            className="flex p-1 text-sm rounded-full text-basics-50 dark:text-basics-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary-800 focus:ring-basics-50 hover:bg-primary-800 dark:hover:bg-primary-800"
            id="user-menu"
            aria-haspopup="true"
            onClick={() => setUserMenu(!userMenu)}
          >
            <span className="sr-only">Open user menu</span>
            {profile && profile.photoURL ? (
              <Image
                src={profile.photoURL}
                loader={() => profile.photoURL || ''}
                unoptimized={true}
                layout="fixed"
                width="40"
                height="40"
                alt={
                  profile.displayName
                    ? profile.displayName
                    : 'A Good Description'
                }
                className="w-8 h-8 rounded-full"
              />
            ) : (
              <Image
                src="/static/images/avatar.png"
                loader={() => '/static/images/avatar.png'}
                unoptimized={true}
                layout="fixed"
                width="40"
                height="40"
                alt="Avatar for user Profile"
                className="w-8 h-8 rounded-full"
              />
            )}
          </button>
        ) : (
          <Link href="/user/profile">
            <a className="flex items-center justify-center p-2 rounded text-basics-50 dark:text-basics-50 hover:bg-primary-800 dark:hover:bg-primary-800 focus:ring-2 focus:ring-basics-50">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M24 3.88235C24 1.73819 22.287 0 20.1739 0H10.087V2.11765H20.1739C21.1344 2.11765 21.913 2.90773 21.913 3.88235V20.1176C21.913 21.0923 21.1344 21.8824 20.1739 21.8824H10.087V24H20.1739C22.287 24 24 22.2618 24 20.1176V3.88235ZM10.087 18.1131L20.5217 12L10.087 5.88688V10.9412H-4.47035e-07V13.0588H10.087V18.1131Z"
                  fill="#FBFBFB"
                />
              </svg>
              <span className="ml-2 space-nowrap">Sign In</span>
            </a>
          </Link>
        )}
    </>
  );
}

Now in order to make a firestore call after Auth has happened I will need to wrap the profile portion, by removing

              <Image
                src={profile.photoURL}
                loader={() => profile.photoURL || ''}
                unoptimized={true}
                layout="fixed"
                width="40"
                height="40"
                alt={
                  profile.displayName
                    ? profile.displayName
                    : 'A Good Description'
                }
                className="w-8 h-8 rounded-full"
              />

and replacing that with a new component <AvatarProfile setProfile={setProfile} profile={profile} />

This new component looks like this

import Image from 'next/image';

import { Dispatch, SetStateAction, useEffect } from 'react';
import { useFirestoreDocData } from 'reactfire';
import { getApp } from '@firebase/app';
import { UserInfoExtended } from '@/models/user.model';
import { doc, DocumentReference, getFirestore } from '@firebase/firestore';

export default function UserSignin({
  profile,
  setProfile,
}: {
  profile: UserInfoExtended;
  setProfile: Dispatch<SetStateAction<UserInfoExtended | null>>;
}): JSX.Element {
  const app = getApp();
  const firestore = getFirestore(app);
  const ref = doc(
    firestore,
    'profiles',
    profile.uid
  ) as unknown as DocumentReference<UserInfoExtended | null>;
  const { status, data: dbProfile } =
    useFirestoreDocData<UserInfoExtended | null>(ref);

  useEffect(() => {
    if (dbProfile) {
      setProfile((prevProfile) => {
        return { ...prevProfile, ...dbProfile };
      });
    }
  }, [dbProfile, setProfile]);

  return (
    <>
      {profile && profile.photoURL ? (
        <Image
          src={profile.photoURL}
          loader={() => profile.photoURL || ''}
          unoptimized={true}
          layout="fixed"
          width="40"
          height="40"
          alt={profile.displayName ? profile.displayName : 'A Good Description'}
          className="w-8 h-8 rounded-full"
        />
      ) : (
        <Image
          src="/static/images/avatar.png"
          loader={() => '/static/images/avatar.png'}
          unoptimized={true}
          layout="fixed"
          width="40"
          height="40"
          alt="Avatar for user Profile"
          className="w-8 h-8 rounded-full"
        />
      )}
    </>
  );
}

Proposal

I am proposing that we make a function in reactfire that allows us to call anything from firestore after our authentication finishes. That way I don't have to wrap all of my components with additional functional components after auth.

I could instead do useFirestoreDocDataWithAuth(auth, ref); Then I know if data comes back I can merge if successful without the need to wrap the component.

Let me know what you think??