chore: fix react/jsx-no-bind issues

enable react/jsx-max-props-per-line

.eslintrc

@@ -82,8 +82,8 @@
     "react/jsx-indent-props": ["error", 2],
     "react/jsx-key": ["error"],
     "react/jsx-max-depth": ["warn", { "max": 2}],
-    "react/jsx-max-props-per-line": ["warn", {"maximum": 3, "when": "multiline" }],
+    "react/jsx-max-props-per-line": ["error", {"maximum": 3, "when": "multiline" }],
-    "react/jsx-no-bind": ["warn"],
+    "react/jsx-no-bind": ["error"],
     "react/jsx-no-comment-textnodes": ["warn"],
     "react/jsx-no-duplicate-props": ["warn"],
     "react/jsx-no-literals": ["warn"],

src/webui/components/AutoComplete/index.js

@@ -96,30 +96,32 @@ const AutoComplete = ({
     onSuggestionsFetchRequested: onSuggestionsFetch,
     onSuggestionsClearRequested: onCleanSuggestions,
   };
+  const inputProps = {
+    value,
+    onChange,
+    placeholder,
+    startAdornment,
+    disableUnderline,
+    color,
+    onKeyDown,
+    onBlur,
+  };
+
+  // this format avoid arrow function eslint rule
+  function renderSuggestionsContainer({ containerProps, children, query }) {
+    return (
+      <Paper {...containerProps} square={true}>
+        {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
+        {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
+        {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
+        {children}
+      </Paper>
+    );
+  }
+
   return (
     <Wrapper>
-      <Autosuggest
+      <Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
-        {...autosuggestProps}
-        inputProps={{
-          value,
-          onChange,
-          placeholder,
-          startAdornment,
-          disableUnderline,
-          color,
-          onKeyDown,
-          onBlur,
-        }}
-        onSuggestionSelected={onClick}
-        renderSuggestionsContainer={({ containerProps, children, query }) => (
-          <Paper {...containerProps} square={true}>
-            {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
-            {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
-            {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
-            {children}
-          </Paper>
-        )}
-      />
     </Wrapper>
   );
 };

src/webui/components/Login/index.js

@@ -31,9 +31,6 @@ export default class LoginModal extends Component {
 
   constructor(props) {
     super(props);
-    this.submitCredentials = this.submitCredentials.bind(this);
-    this.setCredentials = this.setCredentials.bind(this);
-    this.validateCredentials = this.validateCredentials.bind(this);
     this.state = {
       form: {
         username: {
@@ -57,7 +54,7 @@ export default class LoginModal extends Component {
    * set login modal's username and password to current state
    * Required to login
    */
-  setCredentials(name, e) {
+  setCredentials = (name, e) => {
     this.setState({
       form: {
         ...this.state.form,
@@ -70,7 +67,15 @@ export default class LoginModal extends Component {
     });
   }
 
-  validateCredentials(event) {
+  setUsername = (event) => {
+    this.setCredentials('username', event);
+  }
+
+  setPassword = (event) => {
+    this.setCredentials('password', event);
+  }
+
+  validateCredentials = (event) => {
     // prevents default submit behavior
     event.preventDefault();
 
@@ -86,7 +91,7 @@ export default class LoginModal extends Component {
     });
   }
 
-  async submitCredentials() {
+  submitCredentials = async () => {
     const { form: { username, password } } = this.state;
     await this.props.onSubmit(username.value, password.value);
     // let's wait for API response and then set
@@ -99,8 +104,8 @@ export default class LoginModal extends Component {
     });
   }
 
-  renderMessage(title, description) {
+  renderErrorMessage(title, description) {
-    const errorMessage = (
+    return (
       <span>
         <div>
           <strong>
@@ -111,13 +116,15 @@ export default class LoginModal extends Component {
           {description}
         </div>
       </span>);
+  }
 
+  renderMessage(title, description) {
     return (
       <div
         className={classes.loginErrorMsg}
         id={"client-snackbar"}>
         <ErrorIcon className={classes.loginIcon} />
-        {errorMessage()}
+        {this.renderErrorMessage(title, description)}
       </div>);
   }
 
@@ -141,7 +148,7 @@ export default class LoginModal extends Component {
         onClose={onCancel}
         open={visibility}
         >
-        <form noValidate={true} onSubmit={this.validateCredentials.bind(this)}>
+        <form noValidate={true} onSubmit={this.validateCredentials}>
           <DialogTitle>Login</DialogTitle>
           <DialogContent>
             {this.renderLoginError(error)}
@@ -153,7 +160,7 @@ export default class LoginModal extends Component {
               <InputLabel htmlFor={"username"}>Username</InputLabel>
               <Input
                 id={"login--form-username"}
-                onChange={this.setCredentials.bind(this, 'username')}
+                onChange={this.setUsername}
                 placeholder={"Your username"}
                 value={username.value}
               />
@@ -172,7 +179,7 @@ export default class LoginModal extends Component {
               <InputLabel htmlFor={"password"}>Password</InputLabel>
               <Input
                 id={"login--form-password"}
-                onChange={this.setCredentials.bind(this, 'password')}
+                onChange={this.setPassword}
                 placeholder={"Your strong password"}
                 type={"password"}
                 value={password.value}

src/webui/router.js

@@ -20,17 +20,28 @@ interface IState {}
 
 class RouterApp extends Component<IProps, IState> {
   render() {
-    const { isUserLoggedIn, packages } = this.props;
     return (
       <Router>
         <Switch>
-          <Route exact={true} path={'/'} render={() => <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />} />
+          <Route exact={true} path={'/'} render={this.renderHomePage} />
-          <Route exact={true} path={'/detail/@:scope/:package'} render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
+          <Route exact={true} path={'/detail/@:scope/:package'} render={this.renderDetailPage} />
-          <Route exact={true} path={'/detail/:package'} render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
+          <Route exact={true} path={'/detail/:package'} render={this.renderDetailPage} />
         </Switch>
       </Router>
     );
   }
+
+  renderHomePage = () => {
+    const { isUserLoggedIn, packages } = this.props;
+
+    return <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />;
+  };
+
+  renderDetailPage = () => {
+    const { isUserLoggedIn } = this.props;
+
+    return <DetailPackage {...this.props} isUserLoggedIn={isUserLoggedIn} />;
+  };
 }
 
 export default RouterApp;