Store User in App

Author: maxwellgordon

src/components/App.js

@@ -1,27 +1,53 @@
-import React from 'react';
+import React,  {Component} from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import ProductShowPage from './ProductShowPage';
 import ProductIndexPage from './ProductIndexPage';
 import NewProductPage from './NewProductPage';
 import SignInPage from './SignInPage';
 import HomePage from './HomePage';
 import NavBar from './NavBar';
+import { User } from '../requests'
 
-const App = () => {
-  return (
-    <Router>
-      <div className="App">
-        <NavBar />
-        <Switch>
-          <Route path="/session/new" exact component={SignInPage} />
-          <Route path="/products/new" component={NewProductPage} />
-          <Route path="/products/:id" component={ProductShowPage} />
-          <Route path="/products" exact component={ProductIndexPage} />
-          <Route path="/" exact component={HomePage} />
-        </Switch>
-      </div>
-    </Router>
-  );
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentUser: null
+    }
+    this.getUser = this.getUser.bind(this);
+  }
+
+  getUser() {
+    User.current().then(currentUser => {
+      if (currentUser.id) {
+        this.setState({ currentUser });
+      }
+    })
+  }
+
+  componentDidMount() {
+    this.getUser();
+  }
+
+  render() {
+    const { currentUser } = this.state;
+    return (
+      <Router>
+        <div className="App">
+          <NavBar currentUser={currentUser} />
+          <Switch>
+            <Route path="/session/new" exact render={
+              (routeProps) => <SignInPage {...routeProps} onSignIn={this.getUser} />}
+            />
+            <Route path="/products/new" component={NewProductPage} />
+            <Route path="/products/:id" component={ProductShowPage} />
+            <Route path="/products" exact component={ProductIndexPage} />
+            <Route path="/" exact component={HomePage} />
+          </Switch>
+        </div>
+      </Router>
+    );
+  }
 };
 
 export default App;

src/components/NavBar.js

@@ -2,11 +2,24 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 function NavBar(props) {
+  const {currentUser} = props;
   return (
     <div className="NavBar">
       <NavLink to="/">Home</NavLink>|<NavLink to="/products">Products</NavLink>|
-      <NavLink to="/products/new">New Product</NavLink>
-      <NavLink to="/session/new">Sign In</NavLink>
+      
+      {currentUser ? (
+        <span>
+          <>
+            <NavLink to="/products/new">New Product</NavLink>
+            |
+            <span>{currentUser.full_name}</span>
+          </>
+        </span>
+      ) : (
+        <NavLink exact to="/session/new">
+          Sign In
+        </NavLink>
+      )}
     </div>
   );
 }

src/components/SignInPage.js

@@ -20,6 +20,9 @@ import { Session } from "../requests";
         });
          return;
       }
+      if (typeof this.props.onSignIn === 'function') {
+          this.props.onSignIn();
+      }
       this.props.history.push("/");
     });
   }

src/requests.js

@@ -39,3 +39,11 @@ export const Session = {
     }).then(res => res.json());
   },
 };
+
+export const User = {
+  current() {
+    return fetch(`${BASE_URL}/users/current`, {
+      credentials: 'include',
+    }).then(res => res.json());
+  }
+};