Skip to content

Commit 32e6448

Browse files
mellsonlaurakalbag
mellson
and
laurakalbag
authored
Upgrade to Docusaurus 3.0 (#281)
* Upgrade to Docusaurus 3.0 * formatting * Fix tabitems and category pages * Replace deprecated caution admonition with warning admonition And ensure styles for warning aren’t as red and scary as danger! --------- Co-authored-by: laurakalbag <[email protected]>
1 parent eb5bffc commit 32e6448

File tree

185 files changed

+5097
-5012
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

185 files changed

+5097
-5012
lines changed

‎.vscode/find-unused-exports.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
22
"ignore": {}
3-
}
3+
}

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ Please post Stately Studio feature requests to [feedback.stately.ai](https://fee
4545
- 💬 Provide feedback
4646
- 🆕 Check out our changelog
4747
- 🗺️ View the public roadmap
48-
- 🗳️ Vote on proposed features, and more!
48+
- 🗳️ Vote on proposed features, and more!

‎blog/2019-11-13-no-disabling-a-button-is-not-app-logic/index.mdx‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "No, disabling a button is not app logic."
2+
title: 'No, disabling a button is not app logic.'
33
description: >-
44
Disabling a button is not logic. Rather, it is a sign that logic is fragile
55
and bug-prone. Let’s explore this with a simple example: fetching data in a
@@ -8,11 +8,14 @@ tags: [data fetching, state machine, statechart, state, business logic]
88
authors: [david]
99
image: /blog/2019-11-13-no-disabling-a-button-is-not-app-logic.png
1010
slug: 2019-11-13-no-disabling-a-button-is-not-app-logic
11-
date: 2019-11-13
11+
date: 2019-11-13
1212
---
1313

1414
<head>
15-
<link rel="canonical" href="https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i" />
15+
<link
16+
rel="canonical"
17+
href="https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i"
18+
/>
1619
</head>
1720

1821
I’m going to start this post with an excerpt from the book “Constructing the User Interface with Statecharts”, written by Ian Horrocks in 1999:
@@ -59,7 +62,7 @@ function DogFetcher() {
5962
});
6063
}}
6164
>
62-
{isLoading ? "Fetching..." : "Fetch dog!"}
65+
{isLoading ? 'Fetching...' : 'Fetch dog!'}
6366
</button>
6467
</div>
6568
);
@@ -80,7 +83,7 @@ function DogFetcher() {
8083
}}
8184
disabled={isLoading}
8285
>
83-
{isLoading ? "Fetching..." : "Fetch dog!"}
86+
{isLoading ? 'Fetching...' : 'Fetch dog!'}
8487
</button>;
8588

