UserProvider.tsx

import React, { useEffect, useState } from "react";
import SignUp from "../components/SignUp";
import { useAuth } from "./auth-context";

const getUserData = async (idToken: string) => {
  const response = await fetch(`http://localhost:4000/user`, {
    headers: {
      Accept: "application/json",
      Authorization: "Bearer " + idToken
    }
  });

  if (response.ok) {
    const { data } = await response.json();
    return data;
  } else {
    console.log("Response was bad", response);
    throw response;
  }
};

interface UserContextType {
  userData: any[];
  idToken?: string;
}

const UserContext = React.createContext<UserContextType>({
  userData: [],
  idToken: ""
});

function UserProvider(props) {
  const [idToken, setIdToken] = useState("");
  const [userData, setUserData] = useState([]);
  const { user } = useAuth();

  useEffect(() => {
    if (!user) return;

    user
      .getIdToken()
      .then(setIdToken)
      .catch(console.error);
  }, [user]);

  useEffect(() => {
    if (!idToken) return;

    getUserData(idToken).then(setUserData);
  }, [idToken]);

  if (user && !userData.length) {
    return <SignUp user={user} setUserData={setUserData} />;
  }

  return (
    <UserContext.Provider value={{ user, userData, idToken }} {...props} />
  );
}

function useUser() {
  const context = React.useContext(UserContext);
  if (context === undefined) {
    throw new Error(`useUser must be used within a UserProvider`);
  }
  return context;
}

export { UserProvider, useUser };