[eslint] updated eslintrc and improved the code (#4702)

frontend/.eslintrc.json

@@ -50,6 +50,7 @@
     "no-irregular-whitespace": "warn",
     "no-console": "warn",
     "no-useless-escape": "warn",
+    "no-trailing-spaces": "warn",
     
     "react/jsx-indent": ["warn", 2],
     "react/prop-types": "warn",

frontend/src/components/cur-dir-path/dir-path.js

@@ -28,11 +28,11 @@ class DirPath extends React.Component {
     if (window.uploader &&
       window.uploader.isUploadProgressDialogShow &&
       window.uploader.totalProgress !== 100) {
-        if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
+      if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
-          e.preventDefault();
+        e.preventDefault();
-          return false;
+        return false;
-        }
+      }
-        window.uploader.isUploadProgressDialogShow = false;
+      window.uploader.isUploadProgressDialogShow = false;
     }
     this.props.onTabNavClick(tabName, id);
   }

frontend/src/components/dialog/generate-upload-link.js

@@ -318,11 +318,11 @@ class GenerateUploadLink extends React.Component {
         </FormGroup>
         <FormGroup check>
           <Label check>
-              {this.isExpireDaysNoLimit ? (
+            {this.isExpireDaysNoLimit ? (
-                <Input type="checkbox" onChange={this.onExpireChecked} />
+              <Input type="checkbox" onChange={this.onExpireChecked} />
-              ) : (
+            ) : (
-                <Input type="checkbox" checked readOnly disabled />
+              <Input type="checkbox" checked readOnly disabled />
-              )}
+            )}
             <span>{gettext('Add auto expiration')}</span>
           </Label>
           {this.state.isExpireChecked &&

frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js

@@ -49,15 +49,15 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
           {gettext('Reset library password')}
         </ModalHeader>
         <ModalBody>
-        {this.state.showLoading && (
+          {this.state.showLoading && (
-          <span>{gettext('Sending new password...')}</span>
+            <span>{gettext('Sending new password...')}</span>
-        )}
+          )}
-        {this.state.showSuccess && (
+          {this.state.showSuccess && (
-          <div dangerouslySetInnerHTML={{__html:message}} />
+            <div dangerouslySetInnerHTML={{__html:message}} />
-        )}
+          )}
-        {this.state.showError && (
+          {this.state.showError && (
-          <span className="err-message">{this.state.errMessage}</span>
+            <span className="err-message">{this.state.errMessage}</span>
-        )}
+          )}
         </ModalBody>
       </Modal>
     );

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog.js

@@ -25,7 +25,7 @@ class AddMemberDialog extends React.Component {
   handleSubmit = () => {
     if (!this.state.selectedOption) return;
     const emails = this.state.selectedOption.map(item => item.email);
-    this.props.addUser(emails)
+    this.props.addUser(emails);
   }
 
   render() {

frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-max-user-number-dialog.js

@@ -51,13 +51,13 @@ class SysAdminSetOrgMaxUserNumberDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
+              <Input
-                  type="text"
+                type="text"
-                  className="form-control"
+                className="form-control"
-                  value={value}
+                value={value}
-                  onKeyPress={this.handleKeyPress} 
+                onKeyPress={this.handleKeyPress}
-                  onChange={this.handleInputChange}
+                onChange={this.handleInputChange}
-                />
+              />
             </FormGroup>
           </Form>
         </ModalBody>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-org-name-dialog.js

@@ -51,12 +51,12 @@ class SysAdminSetOrgNameDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
+              <Input
-                  type="text"
+                type="text"
-                  value={name}
+                value={name}
-                  onKeyPress={this.handleKeyPress} 
+                onKeyPress={this.handleKeyPress}
-                  onChange={this.handleInputChange}
+                onChange={this.handleInputChange}
-                />
+              />
             </FormGroup>
           </Form>
         </ModalBody>

frontend/src/components/dialog/sysadmin-dialog/update-user.js

@@ -47,12 +47,12 @@ class UpdateUser extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-                <Input
+              <Input
-                  type="text"
+                type="text"
-                  value={this.state.value}
+                value={this.state.value}
-                  onKeyPress={this.handleKeyPress} 
+                onKeyPress={this.handleKeyPress}
-                  onChange={this.handleInputChange}
+                onChange={this.handleInputChange}
-                />
+              />
             </FormGroup>
           </Form>
         </ModalBody>

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -551,20 +551,20 @@ class DirentListView extends React.Component {
       >
         <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
           {isDesktop ? (
-          <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
+            <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
-            <tr>
+              <tr>
-              <th width="3%" className="pl10">
+                <th width="3%" className="pl10">
-                <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
+                  <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
-              </th>
+                </th>
-              <th width="3%" className="pl10">{/*icon */}</th>
+                <th width="3%" className="pl10">{/*icon */}</th>
-              <th width="5%" className="pl10">{/*star */}</th>
+                <th width="5%" className="pl10">{/*star */}</th>
-              <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+                <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <th width="6%">{/*tag */}</th>
+                <th width="6%">{/*tag */}</th>
-              <th width="18%">{/*operation */}</th>
+                <th width="18%">{/*operation */}</th>
-              <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
+                <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
-              <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+                <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            </tr>
+              </tr>
-          </thead>
+            </thead>
           ) : (
             <thead>
               <tr>

frontend/src/components/file-uploader/file-uploader.js

@@ -489,12 +489,12 @@ class FileUploader extends React.Component {
   onFileUpload = () => {
     this.uploadInput.current.removeAttribute('webkitdirectory');
 
-      this.uploadInput.current.click();
+    this.uploadInput.current.click();
   }
 
   onFolderUpload = () => {
     this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
-      this.uploadInput.current.click();
+    this.uploadInput.current.click();
   }
 
   onDragStart = () => {

frontend/src/components/file-uploader/upload-progress-dialog.js

@@ -44,7 +44,7 @@ class UploadProgressDialog extends React.Component {
 
   render() {
 
-    let uploadBitrate = Utils.formatBitRate(this.props.uploadBitrate)
+    let uploadBitrate = Utils.formatBitRate(this.props.uploadBitrate);
     let uploadedMessage = gettext('File Upload');
     let uploadingMessage = gettext('File Uploading...') + ' ' + this.props.totalProgress + '%' + ' (' + uploadBitrate + ')';
 

frontend/src/components/permission-denied-tip.js

@@ -4,7 +4,7 @@ import { gettext, loginUrl } from '../utils/constants';
 function PermissionDeniedTip() {
   let reloginUrl = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
   let errorTip = gettext('Permission denied. Please try {placeholder-left}login again.{placeholder-right}');
-  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href='+ reloginUrl + '>')
+  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href='+ reloginUrl + '>');
   errorTip = errorTip.replace('{placeholder-right}', '</a>');
   return(
     <span className="error" dangerouslySetInnerHTML={{__html: errorTip}}></span>

frontend/src/components/terms-preview-widget.js

@@ -15,7 +15,7 @@ class TermsPreviewWidget extends React.Component {
     this.state = {
       innerHtml: null,
       isFormatValue: true,
-    }
+    };
   }
 
   componentDidMount() {

frontend/src/draft.js

@@ -313,7 +313,7 @@ class Draft extends React.Component {
     const nodes = this.refs.diffViewer.value;
     let commentNode = nodes.find((node) => {
       if (node.data['old_index'] == oldIndex && node.data['new_index'] == newIndex) {
-        return node
+        return node;
       }
     });
     if (commentNode) {

frontend/src/pages/groups/group-view.js

@@ -406,9 +406,9 @@ class GroupView extends React.Component {
             <div className="operation">
               {((!isDepartmentGroup && canAddRepo) || (isDepartmentGroup && isStaff)) && (
                 Utils.isDesktop() ? (
-                <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
+                  <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-                </button>
+                  </button>
                 ) : (
                   <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateRepoToggle}></span>
                 )

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -56,7 +56,7 @@ class LibContentToolbar extends React.Component {
   render() {
 
     if (!this.props.userPerm) {
-      return <div className="cur-view-toolbar"></div>
+      return <div className="cur-view-toolbar"></div>;
     }
 
     if (this.props.isViewFile) {

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -653,7 +653,7 @@ class LibContentView extends React.Component {
     this.setState({
       asyncOperationProgress: 0,
       isCopyMoveProgressDialogShow: false,
-    })
+    });
   }
 
   // toolbar operations

frontend/src/pages/sys-admin/groups/groups.js

@@ -25,14 +25,14 @@ class Groups extends Component {
   }
 
   componentDidMount () {
-      let urlParams = (new URL(window.location)).searchParams;
+    let urlParams = (new URL(window.location)).searchParams;
-      const { currentPage = 1, perPage } = this.state;
+    const { currentPage = 1, perPage } = this.state;
-      this.setState({
+    this.setState({
-        perPage: parseInt(urlParams.get('per_page') || perPage),
+      perPage: parseInt(urlParams.get('per_page') || perPage),
-        currentPage: parseInt(urlParams.get('page') || currentPage)
+      currentPage: parseInt(urlParams.get('page') || currentPage)
-      }, () => {
+    }, () => {
-        this.getGroupListByPage(this.state.currentPage);
+      this.getGroupListByPage(this.state.currentPage);
-      }); 
+    });
   }
 
   toggleCreateGroupDialog = () => {

frontend/src/pages/sys-admin/orgs/orgs-content.js

@@ -113,8 +113,8 @@ class Item extends Component {
           let deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?')
             .replace('{placeholder}', orgName) + '<br/>' +
             gettext('{userCount} user(s) and {repoCount} libraries of this organization will also be deleted.')
-            .replace('{userCount}', userCount)
+              .replace('{userCount}', userCount)
-            .replace('{repoCount}', repoCount);
+              .replace('{repoCount}', repoCount);
           this.setState({deleteDialogMsg: deleteDialogMsg});
         }).catch(error => {
           let errorMsg = Utils.getErrorMsg(error);

frontend/src/pages/sys-admin/repos/trash-repos.js

@@ -277,14 +277,14 @@ class TrashRepos extends Component {
   }
 
   componentDidMount () {
-      let urlParams = (new URL(window.location)).searchParams;
+    let urlParams = (new URL(window.location)).searchParams;
-      const { currentPage = 1, perPage } = this.state;
+    const { currentPage = 1, perPage } = this.state;
-      this.setState({
+    this.setState({
-        perPage: parseInt(urlParams.get('per_page') || perPage),
+      perPage: parseInt(urlParams.get('per_page') || perPage),
-        currentPage: parseInt(urlParams.get('page') || currentPage)
+      currentPage: parseInt(urlParams.get('page') || currentPage)
-      }, () => {
+    }, () => {
-        this.getReposByPage(this.state.currentPage);
+      this.getReposByPage(this.state.currentPage);
-      }); 
+    });
   }
 
   toggleCleanTrashDialog = () => {

frontend/src/pages/sys-admin/users/users-content.js

@@ -79,7 +79,7 @@ class Content extends Component {
       const spaceEl =
         sortBy != undefined ? // only offer 'sort' for 'DB' & 'LDAPImported' users
         <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByQuotaUsage}>{spaceText} {sortIcon}</a> :
-        spaceText;
+          spaceText;
       const colSpaceText = <Fragment>{spaceEl}{` / ${gettext('Quota')}`}</Fragment>;
 
       const colNameText = `${gettext('Name')} / ${gettext('Contact Email')}`;

frontend/src/pages/wikis/wikis.js

@@ -121,7 +121,7 @@ class Wikis extends Component {
                   <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</Button>
                 </MediaQuery>
                 <MediaQuery query="(max-width: 767.8px)">
-                <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Publish a Library')} onClick={this.onSelectToggle}></span>
+                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Publish a Library')} onClick={this.onSelectToggle}></span>
                 </MediaQuery>
               </Fragment>
             </div>

frontend/src/user-notifications.js

@@ -200,7 +200,7 @@ class Content extends React.Component {
             })}
           </tbody>
         </table>
-      {items.length > 0 &&
+        {items.length > 0 &&
         <Paginator
           gotoPreviousPage={this.getPreviousPage}
           gotoNextPage={this.getNextPage}
@@ -209,7 +209,7 @@ class Content extends React.Component {
           curPerPage={curPerPage}
           resetPerPage={this.props.resetPerPage}
         />
-      }
+        }
       </React.Fragment>
     );
   }