From a102e0c355832d2c1d3fbb87595c4ea7e03b2a3e Mon Sep 17 00:00:00 2001 From: Baldwin Louie Date: Sun, 25 Jun 2017 19:17:31 -0700 Subject: [PATCH 1/3] updating compatibility to firebase3+ --- package.json | 5 ++- src/js/actions/Actions.js | 61 +++++++++++++++++++++++----------- src/js/components/PostInfo.jsx | 1 - src/js/stores/PostsStore.js | 11 +++--- src/js/stores/ProfileStore.js | 11 +++--- src/js/stores/SingleStore.js | 12 +++---- src/js/stores/UserStore.js | 26 +++++++++------ src/js/util/constants.js | 10 +++++- 8 files changed, 88 insertions(+), 49 deletions(-) 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..d9b8800 100644 --- a/src/js/actions/Actions.js +++ b/src/js/actions/Actions.js @@ -1,13 +1,17 @@ '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); +//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 +54,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 +70,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 +111,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 +216,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..e665895 100644 --- a/src/js/stores/PostsStore.js +++ b/src/js/stores/PostsStore.js @@ -1,11 +1,13 @@ 'use strict'; import Reflux from 'reflux'; -import Firebase from 'firebase'; +//import Firebase from 'firebase'; import Actions from '../actions/Actions'; -import { firebaseUrl } from '../util/constants'; +//import { firebaseUrl } from '../util/constants'; -let baseRef = new Firebase(firebaseUrl); +import firebase from 'firebase'; + +let baseRef = firebase.database().ref(); let postsRef = baseRef.child('posts'); // let scrollRef = new Firebase.util.Scroll(baseRef, 'number'); @@ -59,10 +61,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..01b4ac0 100644 --- a/src/js/stores/ProfileStore.js +++ b/src/js/stores/ProfileStore.js @@ -2,11 +2,12 @@ import Reflux from 'reflux'; import Actions from '../actions/Actions'; -import { firebaseUrl } from '../util/constants'; +//import { firebaseUrl } from '../util/constants'; -import Firebase from 'firebase'; +//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 +51,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 +66,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..2e7fdec 100644 --- a/src/js/stores/SingleStore.js +++ b/src/js/stores/SingleStore.js @@ -2,10 +2,11 @@ import Reflux from 'reflux'; import Actions from '../actions/Actions'; -import { firebaseUrl } from '../util/constants'; +//import { firebaseUrl } from '../util/constants'; -import Firebase from 'firebase'; -const ref = new Firebase(firebaseUrl); +import firebase from 'firebase'; +//const ref = new Firebase(firebaseUrl); +let ref = firebase.database().ref(); const postsRef = ref.child('posts'); const commentsRef = ref.child('comments'); @@ -36,12 +37,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 +53,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..2ee05d5 100644 --- a/src/js/stores/UserStore.js +++ b/src/js/stores/UserStore.js @@ -3,10 +3,14 @@ import Reflux from 'reflux'; import update from 'react-addons-update'; import Actions from '../actions/Actions'; -import { firebaseUrl } from '../util/constants'; +//import { config } from '../util/constants'; -import Firebase from 'firebase'; -const baseRef = new Firebase(firebaseUrl); +import firebase from 'firebase'; + + +//firebase.initializeApp(config); +const baseRef = firebase.database().ref(); +////const baseRef = new Firebase(firebaseUrl); const usersRef = baseRef.child('users'); const defaultUser = { @@ -27,20 +31,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..30b39b4 100644 --- a/src/js/util/constants.js +++ b/src/js/util/constants.js @@ -14,4 +14,12 @@ export const errorMessages = { generic: 'Something went wrong.' }; -export const firebaseUrl = 'https://resplendent-fire-4810.firebaseio.com/'; +//export const firebaseUrl = 'https://resplendent-fire-4810.firebaseio.com/'; +export const config = { + apiKey: 'AIzaSyACHpWBJxnEH8XAw9ykhWVi7ARX53NcCo8', + authDomain: 'reactnews-2b7f9.firebaseapp.com', + databaseURL: 'https://reactnews-2b7f9.firebaseio.com', + projectId: 'reactnews-2b7f9', + storageBucket: 'reactnews-2b7f9.appspot.com', + messagingSenderId: '481538472689' +}; From 88259d2e153664125fa9f772cc021272a0889c7a Mon Sep 17 00:00:00 2001 From: Baldwin Louie Date: Mon, 26 Jun 2017 08:56:25 -0700 Subject: [PATCH 2/3] clean up --- src/js/actions/Actions.js | 2 -- src/js/stores/PostsStore.js | 3 --- src/js/stores/ProfileStore.js | 3 --- src/js/stores/SingleStore.js | 2 -- src/js/stores/UserStore.js | 5 ----- 5 files changed, 15 deletions(-) diff --git a/src/js/actions/Actions.js b/src/js/actions/Actions.js index d9b8800..d9e0ba4 100644 --- a/src/js/actions/Actions.js +++ b/src/js/actions/Actions.js @@ -8,8 +8,6 @@ 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'); diff --git a/src/js/stores/PostsStore.js b/src/js/stores/PostsStore.js index e665895..72edd21 100644 --- a/src/js/stores/PostsStore.js +++ b/src/js/stores/PostsStore.js @@ -1,10 +1,7 @@ '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 = firebase.database().ref(); diff --git a/src/js/stores/ProfileStore.js b/src/js/stores/ProfileStore.js index 01b4ac0..0e6079a 100644 --- a/src/js/stores/ProfileStore.js +++ b/src/js/stores/ProfileStore.js @@ -2,9 +2,6 @@ import Reflux from 'reflux'; import Actions from '../actions/Actions'; -//import { firebaseUrl } from '../util/constants'; - -//import Firebase from 'firebase'; import firebase from 'firebase'; let ref = firebase.database().ref(); diff --git a/src/js/stores/SingleStore.js b/src/js/stores/SingleStore.js index 2e7fdec..808c133 100644 --- a/src/js/stores/SingleStore.js +++ b/src/js/stores/SingleStore.js @@ -2,10 +2,8 @@ import Reflux from 'reflux'; import Actions from '../actions/Actions'; -//import { firebaseUrl } from '../util/constants'; import firebase from 'firebase'; -//const ref = new Firebase(firebaseUrl); let ref = firebase.database().ref(); const postsRef = ref.child('posts'); const commentsRef = ref.child('comments'); diff --git a/src/js/stores/UserStore.js b/src/js/stores/UserStore.js index 2ee05d5..87ef763 100644 --- a/src/js/stores/UserStore.js +++ b/src/js/stores/UserStore.js @@ -3,14 +3,9 @@ import Reflux from 'reflux'; import update from 'react-addons-update'; import Actions from '../actions/Actions'; -//import { config } from '../util/constants'; - import firebase from 'firebase'; - -//firebase.initializeApp(config); const baseRef = firebase.database().ref(); -////const baseRef = new Firebase(firebaseUrl); const usersRef = baseRef.child('users'); const defaultUser = { From 3193435eba8e6b74c6dc9114f9de7f3aae10adc2 Mon Sep 17 00:00:00 2001 From: Baldwin Louie Date: Mon, 26 Jun 2017 09:19:34 -0700 Subject: [PATCH 3/3] updating for Pull request --- README.md | 4 ++++ src/js/util/constants.js | 13 ++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) 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/src/js/util/constants.js b/src/js/util/constants.js index 30b39b4..9b52abe 100644 --- a/src/js/util/constants.js +++ b/src/js/util/constants.js @@ -14,12 +14,11 @@ export const errorMessages = { generic: 'Something went wrong.' }; -//export const firebaseUrl = 'https://resplendent-fire-4810.firebaseio.com/'; export const config = { - apiKey: 'AIzaSyACHpWBJxnEH8XAw9ykhWVi7ARX53NcCo8', - authDomain: 'reactnews-2b7f9.firebaseapp.com', - databaseURL: 'https://reactnews-2b7f9.firebaseio.com', - projectId: 'reactnews-2b7f9', - storageBucket: 'reactnews-2b7f9.appspot.com', - messagingSenderId: '481538472689' + 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' };