4.4-end-routing-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -1,5 +1,17 @@
 import React from 'react'
 import LinkList from './LinkList'
 import CreateLink from './CreateLink'
+import Header from './Header'
+import { Switch, Route } from 'react-router-dom'
 
-export default () => <CreateLink />
+export default () => (
+  <div className="center w85">
+    <Header />
+    <div className="ph3 pv1 background-gray">
+      <Switch>
+        <Route exact path="/" component={LinkList} />
+        <Route exact path="/create" component={CreateLink} />
+      </Switch>
+    </div>
+  </div>
+)

src/components/CreateLink.js

@@ -39,7 +39,11 @@ class CreateLink extends Component {
             placeholder="The URL for the link"
           />
         </div>
-        <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
+        <Mutation
+          mutation={POST_MUTATION}
+          variables={{ description, url }}
+          onCompleted={() => this.props.history.push('/')}
+        >
           {postMutation => <button onClick={postMutation}>Submit</button>}
         </Mutation>
       </div>

src/components/Header.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { withRouter } from 'react-router'
+
+const Header = () => (
+  <div className="flex pa1 justify-between nowrap orange">
+    <div className="flex flex-fixed black">
+      <div className="fw7 mr1">Hacker News</div>
+      <Link to="/" className="ml1 no-underline black">
+        new
+      </Link>
+      <div className="ml1">|</div>
+      <Link to="/create" className="ml1 no-underline black">
+        submit
+      </Link>
+    </div>
+  </div>
+)
+
+export default withRouter(Header)

src/index.js

@@ -8,6 +8,7 @@ import { ApolloProvider } from 'react-apollo'
 import { ApolloClient } from 'apollo-client'
 import { HttpLink } from 'apollo-link-http'
 import { InMemoryCache } from 'apollo-cache-inmemory'
+import { BrowserRouter } from 'react-router-dom'
 
 // 2
 const httpLink = new HttpLink({ uri: 'http://localhost:4000' })
@@ -20,9 +21,11 @@ const client = new ApolloClient({
 
 // 4
 ReactDOM.render(
-  <ApolloProvider client={client}>
-    <App />
-  </ApolloProvider>
-  , document.getElementById('root')
+  <BrowserRouter>
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
+  </BrowserRouter>,
+  document.getElementById('root')
 )
-registerServiceWorker()
+registerServiceWorker()