RxFire в ReactJS с использованием Firebase Firestore и аутентификации

> You can skip the Instructions part of the lesson if you are already familiar with ReactJS.

## Simple Initial Component

### Remove App.js and replace

Remove the core of App.js to start as we will be using the pattern of `extends React.Component`. We will now start simple by adding our first React Component Called Instructions.



```typescript
import "./App.css";
import React from "react";
import Instructions from "./components/Instructions";
class App extends React.Component {
  render() {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          flexFlow: "row wrap",
        }}
      >
        {" "}
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            flexFlow: "column",
          }}
        >
          {" "}
          <Instructions />{" "}
        </div>{" "}
      </div>
    );
  }
}
export default App;

import React from "react";
class Instructions extends React.Component {
  render() {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "start",
          flexFlow: "row wrap",
        }}
      >
        {" "}
        <div style={{ maxWidth: "500px" }}>
          {" "}
          <img
            src="https://res.cloudinary.com/ajonp/image/upload/q_auto/ajonp-ajonp-com/17-rxfire-react-cats/RxFire_3.webp"
            alt="rxfire for cats"
            width="100%"
          />{" "}
        </div>{" "}
        <div>
          {" "}
          <p>
            {" "}
            In this example we will use RxFire to Observe the Cat Facts that we
            add to our Firestore Database.{" "}
          </p>{" "}
          <a
            href="https://github.com/AJONPLLC/rxfire-react-cats"
            target="no_index"
          >
            {" "}
            https://github.com/AJONPLLC/rxfire-react-cats{" "}
          </a>{" "}
          <ol>
            {" "}
            <li>
              {" "}
              Sign In{" "}
              <ul>
                {" "}
                <li>Uses Google Auth for Firebase</li> <li>Found in App.js</li>{" "}
              </ul>{" "}
            </li>{" "}
            <li>
              {" "}
              Add Cat Fact{" "}
              <ul>
                {" "}
                <li>
                  {" "}
                  This will use an API and Insert the facts into Firestore{" "}
                </li>{" "}
                <li>Found in components/AddCat.js</li>{" "}
              </ul>{" "}
            </li>{" "}
            <li>
              {" "}
              Firestore collection{" "}
              <ul>
                {" "}
                <li>
                  {" "}
                  Observing catfacts for changes, heart eyes are your facts{" "}
                </li>{" "}
                <li>Found in components/ListCatFacts.js</li>{" "}
              </ul>{" "}
            </li>{" "}
            <li>
              {" "}
              Sign Out{" "}
              <ul>
                {" "}
                <li>Observe that user is removed</li>{" "}
              </ul>{" "}
            </li>{" "}
          </ol>{" "}
        </div>{" "}
      </div>
    );
  }
}
export default Instructions;

... import AddCat from './components/AddCat'; ... <div style={{ maxWidth: '800px' }}> <AddCat /> </div> ...

import React from 'react';
import { firestore } from '../Firebase';
class AddCat extends React.Component {
    addCatFact = () => {
        /* The dreaded CORS, had to pass through a proxy */
        fetch(`https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=1`)
            .then(blob => blob.json())
            .then(value => {
                console.log('fetched', value);
                firestore.collection('catfacts')
                    .add({ ...value, catFactDate: new Date() })
                    .then(() => { }, reason => {
                        alert('Must Be Logged In To Add, See Console');
                        console.log('Failed Adding Cat Fact', reason);
                    });
            });
    };
    render() {
        return (
            <button className="myButton" onClick={this.addCatFact}> 2. Add Cat Fact </button>
        );
    }
}
export default AddCat;

... import { firestore, loggedIn$ } from './Firebase'; ...
state = { user: null }; componentDidMount() {
    /* Observable from RxFire */
    loggedIn$.subscribe(user => { this.authHandler({ user });
    //Update state on load of app
    const { displayName, email, phoneNumber, photoURL } = user;
    firestore .collection('users') .doc(user.uid)
    .set({ displayName, email, phoneNumber, photoURL });
    }); }
    authHandler = async authData => {
        this.setUser(authData.user); };
        setUser = user => {
            this.setState({ user: user }); };
            ...
            <Instructions />
            <SignIn user={this.state.user} authHandler={this.authHandler} setUser={this.setUser} />
            <div style={{ maxWidth: '800px' }}>
            <AddCat user={this.state.user} />
            ...

## Update AddCat to include user uid

### Pass user to AddCat

Update our main app to pass the user prop.App.js

Now we can use this to include with our data going to firestore. AddCat.js



```typescript
... .add({ ...value, uid: this.props.user.uid, catFactDate: new Date() }) ...

 render() { let addCatButton = null; if (this.props.user) addCatButton = ( <button className="myButton" onClick={this.addCatFact}> 2. Add Cat Fact </button> ); return addCatButton; }

## Create List of Cat Facts

### Create ListCatFacts

This is probably the most important part of `RxFire` it will return an Observable that you can subscribe to for all changes to a collection by using the function `collectionData` which takes the collection as paramater as well as an option id to create, in our case we pass `catFactsRef.orderBy('catFactDate', 'desc')` and `'catFactId'`.Now we can just use a map to iterate on each catFact, whenever the Observable updates the current `catFact` state the array is updated and we can show the full list update using `{this.state.catfacts.map(catFact => {`.ListCatFacts.js



```typescript
import React from 'react'; import { collectionData, firestore } from '../Firebase'; class ListCatFacts extends React.Compo