rename onX methods to handleX

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -21,12 +21,12 @@ class OrganizationEdit extends Component {
 
     this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this);
     this.checkValidity = this.checkValidity.bind(this);
-    this.onFieldChange = this.onFieldChange.bind(this);
-    this.onLookupSave = this.onLookupSave.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
+    this.handleFieldChange = this.handleFieldChange.bind(this);
+    this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.postInstanceGroups = this.postInstanceGroups.bind(this);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSuccess = this.onSuccess.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleSuccess = this.handleSuccess.bind(this);
 
     this.state = {
       form: {
@@ -73,7 +73,24 @@ class OrganizationEdit extends Component {
     this.setState({ form: formData });
   }
 
-  onFieldChange (val, evt) {
+  async getRelatedInstanceGroups () {
+    const {
+      api,
+      organization: { id }
+    } = this.props;
+    const { data } = await api.getOrganizationInstanceGroups(id);
+    const { results } = data;
+    return results;
+  }
+
+  checkValidity = (value, validation) => {
+    const isValid = (validation.required)
+      ? (value.trim() !== '') : true;
+
+    return isValid;
+  }
+
+  handleFieldChange (val, evt) {
     const targetName = evt.target.name;
     const value = val;
 
@@ -91,14 +108,14 @@ class OrganizationEdit extends Component {
     this.setState({ form: updatedForm, formIsValid });
   }
 
-  onLookupSave (val, targetName) {
+  handleInstanceGroupsChange (val, targetName) {
     const { form: updatedForm } = this.state;
     updatedForm[targetName].value = val;
 
     this.setState({ form: updatedForm });
   }
 
-  async onSubmit () {
+  async handleSubmit () {
     const { api, organization } = this.props;
     const { form: { name, description, custom_virtualenv } } = this.state;
     const formData = { name, description, custom_virtualenv };
@@ -115,37 +132,20 @@ class OrganizationEdit extends Component {
     } catch (err) {
       this.setState({ error: err });
     } finally {
-      this.onSuccess();
+      this.handleSuccess();
     }
   }
 
-  onCancel () {
+  handleCancel () {
     const { organization: { id }, history } = this.props;
     history.push(`/organizations/${id}`);
   }
 
-  onSuccess () {
+  handleSuccess () {
     const { organization: { id }, history } = this.props;
     history.push(`/organizations/${id}`);
   }
 
-  async getRelatedInstanceGroups () {
-    const {
-      api,
-      organization: { id }
-    } = this.props;
-    const { data } = await api.getOrganizationInstanceGroups(id);
-    const { results } = data;
-    return results;
-  }
-
-  checkValidity = (value, validation) => {
-    const isValid = (validation.required)
-      ? (value.trim() !== '') : true;
-
-    return isValid;
-  }
-
   async postInstanceGroups () {
     const { api, organization } = this.props;
     const { form: { instanceGroups } } = this.state;
@@ -202,7 +202,7 @@ class OrganizationEdit extends Component {
                     isRequired
                     isValid={name.isValid}
                     name="name"
-                    onChange={this.onFieldChange}
+                    onChange={this.handleFieldChange}
                     value={name.value || ''}
                   />
                 </FormGroup>
@@ -213,7 +213,7 @@ class OrganizationEdit extends Component {
                   <TextInput
                     id="edit-org-form-description"
                     name="description"
-                    onChange={this.onFieldChange}
+                    onChange={this.handleFieldChange}
                     value={description.value || ''}
                   />
                 </FormGroup>
@@ -229,7 +229,7 @@ class OrganizationEdit extends Component {
                           defaultSelected={custom_virtualenv.defaultEnv}
                           label={i18n._(t`Ansible Environment`)}
                           name="custom_virtualenv"
-                          onChange={this.onFieldChange}
+                          onChange={this.handleFieldChange}
                           value={custom_virtualenv.value || ''}
                         />
                       </FormGroup>
@@ -240,11 +240,11 @@ class OrganizationEdit extends Component {
               <InstanceGroupsLookup
                 api={api}
                 value={instanceGroups.value}
-                onChange={this.onLookupSave}
+                onChange={this.handleInstanceGroupsChange}
               />
               <FormActionGroup
-                onCancel={this.onCancel}
-                onSubmit={this.onSubmit}
+                onCancel={this.handleCancel}
+                onSubmit={this.handleSubmit}
                 submitDisabled={!formIsValid}
               />
               { error ? <div>error</div> : '' }

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -26,11 +26,11 @@ class OrganizationAdd extends React.Component {
   constructor (props) {
     super(props);
 
-    this.onFieldChange = this.onFieldChange.bind(this);
-    this.onLookupSave = this.onLookupSave.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSuccess = this.onSuccess.bind(this);
+    this.handleFieldChange = this.handleFieldChange.bind(this);
+    this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleSuccess = this.handleSuccess.bind(this);
 
     this.state = {
       name: '',
@@ -42,15 +42,15 @@ class OrganizationAdd extends React.Component {
     };
   }
 
-  onFieldChange (val, evt) {
+  handleFieldChange (val, evt) {
     this.setState({ [evt.target.name]: val || evt.target.value });
   }
 
-  onLookupSave (val, targetName) {
+  handleInstanceGroupsChange (val, targetName) {
     this.setState({ [targetName]: val });
   }
 
-  async onSubmit () {
+  async handleSubmit () {
     const { api } = this.props;
     const { name, description, custom_virtualenv, instanceGroups } = this.state;
     const data = {
@@ -70,19 +70,19 @@ class OrganizationAdd extends React.Component {
       } catch (err) {
         this.setState({ error: err });
       } finally {
-        this.onSuccess(response.id);
+        this.handleSuccess(response.id);
       }
     } catch (err) {
       this.setState({ error: err });
     }
   }
 
-  onCancel () {
+  handleCancel () {
     const { history } = this.props;
     history.push('/organizations');
   }
 
-  onSuccess (id) {
+  handleSuccess (id) {
     const { history } = this.props;
     history.push(`/organizations/${id}`);
   }
@@ -112,7 +112,7 @@ class OrganizationAdd extends React.Component {
                   <Button
                     variant="plain"
                     aria-label={i18n._(t`Close`)}
-                    onClick={this.onCancel}
+                    onClick={this.handleCancel}
                   >
                     <TimesIcon />
                   </Button>
@@ -131,7 +131,7 @@ class OrganizationAdd extends React.Component {
                         id="add-org-form-name"
                         name="name"
                         value={name}
-                        onChange={this.onFieldChange}
+                        onChange={this.handleFieldChange}
                       />
                     </FormGroup>
                     <FormGroup label={i18n._(t`Description`)} fieldId="add-org-form-description">
@@ -139,13 +139,13 @@ class OrganizationAdd extends React.Component {
                         id="add-org-form-description"
                         name="description"
                         value={description}
-                        onChange={this.onFieldChange}
+                        onChange={this.handleFieldChange}
                       />
                     </FormGroup>
                     <InstanceGroupsLookup
                       api={api}
                       value={instanceGroups}
-                      onChange={this.onLookupSave}
+                      onChange={this.handleInstanceGroupsChange}
                     />
                     <ConfigContext.Consumer>
                       {({ custom_virtualenvs }) => (
@@ -169,7 +169,7 @@ class OrganizationAdd extends React.Component {
                               label={i18n._(t`Ansible Environment`)}
                               name="custom_virtualenv"
                               value={custom_virtualenv}
-                              onChange={this.onFieldChange}
+                              onChange={this.handleFieldChange}
                               data={custom_virtualenvs}
                               defaultSelected={defaultEnv}
                             />
@@ -179,9 +179,9 @@ class OrganizationAdd extends React.Component {
                     </ConfigContext.Consumer>
                   </Gallery>
                   <FormActionGroup
-                    onSubmit={this.onSubmit}
+                    onSubmit={this.handleSubmit}
                     submitDisabled={!enabled}
-                    onCancel={this.onCancel}
+                    onCancel={this.handleCancel}
                   />
                   {error ? <div>error</div> : ''}
                 </Form>