Flawed EditMetadataDialog design
The EditMetadataDialog uses some bad implementation patterns that lead to bugs and unpredicted behaviour.
- remove the use of contexts
- hoist all state to the topmost component EditMetadataDialog
- reduce the state: you basically only need a list of edit actions as state
- translate user actions directly to edit actions. Never infer actions from existing values. This information is incomplete. This is where the bugs and hard to predict behaviour comes from.
The interface of all components should be much simpler:
EditMetadataDialog(query, uploadId, entryData, onCommit())
EditDatasets(datasets, onAddNew(string), onRemove(dataset), onAdd(dataset))
EditReferences(references, onAdd(string), onRemove(string))
EditComment(comment, onChange(string))
The top-level EditMetadataDialog keeps a list of edit actions. That is basically the only state you need. The rest is derived from that.
Values for the comment, datasets, references to show are computed from entryData and the current list of edit actions. The list of edit actions is modified via the onAdd, onRemove, etc. callbacks that are passed down to the other components. EditReferences, EditComment, EditDatasets are basically completely stateless.
All validation is handled by EditMetadataDialog. Where necessary errors are pushed down to children via props.