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;