remove ref from for get the data in TargetContainer #2625

sanjayradadiya · 2020-08-17T08:51:35Z

Changes in this pull request:

undefined is not an object (evaluating 'u.refs.targetContainer.refs')

norbertschuler · 2020-08-18T13:01:26Z

app/components/Target/index.js

@@ -41,6 +41,7 @@ export default class Target extends Component {
      label: countTarget !== 0 ? i18n.t('label.update') : i18n.t('label.save'),
      initialValues: { countTarget, targetYear, targetComment }
    };
+    this.formRef=React.createRef();


As I am looking for a universal solution we can use throughout our whole codebase I would like to ask what is the difference of this solution vs.

treecounter-app/app/components/Authentication/SignUp/SignUp.js

Lines 145 to 165 in 4ab1b4d

<form onSubmit={this.props.onSignUpClicked.bind(this, type, this.signupForm)}>

<TCombForm

ref={ref => (this.signupForm = ref)}

type={signupFormSchema[type]}

options={this.props.schemaOptions[type]}

value={this.props.formValue}

/>

<PrimaryButton

onClick={event => {

this.props.onSignUpClicked(

type,

this.signupForm,

this.state.recaptchaToken,

this.refreshToken

);

event.preventDefault();

}}

>

{i18n.t('label.signUp')}

</PrimaryButton>

</form>

- can you maybe try to develop one template I can then use within the whole codebase to use refs correctly?

in container file we are using ref to access the tcombform ref.
I just remove that ref and added tcombform ref in callBack function

Ok, then I assume this patch should be the template for doing it everywhere else now.

norbertschuler · 2020-08-18T13:03:58Z

app/components/Target/index.native.js

