4

I've gotten the authentication portion of my app to work with Google, but I'm having trouble getting a snapshot of the database data to work with after that.

I'd like to log in, gather user information, and if there is no owner of the data then set the current user as the owner.

Here is the authentication snippet

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

And the full component

import React from 'react';
import AddFishForm from './AddFishForm';
import PropTypes from 'prop-types';
import base, { auth, provider } from '../base';
import * as firebase from 'firebase';

export default class Inventory extends React.Component {
  constructor() {
    super();
    this.renderInventory = this.renderInventory.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.renderLogin = this.renderLogin.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.state = {
      user: null,
      owner: null
    }
  }

  handleChange(e, key) {
    const fish = this.props.fishes[key];
    const updatedFish = {
      ...fish,
      [e.target.name]: e.target.value
     }
     this.props.updateFish(key, updatedFish);
  }

  login() {
    auth.signInWithPopup(provider)
      .then((result) => {
        const user = result.user;
        this.setState({
          user
        });
    });
    const storeRef = base.database().ref(this.props.storeId);
    storeRef.once("value")
      .then((snapshot) => {
        const data = snapshot.val() || {};
        if(!data.owner) {
          storeRef.set({
            owner: this.user
          });
        }
    });
  }

  logout() {

  }

  renderLogin() {
    return (
      <nav className="login">
        <h2>Inventory</h2>
        <p>Sign in to manage your store's inventory</p>
        <button className="facebook" onClick={() => this.login()}>
          Log in with Google</button>
      </nav>
    )
  }

    renderInventory(key) {
      const fish = this.props.fishes[key];
        return(
            <div className="fish-edit" key={key}>
                <input type="text" name="name" value={fish.name} placeholder="Fish Name"
                  onChange={(e) => this.handleChange(e, key)} />
                <input type="text" name="price" value={fish.price} placeholder="Fish Price"
                  onChange={(e) => this.handleChange(e, key)} />
                <select type="text" name="status" value={fish.status} placeholder="Fish Status"
                  onChange={(e) => this.handleChange(e, key)}>
                  <option value="available">Fresh!</option>
                  <option value="unaivilable">Sold Out!</option>
                </select>
                <textarea type="text" name="desc" value={fish.desc} placeholder="Fish Desc"
                  onChange={(e) => this.handleChange(e, key)}></textarea>
                <input type="text" name="image" value={fish.image} placeholder="Fish Image"
                  onChange={(e) => this.handleChange(e, key)}/>
                <button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
            </div>
        );
    }

    render() {
      const logout = <button>Log out!</button>

      if(!this.state.uid) {
        return <div>{this.renderLogin()}</div>
      }
      if(this.state.uid !== this.state.owner) {
        return(
          <div>
            <p>Sorry, you are not the owner of this store!</p>
            {logout}
          </div>
        )
      }
        return(
            <div>
                <h2>Inventory</h2>
                {logout}
                {Object.keys(this.props.fishes).map(this.renderInventory)}
                <AddFishForm addFish={this.props.addFish} />
                <button onClick={this.props.loadSamples}>Load Sample Fishes</button>
            </div>

        )
    }
}

Inventory.propTypes = {
updateFish: PropTypes.func.isRequired,
fishes: PropTypes.object.isRequired,
removeFish: PropTypes.func.isRequired,
addFish: PropTypes.func.isRequired,
loadSamples: PropTypes.func.isRequired,
storeId: PropTypes.string.isRequired
}

Also firebase object as base if needed

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export default base;

2 Answers 2

3

your using Rebase instance not firebase instance , to fix your problem export firebase instance from you initialization code

import Rebase from 're-base';
import * as firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: "AIzaSyC1UGLssKKLkKvYRp02zYVpM1-D88czp7I",
  authDomain: "catch-of-the-day-ethan-fie.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-ethan-fie.firebaseio.com",
  projectId: "catch-of-the-day-ethan-fie",
  storageBucket: "catch-of-the-day-ethan-fie.appspot.com",
});

const base = Rebase.createClass(app.database());

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
export const firebase = app;    //   <------ export firebase
export default base;

and in your component import firebase

import base, { auth, provider , firebase } from '../base';

and now use firebase instead of base

const storeRef = firebase.database().ref(this.props.storeId);
storeRef.once("value")
  .then((snapshot) => {
    const data = snapshot.val() || {};
    console.log(data);
    if(!data.owner) {
      storeRef.set({
        owner: this.user
      });
    }
});
Sign up to request clarification or add additional context in comments.

2 Comments

I'm glad you were online today as well! Base,firebase auth is all quite confusing to me. That did the trick, though.
happy to help you :)
0

For me in recent update I solved it using

var firebase = require('firebase/app');
require('firebase/database');

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.