Use custom events for inputs #42

drwpow · 2019-03-20T12:56:18Z

Reason for change

Use Stencil’s Events API to listen to feature input changes, and keep track of latest state in parent component (for use in pricing API, which will come in a followup PR; this is just about tracking the state for now)

Why is this better than using state?
I really like being able to use uncontrolled inputs for performance, as well as minimize the amount of state & prop drilling.

Testing

When changing events, every input change should log the current state to the console
When changing plans, the new defaults should override the user settings

I didn’t add tests to this PR. While working on it, I had an idea for testing that would require a refactor. I’d rather add tests in a followup PR that (hopefully) cleans up a lot of the custom plan logic. I don’t think I can necessarily reduce the amount of logic there, but I had some ideas on how to at least make it easier to read, and easier to test.

src/components/mf-select/mf-select.tsx

src/components/custom-plan-feature/custom-plan-feature.tsx

manifold-bot · 2019-03-20T22:42:03Z

Codecov Report

Merging #42 into master will decrease coverage by 65.55%.
The diff coverage is 42.85%.

@@             Coverage Diff             @@
##           master      #42       +/-   ##
===========================================
- Coverage     100%   34.44%   -65.56%     
===========================================
  Files           1        4        +3     
  Lines           2       90       +88     
  Branches        0       31       +31     
===========================================
+ Hits            2       31       +29     
- Misses          0       59       +59

Impacted Files	Coverage Δ
src/spec/mock/catalog.ts	`100% <100%> (ø)`
src/components/plan-details/plan-details.tsx	`27.5% <41.17%> (ø)`
src/utils/currency.ts	`50% <0%> (ø)`

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 1833266...044e85d. Read the comment docs.

drwpow · 2019-03-21T00:26:34Z

src/components/mf-select/mf-select.tsx

  @Prop() required?: boolean;
-  @Prop() onChange: (e: UIEvent) => void;
+  @Event() onInputChange: EventEmitter;


At first, I was hoping we could pass an eventName as a prop to the component, and use that here. But the way the custom events work, this more or less has to be a hard-coded value.

So instead, I have a generic onInputChange event being submitted so we can re-use these inputs everywhere.

On the listener side, it’s accepting all these events, but filtering out the ones it doesn’t care about. So basically, if we don’t care about listening to certain inputs we just don’t create a listener for them.

drwpow · 2019-03-21T00:29:03Z

src/components/custom-plan-feature/custom-plan-feature.tsx

-        return null;
-    }
-  }
-}


I started out trying to make changes in this file, then I found myself passing so many props back-and-forth it just seemed simpler to delete it 🤷‍♂️.

It made plan-details.tsx longer, but I’d like to refactor that in a followup PR to abstract a lot of the display logic into utility functions, and make that component far easier to read.

drwpow · 2019-03-21T00:29:31Z

src/components/mf-select/mf-select.tsx

+    if (!e.target) return;
+    const { value } = e.target as HTMLSelectElement;
+    this.onInputChange.emit({ name: this.name, value });
+  };


In the event details, we’re submitting the name of the input so that above in the listener, we can filter out the events with names we don’t care about.

drwpow · 2019-03-21T00:30:28Z

src/components/mf-select/mf-select.tsx

+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: string) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
+  }


@Watch is necessary here only because of the plan change.

The defaultValue is deterministic, and won’t ever update as the user changes input values. It will change, however, if a user switches plans because each plan can have its own defaults. So this is basically a way of emitting a “reset” event to the listener when the plan changes.

I was totally wondering if @Watch members allowed you to reference this, because the docs aren't really clear on that. 💯

drwpow · 2019-03-21T00:31:47Z

src/components/mf-select/mf-select.tsx


 @Component({
  tag: 'mf-select',
  styleUrl: 'mf-select.css',
  scoped: true,
 })
 export class MfSelect {
-  @Prop() options: Option[] = [];
-  @Prop() selectedValue?: Value;
+  @Prop() defaultValue?: string;


Borrowed the defaultValue from React. Technically, this works like value, and can overwrite the user’s changes. But the way it’s passed down, it’ll never change so it should allow the user to modify inputs freely (kinda like how HTML works—value only determines the default. Actually there have been discussions to change this in React)

davejsdev · 2019-03-21T12:30:56Z

src/components/plan-details/plan-details.e2e.ts

+describe(`<plan-details>`, () => {
+  it('sets its initial features correctly', async () => {
+    const page = await newE2EPage({ html: `<plan-details />` });
+    await page.$eval('plan-details', (elm: any) => {});


Is this doing anything right now?

Oh I was going to write some tests then got distracted trying to refactor too much. I want to pull out some of that display logic and test it separately, but there are definitely still tests I can still write here. I’ll add those.

davejsdev · 2019-03-21T15:37:41Z

src/components/plan-details/plan-details.spec.ts

+      storage: 5,
+    });
+  });
+});


nice, it gets picked up in the code coverage too :)

davejsdev

💯

drwpow · 2019-03-21T16:19:26Z

src/components/plan-details/plan-details.tsx

+    };
+    // TODO: replace this with pricing calculation call
+    console.log(this.features);
+  }


@sslotsky alternative to @Listen. Seems a bit cleaner because it’s tied directly to the inputs and we no longer do the filtering like you suggested. WYT?

