Hey, guys!

I implemented a state machine with Machinery to control the UI sequence I show to my user. But I have a problem.

When I am in the :ready state, I show a live_component A with Card. This card contains a question and possible answers. If the user selects the answer 1, I change the state to, let’s say “A1” and I show the next live_component B. If the user selects answer 2, I change to “A2” and show the next component C.

So far so good. This is a very basic transition and everything is working well. In my LiveView each live_component is wrapper within a condition like:

if state == “ready” do live_component A end
if state == “A1” do live_component B end
if state == “A2” do live_component C end

What’s the problem? Each live_component is shown one below the other.
So, when I transit to state “A1”, the live_component A is hidden.

So, I needed some way to construct a breadcrumb of the current state, from the initial one until the current state, like: path => [“ready”, “A1”, “B2”, “C1”]

This way, I could have:

if Enum.member?(path, “ready”) do live_component A end ← visible
if Enum.member?(path, “A1”) do live_component B end ← visible
if Enum.member?(path, “A2”) do live_component C end
if Enum.member?(path, “B1”) do live_component D end
if Enum.member?(path, “B2”) do live_component E end ← visible
if Enum.member?(path, “C1”) do live_component F end ← visible
if Enum.member?(path, “C2”) do live_component F end

I thought about using Machinery’s log_transition to manage by my own this new path property. Basically, it would be keeping and appending a new state at the end of the path list.

So, I’d like your opinion about this approach. Not sure if it is the nicest one. I’ve been researching also about the Zipper list/tree and some implementations seem to keep this path as we navigate the tree.