Cleanup and consistent code style.

Author: ghengeveld

examples/react-async-router/README.md

@@ -1,18 +1,19 @@
 ## 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
+The idea is 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>
+  <Router>
+    ...
+    <ApiRouter path="/repositories" fetchUrl="https://api.github.com/repositories" component={RepositoriesComponent} />
+  </Router>
 ```
 
 ## Running the example
 
 ```
   npm install
-  npm run start
+  npm start
 ```
-and then goto [http://localhost:1234](http://localhost:123)
+
+Then visit [http://localhost:1234](http://localhost:1234).

examples/react-async-router/index.js

@@ -1,20 +1,30 @@
-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';
+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"
 
 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>)
+  <Router>
+    <>
+      <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}
+      />
+    </>
+  </Router>
+)
 
-document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<App />, document.getElementById('app'));
-});
+document.addEventListener("DOMContentLoaded", () => {
+  ReactDOM.render(<App />, document.getElementById("app"))
+})

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

@@ -1,20 +1,22 @@
-import React from 'react';
-import Async from 'react-async';
+import React from "react"
+import Async from "react-async"
 
-const loader = (fetchUrl) =>
+const loader = fetchUrl =>
   fetch(fetchUrl)
     .then(res => (res.ok ? res : Promise.reject(res)))
     .then(res => res.json())
 
-const Api = ( {fetchUrl, children}) => (
+const Api = ({ fetchUrl, children }) => (
   <Async promiseFn={() => loader(fetchUrl)}>
-    {({ data, error, isLoading}) => {
+    {({ data, error, isLoading }) => {
       const childrenWithProps = React.Children.map(children, child =>
         React.cloneElement(child, { data, error, isLoading })
-      );
-      return (<div>{childrenWithProps}</div>)
+      )
+      return (
+        <div>{childrenWithProps}</div>
+      )
     }}
   </Async>
 )
 
-export default Api;
+export default Api

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

@@ -1,15 +1,15 @@
-import React from 'react';
-import { Route} from "react-router-dom";
-import Api from './Api';
+import React from "react"
+import { Route} from "react-router-dom"
+import Api from "./Api"
 
 const ApiRouter = (props) => {
-  const Child = props.component;
+  const Child = props.component
   const c = () => (
     <Api fetchUrl={props.fetchUrl}>
       <Child {...props} />
     </Api>
-  );
-  return (<Route {...props} component={c} />);
+  )
+  return (<Route {...props} component={c} />)
 }
 
-export default ApiRouter;
+export default ApiRouter

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

@@ -1,9 +1,15 @@
-import React from 'react';
+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>)
+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;
+export default ContributorsComponent

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

@@ -1,10 +1,11 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom'
+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>);
+  </div>
+)
 
-export default Header;
+export default Header

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

@@ -1,9 +1,15 @@
-import React from 'react';
+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>)
+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;
+export default RepositoriesComponent

examples/react-async-router/package.json

@@ -1,14 +1,11 @@
 {
   "name": "react-async-router",
-  "version": "1.0.0",
-  "description": "",
+  "version": "0.0.0",
+  "private": true,
   "main": "index.js",
   "scripts": {
-    "start": "parcel index.html",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "parcel index.html"
   },
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "@babel/preset-react": "^7.0.0",
     "parcel-bundler": "^1.11.0",