From ce124180e1d8d26412650cb024a43447cde86a88 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 28 Jan 2020 16:58:32 -0500
Subject: [PATCH] Add async submission example

---
 examples/async-submission/README.md             |  3 +++
 .../index.js}                                   | 12 ++++++------
 examples/async-submission/package.json          | 17 +++++++++++++++++
 examples/basic-typescript/README.md             |  4 +++-
 examples/basic/README.md                        |  2 ++
 5 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 examples/async-submission/README.md
 rename examples/{AsyncSubmit.js => async-submission/index.js} (80%)
 create mode 100644 examples/async-submission/package.json

diff --git a/examples/async-submission/README.md b/examples/async-submission/README.md
new file mode 100644
index 000000000..7526023cb
--- /dev/null
+++ b/examples/async-submission/README.md
@@ -0,0 +1,3 @@
+# Formik Async Submission
+
+[![Edit formik-example-async-submission](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/async-submission?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/examples/AsyncSubmit.js b/examples/async-submission/index.js
similarity index 80%
rename from examples/AsyncSubmit.js
rename to examples/async-submission/index.js
index bdd8e489d..911277897 100644
--- a/examples/AsyncSubmit.js
+++ b/examples/async-submission/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Formik, Field, Form } from 'formik';
-import { Debug } from './Debug';
 
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+const sleep = ms => new Promise(r => setTimeout(r, ms));
 
-const AsyncSubmit = () => (
+const Example = () => (
   <div>
     <h1>Sign Up</h1>
     <Formik
@@ -14,7 +14,7 @@ const AsyncSubmit = () => (
         email: '',
       }}
       onSubmit={async values => {
-        await sleep(1000);
+        await sleep(500);
         alert(JSON.stringify(values, null, 2));
       }}
     >
@@ -28,14 +28,14 @@ const AsyncSubmit = () => (
 
           <label htmlFor="email">Email</label>
           <Field name="email" placeholder="jane@acme.com" type="email" />
+
           <button type="submit" disabled={isSubmitting}>
             Submit
           </button>
-          <Debug />
         </Form>
       )}
     </Formik>
   </div>
 );
 
-export default AsyncSubmit;
+ReactDOM.render(<Example />, document.getElementById('root'));
diff --git a/examples/async-submission/package.json b/examples/async-submission/package.json
new file mode 100644
index 000000000..12011fcfe
--- /dev/null
+++ b/examples/async-submission/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "formik-example-async-submission",
+  "version": "0.1.0",
+  "description": "This example demonstrates how to use Formik in it's most basic way",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "formik": "latest"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "semi": true
+  }
+}
diff --git a/examples/basic-typescript/README.md b/examples/basic-typescript/README.md
index d68df0699..d4a321050 100644
--- a/examples/basic-typescript/README.md
+++ b/examples/basic-typescript/README.md
@@ -1 +1,3 @@
-# Formik x TypeScript Example
+# Formik TypeScript Example
+
+[![Edit formik-example-basic-typescript](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/basic-typescript?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/examples/basic/README.md b/examples/basic/README.md
index 1017955fb..10f3b958f 100644
--- a/examples/basic/README.md
+++ b/examples/basic/README.md
@@ -1 +1,3 @@
 # Formik Basic Example
+
+[![Edit formik-example-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/basic?fontsize=14&hidenavigation=1&theme=dark)