From 30c1870763e282135b3b67cae424472442e1c1da Mon Sep 17 00:00:00 2001 From: williams Date: Tue, 11 Dec 2018 13:02:28 +0100 Subject: [PATCH] fix for context error --- pages/_app.js | 29 +++++++++++ pages/account.js | 25 ++++----- pages/home.js | 38 +++++++------- pages/index.js | 17 +++--- pages/pw-forget.js | 57 ++++++++++---------- pages/signin.js | 67 +++++++++++------------- pages/signup.js | 101 +++++++++++++++++------------------- src/components/App/index.js | 56 +++++++++++--------- src/firebase/firebase.js | 17 +++--- 9 files changed, 211 insertions(+), 196 deletions(-) create mode 100644 pages/_app.js diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..7b0c9fa --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,29 @@ +import React from "react"; +import App, { Container } from "next/app"; +import { Provider } from "react-redux"; +import withRedux from "next-redux-wrapper"; + +import initStore from "../src/store"; + +class EnhancedApp extends App { + static async getInitialProps({ Component, ctx }) { + return { + pageProps: Component.getInitialProps + ? await Component.getInitialProps(ctx) + : {} + }; + } + + render() { + const { Component, pageProps, store } = this.props; + return ( + + + + + + ); + } +} + +export default withRedux(initStore)(EnhancedApp); diff --git a/pages/account.js b/pages/account.js index c4f502c..079d28c 100644 --- a/pages/account.js +++ b/pages/account.js @@ -1,25 +1,20 @@ -import React from 'react'; -import withRedux from 'next-redux-wrapper'; -import { connect } from 'react-redux'; -import { compose } from 'recompose'; +import React from "react"; +import { connect } from "react-redux"; -import initStore from '../src/store'; -import { PasswordForgetForm } from './pw-forget'; -import { AppWithAuthorization } from '../src/components/App'; -import PasswordChangeForm from '../src/components/PasswordChange'; +import { PasswordForgetForm } from "./pw-forget"; +import { AppWithAuthorization } from "../src/components/App"; +import PasswordChangeForm from "../src/components/PasswordChange"; -const AccountPage = ({ authUser }) => +const AccountPage = ({ authUser }) => (

Account: {authUser.email}

 +); -const mapStateToProps = (state) => ({ - authUser: state.sessionState.authUser, +const mapStateToProps = state => ({ + authUser: state.sessionState.authUser }); -export default compose( - withRedux(initStore), - connect(mapStateToProps) -)(AccountPage); +export default connect(mapStateToProps)(AccountPage); diff --git a/pages/home.js b/pages/home.js index 7be6577..f21ba6f 100644 --- a/pages/home.js +++ b/pages/home.js @@ -1,13 +1,10 @@ -import React, { Component } from 'react'; -import withRedux from 'next-redux-wrapper'; -import { connect } from 'react-redux'; -import { compose } from 'recompose'; +import React, { Component } from "react"; +import { connect } from "react-redux"; -import initStore from '../src/store'; -import { AppWithAuthorization } from '../src/components/App'; -import { db } from '../src/firebase'; +import { AppWithAuthorization } from "../src/components/App"; +import { db } from "../src/firebase"; -const fromObjectToList = (object) => +const fromObjectToList = object => object ? Object.keys(object).map(key => ({ ...object[key], index: key })) : []; @@ -29,29 +26,30 @@ class HomePage extends Component {

Home

The Home Page is accessible by every signed in user.

- { !!users.length && } + {!!users.length && } ); } } -const UserList = ({ users }) => +const UserList = ({ users }) => (

List of App User IDs (Saved on Sign Up in Firebase Database)

- {users.map(user => + {users.map(user => (
{user.index}
- )} + ))}
+); -const mapStateToProps = (state) => ({ - users: state.userState.users, +const mapStateToProps = state => ({ + users: state.userState.users }); -const mapDispatchToProps = (dispatch) => ({ - onSetUsers: (users) => dispatch({ type: 'USERS_SET', users }), +const mapDispatchToProps = dispatch => ({ + onSetUsers: users => dispatch({ type: "USERS_SET", users }) }); -export default compose( - withRedux(initStore), - connect(mapStateToProps, mapDispatchToProps) -)(HomePage); \ No newline at end of file +export default connect( + mapStateToProps, + mapDispatchToProps +)(HomePage); diff --git a/pages/index.js b/pages/index.js index 86fbd5d..7c4b7aa 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,13 +1,14 @@ -import React from 'react'; -import withRedux from 'next-redux-wrapper'; +import React from "react"; -import initStore from '../src/store'; -import { AppWithAuthentication } from '../src/components/App'; +import { AppWithAuthentication } from "../src/components/App"; -const LandingPage = () => +const LandingPage = () => (

Landing

-

The Landing Page is open to everyone, even though the user isn't signed in.

+

+ The Landing Page is open to everyone, even though the user isn't signed + in. +

- -export default withRedux(initStore)(LandingPage); +); +export default LandingPage; diff --git a/pages/pw-forget.js b/pages/pw-forget.js index b4202d9..b3fa269 100644 --- a/pages/pw-forget.js +++ b/pages/pw-forget.js @@ -1,25 +1,24 @@ -import React, { Component } from 'react'; -import Link from 'next/link'; -import withRedux from 'next-redux-wrapper'; +import React, { Component } from "react"; +import Link from "next/link"; -import initStore from '../src/store'; -import { AppWithAuthentication } from '../src/components/App'; -import * as routes from '../src/constants/routes'; -import { auth } from '../src/firebase'; +import { AppWithAuthentication } from "../src/components/App"; +import * as routes from "../src/constants/routes"; +import { auth } from "../src/firebase"; -const PasswordForgetPage = () => +const PasswordForgetPage = () => (

PasswordForget

 +); const updateByPropertyName = (propertyName, value) => () => ({ - [propertyName]: value, + [propertyName]: value }); const INITIAL_STATE = { - email: '', - error: null, + email: "", + error: null }; class PasswordForgetForm extends Component { @@ -29,33 +28,33 @@ class PasswordForgetForm extends Component { this.state = { ...INITIAL_STATE }; } - onSubmit = (event) => { + onSubmit = event => { const { email } = this.state; - auth.doPasswordReset(email) + auth + .doPasswordReset(email) .then(() => { this.setState(() => ({ ...INITIAL_STATE })); }) .catch(error => { - this.setState(updateByPropertyName('error', error)); + this.setState(updateByPropertyName("error", error)); }); event.preventDefault(); - } + }; render() { - const { - email, - error, - } = this.state; + const { email, error } = this.state; - const isInvalid = email === ''; + const isInvalid = email === ""; return (
this.setState(updateByPropertyName('email', event.target.value))} + onChange={event => + this.setState(updateByPropertyName("email", event.target.value)) + } type="text" placeholder="Email Address" /> @@ -63,20 +62,20 @@ class PasswordForgetForm extends Component { Reset My Password - { error &&

{error.message}

} + {error &&

{error.message}

}
); } } -const PasswordForgetLink = () => +const PasswordForgetLink = () => (

- Forgot Password? + + Forgot Password? +

+); -export default withRedux(initStore)(PasswordForgetPage); +export default PasswordForgetPage; -export { - PasswordForgetForm, - PasswordForgetLink, -}; +export { PasswordForgetForm, PasswordForgetLink }; diff --git a/pages/signin.js b/pages/signin.js index 6c7f287..4de035c 100644 --- a/pages/signin.js +++ b/pages/signin.js @@ -1,30 +1,29 @@ -import React, { Component } from 'react'; -import Router from 'next/router'; -import withRedux from 'next-redux-wrapper'; +import React, { Component } from "react"; +import Router from "next/router"; -import initStore from '../src/store'; -import { SignUpLink } from './signup'; -import { PasswordForgetLink } from './pw-forget'; -import { AppWithAuthentication } from '../src/components/App'; -import { auth } from '../src/firebase'; -import * as routes from '../src/constants/routes'; +import { SignUpLink } from "./signup"; +import { PasswordForgetLink } from "./pw-forget"; +import { AppWithAuthentication } from "../src/components/App"; +import { auth } from "../src/firebase"; +import * as routes from "../src/constants/routes"; -const SignInPage = () => +const SignInPage = () => (

SignIn

 +); const updateByPropertyName = (propertyName, value) => () => ({ - [propertyName]: value, + [propertyName]: value }); const INITIAL_STATE = { - email: '', - password: '', - error: null, + email: "", + password: "", + error: null }; class SignInForm extends Component { @@ -34,46 +33,42 @@ class SignInForm extends Component { this.state = { ...INITIAL_STATE }; } - onSubmit = (event) => { - const { - email, - password, - } = this.state; + onSubmit = event => { + const { email, password } = this.state; - auth.doSignInWithEmailAndPassword(email, password) + auth + .doSignInWithEmailAndPassword(email, password) .then(() => { this.setState(() => ({ ...INITIAL_STATE })); Router.push(routes.HOME); }) .catch(error => { - this.setState(updateByPropertyName('error', error)); + this.setState(updateByPropertyName("error", error)); }); event.preventDefault(); - } + }; render() { - const { - email, - password, - error, - } = this.state; + const { email, password, error } = this.state; - const isInvalid = - password === '' || - email === ''; + const isInvalid = password === "" || email === ""; return (
this.setState(updateByPropertyName('email', event.target.value))} + onChange={event => + this.setState(updateByPropertyName("email", event.target.value)) + } type="text" placeholder="Email Address" /> this.setState(updateByPropertyName('password', event.target.value))} + onChange={event => + this.setState(updateByPropertyName("password", event.target.value)) + } type="password" placeholder="Password" /> @@ -81,14 +76,12 @@ class SignInForm extends Component { Sign In - { error &&

{error.message}

} + {error &&

{error.message}

}
); } } -export default withRedux(initStore)(SignInPage); +export default SignInPage; -export { - SignInForm, -}; +export { SignInForm }; diff --git a/pages/signup.js b/pages/signup.js index 3495f15..5f9642e 100644 --- a/pages/signup.js +++ b/pages/signup.js @@ -1,29 +1,28 @@ -import React, { Component } from 'react'; -import Link from 'next/link'; -import Router from 'next/router'; -import withRedux from 'next-redux-wrapper'; +import React, { Component } from "react"; +import Link from "next/link"; +import Router from "next/router"; -import initStore from '../src/store'; -import { AppWithAuthentication } from '../src/components/App'; -import { auth, db } from '../src/firebase'; -import * as routes from '../src/constants/routes'; +import { AppWithAuthentication } from "../src/components/App"; +import { auth, db } from "../src/firebase"; +import * as routes from "../src/constants/routes"; -const SignUpPage = () => +const SignUpPage = () => (

SignUp

 +); const updateByPropertyName = (propertyName, value) => () => ({ - [propertyName]: value, + [propertyName]: value }); const INITIAL_STATE = { - username: '', - email: '', - passwordOne: '', - passwordTwo: '', - error: null, + username: "", + email: "", + passwordOne: "", + passwordTwo: "", + error: null }; class SignUpForm extends Component { @@ -33,16 +32,12 @@ class SignUpForm extends Component { this.state = { ...INITIAL_STATE }; } - onSubmit = (event) => { - const { - username, - email, - passwordOne, - } = this.state; + onSubmit = event => { + const { username, email, passwordOne } = this.state; - auth.doCreateUserWithEmailAndPassword(email, passwordOne) + auth + .doCreateUserWithEmailAndPassword(email, passwordOne) .then(authUser => { - // Create a user in your own accessible Firebase Database too db.doCreateUser(authUser.uid, username, email) .then(() => { @@ -50,54 +45,57 @@ class SignUpForm extends Component { Router.push(routes.HOME); }) .catch(error => { - this.setState(updateByPropertyName('error', error)); + this.setState(updateByPropertyName("error", error)); }); - }) .catch(error => { - this.setState(updateByPropertyName('error', error)); + this.setState(updateByPropertyName("error", error)); }); event.preventDefault(); - } + }; render() { - const { - username, - email, - passwordOne, - passwordTwo, - error, - } = this.state; + const { username, email, passwordOne, passwordTwo, error } = this.state; const isInvalid = - passwordOne !== passwordTwo || - passwordOne === '' || - username === ''; + passwordOne !== passwordTwo || passwordOne === "" || username === ""; return (
this.setState(updateByPropertyName('username', event.target.value))} + onChange={event => + this.setState(updateByPropertyName("username", event.target.value)) + } type="text" placeholder="Full Name" /> this.setState(updateByPropertyName('email', event.target.value))} + onChange={event => + this.setState(updateByPropertyName("email", event.target.value)) + } type="text" placeholder="Email Address" /> this.setState(updateByPropertyName('passwordOne', event.target.value))} + onChange={event => + this.setState( + updateByPropertyName("passwordOne", event.target.value) + ) + } type="password" placeholder="Password" /> this.setState(updateByPropertyName('passwordTwo', event.target.value))} + onChange={event => + this.setState( + updateByPropertyName("passwordTwo", event.target.value) + ) + } type="password" placeholder="Confirm Password" /> @@ -105,22 +103,19 @@ class SignUpForm extends Component { Sign Up - { error &&

{error.message}

} + {error &&

{error.message}

}
); } } -const SignUpLink = () => +const SignUpLink = () => (

- Don't have an account? - {' '} - Sign Up + Don't have an account?{" "} + + Sign Up +

- -export default withRedux(initStore)(SignUpPage); - -export { - SignUpForm, - SignUpLink, -}; \ No newline at end of file +); +export default SignUpPage; +export { SignUpForm, SignUpLink }; diff --git a/src/components/App/index.js b/src/components/App/index.js index b3e0762..4f4ff6f 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -1,41 +1,49 @@ -import React from 'react'; -import { compose } from 'recompose'; +import React from "react"; +import { compose } from "recompose"; -import Navigation from '../Navigation'; -import withAuthentication from '../Session/withAuthentication'; -import withAuthorization from '../Session/withAuthorization'; -import * as routes from '../../constants/routes'; +import Navigation from "../Navigation"; +import withAuthentication from "../Session/withAuthentication"; +import withAuthorization from "../Session/withAuthorization"; -const App = ({ children }) => +const App = ({ children }) => (
- -
- +
{children} - -
- - Found in Taming the State in React | Star the Repository | Receive a Developer's Newsletter - +
+ + Found in{" "} + + Taming the State in React + + {" "} + |{" "} + + Star the{" "} + + Repository + + {" "} + |{" "} + + Receive a{" "} + + Developer's Newsletter + +
- +); const AppWithAuthentication = compose( withAuthentication, - withAuthorization(false), + withAuthorization(false) )(App); - const AppWithAuthorization = compose( withAuthentication, - withAuthorization(true), + withAuthorization(true) )(App); - -export { - AppWithAuthentication, - AppWithAuthorization, -}; +export { AppWithAuthentication, AppWithAuthorization }; diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js index 859b758..283ec4c 100644 --- a/src/firebase/firebase.js +++ b/src/firebase/firebase.js @@ -1,4 +1,6 @@ -import * as firebase from 'firebase'; +import firebase from "firebase/app"; +import "firebase/auth"; +import "firebase/database"; const prodConfig = { apiKey: YOUR_API_KEY, @@ -6,7 +8,7 @@ const prodConfig = { databaseURL: YOUR_DATABASE_URL, projectId: YOUR_PROJECT_ID, storageBucket: '', - messagingSenderId: YOUR_MESSAGING_SENDER_ID, + messagingSenderId: YOUR_MESSAGING_SENDER_ID }; const devConfig = { @@ -15,12 +17,10 @@ const devConfig = { databaseURL: YOUR_DATABASE_URL, projectId: YOUR_PROJECT_ID, storageBucket: '', - messagingSenderId: YOUR_MESSAGING_SENDER_ID, + messagingSenderId: YOUR_MESSAGING_SENDER_ID }; -const config = process.env.NODE_ENV === 'production' - ? prodConfig - : devConfig; +const config = process.env.NODE_ENV === "production" ? prodConfig : devConfig; if (!firebase.apps.length) { firebase.initializeApp(config); @@ -29,7 +29,4 @@ if (!firebase.apps.length) { const db = firebase.database(); const auth = firebase.auth(); -export { - db, - auth, -}; +export { db, auth };