mymai91 / elevator-state-machine Goto Github PK

      return level < chosenLevel;
    },
    isMoveDown: (context, event, { cond }) => {
      const { level, chosenLevel } = context;

      return chosenLevel < level;
    },
  },
},

  <Card title="Door" style={{ width: 300, margin: '0 auto', marginBottom: 50 }}>
    {current.matches('stop') && (
      <div>
        You are at level {level}
        <p>Door Close</p>
      </div>
    )}

    {current.matches({ moving: 'go_up' }) && (
      <div>
        <p>Current level {level}</p>
        <p>Moving up to level {chosenLevel}</p>
      </div>
    )}

    {current.matches({ moving: 'go_down' }) && (
      <div>
        <p>Current level {level}</p>
        <p>Moving down to level {chosenLevel}</p>
      </div>
    )}

    {current.matches({ moving: 'reached' }) && (
      <div>
        <p>Reached level {level}</p>
      </div>
    )}
    {current.matches('up') && (
      <div>
        <p>Press Go Up</p>
        <p>Door opened</p>
        <p>Please Press Level</p>
      </div>
    )}

    {current.matches('down') && (
      <div>
        <p>Press Go Down</p>
        <p>Door opened</p>
        <p>Please Press Level</p>
      </div>
    )}

    {current.matches('error.go_up') && (
      <div>
        You are at level {level}
        <p>Can not go up to level {tmpChosenLevel}</p>
      </div>
    )}

    {current.matches('error.go_down') && (
      <div>
        You are at level {level}
        <p>Can not go down to level {tmpChosenLevel}</p>
      </div>
    )}

    {/* {current.matches('up') && (
      <div>
        {isError ? (
          <div>
            You are at level {level}
            <p>Can not go up to level {tmpChosenLevel}</p>
          </div>
        ) : (
            <div>
              <p>Press Go Up</p>
              <p>Door opened</p>
              <p>Please Press Level</p>
            </div>
          )}
      </div>
    )} */}

    {/* {current.matches('down') && (
      <div>
        {isError ? (
          <div>
            You are at level {level}
            <p>Can not go down to level {tmpChosenLevel}</p>
          </div>
        ) : (
            <div>
              <p>Press Go Down</p>
              <p>Door opened</p>
              <p>Please Press Level</p>
            </div>
          )}
      </div>
    )} */}
  </Card>

  <Card title="Elevator" style={{ width: 300, margin: '0 auto' }}>
    <Radio.Group defaultValue="1" buttonStyle="solid" onChange={e => handleChooseLevel(e)}>
      <Radio.Button value="1">1</Radio.Button>
      <Radio.Button value="2">2</Radio.Button>
      <Radio.Button value="3">3</Radio.Button>
      <Radio.Button value="4">4</Radio.Button>
      <Radio.Button value="5">5</Radio.Button>
    </Radio.Group>
    <div style={{ marginTop: 50 }}>
      <Steps direction="vertical" size="small" current={level - 1}>
        <Step title="Level 1" />
        <Step title="Level 2" />
        <Step title="Level 3" />
        <Step title="Level 4" />
        <Step title="Level 5" />
      </Steps>
    </div>
  </Card>
</div>

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './App.css';

import { useMachine } from '@xstate/react';
import { Machine, assign } from 'xstate';
import { Button, Card, Radio, Steps } from 'antd';

// https://xstate.js.org/viz/

const { Step } = Steps;

