Rewrite CodeEditor using state machines

[Diel Duarte]

[Diel Duarte]

So @StanleySathler, I've drafted some ideas that I think can guide us to finish the code editor

first here's the list of code editor features, in the version 1.0

• copy
• refetch ? I think we can move it to the next milestone...
• switch contexts (query or mutation, variables, headers)

Copy

I think we don't need a loading state in this case, since the copy function is pretty fast, so I think doesn't worth the effort. after we've got to the success or error state, it should back to the idle state after some milliseconds defined (something like 500ms).

Refetch

• it should basically get all data we have query/mutation, variables and headers and send a new request.
• in loading state, let's make the icon rotate smoothly
• After the request completed it should back to the idle state and select the newest request in the list
• if the request is completed with an error, we show the error state and then after some milliseconds we back to the idle state.

switch contexts

I thought tabs wouldn't be the best solution since we will have the query filters at the top and other stuff, so I came up with this idea:

hovering options, I thought about just a slide effect showing the rest of the word:

in these examples below, let's suppose the user has selected variables, in the first example he was opening a query so the query goes to the options with its color (green):

in the example below he was opening a mutation so the mutation goes to the options with its color (orange):

I may show up with some state machine ideas tomorrow, let me know what do u think! 👊

obs: ignore spaces mistakes, I'm not a good designer hehe let's make it better in code

[Diel Duarte]

here's a state machine draft for that, let me know what do you think. in the code will need some DRY applied, but as I said, just a draft.

https://xstate.js.org/viz/?gist=c87dd4a0bd89e2bc91db2ad18403a4ab

[Stanley Sathler]

Thanks for the hard work preparing all these details, @dielduarte! 🌟

Due the lack of experience handling state machines with State, so far, I don't have anything extra to add - perhaps in the near future I can provide further feedback. For now, I'm just planning to put my fingers to work upon this.

Quick question: do you foresee any kind of situation that could lead to a failed "copy to the clipboard"?

[Diel Duarte]

@StanleySathler Honestly, I don't think this is gonna happen especially due to the simplicity of the copy helper function.

you can either skip this state for a while or maybe involve the fn in a try-catch and treat any possible error as failed, both options I'm okay with!