8689
// ...
@@ -170,7 +173,7 @@ function DogFetcher() {
170173
</figure>
171174

172175
<button onClick={fetchDog}>
173-
{isLoading ? "Fetching..." : "Fetch dog!"}
176+
{isLoading ? 'Fetching...' : 'Fetch dog!'}
174177
</button>
175178
</div>
176179
);
@@ -220,13 +223,13 @@ function DogFetcher() {
220223

221224
return (
222225
<div>
223-
{error && <span style={{ color: "red" }}>{error}</span>}
226+
{error && <span style={{ color: 'red' }}>{error}</span>}
224227
<figure className="dog" onDoubleClick={fetchDog}>
225228
{dog && <img src={dog} alt="doggo" />}
226229
</figure>
227230

228231
<button onClick={fetchDog}>
229-
{isLoading ? "Fetching..." : "Fetch dog!"}
232+
{isLoading ? 'Fetching...' : 'Fetch dog!'}
230233
</button>
231234
<button onClick={cancel}>Cancel</button>
232235
</div>
@@ -264,35 +267,35 @@ Great! Now let’s write our reducer:
264267
```ts
265268
function dogReducer(state, event) {
266269
switch (event.type) {
267-
case "FETCH":
270+
case 'FETCH':
268271
return {
269272
...state,
270-
status: "loading",
273+
status: 'loading',
271274
};
272-
case "RESOLVE":
275+
case 'RESOLVE':
273276
return {
274277
...state,
275-
status: "success",
278+
status: 'success',
276279
dog: event.data,
277280
};
278-
case "REJECT":
281+
case 'REJECT':
279282
return {
280283
...state,
281-
status: "failure",
284+
status: 'failure',
282285
error: event.error,
283286
};
284-
case "CANCEL":
287+
case 'CANCEL':
285288
return {
286289
...state,
287-
status: "idle",
290+
status: 'idle',
288291
};
289292
default:
290293
return state;
291294
}
292295
}
293296

294297
const initialState = {
295-
status: "idle",
298+
status: 'idle',
296299
dog: null,
297300
error: null,
298301
};
@@ -313,15 +316,15 @@ function DogFetcher() {
313316

314317
return (
315318
<div>
316-
{error && <span style={{ color: "red" }}>{error}</span>}
317-
<figure className="dog" onDoubleClick={() => dispatch({ type: "FETCH" })}>
319+
{error && <span style={{ color: 'red' }}>{error}</span>}
320+
<figure className="dog" onDoubleClick={() => dispatch({ type: 'FETCH' })}>
318321
{dog && <img src={dog} alt="doggo" />}
319322
</figure>
320323

321-
<button onClick={() => dispatch({ type: "FETCH" })}>
322-
{status === "loading" ? "Fetching..." : "Fetch dog!"}
324+
<button onClick={() => dispatch({ type: 'FETCH' })}>
325+
{status === 'loading' ? 'Fetching...' : 'Fetch dog!'}
323326
</button>
324-
<button onClick={() => dispatch({ type: "CANCEL" })}>Cancel</button>
327+
<button onClick={() => dispatch({ type: 'CANCEL' })}>Cancel</button>
325328
</div>
326329
);
327330
}
@@ -332,17 +335,17 @@ However, the question remains: how do we execute the side-effect of actually fet
332335
```ts
333336
// ...
334337
useEffect(() => {
335-
if (state.status === "loading") {
338+
if (state.status === 'loading') {
336339
let canceled = false;
337340

338341
fetchRandomDog()
339342
.then((data) => {
340343
if (canceled) return;
341-
dispatch({ type: "RESOLVE", data });
344+
dispatch({ type: 'RESOLVE', data });
342345
})
343346
.catch((error) => {
344347
if (canceled) return;
345-
dispatch({ type: "REJECT", error });
348+
dispatch({ type: 'REJECT', error });
346349
});
347350

348351
return () => {
@@ -415,41 +418,41 @@ In this case, we're going to use a state machine to manage and orchestrate state
415418
I'm going to use [XState](https://xstate.js.org/docs) and [`@xstate/react`](https://xstate.js.org/docs/packages/xstate-react/) to create the machine:
416419

417420
```ts
418-
import { Machine, assign } from "xstate";
419-
import { useMachine } from "@xstate/react";
421+
import { Machine, assign } from 'xstate';
422+
import { useMachine } from '@xstate/react';
420423

421424
// ...
422425

423426
const dogFetcherMachine = Machine({
424-
id: "dog fetcher",
425-
initial: "idle",
427+
id: 'dog fetcher',
428+
initial: 'idle',
426429
context: {
427430
dog: null,
428431
error: null,
429432
},
430433
states: {
431434
idle: {
432-
on: { FETCH: "loading" },
435+
on: { FETCH: 'loading' },
433436
},
434437
loading: {
435438
invoke: {
436439
src: () => fetchRandomDog(),
437440
onDone: {
438-
target: "success",
441+
target: 'success',
439442
actions: assign({ dog: (_, event) => event.data.message }),
440443
},
441444
onError: {
442-
target: "failure",
445+
target: 'failure',
443446
actions: assign({ error: (_, event) => event.data }),
444447
},
445448
},
446-
on: { CANCEL: "idle" },
449+
on: { CANCEL: 'idle' },
447450
},
448451
success: {
449-
on: { FETCH: "loading" },
452+
on: { FETCH: 'loading' },
450453
},
451454
failure: {
452-
on: { FETCH: "loading" },
455+
on: { FETCH: 'loading' },
453456
},
454457
},
455458
});
@@ -478,18 +481,18 @@ function DogFetcher() {
478481

479482
return (
480483
<div>
481-
{error && <span style={{ color: "red" }}>{error}</span>}
482-
<figure className="dog" onDoubleClick={() => send("FETCH")}>
484+
{error && <span style={{ color: 'red' }}>{error}</span>}
485+
<figure className="dog" onDoubleClick={() => send('FETCH')}>
483486
{dog && <img src={dog} alt="doggo" />}
484487
</figure>
485488

486-
<button onClick={() => send("FETCH")}>
487-
{current.matches("loading") && "Fetching..."}
488-
{current.matches("success") && "Fetch another dog!"}
489-
{current.matches("idle") && "Fetch dog"}
490-
{current.matches("failure") && "Try again"}
489+
<button onClick={() => send('FETCH')}>
490+
{current.matches('loading') && 'Fetching...'}
491+
{current.matches('success') && 'Fetch another dog!'}
492+
{current.matches('idle') && 'Fetch dog'}
493+
{current.matches('failure') && 'Try again'}
491494
</button>
492-
<button onClick={() => send("CANCEL")}>Cancel</button>
495+
<button onClick={() => send('CANCEL')}>Cancel</button>
493496
</div>
494497
);
495498
}
@@ -522,7 +525,7 @@ You do not need a state machine library (like XState) to do this. In fact, you m
522525
```ts
523526
function DogFetcher() {
524527
// 'idle' or 'loading' or 'success' or 'error'
525-
const [status, setStatus] = useState("idle");
528+
const [status, setStatus] = useState('idle');
526529
}
527530
```
528531

@@ -531,9 +534,9 @@ And just like that, you’ve eliminated `isLoading`, `isError`, `isSuccess`, `st
531534
```ts
532535
function DogFetcher() {
533536
// 'idle' or 'loading' or 'success' or 'error'
534-
const [status, setStatus] = useState("idle");
537+
const [status, setStatus] = useState('idle');
535538

536-
const isLoading = status === "loading";
539+
const isLoading = status === 'loading';
537540

538541
return (
539542
// ...

0 commit comments

Comments
 (0)