Refine microcosm-http. and microcosm-dom Add file-uploader example #509

nhunzaker · 2018-04-24T12:53:45Z

This commit moves the file-upload example from microcosm-http over to the examples directory and updates it with a cleaner interface.

In the process of doing this, I made a few improvements that I've pointed out within the file diff.

nhunzaker · 2018-04-24T12:55:24Z

packages/examples/file-uploads/src/views/file-uploader.js

+        onSend={this.trackProgress}
+      >
+        <Progress status={status} file={file} onCancel={this.queue.clear} />
+


New here: you can pass a Subject to ActionForm and ActionButton. This lets you control the underlying scheduling.

New here: Subject:clear(). This lets you cancel all subscriptions but keep the subject open. It's sort of like a reset.

nhunzaker · 2018-04-24T12:55:51Z

packages/examples/file-uploads/src/views/file-uploader.js

+  trackProgress = action => {
+    action.every(iteration =>
+      this.setState({ status: iteration.status, file: iteration.payload })
+    )


New here: action.every is a subscription callback that fires on every status change.

nhunzaker · 2018-04-24T12:57:00Z

packages/microcosm-dom/src/action-button.js

@@ -15,7 +15,7 @@ export function generateActionButton(createElement, Component) {
    }

    componentWillUnmount() {
-      this.queue.cancel()
+      this.queue.complete()


I don't want to cancel. That would cancel any outstanding actions, which might not be what the user wants. If that is the desired behavior, you can now do that yourself.

nhunzaker · 2018-04-24T12:59:51Z

packages/microcosm-dom/src/action-form.js

@@ -43,21 +43,19 @@ export function generateActionForm(createElement, Component) {

    submit(event) {
      let result = this.send(this.props.action, this._parameterize())
+      let action = Subject.hash(result)


Wrapping the result in Subject.hash gives me either:

The same action back

A Subject version of whatever send returned.

That means you can pass anything into the send prop and the action form will turn it into the same interface as an action (Subjects). You'll always get a Subject back from send now, every time.

So you don't really need a repo. Just a send method:

let send = () => Promise.resolve(true) let callback = (subject) => {} <ActionButton send={send} onSend={callback}/>

ipbrennan90

This is really cool Nate. I like the additional control your adding by including the Subject.cancel() stuff. Excited to use this soon. 👍

efatsi · 2018-04-24T16:21:36Z

packages/examples/file-uploads/src/views/file-uploader.js

+import { Progress } from './progress'
+
+function asFormData(form) {
+  return { data: new FormData(form) }


what's FormData?

I think a part of XMLHttpRequest 2.0:

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Ahh, is it naive to think that this would be a reasonable default for the serializer ActionForm property?

Actually I was just typing this up. I'd be okay with dropping form-serialize and just making this the default. I wonder what turning FormData into JSON would look like.

Issue filed:
#510

efatsi · 2018-04-24T16:23:41Z

packages/examples/file-uploads/src/views/file-uploader.js

+    file: undefined
+  }
+
+  queue = new Subject()


is Subject the de facto implementation of an Observable?

I'm using it waaay more than Observable. It's a way to get the observable API externally, like this, but inside out:

new Observable(observer => { observer.next(1) observer.next(2) observer.next(3) observer.complete() })

Can be:

let subject = new Subject() subject.next(1) subject.next(2) subject.next(3) subject.complete()

The advantage of an observable is that the behavior inside is lazy based on if anything subscribes to it. Subjects are more active.

That's awesome. Not sure if Subject is already in your crosshairs for "needs a better name", but it's quite vague at the moment.

It is. It comes from Observables literature, but I agree that it's vague. I'd be happy to figure out another name.

Working more on scheduler stuff, I have some times wondered about calling this Job or Process. But I dunno.

Issue filed:
#511

zporter · 2018-04-24T16:27:42Z

packages/microcosm/test/unit/subject.test.js

@@ -168,6 +168,30 @@ describe('Subject', function() {
    })
  })

+  describe('clear', function() {
+    it('resets the usbject', function() {


typo: subject

Done in 0e03b9c

zporter · 2018-04-24T16:29:07Z

packages/microcosm-dom/test/presenter.test.js

@@ -540,7 +540,7 @@ describe('::teardown', function() {
    expect(renders).toBe(1)
  })

-  it('changes during teardown do not cause a recalculation', function() {
+  it('changes during teardown do not cause a recalculation', async function() {


total nitpick, but this might read better as:

it('does not recalculate when changes during teardown occur'

Great suggestion!

Done in 0e03b9c

efatsi · 2018-04-24T16:29:15Z

packages/microcosm/test/unit/subject.test.js

@@ -168,6 +168,30 @@ describe('Subject', function() {
    })
  })

+  describe('clear', function() {
+    it('resets the usbject', function() {


zporter

this looks awesome, @nhunzaker!

efatsi · 2018-04-24T16:29:43Z

Cool stuff, like the way that click and submit have simplified down.

codecov-io · 2018-04-24T21:54:55Z

Codecov Report

❗ No coverage uploaded for pull request base (master@afbf1cb). Click here to learn what that means.
The diff coverage is 100%.

@@           Coverage Diff            @@
##             master    #509   +/-   ##
========================================
  Coverage          ?   99.7%           
========================================
  Files             ?      27           
  Lines             ?     672           
  Branches          ?     133           
========================================
  Hits              ?     670           
  Misses            ?       2           
  Partials          ?       0

Impacted Files	Coverage Δ
packages/microcosm-dom/src/action-button.js	`100% <100%> (ø)`
packages/microcosm/src/history.js	`100% <100%> (ø)`
packages/microcosm-dom/src/presenter.js	`100% <100%> (ø)`
packages/microcosm-dom/src/action-form.js	`100% <100%> (ø)`
packages/microcosm/src/subject.js	`100% <100%> (ø)`
packages/microcosm-http/src/http.js	`100% <100%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update afbf1cb...d72a0ef. Read the comment docs.

nhunzaker · 2018-04-24T21:57:22Z

Thanks, guys!

Add file-uploader example. Updates to microcosm-dom

7e60280

nhunzaker added the in progress label Apr 24, 2018

nhunzaker commented Apr 24, 2018

View reviewed changes

ipbrennan90 approved these changes Apr 24, 2018

View reviewed changes

efatsi reviewed Apr 24, 2018

View reviewed changes

zporter reviewed Apr 24, 2018

View reviewed changes

efatsi reviewed Apr 24, 2018

View reviewed changes

zporter approved these changes Apr 24, 2018

View reviewed changes

This was referenced Apr 24, 2018

[microcosm-dom] Replace form-serialize with new FormData()? #510

Open

[microcosm] Finalize terminology #511

Open

nhunzaker added 2 commits April 24, 2018 17:48

Fix typos and rephrase some tests

0e03b9c

Use older version of workspaces pattern

d72a0ef

nhunzaker merged commit f9b316f into master Apr 24, 2018

nhunzaker removed the in progress label Apr 24, 2018

nhunzaker deleted the microcosm-dom-updates branch April 26, 2018 21:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refine microcosm-http. and microcosm-dom Add file-uploader example #509

Refine microcosm-http. and microcosm-dom Add file-uploader example #509

nhunzaker commented Apr 24, 2018 •

edited

Loading

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

ipbrennan90 left a comment

efatsi Apr 24, 2018

nhunzaker Apr 24, 2018

efatsi Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

efatsi Apr 24, 2018

nhunzaker Apr 24, 2018

efatsi Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

zporter Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

zporter Apr 24, 2018

nhunzaker Apr 24, 2018

nhunzaker Apr 24, 2018

efatsi Apr 24, 2018

zporter left a comment

efatsi commented Apr 24, 2018

codecov-io commented Apr 24, 2018

nhunzaker commented Apr 24, 2018

Refine microcosm-http. and microcosm-dom Add file-uploader example #509

Refine microcosm-http. and microcosm-dom Add file-uploader example #509

Conversation

nhunzaker commented Apr 24, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ipbrennan90 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zporter left a comment

Choose a reason for hiding this comment

efatsi commented Apr 24, 2018

codecov-io commented Apr 24, 2018

Codecov Report

nhunzaker commented Apr 24, 2018

nhunzaker commented Apr 24, 2018 •

edited

Loading