diff --git a/examples/react-async-router/.babelrc b/examples/react-async-router/.babelrc new file mode 100644 index 00000000..85e86ab6 --- /dev/null +++ b/examples/react-async-router/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-react"] +} \ No newline at end of file diff --git a/examples/react-async-router/.gitignore b/examples/react-async-router/.gitignore new file mode 100644 index 00000000..ba70f389 --- /dev/null +++ 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 new file mode 100644 index 00000000..c94d43a8 --- /dev/null +++ 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 + +``` + + ... + + +``` + +## Running the example + +``` + npm install + npm run start +``` +and then goto [http://localhost:1234](http://localhost:123) \ No newline at end of file diff --git a/examples/react-async-router/index.html b/examples/react-async-router/index.html new file mode 100644 index 00000000..2e4388d3 --- /dev/null +++ b/examples/react-async-router/index.html @@ -0,0 +1,13 @@ + + + + + + +
+ + \ No newline at end of file diff --git a/examples/react-async-router/index.js b/examples/react-async-router/index.js new file mode 100644 index 00000000..a2599e53 --- /dev/null +++ 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 = () => ( + + +
+ + + + ) + +document.addEventListener('DOMContentLoaded', () => { + ReactDOM.render(, document.getElementById('app')); +}); \ No newline at end of file diff --git a/examples/react-async-router/js/Api.js b/examples/react-async-router/js/Api.js new file mode 100644 index 00000000..1587cdc6 --- /dev/null +++ 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}) => ( + loader(fetchUrl)}> + {({ data, error, isLoading}) => { + const childrenWithProps = React.Children.map(children, child => + React.cloneElement(child, { data, error, isLoading }) + ); + return (
{childrenWithProps}
) + }} + +) + +export default Api; \ No newline at end of file diff --git a/examples/react-async-router/js/ApiRouter.js b/examples/react-async-router/js/ApiRouter.js new file mode 100644 index 00000000..281cfbca --- /dev/null +++ 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 = () => ( + + + + ); + return (); +} + +export default ApiRouter; \ No newline at end of file diff --git a/examples/react-async-router/js/ContributorsComponent.js b/examples/react-async-router/js/ContributorsComponent.js new file mode 100644 index 00000000..c6396a84 --- /dev/null +++ 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 (
    {data.map(e => (
  • {e.login}
    • ))}
) +} + +export default ContributorsComponent; \ No newline at end of file diff --git a/examples/react-async-router/js/Header.js b/examples/react-async-router/js/Header.js new file mode 100644 index 00000000..f2759edd --- /dev/null +++ b/examples/react-async-router/js/Header.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom' + +const Header = () => ( +
+ Contributors To react-async + Other github repositories +
); + +export default Header; \ No newline at end of file diff --git a/examples/react-async-router/js/RepositoriesComponent.js b/examples/react-async-router/js/RepositoriesComponent.js new file mode 100644 index 00000000..61a4176f --- /dev/null +++ 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 (
    {data.map(e => (
  • {e.name}
    • ))}
) +} + +export default RepositoriesComponent; \ No newline at end of file diff --git a/examples/react-async-router/package.json b/examples/react-async-router/package.json new file mode 100644 index 00000000..1e6772e7 --- /dev/null +++ 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" + } +}