async-library · ghengeveld · Mar 1, 2019 · Feb 28, 2019
diff --git a/examples/react-async-router/.babelrc b/examples/react-async-router/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}
diff --git a/examples/react-async-router/.gitignore b/examples/react-async-router/.gitignore
@@ -0,0 +1,2 @@
+.cache
+dist
diff --git a/examples/react-async-router/README.md b/examples/react-async-router/README.md
@@ -0,0 +1,18 @@
+## An example of using `react-async` with `react-router` (built with parcel)
+
+The idea was to make fetching data for pages (components) configurable in a declarative way
+
+```
+    <Router>
+        ...
+        <ApiRouter path="/repositories" fetchUrl='https://api.github.com/repositories' component={RepositoriesComponent} />
+    </Router>
+```
+
+## Running the example
+
+```
+  npm install
+  npm run start
+```
+and then goto [http://localhost:1234](http://localhost:123)
diff --git a/examples/react-async-router/index.html b/examples/react-async-router/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <style>
+      a {
+        margin-right: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="./index.js"></script>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/react-async-router/index.js b/examples/react-async-router/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import ApiRouter from './js/ApiRouter';
+import ContributorsComponent from './js/ContributorsComponent';
+import RepositoriesComponent from './js/RepositoriesComponent';
+import Header from './js/Header';
+
+const App = () => (
+    <Router>
+      <React.Fragment>
+        <Header/>
+        <ApiRouter exact path="/" fetchUrl='https://api.github.com/repos/ghengeveld/react-async/contributors' component={ContributorsComponent} />
+        <ApiRouter path="/repositories" fetchUrl='https://api.github.com/repositories' component={RepositoriesComponent} />
+      </React.Fragment>
+    </Router>)
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(<App />, document.getElementById('app'));
+});
diff --git a/examples/react-async-router/js/Api.js b/examples/react-async-router/js/Api.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Async from 'react-async';
+
+const loader = (fetchUrl) =>
+  fetch(fetchUrl)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const Api = ( {fetchUrl, children}) => (
+  <Async promiseFn={() => loader(fetchUrl)}>
+    {({ data, error, isLoading}) => {
+      const childrenWithProps = React.Children.map(children, child =>
+        React.cloneElement(child, { data, error, isLoading })
+      );
+      return (<div>{childrenWithProps}</div>)
+    }}
+  </Async>
+)
+
+export default Api;
diff --git a/examples/react-async-router/js/ApiRouter.js b/examples/react-async-router/js/ApiRouter.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Route} from "react-router-dom";
+import Api from './Api';
+
+const ApiRouter = (props) => {
+  const Child = props.component;
+  const c = () => (
+    <Api fetchUrl={props.fetchUrl}>
+      <Child {...props} />
+    </Api>
+  );
+  return (<Route {...props} component={c} />);
+}
+
+export default ApiRouter;
diff --git a/examples/react-async-router/js/ContributorsComponent.js b/examples/react-async-router/js/ContributorsComponent.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ContributorsComponent = ({data, error, isLoading}) => {
+  if (isLoading) return 'Loading Contributers...'
+  if (error) return 'Error'
+  return (<ul>{data.map(e => (<li key={e.id}>{e.login}</li>))}</ul>)
+}
+
+export default ContributorsComponent;
diff --git a/examples/react-async-router/js/Header.js b/examples/react-async-router/js/Header.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom'
+
+const Header = () => (
+  <div>
+    <NavLink to="/">Contributors To react-async</NavLink>
+    <NavLink to="/repositories">Other github repositories</NavLink>
+  </div>);
+
+export default Header;
diff --git a/examples/react-async-router/js/RepositoriesComponent.js b/examples/react-async-router/js/RepositoriesComponent.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const RepositoriesComponent = ({data, error, isLoading}) => {
+  if (isLoading) return 'Loading Repositories...'
+  if (error) return 'Error'
+  return (<ul>{data.map(e => (<li key={e.id}>{e.name}</li>))}</ul>)
+}
+
+export default RepositoriesComponent;
diff --git a/examples/react-async-router/package.json b/examples/react-async-router/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-async-router",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "parcel index.html",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/preset-react": "^7.0.0",
+    "parcel-bundler": "^1.11.0",
+    "react": "^16.8.3",
+    "react-async": "^4.1.2",
+    "react-dom": "^16.8.3",
+    "react-router-dom": "^4.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.3.4"
+  }
+}