cassiozen
diff --git a/‎example/index.html
Lines changed: 0 additions & 14 deletions b/‎example/index.html
Lines changed: 0 additions & 14 deletions
diff --git a/‎example/.npmignore renamed to ‎examples/fetch/.npmignore b/‎example/.npmignore renamed to ‎examples/fetch/.npmignore
diff --git a/‎examples/fetch/index.css
Lines changed: 13 additions & 0 deletions b/‎examples/fetch/index.css
Lines changed: 13 additions & 0 deletions
diff --git a/‎examples/fetch/index.html
Lines changed: 16 additions & 0 deletions b/‎examples/fetch/index.html
Lines changed: 16 additions & 0 deletions
diff --git a/‎examples/fetch/index.tsx
Lines changed: 72 additions & 0 deletions b/‎examples/fetch/index.tsx
Lines changed: 72 additions & 0 deletions
@@ -0,0 +1,13 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #1d1f23;
+  color: #ededed;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 24px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Fetch with Retry</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="./index.tsx"></script>
+</body>
+
+</html>
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import './index.css';
+import useStateMachine from '../../dist';
+
+type Coffee = {
+  id: number;
+  title: string;
+  description: string;
+  ingredients: string[];
+};
+
+function App() {
+  const [machine, send] = useStateMachine<{ retryCount: number; data?: Coffee[]; error?: string }>({ retryCount: 0 })({
+    initial: 'loading',
+    states: {
+      loading: {
+        on: {
+          SUCCESS: 'loaded',
+          FAILURE: 'error',
+        },
+        effect(send, update) {
+          const fetchCoffees = async () => {
+            let response: Response;
+            try {
+              response = await fetch('https://api.sampleapis.com/coffee/hot');
+              if (!response.ok) {
+                throw new Error(`An error has occured: ${response.status}`);
+              }
+              const coffees = await response.json();
+              update(context => ({ data: coffees, ...context }));
+              send('SUCCESS');
+            } catch (error) {
+              update(context => ({ error: error.message, ...context }));
+              send('FAILURE');
+            }
+          };
+          fetchCoffees();
+        },
+      },
+      loaded: {},
+      error: {
+        on: {
+          RETRY: {
+            target: 'loading',
+            guard: state => state.context.retryCount < 3,
+          },
+        },
+        effect(send, update) {
+          update(context => ({ ...context, retryCount: context.retryCount + 1 }));
+          send('RETRY');
+        },
+      },
+    },
+  });
+
+  return (
+    <div className="coffees">
+      {machine.value === 'loading' && <p>Loading</p>}
+      {machine.value === 'error' && <p>{machine.context.error}</p>}
+      {machine.value === 'loaded' && (
+        <ul>
+          {machine.context.data?.map(coffee => (
+            <li key={coffee.id}>{coffee.title}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));