Create the first 6 of the 7 GUIs using React+Typescript
In order of increasing complexity/difficulty!
The basic React counter.
This works, but if I were pushing this to prod I'd come back and refactor to using one hook and one changeHandler.
I would like to revisit this with a custom hook (more flexible) like in this blog post
UPDATE and DELETE only enabled if a NAME in the NAMELIST is selected.
When a name is selected, it populates the Inputs, where it can be UPDATED or DELETED. If text is modified, but CREATE is pressed, will create a new NAME.
At any point, pressing CREATE (as long as the inputs are not empty) takes the content of the Inputs, CREATES a new NAME in the NAMELIST, and deselects (which empties the Inputs.)
The FILTER INPUT filters the array for NAMES that match the text in the FILTER INPUT
Click to place a circle. Click a circle again to resize.
Make a bunch of changes and test out undo-redo!