Simplify some things for clarity.

Author: ghengeveld

examples/react-async-router/index.js

@@ -1,25 +1,27 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { BrowserRouter as Router } from "react-router-dom"
-import ApiRouter from "./js/ApiRouter"
-import ContributorsComponent from "./js/ContributorsComponent"
-import RepositoriesComponent from "./js/RepositoriesComponent"
-import Header from "./js/Header"
+import { BrowserRouter as Router, NavLink } from "react-router-dom"
+import AsyncRoute from "./js/AsyncRoute"
+import Contributors from "./js/Contributors"
+import Repositories from "./js/Repositories"
 
 const App = () => (
   <Router>
     <>
-      <Header/>
-      <ApiRouter 
+      <div>
+        <NavLink to="/">Contributors To react-async</NavLink>
+        <NavLink to="/repositories">Other github repositories</NavLink>
+      </div>
+      <AsyncRoute 
         exact
         path="/" 
         fetchUrl="https://api.github.com/repos/ghengeveld/react-async/contributors" 
-        component={ContributorsComponent} 
+        component={Contributors} 
       />
-      <ApiRouter
+      <AsyncRoute
         path="/repositories"
         fetchUrl="https://api.github.com/repositories"
-        component={RepositoriesComponent}
+        component={Repositories}
       />
     </>
   </Router>

examples/react-async-router/js/Api.js

@@ -0,0 +1,20 @@
+import React from "react"
+import Async from "react-async"
+import { Route} from "react-router-dom"
+
+const loader = fetchUrl => () =>
+  fetch(fetchUrl)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const AsyncRoute = ({ component: Component, fetchUrl, ...props }) => (
+  <Route {...props} render={props => (
+    <Async promiseFn={loader(fetchUrl)}>
+      {asyncState => (
+        <Component {...props} {...asyncState} />
+      )}
+    </Async>
+  )} />
+)
+
+export default AsyncRoute

examples/react-async-router/js/ApiRouter.js

@@ -1,6 +1,6 @@
 import React from "react"
 
-const ContributorsComponent = ({ data, error, isLoading }) => {
+const Contributors = ({ data, error, isLoading }) => {
   if (isLoading) return "Loading Contributers..."
   if (error) return "Error"
   return (
@@ -12,4 +12,4 @@ const ContributorsComponent = ({ data, error, isLoading }) => {
   )
 }
 
-export default ContributorsComponent
+export default Contributors

examples/react-async-router/js/AsyncRoute.js

@@ -1,6 +1,6 @@
 import React from "react"
 
-const RepositoriesComponent = ({ data, error, isLoading }) => {
+const Repositories = ({ data, error, isLoading }) => {
   if (isLoading) return "Loading Repositories..."
   if (error) return "Error"
   return (
@@ -12,4 +12,4 @@ const RepositoriesComponent = ({ data, error, isLoading }) => {
   )
 }
 
-export default RepositoriesComponent
+export default Repositories