Pull request

README.md

@@ -6,6 +6,10 @@
 
 This is a real-time Hacker News clone written using [React](http://facebook.github.io/react/), [RefluxJS](https://github.com/spoike/refluxjs), and a [Firebase](http://firebase.com) backend.
 
+## Firebase 3+ support
+
+Update the connection information in src/js/util/constants.js.  The settings are describe the [Firebase documentation](https://firebase.google.com/support/guides/firebase-web)
+
 ## Demo
 
 [![React-News](http://henleyedition.com/content/images/2015/02/Screen-Shot-2015-02-22-at-10-59-05-PM.png)](http://henleyedition.com/react-news/)

package.json

@@ -57,7 +57,7 @@
     "react-router": "^1.0.0-rc3",
     "reflux": "^0.3.0",
     "sass-loader": "^3.1.1",
-    "sinon": "^1.17.2",
+    "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.0",
     "svg-inline-loader": "^0.4.0",
@@ -74,5 +74,8 @@
     "lint": "./node_modules/.bin/eslint src/",
     "test": "./node_modules/.bin/karma start ./test/karma.conf.js --reporters mocha,coverage",
     "test:watch": "./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run --reporters mocha"
+  },
+  "dependencies": {
+    "firebase": "^4.1.3"
   }
 }

src/js/actions/Actions.js

@@ -1,13 +1,15 @@
 'use strict';
 
 import Reflux from 'reflux';
-import Firebase from 'firebase';
-import { firebaseUrl } from '../util/constants';
+import firebase from 'firebase';
+import { config } from '../util/constants';
+
 
 // used to create email hash for gravatar
 import md5 from 'md5';
 
-const baseRef = new Firebase(firebaseUrl);
+firebase.initializeApp(config);
+const baseRef = firebase.database().ref();
 const commentsRef = baseRef.child('comments');
 const postsRef = baseRef.child('posts');
 const usersRef = baseRef.child('users');
@@ -50,27 +52,43 @@ const Actions = Reflux.createActions([
 =============================== */
 
 Actions.login.listen((loginData) => {
-    baseRef.authWithPassword(loginData, (error) => (
-        error ? Actions.modalError(error.code) : Actions.hideModal()
-    ));
+    var auth = firebase.auth();
+    auth.signInWithEmailAndPassword(loginData.email, loginData.password).then((result) => {
+        // User signed in!
+        console.log(result);
+        Actions.hideModal();
+    }).catch(function(error) {
+        error ? Actions.modalError(error.code) : Actions.hideModal();
+    });
+
 });
 
 function createUser(username, loginData) {
     let profile = {
         username: username,
         md5hash: md5(loginData.email)
     };
+    var auth = firebase.auth();
+    auth.createUserWithEmailAndPassword(loginData.email, loginData.password).then(
+        (userData) => {
+            // user successfully created
+            // add user profile then log them in
+            usersRef.child(userData.uid).set(profile).then(
+              Actions.login(loginData)
+            ).catch( (error) => {
+                return Actions.modalError(error.code);
+            });
+        },
+        (error) => {
+            if (error) {
+                // email taken, other login errors
+                return Actions.modalError(error.code);
+            }
 
-    baseRef.createUser(loginData, (error, userData) => {
-        if (error) {
-            // email taken, other login errors
-            return Actions.modalError(error.code);
-        }
 
-        // user successfully created
-        // add user profile then log them in
-        usersRef.child(userData.uid).set(profile, err => err || Actions.login(loginData));
-    });
+
+        }
+    );
 }
 
 Actions.register.listen((username, loginData) => {
@@ -91,14 +109,15 @@ Actions.register.listen((username, loginData) => {
 =============================== */
 
 Actions.submitPost.listen(function(post) {
-    let newPostRef = postsRef.push(post, (error) => {
-        if (error) { return Actions.modalError(error); }
-
-        let postId = newPostRef.key();
+    postsRef.push(post).then((post) => {
+        var postId = post.key;
         // add commentId to user's profile
         usersRef
             .child(`${post.creatorUID}/submitted/${postId}`)
             .set(true, () => Actions.updateLatestPost(postId));
+    }
+    ).catch((error) => {
+        return Actions.modalError(error);
     });
 });
 
@@ -195,7 +214,7 @@ Actions.addComment.listen((comment) => {
         updateCommentCount(comment.postId, 1);
 
         // add commentId to user's profile
-        usersRef.child(`${comment.creatorUID}/submitted/${newCommentRef.key()}`).set(true);
+        usersRef.child(`${comment.creatorUID}/submitted/${newCommentRef.key}`).set(true);
     });
 });
 

src/js/components/PostInfo.jsx

@@ -19,7 +19,6 @@ const PostLink = React.createClass({
 
     render() {
         const { user, post } = this.props;
-
         let userUpvoted = user.upvoted || {};
         let creatorIsLoggedIn = user.uid === post.creatorUID;
 

src/js/stores/PostsStore.js

@@ -1,11 +1,10 @@
 'use strict';
 
 import Reflux from 'reflux';
-import Firebase from 'firebase';
 import Actions from '../actions/Actions';
-import { firebaseUrl } from '../util/constants';
+import firebase from 'firebase';
 
-let baseRef = new Firebase(firebaseUrl);
+let baseRef = firebase.database().ref();
 let postsRef = baseRef.child('posts');
 // let scrollRef = new Firebase.util.Scroll(baseRef, 'number');
 
@@ -59,10 +58,9 @@ const PostsStore = Reflux.createStore({
 
         // add posts to new array
         let newPosts = [];
-
         postDataObj.forEach(postData => {
             let post = postData.val();
-            post.id = postData.key();
+            post.id = postData.key;
             newPosts.unshift(post);
         });
 

src/js/stores/ProfileStore.js

@@ -2,11 +2,9 @@
 
 import Reflux from 'reflux';
 import Actions from '../actions/Actions';
-import { firebaseUrl } from '../util/constants';
+import firebase from 'firebase';
 
-import Firebase from 'firebase';
-
-const ref = new Firebase(firebaseUrl);
+let ref = firebase.database().ref();
 const postsRef = ref.child('posts');
 const commentsRef = ref.child('comments');
 
@@ -50,7 +48,7 @@ const ProfileStore = Reflux.createStore({
         // postDataObj: firebase object with a forEach property
         postDataObj.forEach(postData => {
             let post = postData.val();
-            post.id = postData.key();
+            post.id = postData.key;
             newPosts.unshift(post);
         });
 
@@ -65,7 +63,7 @@ const ProfileStore = Reflux.createStore({
         // commentDataObj: firebase object with a forEach property
         commentDataObj.forEach(commentData => {
             let comment = commentData.val();
-            comment.id = commentData.key();
+            comment.id = commentData.key;
             newComments.unshift(comment);
         });
 

src/js/stores/SingleStore.js

@@ -2,10 +2,9 @@
 
 import Reflux from 'reflux';
 import Actions from '../actions/Actions';
-import { firebaseUrl } from '../util/constants';
 
-import Firebase from 'firebase';
-const ref = new Firebase(firebaseUrl);
+import firebase from 'firebase';
+let ref = firebase.database().ref();
 const postsRef = ref.child('posts');
 const commentsRef = ref.child('comments');
 
@@ -36,12 +35,11 @@ const SingleStore = Reflux.createStore({
 
     updatePost(postDataObj) {
         let post = postDataObj.val();
-
         if (!post) {
             // post doesn't exist
             postData.post = null;
         } else {
-            post.id = postDataObj.key();
+            post.id = postDataObj.key;
             postData.post = post;
         }
 
@@ -53,7 +51,7 @@ const SingleStore = Reflux.createStore({
 
         commentDataObj.forEach(commentData => {
             let comment = commentData.val();
-            comment.id = commentData.key();
+            comment.id = commentData.key;
             newComments.unshift(comment);
         });
 

src/js/stores/UserStore.js

@@ -3,10 +3,9 @@
 import Reflux from 'reflux';
 import update from 'react-addons-update';
 import Actions from '../actions/Actions';
-import { firebaseUrl } from '../util/constants';
+import firebase from 'firebase';
 
-import Firebase from 'firebase';
-const baseRef = new Firebase(firebaseUrl);
+const baseRef = firebase.database().ref();
 const usersRef = baseRef.child('users');
 
 const defaultUser = {
@@ -27,20 +26,22 @@ const UserStore = Reflux.createStore({
 
     init() {
         // triggered by auth changes
-        baseRef.onAuth((authData) => {
-            if (!authData) {
-                // user is logged out
+        var auth = firebase.auth();
+
+        auth.onAuthStateChanged((user) => {
+            if (user) {
+                // User signed in!
+                this.loginCompleted(user.uid);
+            } else {
+                // User logged out
                 usersRef.off();
                 this.logoutCompleted();
-            } else {
-                // user is logged in
-                this.loginCompleted(authData.uid);
             }
         });
     },
 
     logout() {
-        baseRef.unauth();
+        firebase.auth().signOut();
     },
 
     logoutCompleted() {

src/js/util/constants.js

@@ -14,4 +14,11 @@ export const errorMessages = {
     generic: 'Something went wrong.'
 };
 
-export const firebaseUrl = 'https://resplendent-fire-4810.firebaseio.com/';
+export const config = {
+    apiKey: 'API_Key',
+    authDomain: 'PROJECT_ID.firebaseapp.com',
+    databaseURL: 'https://PROJECT_ID.firebaseio.com',
+    projectId: 'PROJECT_ID',
+    storageBucket: 'PROJECT_ID.appspot.com',
+    messagingSenderId: 'MESSAGE_SENDER_ID'
+};