diff --git a/README.md b/README.md index b573d97..a4e9b56 100644 --- a/README.md +++ b/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/) diff --git a/package.json b/package.json index 9c843d6..1fc0966 100644 --- a/package.json +++ b/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" } } diff --git a/src/js/actions/Actions.js b/src/js/actions/Actions.js index aba5a5e..d9e0ba4 100644 --- a/src/js/actions/Actions.js +++ b/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,9 +52,15 @@ 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) { @@ -60,17 +68,27 @@ function createUser(username, loginData) { 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); }); }); diff --git a/src/js/components/PostInfo.jsx b/src/js/components/PostInfo.jsx index a02e5e0..090cfde 100644 --- a/src/js/components/PostInfo.jsx +++ b/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; diff --git a/src/js/stores/PostsStore.js b/src/js/stores/PostsStore.js index b79c82e..72edd21 100644 --- a/src/js/stores/PostsStore.js +++ b/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); }); diff --git a/src/js/stores/ProfileStore.js b/src/js/stores/ProfileStore.js index 42ce258..0e6079a 100644 --- a/src/js/stores/ProfileStore.js +++ b/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); }); diff --git a/src/js/stores/SingleStore.js b/src/js/stores/SingleStore.js index 5677d49..808c133 100644 --- a/src/js/stores/SingleStore.js +++ b/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); }); diff --git a/src/js/stores/UserStore.js b/src/js/stores/UserStore.js index 83b8827..87ef763 100644 --- a/src/js/stores/UserStore.js +++ b/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() { diff --git a/src/js/util/constants.js b/src/js/util/constants.js index 31acf8b..9b52abe 100644 --- a/src/js/util/constants.js +++ b/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' +};