Merge pull request #11 from taming-the-state-in-react/make-it-work-production

Production Version

Author: rwieruch

.prettierrc

@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "trailingComma": "all",
+ "singleQuote": true,
+ "printWidth": 70,
+}

package-lock.json

@@ -2,13 +2,13 @@
  "name": "gatsby-firebase-authentication",
  "description": "Gatsby Firebase Authentication",
  "version": "1.0.0",
- "author": "Robin Wieruch <wrobin@gmx.net>",
+ "author": "Robin Wieruch <hello@rwieruch.com>",
  "dependencies": {
- "firebase": "^5.0.4",
- "gatsby": "next",
- "gatsby-plugin-react-helmet": "next",
- "react": "^16.4.1",
- "react-dom": "^16.4.1",
+ "firebase": "^5.5.2",
+ "gatsby": "^2.0.12",
+ "gatsby-plugin-react-helmet": "^3.0.0",
+ "react": "^16.5.2",
+ "react-dom": "^16.5.2",
  "react-helmet": "^5.2.0"
  },
  "keywords": [
@@ -23,6 +23,6 @@
  "test": "echo \"No test specified\" && exit 0"
  },
  "devDependencies": {
- "prettier": "^1.13.3"
+ "prettier": "^1.14.3"
  }
 }

package.json

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const FirebaseContext = React.createContext(null);
+
+export const withFirebase = Component => props => (
+ <FirebaseContext.Consumer>
+ {firebase => <Component {...props} firebase={firebase} />}
+ </FirebaseContext.Consumer>
+);
+
+export default FirebaseContext;

src/components/App/index.css

@@ -0,0 +1,68 @@
+const prodConfig = {
+ apiKey: YOUR_API_KEY,
+ authDomain: YOUR_AUTH_DOMAIN,
+ databaseURL: YOUR_DATABASE_URL,
+ projectId: YOUR_PROJECT_ID,
+ storageBucket: '',
+ messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+};
+
+const devConfig = {
+ apiKey: YOUR_API_KEY,
+ authDomain: YOUR_AUTH_DOMAIN,
+ databaseURL: YOUR_DATABASE_URL,
+ projectId: YOUR_PROJECT_ID,
+ storageBucket: '',
+ messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+};
+
+const config =
+ process.env.NODE_ENV === 'production' ? prodConfig : devConfig;
+
+class Firebase {
+ constructor(app) {
+ app.initializeApp(config);
+
+ this.db = app.database();
+ this.auth = app.auth();
+ }
+
+ // *** Auth API ***
+
+ doCreateUserWithEmailAndPassword = (email, password) =>
+ this.auth.createUserWithEmailAndPassword(email, password);
+
+ doSignInWithEmailAndPassword = (email, password) =>
+ this.auth.signInWithEmailAndPassword(email, password);
+
+ doSignOut = () => this.auth.signOut();
+
+ doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
+
+ doPasswordUpdate = password =>
+ this.auth.currentUser.updatePassword(password);
+
+ // *** User API ***
+
+ doCreateUser = (id, username, email) =>
+ this.db.ref(`users/${id}`).set({
+ username,
+ email,
+ });
+
+ onceGetUsers = () => this.db.ref('users').once('value');
+}
+
+let firebase;
+
+function getFirebase(app, auth, database) {
+ if (firebase) {
+ return firebase;
+ }
+
+ firebase = new Firebase(app, auth, database);
+
+ return firebase;
+}
+
+export default getFirebase;

src/components/App/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
+import * as routes from '../../constants/routes';
 import AuthUserContext from '../Session/AuthUserContext';
 import SignOutButton from '../SignOut';
-import * as routes from '../../constants/routes';
 
 const Navigation = () => (
  <AuthUserContext.Consumer>
- {authUser => (authUser ? <NavigationAuth /> : <NavigationNonAuth />)}
+ {authUser =>
+ authUser ? <NavigationAuth /> : <NavigationNonAuth />
+ }
  </AuthUserContext.Consumer>
 );
 

src/components/Firebase/FirebaseContext.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 
-import { auth } from '../../firebase';
-
-const updateByPropertyName = (propertyName, value) => () => ({
- [propertyName]: value,
-});
+import { withFirebase } from '../Firebase/FirebaseContext';
 
 const INITIAL_STATE = {
  passwordOne: '',
@@ -22,13 +18,13 @@ class PasswordChangeForm extends Component {
  onSubmit = event => {
  const { passwordOne } = this.state;
 
- auth
+ this.props.firebase
  .doPasswordUpdate(passwordOne)
  .then(() => {
  this.setState(() => ({ ...INITIAL_STATE }));
  })
  .catch(error => {
- this.setState(updateByPropertyName('error', error));
+ this.setState({ error });
  });
 
  event.preventDefault();
@@ -37,26 +33,25 @@ class PasswordChangeForm extends Component {
  render() {
  const { passwordOne, passwordTwo, error } = this.state;
 
- const isInvalid = passwordOne !== passwordTwo || passwordOne === '';
+ const isInvalid =
+ passwordOne !== passwordTwo || passwordOne === '';
 
  return (
  <form onSubmit={this.onSubmit}>
  <input
+ name="passwordOne"
  value={passwordOne}
  onChange={event =>
- this.setState(
- updateByPropertyName('passwordOne', event.target.value)
- )
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="password"
  placeholder="New Password"
  />
  <input
+ name="passwordTwo"
  value={passwordTwo}
  onChange={event =>
- this.setState(
- updateByPropertyName('passwordTwo', event.target.value)
- )
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="password"
  placeholder="Confirm New Password"
@@ -71,4 +66,4 @@ class PasswordChangeForm extends Component {
  }
 }
 
-export default PasswordChangeForm;
+export default withFirebase(PasswordChangeForm);

src/components/Firebase/index.js

@@ -1,12 +1,8 @@
 import React, { Component } from 'react';
 import { Link } from 'gatsby';
 
-import { auth } from '../../firebase';
 import * as routes from '../../constants/routes';
-
-const updateByPropertyName = (propertyName, value) => () => ({
- [propertyName]: value,
-});
+import { withFirebase } from '../Firebase/FirebaseContext';
 
 const INITIAL_STATE = {
  email: '',
@@ -23,13 +19,13 @@ class PasswordForgetForm extends Component {
  onSubmit = event => {
  const { email } = this.state;
 
- auth
+ this.props.firebase
  .doPasswordReset(email)
  .then(() => {
  this.setState(() => ({ ...INITIAL_STATE }));
  })
  .catch(error => {
- this.setState(updateByPropertyName('error', error));
+ this.setState({ error });
  });
 
  event.preventDefault();
@@ -43,9 +39,10 @@ class PasswordForgetForm extends Component {
  return (
  <form onSubmit={this.onSubmit}>
  <input
+ name="email"
  value={this.state.email}
  onChange={event =>
- this.setState(updateByPropertyName('email', event.target.value))
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="text"
  placeholder="Email Address"
@@ -66,4 +63,6 @@ const PasswordForgetLink = () => (
  </p>
 );
 
-export { PasswordForgetForm, PasswordForgetLink };
+export { PasswordForgetLink };
+
+export default withFirebase(PasswordForgetForm);