09-Session Handling with Higher-Order Components

Author: rwieruch

src/components/App/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import Navigation from '../Navigation';
@@ -11,62 +11,28 @@ import AccountPage from '../Account';
 import AdminPage from '../Admin';
 
 import * as ROUTES from '../../constants/routes';
-import { withFirebase } from '../Firebase';
-
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      authUser: null,
-    };
-  }
-
-  componentDidMount() {
-    this.listener = this.props.firebase.auth.onAuthStateChanged(
-      authUser => {
-        authUser
-          ? this.setState({ authUser })
-          : this.setState({ authUser: null });
-      },
-    );
-  }
-
-  componentWillUnmount() {
-    this.listener();
-  }
-
-  render() {
-    return (
-      <Router>
-        <div>
-          <Navigation authUser={this.state.authUser} />
-
-          <hr />
-
-          <Route
-            exact
-            path={ROUTES.LANDING}
-            component={LandingPage}
-          />
-          <Route exact path={ROUTES.SIGN_UP} component={SignUpPage} />
-          <Route exact path={ROUTES.SIGN_IN} component={SignInPage} />
-          <Route
-            exact
-            path={ROUTES.PASSWORD_FORGET}
-            component={PasswordForgetPage}
-          />
-          <Route exact path={ROUTES.HOME} component={HomePage} />
-          <Route
-            exact
-            path={ROUTES.ACCOUNT}
-            component={AccountPage}
-          />
-          <Route exact path={ROUTES.ADMIN} component={AdminPage} />
-        </div>
-      </Router>
-    );
-  }
-}
-
-export default withFirebase(App);
+import { withAuthentication } from '../Session';
+
+const App = () => (
+  <Router>
+    <div>
+      <Navigation />
+
+      <hr />
+
+      <Route exact path={ROUTES.LANDING} component={LandingPage} />
+      <Route exact path={ROUTES.SIGN_UP} component={SignUpPage} />
+      <Route exact path={ROUTES.SIGN_IN} component={SignInPage} />
+      <Route
+        exact
+        path={ROUTES.PASSWORD_FORGET}
+        component={PasswordForgetPage}
+      />
+      <Route exact path={ROUTES.HOME} component={HomePage} />
+      <Route exact path={ROUTES.ACCOUNT} component={AccountPage} />
+      <Route exact path={ROUTES.ADMIN} component={AdminPage} />
+    </div>
+  </Router>
+);
+
+export default withAuthentication(App);

src/components/Navigation/index.js

@@ -4,8 +4,16 @@ import { Link } from 'react-router-dom';
 import SignOutButton from '../SignOut';
 import * as ROUTES from '../../constants/routes';
 
-const Navigation = ({ authUser }) => (
-  <div>{authUser ? <NavigationAuth /> : <NavigationNonAuth />}</div>
+import { AuthUserContext } from '../Session';
+
+const Navigation = () => (
+  <div>
+    <AuthUserContext.Consumer>
+      {authUser =>
+        authUser ? <NavigationAuth /> : <NavigationNonAuth />
+      }
+    </AuthUserContext.Consumer>
+  </div>
 );
 
 const NavigationAuth = () => (

src/components/Session/context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AuthUserContext = React.createContext(null);
+
+export default AuthUserContext;

src/components/Session/index.js

@@ -1,9 +1,4 @@
-import React from 'react';
+import AuthUserContext from './context';
+import withAuthentication from './withAuthentication';
 
-const Session = () => (
-  <div>
-    <h1>Session</h1>
-  </div>
-);
-
-export default Session;
+export { AuthUserContext, withAuthentication };

src/components/Session/withAuthentication.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import AuthUserContext from './context';
+import { withFirebase } from '../Firebase';
+
+const withAuthentication = Component => {
+  class WithAuthentication extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        authUser: null,
+      };
+    }
+
+    componentDidMount() {
+      this.listener = this.props.firebase.auth.onAuthStateChanged(
+        authUser => {
+          authUser
+            ? this.setState({ authUser })
+            : this.setState({ authUser: null });
+        },
+      );
+    }
+
+    componentWillUnmount() {
+      this.listener();
+    }
+
+    render() {
+      return (
+        <AuthUserContext.Provider value={this.state.authUser}>
+          <Component {...this.props} />
+        </AuthUserContext.Provider>
+      );
+    }
+  }
+
+  return withFirebase(WithAuthentication);
+};
+
+export default withAuthentication;