Save State

[Stebalien]

Currently, the back and forwards buttons don't work and nothing is saved on restart. It would be nice if we could save state per lesson (just record the last code autosaved from the editor).

[mikeal]

+1, this would also fix an annoying issue when developing lessons, the code gets reset every time you change the code locally and webpack dev server hot reloads the components in the page.

[mikeal]

@olizilla if we implement this we'll need a "reset" button to clear out the cached content. What do you think about placement and styling for this?

[olizilla]

One step ahead! I put a reset button on the lesson layout proposal: #15 (comment)

[terichadbourne]

Within a specific exercise, are we looking for a way for you to knowingly save your state (click a save button when ready) or for the website to save it regularly without you noticing?

A second but related issue is saving a not started / in progress / completed state that would help us implement an accurate progress bar rather than one that just presumes you've done all the lessons before the one you're on (see issue #70). Would we want a login for this so people could access their history across devices, or just set up caching on the device so it's consistent while they keep using that machine? If just caching, what's the best choice for this? IndexedDB? LocalStorage?

[terichadbourne]

Question from @mikeal, as shared elsewhere:

Rather than having a "reset" button, can we note that we've loaded code from a saved state and the present a reset link/button in the text? It's not super clear in the current mocks when we're in a saved state or not.

[mikeal]

Would we want a login for this so people could access their history across devices, or just set up caching on the device so it's consistent while they keep using that machine? If just caching, what's the best choice for this? IndexedDB? LocalStorage?

Just cache it locally for now. I'd like to avoid having users and permissions and whatnot as long as we can :)

[terichadbourne]

@mikeal Do you have a sense of whether I should be trying Vue itself or IndexedDB, LocalStorage, etc. to cache the contents of that exercise box? I presume we're looking for the alternative that's most persistent short of implementing a login system, but I'm not sure which that is. I do remember learning how to hook a form to an object in Vue so I could potentially save state on keyup there?

Regarding your earlier comment, I'm happy to implement a message that appears when it has started saving your response, with a clickable link in the message that lets you go back to the original state of the exercise, instead of a reset button.

[mikeal]

With something this simple my instinct is to just use standard browser API's.

I'd just use localStorage. The easiest way to integrate is to just change this line https://github.com/ipfs-shipyard/proto.school/blob/master/src/components/Lesson.vue#L180 to be something like:

code: getCode(self)

And we'll need to create a function that looks at other settings (lesson name and number) in order to see if we have a saved state for the exercise.

[terichadbourne]

Teri and Mikeal will do this on a screenshare

[terichadbourne]

Scheduled a Zoom call for Monday 11/19 at 11am Pacific / 2pm Eastern to work on this with @mikeal driving and @terichadbourne absorbing. If anyone else would like an invite, just let me know.