text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  import firebase from "firebase";
  import base, { firebaseApp } from "../base";
  
  //Components
  import AddFishForm from "./AddFishForm";
  import EditFishForm from "./EditFishForm";
  import Login from "./login";
  
  export default class Inventory extends Component {
    static propTypes = {
      fishes: PropTypes.object,
      updateFish: PropTypes.func,
      deleteFish: PropTypes.func,
      loadSampleFishes: PropTypes.func
    };
  
    state = {
      uid: null,
      owner: null
    };
  
    componentDidMount() {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          this.authHandler({ user });
        }
      });
    }
  
    authHandler = async authData => {
      //look up the current store in the firebase database
      const store = await base.fetch(this.props.storeId, { context: this });
      //claim it if there's no owner
      if (!store.owner) {
        //save it for new owner
        await base.post(`${this.props.storeId}/owner`, {
          data: authData.user.uid
        });
      }
      //set state of inventory component to current user
      this.setState({
        uid: authData.user.uid,
        owner: store.owner || authData.user.uid
      });
    };
  
    authenticate = provider => {
      const authProvider = new firebase.auth[`${provider}AuthProvider`]();
      firebaseApp
        .auth()
        .signInWithPopup(authProvider)
        .then(this.authHandler);
    };
  
    logout = async () => {
      await firebase.auth().signOut();
      this.setState({ uid: null });
    };
  
    render() {
      const logout = <button onClick={this.logout}>Log out!</button>;
      //check if user is logged in
      if (!this.state.uid) {
        return <Login authenticate={this.authenticate} />;
      }
  
      //check if user is not the owner of the store
      if (this.state.uid !== this.state.owner) {
        return (
          <div>
            <p>Sorry, you're not the owner!</p>
            {logout}
          </div>
        );
      }
  
      //if the user is the owner, then render the Inventory
      return (
        <div className="inventory">
          <h2>Inventory</h2>
          {logout}
          {Object.keys(this.props.fishes).map(key => (
            <EditFishForm
              key={key}
              index={key}
              fish={this.props.fishes[key]}
              updateFish={this.props.updateFish}
              deleteFish={this.props.deleteFish}
            />
          ))}
          <AddFishForm addFish={this.props.addFish} />
          <button onClick={this.props.loadSampleFishes}>
            Load Sample Fishes
          </button>
        </div>
      );
    }
  }
  