` screen to add a new timer.
24 | - If the user presses the **Cancel** button on this screen, we should go back to the previous timer.
25 |
--------------------------------------------------------------------------------
/src/06/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 06 - Hierarchical States
2 |
3 | In this exercise, we'll be exploring [hierarchical states](https://xstate.js.org/docs/guides/hierarchical.html) to add "overtime" logic. Instead of the machine going to an `expired` state, it should still have the same behavior as if it were running, but we should also be in some `running.overtime` state, so that we know that the time is already expired.
4 |
5 | We'll also use [forbidden transitions](https://xstate.js.org/docs/guides/transitions.html#forbidden-transitions) to tweak the behavior for these nested states.
6 |
7 | ## Goals
8 |
9 | - Add two hierarchical (nested) states to the `running` state:
10 | - `running.normal`, which is the normal timer countdown behavior, and the initial state
11 | - `running.overtime`, which is the expired timer countdown behavior that can also be reset.
12 | - Move the eventless transition from `running` into `running.normal`, and transition to the sibling `overtime` instead of `expired`, since this is what we want our new behavior to be.
13 | - Since we now want to allow `RESET` to transition to `idle` in both `running.overtime` and `paused`, move that transition to the parent, so that a `RESET` event would transition to `.idle`.
14 | - However, we don't want a `RESET` event to do anything in `running.normal`, so forbid that transition.
15 | - We also don't want `TOGGLE` to do anything in `running.overtime`, so forbid that transition as well.
16 |
--------------------------------------------------------------------------------
/src/08/foreignClockMachine.js:
--------------------------------------------------------------------------------
1 | import { assign, createMachine } from 'xstate';
2 |
3 | export const foreignClockMachine = createMachine({
4 | initial: 'loadingTimezones',
5 | context: {
6 | timezones: null,
7 | timezone: null,
8 | foreignTime: null,
9 | },
10 | states: {
11 | loadingTimezones: {
12 | on: {
13 | 'TIMEZONES.LOADED': {
14 | target: 'time',
15 | actions: assign({
16 | timezones: (_, e) => e.data,
17 | }),
18 | },
19 | },
20 | },
21 | time: {
22 | initial: 'noTimezoneSelected',
23 | states: {
24 | noTimezoneSelected: {},
25 | timezoneSelected: {
26 | on: {
27 | 'LOCAL.UPDATE': {
28 | actions: assign({
29 | foreignTime: (ctx, event) => {
30 | return new Date(event.time).toLocaleTimeString('en-US', {
31 | timeZone: ctx.timezone,
32 | });
33 | },
34 | }),
35 | },
36 | },
37 | },
38 | },
39 | on: {
40 | 'TIMEZONE.CHANGE': {
41 | target: '.timezoneSelected',
42 | actions: assign((ctx, e) => ({
43 | timezone: e.value,
44 | foreignTime: new Date().toLocaleTimeString('en-US', {
45 | timeZone: e.value,
46 | }),
47 | })),
48 | },
49 | },
50 | },
51 | },
52 | });
53 |
--------------------------------------------------------------------------------
/src/06/timerMachine.final.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign } from 'xstate';
2 |
3 | const timerExpired = (ctx) => ctx.elapsed >= ctx.duration;
4 |
5 | export const timerMachine = createMachine({
6 | initial: 'idle',
7 | context: {
8 | duration: 5,
9 | elapsed: 0,
10 | interval: 0.1,
11 | },
12 | states: {
13 | idle: {
14 | entry: assign({
15 | duration: 5,
16 | elapsed: 0,
17 | }),
18 | on: {
19 | TOGGLE: 'running',
20 | },
21 | },
22 | running: {
23 | initial: 'normal',
24 | states: {
25 | normal: {
26 | always: {
27 | target: 'overtime',
28 | cond: timerExpired,
29 | },
30 | on: {
31 | RESET: undefined,
32 | },
33 | },
34 | overtime: {
35 | on: {
36 | TOGGLE: undefined,
37 | },
38 | },
39 | },
40 | on: {
41 | TICK: {
42 | actions: assign({
43 | elapsed: (ctx) => ctx.elapsed + ctx.interval,
44 | }),
45 | },
46 | TOGGLE: 'paused',
47 | ADD_MINUTE: {
48 | actions: assign({
49 | duration: (ctx) => ctx.duration + 60,
50 | }),
51 | },
52 | },
53 | },
54 | paused: {
55 | on: {
56 | TOGGLE: 'running',
57 | },
58 | },
59 | },
60 | on: {
61 | RESET: {
62 | target: '.idle',
63 | },
64 | },
65 | });
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-finland-xstate-workshop",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@fortawesome/fontawesome-svg-core": "^1.2.28",
7 | "@fortawesome/free-solid-svg-icons": "^5.13.0",
8 | "@fortawesome/react-fontawesome": "^0.1.9",
9 | "@reach/tabs": "^0.11.2",
10 | "@testing-library/jest-dom": "^4.2.4",
11 | "@testing-library/react": "^11.1.1",
12 | "@testing-library/user-event": "^7.1.2",
13 | "@xstate/inspect": "^0.2.0",
14 | "@xstate/react": "^1.0.2",
15 | "@xstate/test": "^0.4.1",
16 | "react": "^16.13.1",
17 | "react-dom": "^16.13.1",
18 | "react-markdown": "^5.0.2",
19 | "react-query": "^2.25.2",
20 | "react-router": "^5.2.0",
21 | "react-router-dom": "^5.2.0",
22 | "react-scripts": "4.0.0",
23 | "xstate": "^4.14.0"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test",
29 | "eject": "react-scripts eject"
30 | },
31 | "eslintConfig": {
32 | "extends": "react-app"
33 | },
34 | "browserslist": {
35 | "production": [
36 | ">0.2%",
37 | "not dead",
38 | "not op_mini all"
39 | ],
40 | "development": [
41 | "last 1 chrome version",
42 | "last 1 firefox version",
43 | "last 1 safari version"
44 | ]
45 | },
46 | "devDependencies": {
47 | "sass": "^1.42.1"
48 | },
49 | "engines": {
50 | "node": "16"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/08/timerAppMachine.final.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign, spawn } from 'xstate';
2 | import { createTimerMachine } from './timerMachine';
3 |
4 | export const timerAppMachine = createMachine({
5 | initial: 'new',
6 | context: {
7 | duration: 0,
8 | currentTimer: -1,
9 | timers: [],
10 | },
11 | states: {
12 | new: {
13 | on: {
14 | CANCEL: {
15 | target: 'timer',
16 | cond: (ctx) => ctx.timers.length > 0,
17 | },
18 | },
19 | },
20 | timer: {
21 | on: {
22 | DELETE: {
23 | actions: assign((ctx) => {
24 | const timers = ctx.timers.slice(0, -1);
25 | const currentTimer = timers.length - 1;
26 |
27 | return {
28 | timers,
29 | currentTimer,
30 | };
31 | }),
32 | target: 'deleting',
33 | },
34 | },
35 | },
36 | deleting: {
37 | always: [
38 | { target: 'new', cond: (ctx) => ctx.timers.length === 0 },
39 | { target: 'timer' },
40 | ],
41 | },
42 | },
43 | on: {
44 | ADD: {
45 | target: '.timer',
46 | actions: assign((ctx, event) => {
47 | const newTimer = spawn(createTimerMachine(event.duration));
48 |
49 | const timers = ctx.timers.concat(newTimer);
50 |
51 | return {
52 | timers,
53 | currentTimer: timers.length - 1,
54 | };
55 | }),
56 | },
57 | CREATE: 'new',
58 | SWITCH: {
59 | actions: assign({
60 | currentTimer: (_, event) => event.index,
61 | }),
62 | },
63 | },
64 | });
65 |
--------------------------------------------------------------------------------
/src/complete/timerAppMachine.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign, spawn } from 'xstate';
2 | import { createTimerMachine } from './timerMachine';
3 |
4 | export const timerAppMachine = createMachine({
5 | initial: 'new',
6 | context: {
7 | duration: 0,
8 | currentTimer: -1,
9 | timers: [],
10 | },
11 | states: {
12 | new: {
13 | on: {
14 | CANCEL: {
15 | target: 'timer',
16 | cond: (ctx) => ctx.timers.length > 0,
17 | },
18 | },
19 | },
20 | timer: {
21 | on: {
22 | DELETE: {
23 | actions: assign((ctx, e) => {
24 | const timers = ctx.timers.filter((_, i) => i !== e.index);
25 | const currentTimer = timers.length - 1;
26 |
27 | return {
28 | timers,
29 | currentTimer,
30 | };
31 | }),
32 | target: 'deleting',
33 | },
34 | },
35 | },
36 | deleting: {
37 | always: [
38 | { target: 'new', cond: (ctx) => ctx.timers.length === 0 },
39 | { target: 'timer' },
40 | ],
41 | },
42 | },
43 | on: {
44 | ADD: {
45 | target: '.timer',
46 | actions: assign((ctx, event) => {
47 | const newTimer = spawn(createTimerMachine(event.duration));
48 |
49 | const timers = ctx.timers.concat(newTimer);
50 |
51 | return {
52 | timers,
53 | currentTimer: timers.length - 1,
54 | };
55 | }),
56 | },
57 | CREATE: 'new',
58 | SWITCH: {
59 | actions: assign({
60 | currentTimer: (_, event) => event.index,
61 | }),
62 | },
63 | },
64 | });
65 |
--------------------------------------------------------------------------------
/src/07/timerMachine.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign } from 'xstate';
2 |
3 | const ticker = (context, event) => (callback) => {
4 | // This is the callback service creator.
5 | // Add the implementation details here.
6 | // ...
7 | };
8 |
9 | const timerExpired = (ctx) => ctx.elapsed >= ctx.duration;
10 |
11 | // https://xstate.js.org/viz/?gist=78fef4bd3ae520709ceaee62c0dd59cd
12 | export const timerMachine = createMachine({
13 | id: 'timer',
14 | initial: 'idle',
15 | context: {
16 | duration: 60,
17 | elapsed: 0,
18 | interval: 0.1,
19 | },
20 | states: {
21 | idle: {
22 | entry: assign({
23 | duration: 60,
24 | elapsed: 0,
25 | }),
26 | on: {
27 | TOGGLE: 'running',
28 | RESET: undefined,
29 | },
30 | },
31 | running: {
32 | // Invoke the callback service here.
33 | // ...
34 |
35 | initial: 'normal',
36 | states: {
37 | normal: {
38 | always: {
39 | target: 'overtime',
40 | cond: timerExpired,
41 | },
42 | on: {
43 | RESET: undefined,
44 | },
45 | },
46 | overtime: {
47 | on: {
48 | TOGGLE: undefined,
49 | },
50 | },
51 | },
52 | on: {
53 | TICK: {
54 | actions: assign({
55 | elapsed: (ctx) => ctx.elapsed + ctx.interval,
56 | }),
57 | },
58 | TOGGLE: 'paused',
59 | ADD_MINUTE: {
60 | actions: assign({
61 | duration: (ctx) => ctx.duration + 60,
62 | }),
63 | },
64 | },
65 | },
66 | paused: {
67 | on: { TOGGLE: 'running' },
68 | },
69 | },
70 | on: {
71 | RESET: {
72 | target: '.idle',
73 | },
74 | },
75 | });
76 |
--------------------------------------------------------------------------------
/src/08/NewTimer.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { faPlay } from '@fortawesome/free-solid-svg-icons';
4 | import { useMachine } from '@xstate/react';
5 | import { newTimerMachine } from './newTimerMachine';
6 | import { useRef } from 'react';
7 |
8 | export const NewTimer = ({ onSubmit, onCancel }) => {
9 | const inputRef = useRef();
10 | const [state, send] = useMachine(newTimerMachine, {
11 | actions: {
12 | submit: (context) => {
13 | onSubmit(context.duration);
14 | },
15 | },
16 | });
17 |
18 | React.useEffect(() => {
19 | inputRef.current?.focus();
20 | }, [inputRef]);
21 |
22 | const { duration } = state.context;
23 |
24 | return (
25 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/complete/NewTimer.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { faPlay } from '@fortawesome/free-solid-svg-icons';
4 | import { useMachine } from '@xstate/react';
5 | import { newTimerMachine } from './newTimerMachine';
6 | import { useRef } from 'react';
7 |
8 | export const NewTimer = ({ onSubmit, onCancel }) => {
9 | const inputRef = useRef();
10 | const [state, send] = useMachine(newTimerMachine, {
11 | actions: {
12 | submit: (context) => {
13 | onSubmit(context.duration);
14 | },
15 | },
16 | });
17 |
18 | React.useEffect(() => {
19 | inputRef.current?.focus();
20 | }, [inputRef]);
21 |
22 | const { duration } = state.context;
23 |
24 | return (
25 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/08/timerAppMachine.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign, spawn } from 'xstate';
2 | import { createTimerMachine } from './timerMachine';
3 |
4 | export const timerAppMachine = createMachine({
5 | initial: 'new',
6 | context: {
7 | duration: 0,
8 | currentTimer: -1,
9 | timers: [],
10 | },
11 | states: {
12 | new: {
13 | on: {
14 | CANCEL: {
15 | target: 'timer',
16 | cond: (ctx) => ctx.timers.length > 0,
17 | },
18 | },
19 | },
20 | timer: {
21 | on: {
22 | DELETE: {
23 | actions: assign((ctx) => {
24 | const timers = ctx.timers.slice(0, -1);
25 | const currentTimer = timers.length - 1;
26 |
27 | return {
28 | timers,
29 | currentTimer,
30 | };
31 | }),
32 | target: 'deleting',
33 | },
34 | },
35 | },
36 | deleting: {
37 | always: [
38 | { target: 'new', cond: (ctx) => ctx.timers.length === 0 },
39 | { target: 'timer' },
40 | ],
41 | },
42 | },
43 | on: {
44 | ADD: {
45 | // Uncomment this once you've added the spawn() code:
46 | // target: '.timer',
47 | actions: assign((ctx, event) => {
48 | // Spawn a new timerMachine here (using createTimerMachine)
49 | // and append this timer to context.timers
50 | // ...
51 |
52 | // Change the below line to return the updated context:
53 | // - `context.timers` should contain the appended spawned timer
54 | // - `context.currentTimer` should be the index of that spawned timer
55 | return ctx;
56 | }),
57 | },
58 | CREATE: 'new',
59 | SWITCH: {
60 | actions: assign({
61 | currentTimer: (_, event) => event.index,
62 | }),
63 | },
64 | },
65 | });
66 |
--------------------------------------------------------------------------------
/src/07/timerMachine.final.js:
--------------------------------------------------------------------------------
1 | import { createMachine, assign } from 'xstate';
2 |
3 | const ticker = (ctx) => (cb) => {
4 | const interval = setInterval(() => {
5 | cb('TICK');
6 | }, ctx.interval * 1000);
7 | return () => clearInterval(interval);
8 | };
9 |
10 | const timerExpired = (ctx) => ctx.elapsed >= ctx.duration;
11 |
12 | // https://xstate.js.org/viz/?gist=78fef4bd3ae520709ceaee62c0dd59cd
13 | export const timerMachine = createMachine({
14 | id: 'timer',
15 | initial: 'idle',
16 | context: {
17 | duration: 60,
18 | elapsed: 0,
19 | interval: 0.1,
20 | },
21 | states: {
22 | idle: {
23 | entry: assign({
24 | duration: 60,
25 | elapsed: 0,
26 | }),
27 | on: {
28 | TOGGLE: 'running',
29 | RESET: undefined,
30 | },
31 | },
32 | running: {
33 | invoke: {
34 | id: 'ticker', // only used for viz
35 | src: ticker,
36 | },
37 | initial: 'normal',
38 | states: {
39 | normal: {
40 | always: {
41 | target: 'overtime',
42 | cond: timerExpired,
43 | },
44 | on: {
45 | RESET: undefined,
46 | },
47 | },
48 | overtime: {
49 | on: {
50 | TOGGLE: undefined,
51 | },
52 | },
53 | },
54 | on: {
55 | TICK: {
56 | actions: assign({
57 | elapsed: (ctx) => ctx.elapsed + ctx.interval,
58 | }),
59 | },
60 | TOGGLE: 'paused',
61 | ADD_MINUTE: {
62 | actions: assign({
63 | duration: (ctx) => ctx.duration + 60,
64 | }),
65 | },
66 | },
67 | },
68 | paused: {
69 | on: { TOGGLE: 'running' },
70 | },
71 | },
72 | on: {
73 | RESET: {
74 | target: '.idle',
75 | },
76 | },
77 | });
78 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/01/Timer.final.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | import { useMachine } from '@xstate/react';
6 | import { ProgressCircle } from '../ProgressCircle';
7 |
8 | import { timerMachine } from './timerMachine.final';
9 |
10 | export const Timer = () => {
11 | const [state, send] = useMachine(timerMachine);
12 |
13 | const { duration, elapsed, interval } = {
14 | duration: 60,
15 | elapsed: 0,
16 | interval: 0.1,
17 | };
18 |
19 | return (
20 |
30 |
31 | Exercise 01 Solution
32 |
33 |
34 |
35 |
{state.value}
36 |
send({ type: 'TOGGLE' })}>
37 | {Math.ceil(duration - elapsed)}
38 |
39 |
40 | {state.value === 'paused' && (
41 |
42 | )}
43 |
44 |
45 |
46 | {state.value === 'running' && (
47 |
50 | )}
51 |
52 | {(state.value === 'paused' || state.value === 'idle') && (
53 |
56 | )}
57 |
58 |
40 | {(state.matches('timezonesLoaded') || timezones) && (
41 | <>
42 |
58 | {foreignTime || '--'}
59 |
60 | )}
61 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/00/Timer.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { useReducer } from 'react';
3 | import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5 | import { ProgressCircle } from '../ProgressCircle';
6 |
7 | // Import the timer machine and its initial state:
8 | // import { ... } from './timerMachine';
9 |
10 | export const Timer = () => {
11 | const state = ''; // delete me - useReducer instead!
12 |
13 | const { duration, elapsed, interval } = {
14 | duration: 60,
15 | elapsed: 0,
16 | interval: 0.1,
17 | };
18 |
19 | return (
20 |
30 |
33 |
34 |
35 |
{state}
36 |
{
39 | // ...
40 | }}
41 | >
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 |
52 |
53 |
54 |
55 |
63 |
64 |
72 |
73 |
25 |
26 | Exercise 02 Solution
27 |
28 |
29 |
30 |
{state.value}
31 |
send({ type: 'TOGGLE' })}>
32 | {Math.ceil(duration - elapsed)}
33 |
34 |
35 | {state.value !== 'running' && (
36 |
37 | )}
38 |
39 | {state.value === 'running' && (
40 |
41 | )}
42 |
43 |
44 |
45 | {state.value === 'running' && (
46 |
49 | )}
50 |
51 | {(state.value === 'paused' || state.value === 'idle') && (
52 |
55 | )}
56 |
57 |
32 |
33 | Exercise 00 Solution
34 |
35 |
36 |
37 |
{state}
38 |
dispatch({ type: 'TOGGLE' })}>
39 | {Math.ceil(duration - elapsed)}
40 |
41 |
42 | {state === 'paused' && (
43 |
44 | )}
45 |
46 |
47 |
48 | {state === 'running' && (
49 |
55 | )}
56 | {(state === 'paused' || state === 'idle') && (
57 |
63 | )}
64 |
65 |
30 |
33 |
34 |
35 |
{state.value}
36 |
send({ type: 'TOGGLE' })}>
37 | {Math.ceil(duration - elapsed)}
38 |
39 |
40 | {state.value !== 'running' && (
41 |
42 | )}
43 |
44 |
51 |
52 |
53 |
54 | {state.value === 'running' && (
55 |
58 | )}
59 |
60 | {(state.value === 'paused' || state.value === 'idle') && (
61 |
64 | )}
65 |
66 |
30 |
33 |
34 |
35 |
{state.value}
36 |
send({ type: 'TOGGLE' })}>
37 | {Math.ceil(duration - elapsed)}
38 |
39 |
40 | {state.value !== 'running' && (
41 |
42 | )}
43 |
44 | {state.value === 'running' && (
45 |
46 | )}
47 |
48 |
49 |
50 | {state.value === 'running' && (
51 |
54 | )}
55 |
56 | {(state.value === 'paused' || state.value === 'idle') && (
57 |
60 | )}
61 |
62 |
46 | {(state.matches('timezonesLoaded') || timezones) && (
47 | <>
48 |
64 | {formattedTime || '--'}
65 |
66 | )}
67 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/01/Timer.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | import { ProgressCircle } from '../ProgressCircle';
6 |
7 | // import { useMachine } from '@xstate/react';
8 | import { timerMachine } from './timerMachine';
9 |
10 | export const Timer = () => {
11 | const [state, send] = [{}, () => {}];
12 |
13 | const { duration, elapsed, interval } = {
14 | duration: 60,
15 | elapsed: 0,
16 | interval: 0.1,
17 | };
18 |
19 | return (
20 |
30 |
33 |
34 |
35 |
{state.value}
36 |
{
39 | // ...
40 | }}
41 | >
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 | {state === 'paused' && (
46 |
53 | )}
54 |
55 |
56 |
57 | {state === 'running' && (
58 |
66 | )}
67 |
68 | {(state === 'paused' || state === 'idle') && (
69 |
77 | )}
78 |
79 |
34 |
37 |
38 |
39 |
{state.value}
40 |
send({ type: 'TOGGLE' })}>
41 | {Math.ceil(duration - elapsed)}
42 |
43 |
44 | {state.value !== 'running' && (
45 |
46 | )}
47 |
48 | {state.value === 'running' && (
49 |
50 | )}
51 |
52 |
53 |
54 | {state.value === 'running' && (
55 |
58 | )}
59 |
60 | {(state.value === 'paused' || state.value === 'idle') && (
61 |
64 | )}
65 |
66 |
35 |
38 |
39 |
40 |
{state.value}
41 |
send({ type: 'TOGGLE' })}>
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 | {state.value !== 'running' && (
46 |
47 | )}
48 |
49 | {state.value === 'running' && (
50 |
51 | )}
52 |
53 |
54 |
55 | {state.value === 'running' && (
56 |
59 | )}
60 |
61 | {(state.value === 'paused' || state.value === 'idle') && (
62 |
65 | )}
66 |
67 |
25 |
28 |
29 |
30 |
{state.toStrings().slice(-1)}
31 |
send('TOGGLE')}>
32 | {Math.ceil(duration - elapsed)}
33 |
34 |
35 | {!state.matches({ running: 'normal' }) && (
36 |
37 | )}
38 |
39 | {state.matches({ running: 'normal' }) && (
40 |
41 | )}
42 |
43 |
44 |
45 | {state.matches({ running: 'normal' }) && (
46 |
49 | )}
50 | {state.matches({ running: 'overtime' }) && (
51 |
54 | )}
55 | {(state.matches('paused') || state.matches('idle')) && (
56 |
59 | )}
60 |
61 |
34 |
35 | Exercise 05 Solution
36 |
37 |
38 |
39 |
{state.value}
40 |
send({ type: 'TOGGLE' })}>
41 | {Math.ceil(duration - elapsed)}
42 |
43 |
44 | {state.value !== 'running' && (
45 |
46 | )}
47 |
48 | {state.value === 'running' && (
49 |
50 | )}
51 |
52 |
53 |
54 | {state.value === 'running' && (
55 |
58 | )}
59 |
60 | {(state.value === 'paused' || state.value === 'idle') && (
61 |
64 | )}
65 |
66 |
35 |
36 | Exercise 04 Solution
37 |
38 |
39 |
40 |
{state.value}
41 |
send({ type: 'TOGGLE' })}>
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 | {state.value !== 'running' && (
46 |
47 | )}
48 |
49 | {state.value === 'running' && (
50 |
51 | )}
52 |
53 |
54 |
55 | {state.value === 'running' && (
56 |
59 | )}
60 |
61 | {(state.value === 'paused' || state.value === 'idle') && (
62 |
65 | )}
66 |
67 |
25 |
26 | Exercise 07 Solution
27 |
28 |
29 |
30 |
{state.toStrings().slice(-1)}
31 |
send('TOGGLE')}>
32 | {Math.ceil(duration - elapsed)}
33 |
34 |
35 | {!state.matches({ running: 'normal' }) && (
36 |
37 | )}
38 |
39 | {state.matches({ running: 'normal' }) && (
40 |
41 | )}
42 |
43 |
44 |
45 | {state.matches({ running: 'normal' }) && (
46 |
49 | )}
50 | {state.matches({ running: 'overtime' }) && (
51 |
54 | )}
55 | {(state.matches('paused') || state.matches('idle')) && (
56 |
59 | )}
60 |
61 |
37 |
38 | Exercise 03 Solution
39 |
40 |
41 |
42 |
{state.value}
43 |
send({ type: 'TOGGLE' })}>
44 | {Math.ceil(duration - elapsed)}
45 |
46 |
47 | {state.value !== 'running' && (
48 |
49 | )}
50 |
51 | {state.value === 'running' && (
52 |
53 | )}
54 |
55 |
56 |
57 | {state.value === 'running' && (
58 |
61 | )}
62 |
63 | {(state.value === 'paused' || state.value === 'idle') && (
64 |
67 | )}
68 |
69 |
35 |
38 |
39 |
40 |
{state.toStrings().slice(-1)}
41 |
send('TOGGLE')}>
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 | {!state.matches({ running: 'normal' }) && (
46 |
47 | )}
48 |
49 | {state.matches({ running: 'normal' }) && (
50 |
51 | )}
52 |
53 |
54 |
55 | {state.matches({ running: 'normal' }) && (
56 |
59 | )}
60 | {state.matches({ running: 'overtime' }) && (
61 |
64 | )}
65 | {(state.matches('paused') || state.matches('idle')) && (
66 |
69 | )}
70 |
71 |
35 |
36 | Exercise 06 Solution
37 |
38 |
39 |
40 |
{state.toStrings().slice(-1)}
41 |
send('TOGGLE')}>
42 | {Math.ceil(duration - elapsed)}
43 |
44 |
45 | {!state.matches({ running: 'normal' }) && (
46 |
47 | )}
48 |
49 | {state.matches({ running: 'normal' }) && (
50 |
51 | )}
52 |
53 |
54 |
55 | {state.matches({ running: 'normal' }) && (
56 |
59 | )}
60 | {state.matches({ running: 'overtime' }) && (
61 |
64 | )}
65 | {(state.matches('paused') || state.matches('idle')) && (
66 |
69 | )}
70 |
71 |
43 | {state.context.timers.map((timer, i) => {
44 | return (
45 | {
49 | send('DELETE');
50 | }}
51 | onAdd={() => {
52 | send('CREATE');
53 | }}
54 | data-active={i === state.context.currentTimer || undefined}
55 | />
56 | );
57 | })}
58 |
59 |
60 | {state.context.timers.map((_, index) => {
61 | return (
62 |
{
69 | send({ type: 'SWITCH', index: index });
70 | }}
71 | >
72 | );
73 | })}
74 |
25 |
26 | XState Minute Timer
27 |
28 |
29 |
30 |
{state.toStrings().slice(-1)}
31 |
send('TOGGLE')}>
32 | {Math.ceil(duration - elapsed)}
33 |
34 |
35 | {!state.matches({ running: 'normal' }) && (
36 |
37 | )}
38 |
39 | {state.matches({ running: 'normal' }) && (
40 |
41 | )}
42 |
43 |
44 |
45 |
54 | {state.matches({ running: 'normal' }) && (
55 |
58 | )}
59 | {state.matches({ running: 'overtime' }) && (
60 |
63 | )}
64 | {(state.matches('paused') || state.matches('idle')) && (
65 |
68 | )}
69 |
78 |
79 |
24 |
25 | XState Minute Timer
26 |
27 |
28 |
29 |
{state.toStrings().slice(-1)}
30 |
send('TOGGLE')}>
31 | {Math.ceil(duration - elapsed)}
32 |
33 |
34 | {!state.matches({ running: 'normal' }) && (
35 |
36 | )}
37 |
38 | {state.matches({ running: 'normal' }) && (
39 |
40 | )}
41 |
42 |
43 |
44 |
53 | {state.matches({ running: 'normal' }) && (
54 |
57 | )}
58 | {state.matches({ running: 'overtime' }) && (
59 |
62 | )}
63 | {(state.matches('paused') || state.matches('idle')) && (
64 |
67 | )}
68 |
77 |
78 |
48 | {state.context.timers.map((timer, i) => {
49 | return (
50 | {
54 | send({ type: 'DELETE', index: i });
55 | }}
56 | onAdd={() => {
57 | send('CREATE');
58 | }}
59 | data-active={i === state.context.currentTimer || undefined}
60 | />
61 | );
62 | })}
63 |
64 |
65 | {state.context.timers.map((_, index) => {
66 | return (
67 |
{
74 | send({ type: 'SWITCH', index: index });
75 | }}
76 | >
77 | );
78 | })}
79 |