firebase example

app.tsx

import logo from "./logo.svg";
import "./App.css";
import { useState, useEffect } from "react";
import { db } from "./fire";

function App() {
  const [state, setState] = useState({ stuff: [] });

  const getData = () => {
    const dataRef = db.collection("stuff");

    dataRef.onSnapshot((snap) => {
      if (snap.empty) {
        setState({ stuff: [] });
      } else {
        const result = snap.docs.map((item) => item.data());
        console.dir(snap.docs.map((item) => item.id));
        console.dir(snap.docs);
        setState({ stuff: result });
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);

  const updateName = (id) => {
    const userRef = db.collection("stuff").doc(id);

    userRef.update({ name: "mike" });
  };

  const createNew = (id) => {
    const userRef = db.collection("stuff").doc();

    userRef.set({
      id: userRef.id,
      name: "Alex 5",
      ts: Date.now(),
    });
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <ul>
          {state.stuff
            .sort((a, b) => a.ts - b.ts)
            .map((item) => (
              <p key={item.id}>
                {item.name}
                <button onClick={() => updateName(item.id)}>Update</button>
              </p>
            ))}
        </ul>

        <button onClick={() => createNew()}>New One</button>
      </header>
    </div>
  );
}

export default App;

fire.js

import firebase from "firebase/app";
import "firebase/analytics";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";
import "firebase/functions";
import "firebase/storage";

const config = {
  apiKey: "get these keys from firebase console project settigns and add these keys to your config",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const storage = firebase.storage();
const auth = firebase.auth();
const db = firebase.firestore();
const functions = firebase.functions();
const storageRef = storage.ref();
const ref = firebase.database().ref();
let analytics;
if (typeof window !== "undefined") {
  analytics = firebase.analytics();
}

export { analytics, auth, db, firebase, functions, ref, storage, storageRef };