useReducer no finiste state -> default no side effects included

{/*

Conclusions

Note 1: While coding the regular react component consumed less time, it required juggling two booleans to make them fit all the requirements. Without following TDD , it felt I was hacking guard flags until I had found the right combination. Many times doubting whether I needed a third boolean to cover certain state.

Note 2: Designing the transitions in the Viz tool forced me to think many more scenarios than I would have thought otherwise. TDD usually covers some of these but with a visual tool allowing me to test the flows, I believe it actually helped me cover more scenarios. Having done this first, it was easier to know all the scenarios I need to fulffil on both React+Xstate or React alone.

Note 3: The diagram became my user story/requirements. This could be a great source for discussions between a product owner, a QA and a dev.

Note 4: in Xstate when the state did not have further transitions, the button simply would not change. On the React version, this required me removing the onClick after manually testing out I had missed an scenario

Note 5: While Xstate version seems to carry out more coding and plenty of designing, I can see how fragile my hand react only coding could be compared to the state/transitions definition done in the state machine

Note 6: in Xstate I had defined certain states I ended up ignoring such as hover and focus. CSS already has its own state machine and defines those states for me.

*/}