How to use react-firebase-hooks - 10 common examples

export const withCurUserInfo = Component => props => {
  const { state: { firebase } } = useContext(SiteContext);
  const { initialising, user } = useAuthState(firebase.auth);
  const { loading, value } = useDocument(
    firebase && firebase.firestore.doc(`users/${user && user.uid}`)
  );

  if(loading || initialising) return ;

  if(props.redirect) return Component;

  if(value === null || !value.exists) { // pass in current user's profile details
    return ;
  }

  try {
    const curUser = Object.assign({}, user, value.data());
    return 

  } catch(e) {

export const Editor: React.FunctionComponent = ({
  match,
  history
}) => {
  const { id } = match && match.params;
  const [active, setActive] = React.useState(0);
  const [renderMain, setRenderMain] = React.useState(false);
  const [editNameMode, setEditNameMode] = React.useState(false);
  const theme = useTheme();

  // load the document containing meta about the project
  const { error, loading, value: meta } = useDocument(
    firebase
      .firestore()
      .collection("captions")
      .doc(id)
  );

  const [name, setName] = React.useState(meta ? meta.get("title") : "");

  const subcollection = firebase
    .firestore()
    .collection("captions")
    .doc(id)
    .collection("entries");

  // load the actual captions themselves
  const captions = useCollection(subcollection.orderBy("startTime"));

firebase
      .firestore()
      .collection("captions")
      .doc(id)
  );

  const [name, setName] = React.useState(meta ? meta.get("title") : "");

  const subcollection = firebase
    .firestore()
    .collection("captions")
    .doc(id)
    .collection("entries");

  // load the actual captions themselves
  const captions = useCollection(subcollection.orderBy("startTime"));

  // the current video url
  const [video, setVideo] = React.useState(
    meta ? meta.get("url") : null
  );

  React.useEffect(() => {
    if (meta && meta.get("url") !== video && meta.get("url")) {
      setVideo(meta.get("url"));
    }

    if (meta && meta.get("title") !== name) {
      setName(meta.get("title"));
    }
  }, [meta]);

export function useFollowRequests() {
  const user = useSession();
  const { error, loading, value } = useCollection(
    firebase
      .firestore()
      .collection("relations")
      .where("toUserId", "==", user.uid)
      .where("confirmed", "==", false)
      .limit(50)
  );

  return {
    error,
    loading,
    value
  };
}

export const accessIfAuthenticated = Component => props => {
  let AugmentedComponent;
  const { state: { firebase } } = useContext(SiteContext);
  const { initialising, user } = useAuthState(firebase.auth);
  const userLoggedIn = !initialising && (user !== null);

  if(initialising) {
    AugmentedComponent = withCurUserInfo()({});
  }
  else if(userLoggedIn) {
    AugmentedComponent = withCurUserInfo(Component)(props);
  }
  else {
    console.warn("Whoops! You're not logged in. If this is an error or a bug, please email alex@equithon.org.")
    AugmentedComponent = withCurUserInfo()({ redirect: true });
  }


  return AugmentedComponent;
};

const RsvpViewContainer = ({
  curUser,
  fetchRsvpFirestore,
  createRsvpFirestore,
  updateRsvpFirestore,
  submitRsvpFirestore
}) => {
  const { dispatch } = useContext(SiteContext);
  const { value } = useDocument(fetchRsvpFirestore());
  const [rsvpState, updateRsvpState] = useState("FETCHING");
  const [localRsvpInfo, updateLocalRsvpInfo] = useState({ submitted: false });
  const rsvpRef = useRef();
  rsvpRef.current = localRsvpInfo;

  const updateRsvpInfo = newRsvpInfo => {
    const newLocalRsvpInfo = {
      ...localRsvpInfo,
      ...newRsvpInfo
    };

    updateLocalRsvpInfo(newLocalRsvpInfo);
    if (!newLocalRsvpInfo.submitted)
      dispatch({
        type: "UPDATE_DASHBOARD_TOAST",
        data: { toastName: "rsvpModified" }

const ApplicationViewContainer = ({
  curUser,
  fetchAppFirestore,
  createAppFirestore,
  updateAppFirestore,
  submitAppFirestore,
}) => {

  const { dispatch } = useContext(SiteContext);
  const { value } = useDocument(fetchAppFirestore());
  const [ appState, updateAppState ] = useState("FETCHING");
  const [ localAppInfo, updateLocalAppInfo ] = useState({ submitted: false });
  const appRef = useRef();
  appRef.current = localAppInfo;


  const updateAppInfo = newAppInfo => {
    const newLocalAppInfo = {
      ...localAppInfo,
      ...newAppInfo,
    };

    updateLocalAppInfo(newLocalAppInfo);
    if(!newLocalAppInfo.submitted) dispatch({ type: "UPDATE_DASHBOARD_TOAST", data: { toastName: "appModified" } });
  }

export const Recipe: React.FunctionComponent = ({ id }) => {
  const theme = useTheme();
  const user = useSession();
  const { value, loading, error } = useDocument(
    firebase
      .firestore()
      .collection("recipes")
      .doc(id)
  );

  if (loading) {
    return null;
  }

  if (!loading && !value.exists) {
    return null;
  }

  if (error) {
    return (

const AppReviewViewContainer = ({ appsNeedingReview, submitReviewOfApp }) => {
  const { state, dispatch } = useContext(SiteContext);
  const { error, loading, value } = useCollection(appsNeedingReview);

  const valueFetched = error || loading || !value ? "WAITING" : value.data();
  let curAppReview =
    state.curAppReview && state.curAppReview !== "SUBMITTED"
      ? state.curAppReview
      : valueFetched;

  const updateReviewInState = updatedReview =>
    dispatch({ type: "UPDATE_APP_REVIEW", data: updatedReview });
  const submitReviewInState = () => {
    dispatch({ type: "SUBMIT_APP_REVIEW" });
    submitReviewOfApp();
    curAppReview = valueFetched;
  };

  return (

export const Me: React.FunctionComponent = props => {
  const user = useSession();
  const theme = useTheme();
  const toast = useToast();

  const [newProjectId, setNewProjectId] = React.useState();

  const { error, loading, value } = useCollection(
    firebase
      .firestore()
      .collection("captions")
      .where("uid", "==", user!.uid)
  );

  const { loading: creatingProject, create } = useCreateProject();

  function createProject() {
    create()
      .then(result => {
        setNewProjectId(result.id);
      })
      .catch(err => {
        toast({
          title: "An error occurred while creating your project",