iterating and reacting

I am working to keep my React skills sharp while I am still on the jobhunt. (Also, some interviewers ask me to bring along some code to discuss, but the vast majority of the React code I've produced I'm not at liberty to share.)

One practical tool I've iterated on is a "pill tracker" - a tool that let me make up printable sheets to keep in the kitchen to keep track of Dean's (RIP, dear kitty) sometimes complicated pill and feeding schedule.

My first approach was the barebones pill charter, and used this exremely geeky textarea-based UI:

The UI, with its ad-hoc syntax, is obviously not very friendly for most folks, but has some advantages. For one thing, it's very easy for the programmer :-D But also it's very easy to share the a schedule with someone else, and you can apply other text tools if you like - copy and pasting lines is actually a very fluid way to work.

Later I made med-sched-grid. I upgraded the look and feel:

More importantly it actually has a UI. Items are constructed as a list on top, with the grid underneath. Maybe the most useful feature is being able to jump ahead a block of time - combined with how it uses localstorage or links to restore what you entered last time, getting the next month's schedule is just a click away (this was useful for the kitty meds with a 2 week pace)

I wrote that as a everything-in-one-html-document app (including the svg graphics) which is a fun, if somewhat gimmicky, way of coding.

I decided to rewrite in React and came up with med-plan-print. I realized the old UI was a little weird because there was only a loose connection between the list at top and the grid itself. My first thought was to allow each column to activate a modal editor, but that was a little ugly, and still separated the editing from its context. With a little cleverness I could allow a more direct connection between the column and its editable metadata:

 (the triangle is made via CSS cleverness, and rests inside the TH for proper locating, but then is shoved up to connect it visually with form.)

The editor is actually semi-modal; the default state of the UI use the same space for the overall controls:

If started fresh, the page opens up the blank editor. Then that uses the same green which is a visual hint for the plus button (I'm still debating if each of the round buttons should have a caption underneath, or if the iconography carries the load.)

This was built in React using parcel and Create App. I threw in some tests (the "going backwards in time" calculation was especially fraught) and put in on github.