@@ -20,6 +20,7 @@ export default class Target extends Component {
    this.state = {
      label: countTarget !== 0 ? i18n.t('label.update') : i18n.t('label.save')
    };
+    this.formRef=React.createRef();


The same question for the native apps implementation as for the web client. Can you give me an example implementation I can use everywhere for the native apps? What is the difference of this patch against

treecounter-app/app/components/Authentication/SignUp/SignUp.native.js

Lines 44 to 50 in 4ab1b4d

onSignUpClicked = type => {

if (this.signupForm.getValue()) {

Keyboard.dismiss();

}

// eslint-disable-next-line no-underscore-dangle

this.props.onSignUpClicked(type, this.signupForm);

};

plus

treecounter-app/app/components/Authentication/SignUp/SignUp.native.js

Lines 84 to 91 in 4ab1b4d

<Form

ref={ref => (this.signupForm = ref)}

type={signupFormSchema[!ProfileTypeParam ? Profiletype : type]}

options={

this.props.schemaOptions[!ProfileTypeParam ? Profiletype : type]

}

value={this.props.formValue}

/>

?

we are using TCombForm therefor it will only allow to access the method using ref. if we need to optimise this then we need to change TCombForm to Formik form that we are using in tree registration

The refactoring work to change all remaining old Tcomb forms to Formik is also still open in #2475 :-)

norbertschuler

Can you give a tip how one can reproduce the bug within the local development environment (web client or native apps)?

norbertschuler · 2020-08-18T13:19:01Z

app/components/Target/index.native.js

@@ -37,14 +38,14 @@ export default class Target extends Component {
            style={{ flex: 1, marginTop: Platform.OS === 'ios' ? 140 : 100 }}
          >
            <Form
-              ref={'setTargetForm'}
+              ref={this.formRef}
              type={targetFormSchema}
              options={this.props.schemaOptions}
              value={this.props.treecounter}
            />
          </CardLayout>
          <PrimaryButton


Btw. this is one example of a form where the ActivityIndicator within the PrimaryButton is not yet integrated (compare #1837), so the user does not know if the API requests for updating his target is still working or the app is crashed ;-)

norbertschuler

Technically it works for me.

sanjayradadiya · 2020-08-20T05:34:51Z

Can you give a tip how one can reproduce the bug within the local development environment (web client or native apps)?

Actually I am also not able to reproduce this, but issue description I made some changes.

norbertschuler · 2020-08-28T11:15:58Z

@sanjayradadiya if you mark this draft as ready for review I could approve it.

norbertschuler · 2022-10-17T07:21:17Z

won't be done any more as project will be deprecated

sanjayradadiya linked an issue Aug 17, 2020 that may be closed by this pull request

undefined is not an object (evaluating 'u.refs.targetContainer.refs') #2216

Closed

sanjayradadiya requested a review from norbertschuler August 17, 2020 08:53

norbertschuler reviewed Aug 18, 2020

View reviewed changes

norbertschuler approved these changes Aug 18, 2020

View reviewed changes

sanjayradadiya marked this pull request as draft August 25, 2020 07:47

sanjayradadiya marked this pull request as ready for review September 2, 2020 04:49

norbertschuler force-pushed the feature/remove-ref branch 2 times, most recently from 4eb50bb to c77495b Compare September 27, 2020 19:55

norbertschuler mentioned this pull request Sep 28, 2020

Refactor usage of this.refs to access form data #2479

Open

remove ref from for get the data in TargetContainer

6b3af40

norbertschuler force-pushed the feature/remove-ref branch from c77495b to 6b3af40 Compare September 28, 2020 13:24

norbertschuler marked this pull request as draft September 28, 2020 14:23

norbertschuler added the Should we close this? label May 1, 2021

norbertschuler closed this Oct 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remove ref from for get the data in TargetContainer #2625

remove ref from for get the data in TargetContainer #2625

sanjayradadiya commented Aug 17, 2020 •

edited by norbertschuler

Loading

norbertschuler Aug 18, 2020 •

edited

Loading

sanjayradadiya Aug 20, 2020

norbertschuler Aug 20, 2020

norbertschuler Aug 18, 2020

sanjayradadiya Aug 20, 2020

norbertschuler Aug 20, 2020 •

edited

Loading

norbertschuler left a comment

norbertschuler Aug 18, 2020

norbertschuler left a comment

sanjayradadiya commented Aug 20, 2020

norbertschuler commented Aug 28, 2020

norbertschuler commented Oct 17, 2022

	<form onSubmit={this.props.onSignUpClicked.bind(this, type, this.signupForm)}>
	<TCombForm
	ref={ref => (this.signupForm = ref)}
	type={signupFormSchema[type]}
	options={this.props.schemaOptions[type]}
	value={this.props.formValue}
	/>
	<PrimaryButton
	onClick={event => {
	this.props.onSignUpClicked(
	type,
	this.signupForm,
	this.state.recaptchaToken,
	this.refreshToken
	);
	event.preventDefault();
	}}
	>
	{i18n.t('label.signUp')}
	</PrimaryButton>
	</form>

	onSignUpClicked = type => {
	if (this.signupForm.getValue()) {
	Keyboard.dismiss();
	}
	// eslint-disable-next-line no-underscore-dangle
	this.props.onSignUpClicked(type, this.signupForm);
	};

	<Form
	ref={ref => (this.signupForm = ref)}
	type={signupFormSchema[!ProfileTypeParam ? Profiletype : type]}
	options={
	this.props.schemaOptions[!ProfileTypeParam ? Profiletype : type]
	}
	value={this.props.formValue}
	/>

remove ref from for get the data in TargetContainer #2625

remove ref from for get the data in TargetContainer #2625

Conversation

sanjayradadiya commented Aug 17, 2020 • edited by norbertschuler Loading

norbertschuler Aug 18, 2020 • edited Loading

Choose a reason for hiding this comment

sanjayradadiya Aug 20, 2020

Choose a reason for hiding this comment

norbertschuler Aug 20, 2020

Choose a reason for hiding this comment

norbertschuler Aug 18, 2020

Choose a reason for hiding this comment

sanjayradadiya Aug 20, 2020

Choose a reason for hiding this comment

norbertschuler Aug 20, 2020 • edited Loading

Choose a reason for hiding this comment

norbertschuler left a comment

Choose a reason for hiding this comment

norbertschuler Aug 18, 2020

Choose a reason for hiding this comment

norbertschuler left a comment

Choose a reason for hiding this comment

sanjayradadiya commented Aug 20, 2020

norbertschuler commented Aug 28, 2020

norbertschuler commented Oct 17, 2022

sanjayradadiya commented Aug 17, 2020 •

edited by norbertschuler

Loading

norbertschuler Aug 18, 2020 •

edited

Loading

norbertschuler Aug 20, 2020 •

edited

Loading