withEditable HOC

[hoodsy]

@maticzav Not sure how exactly to wire this up to work with mutations – I imagine the HOC receives handleSave or something like that, so that each field can be updated in place.

homeroom/www/sections/dashboard/classInformation.js

Lines 159 to 162 in e1a7d44

	<EditableClassTitle
	value={data.class.name}
	handleSave={() => {}}
	/>

Demo: https://homeroom-live.slack.com/files/U8SBTK67M/FBNKDHE3H/witheditable.mov

[maticzav]

I think there are two options, but I can tell you upfront that I lean towards the second one. 😂

So, the saving process means taking all the current values and running Apollo mutation which updates the saved values of the fields. I imagine we can achieve this most easily if we use getInitialProps function and query everything once customer lands on our page, and copy everything to the internal state.

Once the customer changes values, we only update the component state and, in the end, run a mutation which updates values on the server as well.

My thoughts on how we should trigger the update;

1. Use debounce function and save automatically after some time.
2. Display a save button and save everything once it's pressed or the customer submits the form.

[hoodsy]

If the user is editing text inline, the expectation is that their changes will be saved after each edit... If we go save button, I think a typical form makes more sense.

That being said, what if we had the same save trigger wired up to each EditableComponent? Each time one of them is changed and the user hits enter, clicks the confirm checkmark, or clicks off the input, then the save is registered

[maticzav]

Whoa yea that could be cool! Have you seen onBlur property yet? I think we could do a ful mutation every time something changes and make it visible that it changed - maybe we should disable everything when it’s updating and show indicator?

I think we can wire everytihng up in a Mutation component and just include the trigger inside every component

[hoodsy]

Yes this should work! Do we even need to disable changes while loading?

…

On Wed, Jul 11, 2018, 1:17 AM Matic Zavadlal ***@***.***> wrote: Whoa yea that could be cool! Have you seen onBlur property yet? I think we could do a ful mutation every time something changes and make it visible that it changed - maybe we should disable everything when it’s updating and show indicator? I think we can wire everytihng up in a Mutation component and just include the trigger inside every component — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#28 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEQruh-3jK17P-UcEzYBYaivq2JvJ2F2ks5uFbSOgaJpZM4VIhSN> .

[maticzav]

I would say it depends; if we want to make it feel responsive then no. I think it might be good to keep states in sync this way. But now that I think of it might be unnecessary. 👌

[hoodsy]

Needs to be wired up but won't be used in this release.