Form field state is linked to main app state

[joepio]

• In Atomic Browser, edit a resource (cmd+e), e.g. make some changes to the title
• Don't save the changes
• The UI state reflects the new input, but the server state does not know this new state

This is confusing to the end-user, as it may give the false impression that state changes have been properly saved.

This happens because the various input fields use useValue, which uses and updates the resource.propvals map directly.

How should we prevent this from happening?

Form fields use some local Context

Instead of updating the real store, the forms just use some react context that's locally scoped. This would probably be a large refactor.

Add a useLocalValue hook which uses CommitBuilder

• resource.set does not directly update the resource.propval values, but resource.commitbuilder.set
• resource.getLocalValue is added, this reads from resource.propval and apply the current changes in CommitBuilder.
• this function is used in a new useLocalValue hook
• This hook is used in all components

A problem with this approach, is that it would break the useValue hook. This would no longer reflect updates as you type, because .set no longer updates the values. It would not work well for a form.

Inform the user that changes are not saved

Render an icon next to the resource (which does show the new title / propvals) to indicate "warning, some changes have not yet been saved"

The user should have a way to reset the state back to the current one. This can be done by simply refreshing the resource.

However, we don't really know how to accurately ask if a resource has any changes. We have a hasUnsavedChanges function, but that also says true if the value is set to the same as current value. Not horrible.

[Polleps]

Closing. Fixed in #900