atomWithCollection.ts

import { atom, WritableAtom } from "jotai";
import firebase from "firebase";

function atomWithCollection<TData>(
  collection: firebase.firestore.CollectionReference
): WritableAtom<
  TData[],
  {
    id: string;
    data: TData;
  }
> {
  const dataAtom = atom<TData[]>([]);
  dataAtom.onMount = (dispatch) =>
    collection.onSnapshot((snapshot) => {
      dispatch(snapshot.docs.map((doc) => doc.data() as TData));
    });

  return atom(
    (get) => {
      return get(dataAtom);
    },
    (_1, _2, { id, data }: { id: string; data: TData }) => {
      collection.doc(id).set(data);
    }
  );
}

export default atomWithCollection;