[HOLD for payment 2022-05-20] [$500] Refactor StatePicker to be compatible with Form

[luacmartins]

With the implementation of our new Form component we need to refactor StatePicker to be Form compatible. Here are the changes that need to be made:

1. An optional isFormInput prop.
2. If isFormInput is true, require a inputID prop. Use getInputIDPropTypes to enforce this propType rule.
3. Add an optional shouldSaveDraft prop. Defaults to false.
4. Make the value prop optional.
5. In the input’s onBlur method, call props.onBlur().
6. Rename the input's onChange method to onInputChange.
7. In the input’s onInputChange method (or equivalent e.g. onTextChange, etc), call props.onInputChange().
8. Remove the hasError prop.
9. Add an optional errorText prop. Defaults to an empty string.
10. Update the error message to display if errorText is truthy.
11. Update the inline error display style so it is left aligned with the label and input value. See example image for TextInput:
    
12. Make sure that props.ref is attached to the appropriate DOM node. This could involve forwarding the ref to a child component. This is important so we can call ref.focus().
13. Add the input to the test Form stories and make sure that it works. You can check this by running npm run storybook and testing the component in the example form.
14. Remove any unused code.

There's an example of a refactor to TextInput in this PR.

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[MelvinBot]

Triggered auto assignment to @thienlnam (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[sig5]

Proposal
The problem statement seems quite self-explanatory in regards of the changes needed. Can I possibly work on it? Thanks.

[parasharrajat]

@sig5 Do you have questions before we move forward? I would suggest to give it another look and ask questions if any.

Though, I have one 😄

Add an optional shouldSaveDraft prop. Defaults to false.

@luacmartins Does it need to be implemented as well or just define a prop for now?

[sig5]

Hi @parasharrajat , Please correct me if I am wrong or misunderstanding the problem, But I can observe, shouldsaveDraft is used to see if the form element needs to save value as the draft.
It is handled here.

App/src/components/Form.js

Lines 144 to 167 in 4c48227

	// We clone the child passing down all form props
	const inputID = child.props.inputID;
	const defaultValue = this.props.draftValues[inputID] || child.props.defaultValue;
	this.inputValues[inputID] = defaultValue;
	return React.cloneElement(child, {
	ref: node => this.inputRefs[inputID] = node,
	defaultValue,
	errorText: this.state.errors[inputID] || '',
	onBlur: () => {
	this.setTouchedInput(inputID);
	this.validate(this.inputValues);
	},
	onChange: (value) => {
	this.inputValues[inputID] = value;
	if (child.props.shouldSaveDraft) {
	FormActions.setDraftValues(this.props.formID, {[inputID]: value});
	}
	this.validate(this.inputValues);
	},
	});
	});
	}

So adding a propType in the component along with a defaultProp should suffice to trigger it save in Onyx, which can be fetched next time it is mounted.

[parasharrajat]

Yeah, that's correct. Thanks for pointing that.

I think we can proceed with your proposal @sig5 if you don't have any questions.

cc: @thienlnam

🎀 👀 🎀 C+ reviewed

[sig5]

I think I do not have any questions atm :D

[luacmartins]

Does it need to be implemented as well or just define a prop for now?

@sig5 comment is correct. We have already implemented that and should only need to pass shouldSaveDraft + call onChange in the input as described in the OP.

[thienlnam]

Sending it! @MitchExpensify could you please hire @sig5 ?

[MitchExpensify]

For sure! Can you please make a proposal on the Upwork job @sig5 ?

[sig5]

Done!

[MitchExpensify]

Thanks, hired @sig5 !

[sig5]

Hey guys, I am coming across this error whilst adding the StatePicker to the storybook. Seems like a Transpilation error related to Flow. I am not sure how to tackle it.

RR! ./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js 19:47
ERR! Module parse failed: Unexpected token (19:47)
ERR! You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
ERR! |  * View component and renders its children.
ERR! |  */
ERR! > class UnimplementedView extends React.Component<$FlowFixMeProps> {
ERR! |   render(): React.Node {
ERR! |     // Workaround require cycle from requireNativeComponent
ERR!  @ ./node_modules/@react-native-picker/picker/js/PickerIOS.js 2:0-103 5:42-59 12:17-34
ERR!  @ ./node_modules/@react-native-picker/picker/js/index.js
ERR!  @ ./node_modules/react-native-picker-select/src/index.js
ERR!  @ ./src/components/Picker/BasePicker/index.js
ERR!  @ ./src/components/Picker/index.js
ERR!  @ ./src/components/StatePicker.js
ERR!  @ ./src/stories/Form.stories.js
ERR!  @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$

This seems like a relevant issue: storybookjs/storybook#10131
Can someone suggest changes for how to integrate Flow support for the storybook module? ( Or tag someone? )

[luacmartins]

Asked in Slack.

[rushatgabhane]

@sig5 @parasharrajat Before starting on this one, we need to first merge a PR for Refactor Picker right?

[sig5]

Yes Statepicker uses Picker Component under the hood, so having those changes done first would be ideal.

[parasharrajat]

Good eye @rushatgabhane. We are already waiting for some issue @sig5 is having.

[melvin-bot]

📣 @parasharrajat You have been assigned to this job by @luacmartins!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @jayeshmangwani You have been assigned to this job by @luacmartins!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[parasharrajat]

Ok Great. @jayeshmangwani this is urgent so I am hoping that PR will be ready by Monday. Thanks for taking it up.

🎀 👀 🎀 C+ reviewed

[MitchExpensify]

@jayeshmangwani Can you apply to this Upwork Job please? I had to abandon the original job so we'll use this new posting to issue payment (invited you to the new job @parasharrajat)

[jayeshmangwani]

@jayeshmangwani Can you apply to this Upwork Job please? I had to abandon the original job so we'll use this new posting to issue payment (invited you to the new job @parasharrajat)

Sure I am applying

[jayeshmangwani]

Ok Great. @jayeshmangwani this is urgent so I am hoping that PR will be ready by Monday. Thanks for taking it up.

🎀 👀 🎀 C+ reviewed

Sure 👍

[jayeshmangwani]

PR raised
@parasharrajat

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.57-17 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• statepicker refactored to compatible with form #8758

If no regressions arise, payment will be issued on 2022-05-20. 🎊

[MitchExpensify]

https://www.upwork.com/jobs/~0116994c22a1b60fb6 mind applying here @parasharrajat so I can issue C+ payment?

[MitchExpensify]

Paid @jayeshmangwani , thank you very much!

[jayeshmangwani]

@MitchExpensify Thankyou

[parasharrajat]

@MitchExpensify Done.

[MitchExpensify]

Done! Thanks all