Prompt coders to log in when they do significant work logged out

[outoftime]

While it’s fine to use Popcode logged out for quickly practicing coding techniques, we don’t want students doing a significant amount of work without it being saved. The always-visible “log in to save” prompt in the top bar is definitely an improvement, but I think we can be a bit more annoying about it.

In particular, I would propose a banner notification when the student has done a significant amount of work logged out. “A significant amount of work” might be measured in time since they started working, or number of discrete changes to the current project, or some combination of the two.

At such time as the wire is tripped for “a significant amount of work has been done”, we’ll want to display a banner notification (probably using a not-yet-existing “warning” yellow) that informs the user that their work won’t be saved and prompts them to log in. I think this idea is entirely stolen from CodePen.

I think it’s probably best to only display this notification once per session.

[outoftime]

OK @MaggieWalker I just rebased https://github.com/popcodeorg/popcode/pull/1584 so feel free to grab that branch. Also can you go to https://github.com/popcodeorg and accept the invite so I can assign this issue to you? Thanks!

[MaggieWalker]

Got it! @outoftime

[wilsonj806]

Hey Matt, so I looked at the code and got an idea of how to implement this. The save notification will probably say something like:

It's been n minutes since you last saved. Login to save your progress, or if that's unavailable, create a snapshot of your work and send it to yourself! I'd probably be adding a key to UI state like, ui.saveNotificationCount that tracks how many times the save notification triggers. The notification gets rendered as a big banner that slowly slides down from the main navbar and gets updated on an interval.

It'll probably be something like this React component I made real fast.

Let me know if this sounds sane/ if there are any potential issues with my idea.

[outoftime]

Hey @wilsonj806 I like the direction you’re taking this! A few bits of feedback:

• I’d be inclined to keep the message very short and sweet, since students working in the editor are more likely to ignore a message with extra detail. Maybe something as simple as, Log in to save your work. Suggesting a snapshot is a nice idea if we haven’t been able to load gapi for some reason (which would prevent the student from logging in), but we can detect that scenario and display a different message (rather than always suggesting both).
• As a corollary, “since you last saved” isn’t a meaningful concept in Popcode. If the student is logged in, everything they do is automatically saved. If the student is not logged in (the case we’re concerned about here), nothing is saved.
• I’m not sure we need to show the message repeatedly—if anything, we might want to just display it permanently until the student actually logs in (i.e. not have a close button for the message).
• I’m not sure exactly what you have in mind for “a big banner that slowly slides down from the main navbar” but my recommendation would be to just use the existing notification components structure. We can always do something more custom as a followup if we feel like that isn’t loud enough

Let me know what you think of the above—once we’re in agreement on the details of the behavior I’m happy to dive into your ideas about implementation. Thanks!

[wilsonj806]

Makes sense, I think for my message I was going for a message with a similar vibe to how some MMO games warn you multiple times if your play session is really long, but keeping it short and sweet is probably better. And you're right on the banner part, not sure where I was going with it.

As for implementation, I need to familiarize myself a bit more with how Popcode's state is managed ~~and learn Redux Sagas real fast~~, but I'm open to your initial thoughts on it.

[outoftime]

OK cool! I don’t want to be overly prescriptive about the implementation, so I’ll hold back my thoughts until you’ve formulated a proposal. Let me know if you get stuck though and I’m happy to jump in with suggestions 🙂

[wilsonj806]

Yep, so in terms of implementation, I'm thinking that I'd be coding it as a standalone React component that has a useEffect hook for dispatching the notification and renders null. My train of thought for that is that what we're trying to doesn't really feel like it fits in any of the existing components since we're scheduling a notification. The implementation will probably be similar to the Code Sandbox I linked above.

And then just a quick question, are you guys using the new useDispatch/ useSelector hooks for React Redux?

[outoftime]

Hey @wilsonj806 so that’s not a bad idea but Popcode’s architecture rests heavily on the Redux layer and React components are mostly just for presentational concerns. I know that’s become a bit unfashionable in the React community but it does work pretty well! Would you consider putting the business logic for this feature in a saga or a logic?

[wilsonj806]

@outoftime Hey Matt, I would definitely be down to do that, but I've been a bit busy recently so I'm not sure I'll get around to messing around with it in a reasonable amount of time.