Function FavoriteAnimals

example/withSuspense/Firestore.tsx:82–117

(props)

};

const FavoriteAnimals = (props) => {
  const firestore = useFirestore();
  const animalsCollection = collection(firestore, 'animals');
  const [isAscending, setIsAscending] = useState(true);
  const animalsQuery = query(animalsCollection, orderBy('commonName', isAscending ? 'asc' : 'desc'));
  const [isPending, startTransition] = useTransition();

  const toggleSort = () => {
    startTransition(() => {
      setIsAscending(!isAscending);
    });
  };

  const addAnimal = () => {
    const possibleAnimals = ['Dog', 'Cat', 'Iguana', 'Zebra'];
    const selectedAnimal = possibleAnimals[Math.floor(Math.random() * possibleAnimals.length)];
    addDoc(animalsCollection, { commonName: selectedAnimal });
  };

  const removeAnimal = (id) => deleteDoc(doc(animalsCollection, id));

  return (
    <>
      <WideButton label="Sort" onClick={toggleSort} />
      <React.Suspense fallback="loading...">
        <List query={animalsQuery} removeAnimal={removeAnimal} />
      </React.Suspense>
      <WideButton
        label="Add Animal"
        onClick={() => {
          addAnimal();
        }}
      />
    </>
  );
};

function FirestoreWrapper({ children }) {
  const { data: firestoreInstance } = useInitFirestore(async (firebaseApp) => {