Firebase Custom Hooks.md

Firebase Custom Hooks

hooks/useUser.js:

import { useEffect, useState } from 'react';

export const useUser = (auth) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [err, setErr] = useState(null);

  useEffect(() => {
    auth.onAuthStateChanged(
      (userData) => {
        setIsLoading(false);

        if (userData) setUser(userData);
        else console.log('No user defined yet!');
      },
      (err) => {
        setIsLoading(false);
        setErr(err);
      }
    );
  }, []);

  return { user, isLoading, err };
};

hooks/useCollection.js:

import { onSnapshot } from 'firebase/firestore';
import { useEffect, useState } from 'react';

export const useCollection = (query) => {
  const [docs, setDocs] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [err, setErr] = useState(null);

  useEffect(() => {
    onSnapshot(
      query,
      (docsSnapshot) => {
        setIsLoading(false);

        let docs = [];
        docsSnapshot.forEach((doc) => docs.push({ ...doc.data(), id: doc.id }));

        setDocs(docs);
      },
      (err) => {
        setIsLoading(false);
        setErr(err);
      }
    );
  }, []);

  return { docs, isLoading, err };
};