react component animations react-spring

foo.jsx

import React, { Component } from "react";
import "./App.css";
import firebase from "./config/fbConfig";
import { Spring } from "react-spring";

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentItem: "",
      username: "",
      items: [],
      search: "",
      authenticated: false,
      user: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.signIn = this.signIn.bind(this);
  }
  handleSearch(e) {
    this.setState({ search: e.target.value });
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  signOut = e => {
    firebase
      .auth()
      .signOut()
      .then(
        function(result) {
          this.setState({ user: "" });
          this.setState({ authenticated: false });
        }.bind(this)
      );
  };

  signIn = e => {
    var provider = new firebase.auth.GoogleAuthProvider();

    firebase
      .auth()
      .signInWithPopup(provider)
      .then(
        function(result) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          this.setState({ user: result.user });
          this.setState({ authenticated: true });
          // ...
        }.bind(this)
      )
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
        console.log(error);
      });
  };

  handleChangeRating(e, docId) {
    this.setState({
      [e.target.name]: e.target.value
    });

    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });

    db.collection("items")
      .doc(docId)
      .update({ rating: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });

    db.collection("items").add({
      title: this.state.currentItem,
      user: this.state.username
    });

    this.setState({
      currentItem: "",
      username: ""
    });
  }
  componentDidMount() {
    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });

    var doc = db.collection("items").orderBy("title");
    doc.onSnapshot(
      docSnapshot => {
        let changes = docSnapshot.docChanges();
        let newState = [];

        changes.forEach((change, index) => {
          if (change.type === "added") {
            let data = change.doc.data();
            newState.push({
              id: change.doc.id,
              title: data.title,
              user: data.user,
              rating: data.rating
            });
          } else if (change.type === "removed") {
            this.setState({
              items: this.state.items.filter(item => {
                if (item.id !== change.doc.id) {
                  return item;
                }
              })
            });
          } else if (change.type === "modified") {
            let items = [...this.state.items];
            // find change.doc.id in this.state.items and replace it with change.doc.data()
            items[
              items.findIndex(obj => obj.id === change.doc.id)
            ].rating = change.doc.data().rating;
            this.setState({ items: items });
          }
        });
        this.setState({ items: [...this.state.items, ...newState] });
      },
      err => {
        console.log(`Encountered error: ${err}`);
      }
    );
  }
  removeItem(itemId) {
    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });
    db.collection("items")
      .doc(itemId)
      .delete();
  }
  render() {
    let filteredItems = this.state.items.filter(item => {
      return (
        item.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
      );
    });
    return (
      <div className="app">
        <header>
          <div className="wrapper">
            <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
              {props => <h1 style={props}>Fun Food Friends</h1>}
            </Spring>
          </div>
        </header>
        <div className="container">
          <section className="add-item">
            <form onSubmit={this.handleSubmit}>
              <input
                type="text"
                name="username"
                placeholder="What's your name?"
                onChange={this.handleChange}
                value={this.state.username}
              />
              <input
                type="text"
                name="currentItem"
                placeholder="What are you bringing?"
                onChange={this.handleChange}
                value={this.state.currentItem}
              />
              <button>Add Item</button>
            </form>
            <form>
              <input
                type="text"
                placeholder="Search"
                onChange={this.handleSearch}
              />
            </form>
            <button onClick={this.signIn}>Sign in</button>
            <button onClick={this.signOut}>Sign out</button>
            {this.state.authenticated === true && (
              <p>{this.state.user.displayName}</p>
            )}
          </section>
          <section className="display-item">
            <div className="wrapper">
              <ul>
                {filteredItems
                  .sort(function(a, b) {
                    if (a.title.toLowerCase() < b.title.toLowerCase()) {
                      return -1;
                    }
                    if (a.title.toLowerCase() > b.title.toLowerCase()) {
                      return 1;
                    }
                    return 0;
                  })
                  .map(item => {
                    return (
                      <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
                        {props => (
                          <li style={props} key={item.id}>
                            <h3>{item.title}</h3>
                            <p>
                              brought by: {item.user}
                              <select
                                value={item.rating}
                                id={item.id}
                                name="rating"
                                onChange={e =>
                                  this.handleChangeRating(e, item.id)
                                }
                              >
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                              </select>
                              <button onClick={() => this.removeItem(item.id)}>
                                Remove Item
                              </button>
                            </p>
                          </li>
                        )}
                      </Spring>
                    );
                  })}
              </ul>
            </div>
          </section>
          )
        </div>
      </div>
    );
  }
}
export default App;