Each of the edit/home/new pages renders its save button differently. This makes it a common function with all the same possible render states (does the document have unsaved changes? Is it already saved? Was it auto-saved?).
- Common save button
- Adds the "save" button to /home page which wasn't there before
- Animates the "save" button in /home and /new when the user makes their first change to signal that yes, you do have to actually click the save button if you want to keep this.
- "reminder... you haven't saved for X minutes" still not functional on /new and /home since that involves more moving pieces.
/editPage.jsx uses `unsavedChanges` state to detect when autosave should fire, or unsaved changes warning should display.
/homePage.jsx uses a similar check (different variables) to detect when to show the popup "save now"! button
/newPage.jsx doesn't do any of this, but probably should pop up a warning when saving hasn't happened for a long time
This commit just gives all of the pages the same common `unsavedChanges` state, calculated in the same way, and updates any sections that depend on that updated state.
This is precursor work to adding "unsaved changes" warnings to all three pages.
Use normal setTimeout for autosave instead of _.debounce. Fixes a lot of issues with functional component.
Also fix existing bug where multiple "unsaved data" warnings could be queued up if the user keeps typing while the warning is being displayed.
debouncing does not play nice with functional component. Any debounced function gets locked in as the original state, meaning we keep saving the original document and overwriting the current document when a save fires.
Must pass in the parameters instead of pulling directly from state to work properly.