function App() {
  let elevatorTransition = null;
  let currentFloor = null;
  const elevatorMachine = Machine(
    {
      id: 'elevator',
      initial: 'stop',
      context: {
        level: 1,
        chosenLevel: 1,
      },
      states: {
        stop: {
          // current is stop the transition only can up or down
          on: {
            UP: 'up',
            DOWN: 'down',
          },
        },
        down: {
          // current is down the transition only can up or stop
          on: {
            // UP: 'up',
            // STOP: 'stop',
            PRESS_LEVEL: {
              target: 'moving.go_down',
              actions: assign({
                level: (context, event) => event.value
              }),
            },
          },
        },
        up: {
          // current is up the transition only can down or up
          on: {
            // DOWN: 'down',
            // STOP: 'stop',
            PRESS_LEVEL: {
              target: 'moving.go_up',
              actions: assign({
                chosenLevel: (context, event) => +event.value,
              }),
            },
          },
        },
        moving: {
          initial: 'reached',
          states: {
            go_up: {
              activities: ['moving_up'],
              // exit: 'logScreenChange',
              // entry: 'moving_up_action',
              on: {
                REACHED: 'reached',
                MOVING: {
                  actions: assign({
                    level: (context, event) => event.value,
                  }),
                  // cond: {
                  //   type: 'movingUpValidate',
                  // }
                },
              },
            },
            go_down: {
              on: {
                REACHED: 'reached',
              },
            },
            wait: {
              on: {
                REACHED: 'reached',
              },
            },
            reached: {
              activities: ['clearElevatorTransition'],
              type: 'final',
            },
          },
          onDone: 'stop'
        },
      },
    },
    {
      actions: {
        moving_up_action: () => {
          currentFloor = level;
          console.log('current.context inside', current.context)
          elevatorTransition = setInterval(() => {
            currentFloor = currentFloor + 1;
            return send({
              type: 'MOVING',
              value: currentFloor,
            });
          }, 1000);
        }
      },
      activities: {
        moving_up: () => {
          currentFloor = level;
          console.log('current.context inside', current.context)
          elevatorTransition = setInterval(() => {
            currentFloor = currentFloor + 1;
            return send({
              type: 'MOVING',
              value: currentFloor,
            });
          }, 1000);
        },
        clearElevatorTransition: () => {
          send('STOP');
          return () => clearInterval(elevatorTransition);
        },
      },
      guards: {
        movingUpValidate: (context, event, { cond }) => {
          console.log('context', context)
        }
      }
    },
  );

  const [current, send] = useMachine(elevatorMachine);
  const { level, chosenLevel } = current.context;

  // console.log('current.value', current.value)
  console.log('current.context outside', current.context)


  if (current.matches('moving') && level === chosenLevel) {
    send('REACHED');
  }

  const handleGoUp = () => {
    send('UP');
  };

  const handleGoDown = () => {
    send('DOWN');
  };

  const handleChooseLevel = e => {
    send({
      type: 'PRESS_LEVEL',
      value: e.target.value,
    });
  };

  return (
    <div className="App">
      <div style={{ margin: 50 }}>
        <Button type="primary" onClick={() => handleGoUp()}>
          Up
        </Button>
        <Button type="danger" onClick={() => handleGoDown()}>
          Down
        </Button>
      </div>

      <Card title="Door" style={{ width: 300, margin: '0 auto', marginBottom: 50 }}>
        {current.matches('stop') && (
          <div>
            You are at level {level}
            <p>Door Close</p>
          </div>
        )}

        {current.matches({ moving: 'go_up' }) && (
          <div>
            <p>Current level {level}</p>
            <p>Moving up to level {chosenLevel}</p>
          </div>
        )}

        {current.matches({ moving: 'reached' }) && (
          <div>
            <p>Reached level {level}</p>
          </div>
        )}

        {current.matches('up') && <p>Go Up</p>}
        {current.matches('down') && <p>Go Down</p>}
      </Card>

      <Card title="Elevator" style={{ width: 300, margin: '0 auto' }}>
        <Radio.Group defaultValue="1" buttonStyle="solid" onChange={e => handleChooseLevel(e)}>
          <Radio.Button value="1">1</Radio.Button>
          <Radio.Button value="2">2</Radio.Button>
          <Radio.Button value="3">3</Radio.Button>
          <Radio.Button value="4">4</Radio.Button>
          <Radio.Button value="5">5</Radio.Button>
        </Radio.Group>
        <div style={{ marginTop: 50 }}>
          <Steps direction="vertical" size="small" current={level - 1}>
            <Step title="Level 1" description="This is a description." />
            <Step title="Level 2" description="This is a description." />
            <Step title="Level 3" description="This is a description." />
            <Step title="Level 4" description="This is a description." />
            <Step title="Level 5" description="This is a description." />
          </Steps>
        </div>
      </Card>

      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
    </div>
  );
}

export default App;

          on: {
            REACHED: {
              target: '#elevator_moving.go_down',
              actions: assign({
                direction: (context, event) => 'down',
              }),
            },
          },
        },
        go_down: {
          entry: 'errorPressDirection',

          on: {
            REACHED: {
              target: '#elevator_moving.go_up',
              actions: assign({
                direction: (context, event) => 'up',
              }),
            },
          },
        },
      },
    },
    moving: {
      id: 'elevator_moving',
      initial: 'finished',
      states: {
        go_up: {
          activities: ['moving'],
          entry: 'reachedLevel',
          on: {
            REACHED: 'reached',
            MOVING: {
              target: 'go_up',
              actions: assign({
                level: (context, event) => event.value + 1,
              }),
              cond: {
                type: 'isMoveUp',
              },
            },
          },
        },
        go_down: {
          activities: ['moving'],
          entry: 'reachedLevel',
          on: {
            REACHED: 'reached',
            MOVING: {
              target: 'go_down',
              actions: assign({
                level: (_context, event) => event.value - 1,
              }),
              cond: {
                type: 'isMoveDown',
              },
            },
          },
        },
        reached: {
          entry: assign({
            doorStatus: 'open',
          }),
          after: {
            1000: 'finished'
          }
          // after: [
          //   {
          //     actions: assign({
          //       doorStatus: 'open',
          //     }),
          //   },
          //   {
          //     delay: 1000,
          //     target: 'finished',
          //   },
          // ],
        },
        finished: {
          type: 'final',
        },
      },
      onDone: {
        target: 'stop',
        actions: assign({
          direction: (_context, _event) => '',
          isDisablePressLevelBtn: true,
          doorStatus: 'close',
        }),
      },
    },
  },
},
{
  actions: {
    reachedLevel: context => {
      const { level, chosenLevel } = context;
      if (level === chosenLevel) {
        send('REACHED');
      }
    },
    errorPressDirection: context => {
      setTimeout(() => {
        return send('REACHED');
      }, 1000);
    },
  },
  activities: {
    moving: (context, _event) => {
      console.log('MOVING');
      let { level } = context;
      setTimeout(() => {
        return send({
          type: 'MOVING',
          value: level,
        });
      }, 1000);
    },
  },
  guards: {
    pressLevelDownValidate: (context, event, { cond }) => {
      const chosenLevel = event.value;
      const { level } = context;

      return chosenLevel < level;
    },
    pressLevelUpValidate: (context, event, { cond }) => {
      const chosenLevel = event.value;
      const { level } = context;

      return chosenLevel > level;
    },
    isMoveUp: (context, event, { cond }) => {
      const { level, chosenLevel } = context;

      return level < chosenLevel;
    },
    isMoveDown: (context, event, { cond }) => {
      const { level, chosenLevel } = context;

      return chosenLevel < level;
    },
  },
},