Examples please

[michel-reyes]

I read the article, the git documentation...but I don't know how to implement the state machine (stent( in my project. Any basic project example (more explanatory than the TODO example?)
_

[michel-reyes]

For exmaple. Hot to use stent with UI events?

[krasimir]

Hey, there's an example with React here https://github.com/krasimir/stent/blob/master/docs/examples.md#integration-with-react If you need a more complex example can you please come with a use case. I'll be happy to setup one.

[michel-reyes]

For example I'm working with another library from you "Navigo" :) and I want to move between pages using stent, my problem are the links. Right know it took my 3 steps (states) to get to a page (D), but from that page I want a link to the first one (A), how could I make to go from D to A in only one step?

const machine = stent.Machine.create('app', {
  state: { name: 'login' },
  transitions: {
    login: {
      sign: 'signing',
      enroll: 'enrolling',
      changePassword: 'changingPassword',
    },
    signing: {
      signing: 'signLoading',
    },
    signLoading: {
      fail: 'login',
      success: 'sendTo',
      unknowDevice: 'registerDevice',
    },
    registerDevice: {
      register: 'checkingDevice',
    },
    checkingDevice: {
      fail: 'registerDevice',
      success: 'login',
    },
  },
});

I want to go from registerDevice to Login

[krasimir]

I'm glad that you are using Navigo as well. I miss some context to answer properly here tho. What you control with Stent, is it pages or it is states of your app. It looks like you are mixing two different responsibilities.

[michel-reyes]

Exactly I'm a little confuse in how to use stent and I'm mixing things. I'm not sure in how implement stent to control the stet of my app. I would like to do 2 things:

1. control if a user can make an action in my app
2. control if a user can go to an specific URI
   I'm using Vanilla JS with no framework.
   Thk for your time krasimir

[krasimir]

Well, I'll suggest to define what does state means to your app. This could be for example:

• If the user is logged in or not
• If the logging is in progress or not
• Is the device working or not

Then put those states in a state machine. The second thing is: do you want to send the user to a different page based on the app state. If yes then I'll suggest to create a middle man and put the required logic there. For example, if you want to forward the user to a login page if he/she is not logged in you do something like:

if (isTheUserLoggedIn() === false) {
  router.navigate('login);
  machine.login();
}

So, my point is that the routing and the state management should be separated.