Does it worth thinking about tracking transitioned states?

[paulofabiano]

Hey, 👋

I'm working in a complex sequential UI pattern where one component is shown after the other according to actions done by the user. Something like this:

Let´s suppose the first interaction opportunity for the user is chosen one of the options from the first level (A, B, C, and D). So, the user chooses D and another UI component, relative to the D option is presented to the user and now the user must choose one of the following options: S, T, U, V, and X.

So, the user chooses T and another UI component is presented to the user with the following options: 1 to 9.

Machinery allows me to build this easily with some transitions but I have a problem: When the second UI is presented, the first one is yet visible. When the third UI is presented, the first and second are yet visible.

So, I was able to manage that by:

• My state field is actually a map like this %{state: "ready", path: ["ready"]}
• When I transit from one state to other, I include the new state in state.path.

In my LiveView, I have all UI components within an if statement, like:

<% if Enum.member?(state.path, "") do %> ... <% end %> (Actually I'm using Surface UI so it is a bit different from that but you got the idea).

It works but I'm not sure if this is an elegant solution and also I started to wonder if worth adding this as a default machinery feature: a path field that returns all the transitioned states: ["ready", "D", "T"]. If the transition allows returning to a previous state, we could just cut the right elements from this same element in the list.

It would not be the complete transition history but more like the absolute path from the initial state until the current one.

Best,
Paulo

[paulofabiano]

I tried this implementation with persist/2 to define the path before updating the state. This way, in case I transit to a previously transitioned state, I just rewind the path to the first occurrence:

def persist(struct, next_state) do
    path =
      case Enum.member?(struct.path, next_state) do
        true ->
          path =
            Enum.split_while(
              struct.path,
              fn state ->
                !String.equivalent?(state, next_state)
              end
            )
            |> elem(0)

          path ++ [next_state]

        false ->
          struct.path ++ [next_state]
      end

    %{struct | state: next_state, path: path}
  end