From afc98e180b16fd453f5af85ee9de82f2478a037f Mon Sep 17 00:00:00 2001
From: Stefan Adolf <stefan.adolf@turbinekreuzberg.com>
Date: Thu, 9 Jul 2020 13:59:21 +0200
Subject: [PATCH 1/2] react-async example

---
 package.json   |  1 +
 src/PageOne.js | 16 ++++++----------
 src/PageTwo.js | 20 +++++++++++++++++++-
 yarn.lock      |  5 +++++
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 4e72549..fa17300 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-async": "^10.0.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
diff --git a/src/PageOne.js b/src/PageOne.js
index 92bbef4..b989861 100644
--- a/src/PageOne.js
+++ b/src/PageOne.js
@@ -1,19 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
+import { useAsync } from "react-async"
 
-function aVeryHeavyAsyncApiCall(thatRunsForMilliSeconds) {
+function aVeryHeavyAsyncApiCall({thatRunsForMilliSeconds}) {
   return new Promise((resolve, reject) => {
-    setTimeout(() => resolve("hey, Im done!"), thatRunsForMilliSeconds);
+    setTimeout(() => resolve(`hey, I ran ${thatRunsForMilliSeconds}ms!`), thatRunsForMilliSeconds);
   })
 }
 
 function PageOne() {
-  const [apiResult, setApiResult] = useState();
-
-  useEffect(() => {
-    aVeryHeavyAsyncApiCall(3000).then(result => {
-      setApiResult(result)
-    })
-  }, []) 
+  
+  const { data: apiResult } = useAsync({ promiseFn: aVeryHeavyAsyncApiCall, thatRunsForMilliSeconds: 3000 })
 
   return (
     <div>
diff --git a/src/PageTwo.js b/src/PageTwo.js
index 3635d0f..f9c840c 100644
--- a/src/PageTwo.js
+++ b/src/PageTwo.js
@@ -1,11 +1,29 @@
 import React from 'react';
+import Async from "react-async"
+
+function aVeryHeavyAsyncApiCall({thatRunsForMilliSeconds}) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => resolve(`hey, I ran ${thatRunsForMilliSeconds}ms!`), thatRunsForMilliSeconds);
+  })
+}
 
 function PageTwo() {
+  
   return (
     <div>
       Hi Im Page 2
+      <Async promiseFn={aVeryHeavyAsyncApiCall} thatRunsForMilliSeconds={3000}>
+        <Async.Pending>
+          <div>waiting......</div>
+        </Async.Pending>
+        <Async.Fulfilled>
+          {data => (
+            <div>{data}</div>
+          )}
+        </Async.Fulfilled>
+      </Async>
     </div>
   );
 }
 
-export default PageTwo;
+export default PageTwo;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ec77d73..23c8f87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8599,6 +8599,11 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-async@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-async/-/react-async-10.0.1.tgz#575c083f808303d2f6ca52d11ec7554dbdbd9fcd"
+  integrity sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"

From 08615b877f6f73fcbcea964a13e4d3da0d4f6ea7 Mon Sep 17 00:00:00 2001
From: Stefan Adolf <stefan.adolf@turbinekreuzberg.com>
Date: Thu, 9 Jul 2020 14:06:42 +0200
Subject: [PATCH 2/2] README

---
 README.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/README.md b/README.md
index 3730ad8..33ccac8 100644
--- a/README.md
+++ b/README.md
@@ -15,3 +15,12 @@ Since the state hasn't been removed since it had been captured by the effect, th
 take a note in the effect that you're currently mounted.
 If you're unmounted the effects returned callback is called. Set the unmount state there.
 Check in the promise resolution if we're already unmounted and dismiss the effect without changing state.
+
+# react async solution
+
+comes with lots of options how to express yourself: https://docs.react-async.com/getting-started/usage  
+`PageOne`: demo with a `useAsync` hook  
+`PageTwo`: demo with context based Async components  
+(more in the docs)
+
+React Async claims to be fully compatible to React Suspense / Concurrent React once it has landed.