fix for context error

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 (
+      <Container>
+        <Provider store={store}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    );
+  }
+}
+
+export default withRedux(initStore)(EnhancedApp);

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 }) => (
   <AppWithAuthorization>
     <h1>Account: {authUser.email}</h1>
     <PasswordForgetForm />
     <PasswordChangeForm />
   </AppWithAuthorization>
+);
 
-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);

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 {
         <h1>Home</h1>
         <p>The Home Page is accessible by every signed in user.</p>
 
-        { !!users.length && <UserList users={users} /> }
+        {!!users.length && <UserList users={users} />}
       </AppWithAuthorization>
     );
   }
 }
 
-const UserList = ({ users }) =>
+const UserList = ({ users }) => (
   <div>
     <h2>List of App User IDs (Saved on Sign Up in Firebase Database)</h2>
-    {users.map(user =>
+    {users.map(user => (
       <div key={user.index}>{user.index}</div>
-    )}
+    ))}
   </div>
+);
 
-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);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomePage);

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 = () => (
   <AppWithAuthentication>
     <h1>Landing</h1>
-    <p>The Landing Page is open to everyone, even though the user isn't signed in.</p>
+    <p>
+      The Landing Page is open to everyone, even though the user isn't signed
+      in.
+    </p>
   </AppWithAuthentication>
-
-export default withRedux(initStore)(LandingPage);
+);
+export default LandingPage;

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 = () => (
   <AppWithAuthentication>
     <h1>PasswordForget</h1>
     <PasswordForgetForm />
   </AppWithAuthentication>
+);
 
 const updateByPropertyName = (propertyName, value) => () => ({
-  [propertyName]: value,
+  [propertyName]: value
 });
 
 const INITIAL_STATE = {
-  email: '',
-  error: null,
+  email: "",
+  error: null
 };
 
 class PasswordForgetForm extends Component {
@@ -29,54 +28,54 @@ 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 (
       <form onSubmit={this.onSubmit}>
         <input
           value={this.state.email}
-          onChange={event => this.setState(updateByPropertyName('email', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("email", event.target.value))
+          }
           type="text"
           placeholder="Email Address"
         />
         <button disabled={isInvalid} type="submit">
           Reset My Password
         </button>
 
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </form>
     );
   }
 }
 
-const PasswordForgetLink = () =>
+const PasswordForgetLink = () => (
   <p>
-    <Link href={routes.PASSWORD_FORGET}><a>Forgot Password?</a></Link>
+    <Link href={routes.PASSWORD_FORGET}>
+      <a>Forgot Password?</a>
+    </Link>
   </p>
+);
 
-export default withRedux(initStore)(PasswordForgetPage);
+export default PasswordForgetPage;
 
-export {
-  PasswordForgetForm,
-  PasswordForgetLink,
-};
+export { PasswordForgetForm, PasswordForgetLink };

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 = () => (
   <AppWithAuthentication>
     <h1>SignIn</h1>
     <SignInForm />
     <PasswordForgetLink />
     <SignUpLink />
   </AppWithAuthentication>
+);
 
 const updateByPropertyName = (propertyName, value) => () => ({
-  [propertyName]: value,
+  [propertyName]: value
 });
 
 const INITIAL_STATE = {
-  email: '',
-  password: '',
-  error: null,
+  email: "",
+  password: "",
+  error: null
 };
 
 class SignInForm extends Component {
@@ -34,61 +33,55 @@ 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 (
       <form onSubmit={this.onSubmit}>
         <input
           value={email}
-          onChange={event => this.setState(updateByPropertyName('email', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("email", event.target.value))
+          }
           type="text"
           placeholder="Email Address"
         />
         <input
           value={password}
-          onChange={event => this.setState(updateByPropertyName('password', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("password", event.target.value))
+          }
           type="password"
           placeholder="Password"
         />
         <button disabled={isInvalid} type="submit">
           Sign In
         </button>
 
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </form>
     );
   }
 }
 
-export default withRedux(initStore)(SignInPage);
+export default SignInPage;
 
-export {
-  SignInForm,
-};
+export { SignInForm };