sslotsky · 2019-03-21T17:13:34Z

src/components/plan-details/plan-details.tsx

+
+  // TODO: extract these into utils/ to be tested
+  getBooleanDefaultValue(value: Catalog.FeatureValueDetails): boolean {
+    return value.label === 'true' || false;


Is the || false actually needed?

Ah not anymore. In our spec, confusingly, feature.value may sometimes be missing, and it’s honestly no wonder why we’ve had such a hard time with data. The way this got refactored now, though, I’m handling the case where feature.value isn’t defined earlier so this is no longer needed.

sslotsky · 2019-03-21T17:16:16Z

src/components/plan-details/plan-details.tsx

+            min={min}
+            name={feature.label}
+            onUpdateValue={({ detail: { name, value } }: CustomEvent) =>
+              this.setFeature(name, value)


Is this.setFeature ever called directly, or are we always receiving the detail object and then destructuring it before calling setFeature? If we never call it directly, could we just redefine the setFeature function to accept the detail object?

We could; in my brain it just seemed confusing to have event-specific params passed to a method that is setting internal state. But yeah we’re not testing this or calling it elsewhere (nor do I plan to), so just a naming opinion, I guess. I can rename that function & let it handle custom events.

sslotsky

Life's a garden, baby, dig it!

A couple small, non-blocking suggestions.

drwpow added the wip Work in Progress label Mar 20, 2019

drwpow had a problem deploying to manifold-ui-stage-pr-42 March 20, 2019 12:56 Failure

drwpow commented Mar 20, 2019

View reviewed changes

src/components/mf-select/mf-select.tsx Outdated Show resolved Hide resolved

drwpow commented Mar 20, 2019

View reviewed changes

src/components/custom-plan-feature/custom-plan-feature.tsx Outdated Show resolved Hide resolved

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 20, 2019 22:39 Inactive

drwpow force-pushed the dangodev/7596-feature-state branch from f22e02b to 8146363 Compare March 21, 2019 00:21

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 00:21 Inactive

drwpow changed the title ~~In-progress: use custom events for inputs~~ Use custom events for inputs Mar 21, 2019

drwpow removed the wip Work in Progress label Mar 21, 2019

drwpow commented Mar 21, 2019

View reviewed changes

drwpow force-pushed the dangodev/7596-feature-state branch from 8146363 to 67ee295 Compare March 21, 2019 00:34

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 00:35 Inactive

drwpow self-assigned this Mar 21, 2019

davejsdev reviewed Mar 21, 2019

View reviewed changes

drwpow added 2 commits March 21, 2019 07:37

In-progress: use custom events for inputs

8cd17b4

Pass events to parent component

2969a78

drwpow force-pushed the dangodev/7596-feature-state branch from 67ee295 to 2969a78 Compare March 21, 2019 13:37

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 13:38 Inactive

Add unit test for plan-details

616e816

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 15:31 Inactive

davejsdev reviewed Mar 21, 2019

View reviewed changes

src/components/plan-details/plan-details.spec.ts

storage: 5,

});

});

});

Copy link

davejsdev Mar 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice, it gets picked up in the code coverage too :)

davejsdev approved these changes Mar 21, 2019

View reviewed changes

Add E2E test

dcc095c

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 16:03 Inactive

Replace Listener with callback

1cbc48e

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 16:18 Inactive

drwpow commented Mar 21, 2019

View reviewed changes

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 16:46 Inactive

Make E2E props more readable

ef5db1a

drwpow force-pushed the dangodev/7596-feature-state branch from 62e5d4b to ef5db1a Compare March 21, 2019 16:52

drwpow temporarily deployed to manifold-ui-stage-pr-42 March 21, 2019 16:52 Inactive

sslotsky reviewed Mar 21, 2019

View reviewed changes

sslotsky approved these changes Mar 21, 2019

View reviewed changes

PR feedback

044e85d

drwpow deployed to manifold-ui-stage-pr-42 March 21, 2019 17:31 View deployment

drwpow merged commit 402520b into master Mar 21, 2019

drwpow deleted the dangodev/7596-feature-state branch March 21, 2019 17:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use custom events for inputs #42

Use custom events for inputs #42

drwpow commented Mar 20, 2019 •

edited

Loading

manifold-bot commented Mar 20, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading

drwpow Mar 21, 2019

drwpow Mar 21, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading

sslotsky Mar 21, 2019

drwpow Mar 21, 2019 •

edited

Loading

davejsdev Mar 21, 2019

drwpow Mar 21, 2019

davejsdev Mar 21, 2019

davejsdev left a comment

drwpow Mar 21, 2019

sslotsky Mar 21, 2019

drwpow Mar 21, 2019

sslotsky Mar 21, 2019

drwpow Mar 21, 2019

sslotsky left a comment

Use custom events for inputs #42

Use custom events for inputs #42

Conversation

drwpow commented Mar 20, 2019 • edited Loading

Reason for change

Testing

manifold-bot commented Mar 20, 2019 • edited Loading

Codecov Report

drwpow Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drwpow Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

drwpow Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drwpow Mar 21, 2019 • 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

davejsdev 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

sslotsky left a comment

Choose a reason for hiding this comment

drwpow commented Mar 20, 2019 •

edited

Loading

manifold-bot commented Mar 20, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading

drwpow Mar 21, 2019 •

edited

Loading