diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 154edf9df4..8a133b5b46 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -23,7 +23,8 @@
   "rules": {
     "indent": [
       "warn",
-      2
+      2,
+      { "SwitchCase": 1 }
     ],
     "linebreak-style": [
       "warn",
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 2225cb0083..ba995f7090 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -141,7 +141,7 @@ class App extends Component {
         showName: 'Groups',
         name: 'groups',
         id: null,
-      }
+      };
       let navTab2 = {
         url: siteRoot + 'group/' + groupID + '/',
         showName: tabName,
@@ -220,7 +220,7 @@ class App extends Component {
               onSearchedClick={this.onSearchedClick}
               onTabNavClick={this.tabItemClick}
               onGroupChanged={this.onGroupChanged}
-              />
+            />
             <Wikis path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
             <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
           </Router>
diff --git a/frontend/src/components/common/notification.js b/frontend/src/components/common/notification.js
index f86662bebb..3842c2d025 100644
--- a/frontend/src/components/common/notification.js
+++ b/frontend/src/components/common/notification.js
@@ -24,7 +24,7 @@ class Notification extends React.Component {
       this.setState({
         showNotice: false,
         unseenCount: 0
-      })
+      });
     } else {
       this.loadNotices();
       this.setState({showNotice: true});
diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index aa6a5a9a53..a58a3d183b 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -82,8 +82,9 @@ class DirPath extends React.Component {
         }
         {pathElem}
         { this.props.isViewFile && 
-          <InternalLinkDialog repoID={this.props.repoID}
-                              path={this.props.currentPath}
+          <InternalLinkDialog 
+            repoID={this.props.repoID}
+            path={this.props.currentPath}
           />
         }
       </div>
diff --git a/frontend/src/components/dialog/create-department-repo-dialog.js b/frontend/src/components/dialog/create-department-repo-dialog.js
index f4f52a62e9..405139c258 100644
--- a/frontend/src/components/dialog/create-department-repo-dialog.js
+++ b/frontend/src/components/dialog/create-department-repo-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Col, FormText } from 'reactstrap';
+import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label } from 'reactstrap';
 import { gettext, maxFileName } from '../../utils/constants';
 
 const propTypes = {
diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index 4df99aa460..be18c2ea6b 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -43,7 +43,7 @@ class CreateFile extends React.Component {
 
   handleSubmit = () => {
     let isDuplicated = this.checkDuplicatedName();
-    let newName = this.state.childName
+    let newName = this.state.childName;
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
diff --git a/frontend/src/components/dialog/create-group-dialog.js b/frontend/src/components/dialog/create-group-dialog.js
index 21cad1ff13..3d7859da51 100644
--- a/frontend/src/components/dialog/create-group-dialog.js
+++ b/frontend/src/components/dialog/create-group-dialog.js
@@ -22,7 +22,7 @@ class CreateGroupDialog extends React.Component {
     if (this.state.errorMsg) {
       this.setState({
         errorMsg: ''
-      })
+      });
     }
   }
 
diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js
index af325f6ade..e340071520 100644
--- a/frontend/src/components/dialog/create-tag-dialog.js
+++ b/frontend/src/components/dialog/create-tag-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { Button, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 
diff --git a/frontend/src/components/dialog/delete-repo-dialog.js b/frontend/src/components/dialog/delete-repo-dialog.js
index c8e7b5c15d..af8c492528 100644
--- a/frontend/src/components/dialog/delete-repo-dialog.js
+++ b/frontend/src/components/dialog/delete-repo-dialog.js
@@ -1,8 +1,13 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+};
+
 class DeleteRepoDialog extends Component {
 
   toggle = () => {
@@ -22,17 +27,17 @@ class DeleteRepoDialog extends Component {
 
     const data = this.props.data;
     const repoName = data ? '<span class="sf-font">' + Utils.HTMLescape(data.repoName) + '</span>' : null;
-    let message = gettext("Are you sure you want to delete %s ?");
+    let message = gettext('Are you sure you want to delete %s ?');
     message = message.replace('%s', repoName);
     const popup = (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext("Delete Library")}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('Delete Library')}</ModalHeader>
         <ModalBody>
           <p dangerouslySetInnerHTML={{__html: message}}></p>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.clickYes}>{gettext("Delete")}</Button>
-          <Button color="secondary" onClick={this.toggle}>{gettext("Cancel")}</Button>
+          <Button color="primary" onClick={this.clickYes}>{gettext('Delete')}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
         </ModalFooter>
       </Modal>
     );
@@ -41,4 +46,6 @@ class DeleteRepoDialog extends Component {
   }
 }
 
+DeleteRepoDialog.propTypes = propTypes;
+
 export default DeleteRepoDialog;
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index 75249c2b2d..fdc4e16729 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -7,7 +7,9 @@ import RepoTag from '../../models/repo-tag';
 require('../../css/repo-tag.css');
 
 const TagItemPropTypes = {
+  repoID: PropTypes.string.isRequired,
   repoTag: PropTypes.object.isRequired,
+  filePath: PropTypes.string.isRequired,
   fileTagList: PropTypes.array.isRequired,
   onEditFileTag: PropTypes.func.isRequired,
 };
@@ -80,7 +82,7 @@ class TagItem extends React.Component {
           }
         </div>
       </li>
-    )
+    );
   }
 
 }
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index 0819ac2bfc..011ee01b23 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -109,7 +109,7 @@ class GenerateUploadLink extends React.Component {
   }
 
   deleteUploadLink = () => {
-    let sharedUploadInfo = this.state.sharedUploadInfo
+    let sharedUploadInfo = this.state.sharedUploadInfo;
     seafileAPI.deleteUploadLink(sharedUploadInfo.token).then(() => {
       this.setState({
         showPasswordInput: false,
diff --git a/frontend/src/components/dialog/lib-decrypt-dialog.js b/frontend/src/components/dialog/lib-decrypt-dialog.js
index cfb2fcb1b0..82c2d4c86b 100644
--- a/frontend/src/components/dialog/lib-decrypt-dialog.js
+++ b/frontend/src/components/dialog/lib-decrypt-dialog.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Input, ModalBody, Form, FormGroup } from 'reactstrap';
+import { Modal, ModalBody, Form } from 'reactstrap';
 import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-history-setting-dialog.js
index 19252ffafa..eb87853939 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext, enableRepoHistorySetting } from '../../utils/constants';
 import toaster from '../toast';
@@ -57,7 +57,7 @@ class LibHistorySetting extends React.Component {
     } else {
       this.setState({
         errorInfo: gettext('Please enter a non-negative integer'),
-      })
+      });
     }
   }
 
@@ -107,15 +107,15 @@ class LibHistorySetting extends React.Component {
               </FormGroup>
             }
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.allHistory} disabled={!enableRepoHistorySetting} onChange={() => {this.setLimitDays('allHistory')}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.allHistory} disabled={!enableRepoHistorySetting} onChange={() => {this.setLimitDays('allHistory');}}/>{' '}
               <Label>{gettext('Keep full history')}</Label>
             </FormGroup>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.noHistory} disabled={!enableRepoHistorySetting} onChange={() =>{this.setLimitDays('noHistory')}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.noHistory} disabled={!enableRepoHistorySetting} onChange={() =>{this.setLimitDays('noHistory');}}/>{' '}
               <Label>{gettext('Don\'t keep history')}</Label>
             </FormGroup>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.autoHistory} disabled={!enableRepoHistorySetting} onChange={() =>{this.setLimitDays('autoHistory')}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.autoHistory} disabled={!enableRepoHistorySetting} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
               <Label>{gettext('Only keep a period of history:')}</Label>
               <Input 
                 type="text" 
diff --git a/frontend/src/components/dialog/list-repo-drafts-dialog.js b/frontend/src/components/dialog/list-repo-drafts-dialog.js
index 3d4bcb05e1..b5b8fbedb5 100644
--- a/frontend/src/components/dialog/list-repo-drafts-dialog.js
+++ b/frontend/src/components/dialog/list-repo-drafts-dialog.js
@@ -26,11 +26,11 @@ class ListRepoDraftsDialog extends React.Component {
       let drafts = res.data.drafts.map(item => {
         let draft = new Draft(item);
         return draft;
-      })
+      });
       this.setState({
         drafts: drafts 
       }); 
-    })
+    });
   }
 
   toggle = () => {
diff --git a/frontend/src/components/dialog/list-repo-reviews-dialog.js b/frontend/src/components/dialog/list-repo-reviews-dialog.js
index 8638bc32a7..9b5bd83845 100644
--- a/frontend/src/components/dialog/list-repo-reviews-dialog.js
+++ b/frontend/src/components/dialog/list-repo-reviews-dialog.js
@@ -27,7 +27,7 @@ class ListRepoReviewsDialog extends React.Component {
       let reviews = res.data.reviews.map(item =>{
         let review = new Review(item);
         return review;
-      })
+      });
       this.setState({
         reviews: reviews 
       }); 
diff --git a/frontend/src/components/dialog/list-tag-dialog.js b/frontend/src/components/dialog/list-tag-dialog.js
index 4cb35ac9c3..cba8c1f8d6 100644
--- a/frontend/src/components/dialog/list-tag-dialog.js
+++ b/frontend/src/components/dialog/list-tag-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import RepoTag from '../../models/repo-tag';
@@ -39,7 +39,7 @@ class TagListItem extends React.Component {
   }
 
   onListTaggedFiles = () => {
-    this.props.onListTaggedFiles(this.props.item)
+    this.props.onListTaggedFiles(this.props.item);
   }
 
   render() {
diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index 2632625565..1a4e42d3ff 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -33,11 +33,11 @@ class ListTaggedFilesDialog extends React.Component {
       res.data.tagged_files !== undefined &&
       res.data.tagged_files.forEach(file => {
         let taggedFile = file;
-        taggedFileList.push(taggedFile)
+        taggedFileList.push(taggedFile);
       });
       this.setState({
         taggedFileList: taggedFileList,
-      })
+      });
     });
   }
 
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index a30d6be9bb..6b185922e6 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -57,64 +57,64 @@ class ShareDialog extends React.Component {
         <div className="share-dialog-side">
           <Nav pills vertical>
             {enableShareLink &&
-            <NavItem>
-              <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}>
-                {gettext('Share Link')}
-              </NavLink>
-            </NavItem>
+              <NavItem>
+                <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}>
+                  {gettext('Share Link')}
+                </NavLink>
+              </NavItem>
             }
             {enableUploadLink &&
-            <NavItem>
-              <NavLink className={activeTab === 'uploadLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLink')}>
-                {gettext('Upload Link')}
-              </NavLink>
-            </NavItem>
+              <NavItem>
+                <NavLink className={activeTab === 'uploadLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'uploadLink')}>
+                  {gettext('Upload Link')}
+                </NavLink>
+              </NavItem>
             }
             {enableDirPrivateShare &&
-            <Fragment>
-            <NavItem>
-              <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')}>
-                {gettext('Share to user')}
-              </NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')}>
-                {gettext('Share to group')}
-              </NavLink>
-            </NavItem>
-            </Fragment>
+              <Fragment>
+                <NavItem>
+                  <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')}>
+                    {gettext('Share to user')}
+                  </NavLink>
+                </NavItem>
+                <NavItem>
+                  <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')}>
+                    {gettext('Share to group')}
+                  </NavLink>
+                </NavItem>
+              </Fragment>
             }
           </Nav>
         </div>
         <div className="share-dialog-main">
           <TabContent activeTab={this.state.activeTab}>
             {enableShareLink &&
-            <TabPane tabId="shareLink">
-              <GenerateShareLink 
-                itemPath={this.props.itemPath} 
-                repoID={this.props.repoID}
-                closeShareDialog={this.props.toggleDialog} 
-                />
-            </TabPane>
+              <TabPane tabId="shareLink">
+                <GenerateShareLink 
+                  itemPath={this.props.itemPath} 
+                  repoID={this.props.repoID}
+                  closeShareDialog={this.props.toggleDialog} 
+                  />
+              </TabPane>
             }
             {enableUploadLink &&
-            <TabPane tabId="uploadLink">
-              <GenerateUploadLink 
-                itemPath={this.props.itemPath} 
-                repoID={this.props.repoID} 
-                closeShareDialog={this.props.toggleDialog} 
-              />
-            </TabPane>
+              <TabPane tabId="uploadLink">
+                <GenerateUploadLink 
+                  itemPath={this.props.itemPath} 
+                  repoID={this.props.repoID} 
+                  closeShareDialog={this.props.toggleDialog} 
+                />
+              </TabPane>
             }
             {enableDirPrivateShare &&
-            <Fragment>
-            <TabPane tabId="shareToUser">
-              <ShareToUser isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
-            </TabPane>
-            <TabPane tabId="shareToGroup">
-              <ShareToGroup isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
-            </TabPane>
-            </Fragment>
+              <Fragment>
+                <TabPane tabId="shareToUser">
+                  <ShareToUser isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
+                </TabPane>
+                <TabPane tabId="shareToGroup">
+                  <ShareToGroup isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} />
+                </TabPane>
+              </Fragment>
             }
           </TabContent>
         </div>
diff --git a/frontend/src/components/dialog/share-repo-dialog.js b/frontend/src/components/dialog/share-repo-dialog.js
index 91fcf49111..03426f5555 100644
--- a/frontend/src/components/dialog/share-repo-dialog.js
+++ b/frontend/src/components/dialog/share-repo-dialog.js
@@ -11,7 +11,7 @@ const shareRepoListItemProps = {
   repo: PropTypes.object.isRequired,
   onRepoSelect: PropTypes.func.isRequired,
   onPermissionChange: PropTypes.func.isRequired,
-}
+};
 
 class ShareRepoListItem extends React.Component {
 
@@ -102,7 +102,7 @@ class ShareRepoDialog extends React.Component {
 
   handleSubmit = () => {
     if (this.state.selectedRepoList.length === 0) {
-      let errMessage = gettext('Please select a library to share.')
+      let errMessage = gettext('Please select a library to share.');
       this.setState({errMessage: errMessage});
       return;
     }
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index a7d0e34118..8f7b80624a 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -224,7 +224,7 @@ class ShareToGroup extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       seafileAPI.modifyGroupOwnedRepoGroupSharedPermission(repoID, permission, groupID).then(() => {
         this.updateSharedItems(item, permission);
-      })
+      });
     } else {
       seafileAPI.updateShareToGroupItemPermission(repoID, path, 'group', groupID, permission).then(() => {
         this.updateSharedItems(item, permission);
diff --git a/frontend/src/components/dialog/update-tag-dialog.js b/frontend/src/components/dialog/update-tag-dialog.js
index f0c82f66cf..9bb57fd828 100644
--- a/frontend/src/components/dialog/update-tag-dialog.js
+++ b/frontend/src/components/dialog/update-tag-dialog.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { Button, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 
diff --git a/frontend/src/components/dialog/upload-remind-dialog.js b/frontend/src/components/dialog/upload-remind-dialog.js
index 4b561f7e1e..f800d565c4 100644
--- a/frontend/src/components/dialog/upload-remind-dialog.js
+++ b/frontend/src/components/dialog/upload-remind-dialog.js
@@ -40,7 +40,7 @@ class UploadRemindDialog extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button outline color="primary" onClick={this.replaceRepetitionFile}>{gettext('Replace')}</Button>
-          <Button outline color="info" onClick={this.uploadFile}>{gettext("Don't replace")}</Button>
+          <Button outline color="info" onClick={this.uploadFile}>{gettext('Don\'t replace')}</Button>
           <Button outline color="danger" onClick={this.toggle}>{gettext('Cancel')}</Button>
         </ModalFooter>
       </Modal>
diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index cff58d251a..c9414d1fbc 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
-import { gettext, siteRoot, username } from '../../utils/constants';
+import { gettext, siteRoot } from '../../utils/constants';
 import CommonToolbar from '../toolbar/common-toolbar';
 import ViewModeToolbar from '../toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../toolbar/dir-operation-toolbar';
@@ -198,7 +198,7 @@ class DirPanel extends React.Component {
               </div>
               <div className="cur-view-content">
                 {this.props.errorMsg ?
-                 <p className="error text-center">{this.props.errorMsg}</p> :
+                  <p className="error text-center">{this.props.errorMsg}</p> :
                   <Fragment>
                     {!this.props.pathExist ?
                       errMessage :
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 725171863f..bb1c68aa57 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -73,8 +73,8 @@ class DirView extends React.Component {
       this.setState({
         draftCounts: res.data.draft_counts,
         reviewCounts: res.data.review_counts,
-      })
-    })
+      });
+    });
     seafileAPI.listRepoTags(repoID).then(res => {
       let usedRepoTags = [];
       res.data.repo_tags.forEach(item => {
diff --git a/frontend/src/components/dirent-detail/lib-details.js b/frontend/src/components/dirent-detail/lib-details.js
index 09c5206ade..f210977a47 100644
--- a/frontend/src/components/dirent-detail/lib-details.js
+++ b/frontend/src/components/dirent-detail/lib-details.js
@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Utils } from '../../utils/utils';
-import { siteRoot, gettext } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import '../../css/dirent-detail.css';
 import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
-  currentRepo: PropTypes.object.isRequired
+  currentRepo: PropTypes.object.isRequired,
+  closeDetails: PropTypes.func.isRequired,
 };
 
 class LibDetail extends React.Component {
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 66b52001cc..b5c2898050 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -146,41 +146,41 @@ class DirentListItem extends React.Component {
 
   onMenuItemClick = (operation) => {
     switch(operation) {
-    case 'Rename':
-      this.onItemRenameToggle();
-      break;
-    case 'Move':
-      this.onItemMoveToggle();
-      break;
-    case 'Copy':
-      this.onItemCopyToggle();
-      break;
-    case 'Permission':
-      this.onPermissionItem();
-      break;
-    case 'Details':
-      this.onDetailsItem();
-      break;
-    case 'Unlock':
-      this.onUnlockItem();
-      break;
-    case 'Lock':
-      this.onLockItem();
-      break;
-    case 'Comment':
-      this.onComnentItem();
-      break;
-    case 'History':
-      this.onHistory();
-      break;
-    case 'Access Log':
-      this.onAccessLog();
-      break;
-    case 'Open via Client':
-      this.onOpenViaClient();
-      break;
-    default:
-      break;
+      case 'Rename':
+        this.onItemRenameToggle();
+        break;
+      case 'Move':
+        this.onItemMoveToggle();
+        break;
+      case 'Copy':
+        this.onItemCopyToggle();
+        break;
+      case 'Permission':
+        this.onPermissionItem();
+        break;
+      case 'Details':
+        this.onDetailsItem();
+        break;
+      case 'Unlock':
+        this.onUnlockItem();
+        break;
+      case 'Lock':
+        this.onLockItem();
+        break;
+      case 'Comment':
+        this.onComnentItem();
+        break;
+      case 'History':
+        this.onHistory();
+        break;
+      case 'Access Log':
+        this.onAccessLog();
+        break;
+      case 'Open via Client':
+        this.onOpenViaClient();
+        break;
+      default:
+        break;
     }
   }
 
@@ -316,7 +316,7 @@ class DirentListItem extends React.Component {
 
   onTagTooltipToggle = (e) => {
     e.stopPropagation();
-    this.setState({isShowTagTooltip: !this.state.isShowTagTooltip})
+    this.setState({isShowTagTooltip: !this.state.isShowTagTooltip});
   }
 
   render() {
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index fabb7e0b03..2507f18159 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -143,7 +143,7 @@ class DirentListView extends React.Component {
         'url': `${siteRoot}lib/${repoID}/file${path}`,
         'src': src
       };
-    }
+    };
 
     return items.map((item) => { return prepareItem(item); });
   }
@@ -227,85 +227,85 @@ class DirentListView extends React.Component {
     const imageItemsLength = imageItems.length;
     const imageCaption = imageItemsLength && (
       <Fragment>
-        <span>{gettext("%curr% of %total%").replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
+        <span>{gettext('%curr% of %total%').replace('%curr%', imageIndex + 1).replace('%total%', imageItemsLength)}</span>
         <br />
-        <a href={imageItems[imageIndex].url} target="_blank">{gettext("Open in New Tab")}</a>
+        <a href={imageItems[imageIndex].url} target="_blank">{gettext('Open in New Tab')}</a>
       </Fragment>
     );
 
     return (
       <Fragment>
-      <table>
-        <thead>
-          <tr>
-            <th width="3%" className="text-center">
-              <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
-            </th>
-            <th width="3%">{/*icon */}</th>
-            <th width="5%">{/*star */}</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="20%">{/*operation */}</th>
-            <th width="11%">{gettext('Size')}</th>
-            <th width="13%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            direntList.length !== 0 && direntList.map((dirent, index) => {
-              return (
-                <DirentListItem
-                  key={index}
-                  dirent={dirent}
-                  path={this.props.path}
-                  repoID={this.props.repoID}
-                  currentRepoInfo={this.props.currentRepoInfo}
-                  isRepoOwner={this.props.isRepoOwner}
-                  direntList={this.props.direntList}
-                  onItemClick={this.props.onItemClick}
-                  onItemRenameToggle={this.onItemRenameToggle}
-                  onItemSelected={this.props.onItemSelected}
-                  onItemDelete={this.props.onItemDelete}
-                  onItemRename={this.onItemRename}
-                  onItemMove={this.props.onItemMove}
-                  onItemCopy={this.props.onItemCopy}
-                  updateDirent={this.props.updateDirent}
-                  isItemFreezed={this.state.isItemFreezed}
-                  onFreezedItem={this.onFreezedItem}
-                  onUnfreezedItem={this.onUnfreezedItem}
-                  onDirentClick={this.props.onDirentClick}
-                  onItemDetails={this.onItemDetails}
-                  showImagePopup={this.showImagePopup}
-                  repoEncrypted={this.props.repoEncrypted}
-                  enableDirPrivateShare={this.props.enableDirPrivateShare}
-                  isAdmin={this.props.isAdmin}
-                  isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                />
-              );
-            })
-          }
-        </tbody>
-      </table>
+        <table>
+          <thead>
+            <tr>
+              <th width="3%" className="text-center">
+                <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
+              </th>
+              <th width="3%">{/*icon */}</th>
+              <th width="5%">{/*star */}</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="20%">{/*operation */}</th>
+              <th width="11%">{gettext('Size')}</th>
+              <th width="13%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              direntList.length !== 0 && direntList.map((dirent, index) => {
+                return (
+                  <DirentListItem
+                    key={index}
+                    dirent={dirent}
+                    path={this.props.path}
+                    repoID={this.props.repoID}
+                    currentRepoInfo={this.props.currentRepoInfo}
+                    isRepoOwner={this.props.isRepoOwner}
+                    direntList={this.props.direntList}
+                    onItemClick={this.props.onItemClick}
+                    onItemRenameToggle={this.onItemRenameToggle}
+                    onItemSelected={this.props.onItemSelected}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.onItemRename}
+                    onItemMove={this.props.onItemMove}
+                    onItemCopy={this.props.onItemCopy}
+                    updateDirent={this.props.updateDirent}
+                    isItemFreezed={this.state.isItemFreezed}
+                    onFreezedItem={this.onFreezedItem}
+                    onUnfreezedItem={this.onUnfreezedItem}
+                    onDirentClick={this.props.onDirentClick}
+                    onItemDetails={this.onItemDetails}
+                    showImagePopup={this.showImagePopup}
+                    repoEncrypted={this.props.repoEncrypted}
+                    enableDirPrivateShare={this.props.enableDirPrivateShare}
+                    isAdmin={this.props.isAdmin}
+                    isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                  />
+                );
+              })
+            }
+          </tbody>
+        </table>
 
-      {this.state.isImagePopupOpen && (
-        <Lightbox
-          mainSrc={imageItems[imageIndex].src}
-          imageTitle={imageItems[imageIndex].name}
-          imageCaption={imageCaption}
-          nextSrc={imageItems[(imageIndex + 1) % imageItemsLength].src}
-          prevSrc={imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src}
-          onCloseRequest={this.closeImagePopup}
-          onMovePrevRequest={this.moveToPrevImage}
-          onMoveNextRequest={this.moveToNextImage}
-          imagePadding={70}
-          imageLoadErrorMessage={gettext('The image could not be loaded.')}
-          prevLabel={gettext("Previous (Left arrow key)")}
-          nextLabel={gettext("Next (Right arrow key)")}
-          closeLabel={gettext("Close (Esc)")}
-          zoomInLabel={gettext('Zoom in')}
-          zoomOutLabel={gettext('Zoom out')}
-        />
-      )}
+        {this.state.isImagePopupOpen && (
+          <Lightbox
+            mainSrc={imageItems[imageIndex].src}
+            imageTitle={imageItems[imageIndex].name}
+            imageCaption={imageCaption}
+            nextSrc={imageItems[(imageIndex + 1) % imageItemsLength].src}
+            prevSrc={imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength].src}
+            onCloseRequest={this.closeImagePopup}
+            onMovePrevRequest={this.moveToPrevImage}
+            onMoveNextRequest={this.moveToNextImage}
+            imagePadding={70}
+            imageLoadErrorMessage={gettext('The image could not be loaded.')}
+            prevLabel={gettext('Previous (Left arrow key)')}
+            nextLabel={gettext('Next (Right arrow key)')}
+            closeLabel={gettext('Close (Esc)')}
+            zoomInLabel={gettext('Zoom in')}
+            zoomOutLabel={gettext('Zoom out')}
+          />
+        )}
       </Fragment>
     );
   }
diff --git a/frontend/src/components/dirent-list-view/dirent-menu.js b/frontend/src/components/dirent-list-view/dirent-menu.js
index e0e25b3f72..3c2f06e7ae 100644
--- a/frontend/src/components/dirent-list-view/dirent-menu.js
+++ b/frontend/src/components/dirent-list-view/dirent-menu.js
@@ -4,6 +4,7 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
 
 const propTypes = {
+  dirent: PropTypes.object.isRequired,
   currentRepoInfo: PropTypes.object.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
@@ -55,7 +56,7 @@ class DirentMenu extends React.Component {
       menuList.push('Copy');
       if (isPro) {
         if (dirent.is_locked) {
-          if (dirent.locked_by_me || (dirent.lock_owner === "OnlineOffice" && permission === 'rw')) {
+          if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && permission === 'rw')) {
             menuList.push('Unlock');
           }
         } else {
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index 24fe8c9cf9..c3f6a89f41 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -501,26 +501,24 @@ class FileUploader extends React.Component {
             <input className="upload-input" type="file" ref={this.uploadInput} onClick={this.onClick}/>
           </div>
         </div>
-          {
-            this.state.isUploadRemindDialogShow &&
-            <UploadRemindDialog
-              currentResumableFile={this.state.currentResumableFile}
-              replaceRepetitionFile={this.replaceRepetitionFile}
-              uploadFile={this.uploadFile}
-              cancelFileUpload={this.cancelFileUpload}
-            />
-          }
-          {
-            this.state.isUploadProgressDialogShow &&
-            <UploadProgressDialog
-              uploadFileList={this.state.uploadFileList}
-              totalProgress={this.state.totalProgress}
-              onCloseUploadDialog={this.onCloseUploadDialog}
-              onCancelAllUploading={this.onCancelAllUploading}
-              onUploadCancel={this.onUploadCancel}
-              uploadBitrate={this.state.uploadBitrate}
-            />
-          }
+        {this.state.isUploadRemindDialogShow &&
+          <UploadRemindDialog
+            currentResumableFile={this.state.currentResumableFile}
+            replaceRepetitionFile={this.replaceRepetitionFile}
+            uploadFile={this.uploadFile}
+            cancelFileUpload={this.cancelFileUpload}
+          />
+        }
+        {this.state.isUploadProgressDialogShow &&
+          <UploadProgressDialog
+            uploadFileList={this.state.uploadFileList}
+            totalProgress={this.state.totalProgress}
+            onCloseUploadDialog={this.onCloseUploadDialog}
+            onCancelAllUploading={this.onCancelAllUploading}
+            onUploadCancel={this.onUploadCancel}
+            uploadBitrate={this.state.uploadBitrate}
+          />
+        }
       </Fragment>
     );
   }
diff --git a/frontend/src/components/file-uploader/upload-list-item.js b/frontend/src/components/file-uploader/upload-list-item.js
index 5d0a4aed63..4a45ad26e3 100644
--- a/frontend/src/components/file-uploader/upload-list-item.js
+++ b/frontend/src/components/file-uploader/upload-list-item.js
@@ -40,7 +40,7 @@ class UploadListItem extends React.Component {
           <span className="file-size">{this.formatFileSize(item.resumableFile.size)}</span>
           {progress !== 100 &&
             <div className="progress">
-              <div className="progress-bar" role="progressbar" style={{width: `${progress}%`}} aria-valuenow={`${progress}`} aria-valuemin="0" aria-valuemax="100"></div>
+              <div className="progress-bar" role="progressbar" style={{width: `${progress}%`}} aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100"></div>
             </div>
           }
         </td>
diff --git a/frontend/src/components/history-list-view/history-list-view.js b/frontend/src/components/history-list-view/history-list-view.js
index fce29cff68..82a136d4ee 100644
--- a/frontend/src/components/history-list-view/history-list-view.js
+++ b/frontend/src/components/history-list-view/history-list-view.js
@@ -9,6 +9,7 @@ const propTypes = {
   historyList: PropTypes.array.isRequired,
   reloadMore: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
 };
 
 class HistoryListView extends React.Component {
diff --git a/frontend/src/components/index-viewer.js b/frontend/src/components/index-viewer.js
index 3fd492452a..6ab44415cd 100644
--- a/frontend/src/components/index-viewer.js
+++ b/frontend/src/components/index-viewer.js
@@ -120,7 +120,7 @@ class IndexContentViewer extends React.Component {
       <div className={contentClass}>
         <MarkdownViewer
           markdownContent={this.props.indexContent}
-          onContentRendered={this.props.onContentRendered}
+          onContentRendered={this.onContentRendered}
           modifyValueBeforeRender={this.modifyValueBeforeRender}
         />
       </div>
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index d70db732cb..08ca1ad55e 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -48,7 +48,7 @@ class MainSideNav extends React.Component {
       let groupList = res.data.map(item => {
         let group = new Group(item);
         return group;
-      })
+      });
 
       this.groupsHeight = (groupList.length + 1) * _this.listHeight;
       _this.setState({
@@ -125,12 +125,12 @@ class MainSideNav extends React.Component {
     return (
       <ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
         {canAddRepo && (
-        <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
-            <span aria-hidden="true" className="sharp">#</span>
-            <span className="nav-text">{gettext('Libraries')}</span>
-          </Link>
-        </li>
+          <li className="nav-item">
+            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
+              <span aria-hidden="true" className="sharp">#</span>
+              <span className="nav-text">{gettext('Libraries')}</span>
+            </Link>
+          </li>
         )}
         <li className="nav-item">
           <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
@@ -150,12 +150,12 @@ class MainSideNav extends React.Component {
           <h3 className="sf-heading">{gettext('Files')}</h3>
           <ul className="nav nav-pills flex-column nav-container">
             {canAddRepo && (
-            <li className="nav-item">
-              <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
-                <span className="sf2-icon-user" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('My Libraries')}</span>
-              </Link>
-            </li>
+              <li className="nav-item">
+                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
+                  <span className="sf2-icon-user" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('My Libraries')}</span>
+                </Link>
+              </li>
             )}
             <li className="nav-item">
               <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
@@ -197,11 +197,11 @@ class MainSideNav extends React.Component {
             </li>
             {enableWiki &&
               <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('wikis')}`} to={siteRoot + 'wikis/'} title={gettext('Wikis')} onClick={() => this.tabItemClick('wikis')}>
-                <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Wikis')}</span>
-              </Link>
-            </li>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('wikis')}`} to={siteRoot + 'wikis/'} title={gettext('Wikis')} onClick={() => this.tabItemClick('wikis')}>
+                  <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Wikis')}</span>
+                </Link>
+              </li>
             }
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
diff --git a/frontend/src/components/rename.js b/frontend/src/components/rename.js
index b44963f13a..4f03795f81 100644
--- a/frontend/src/components/rename.js
+++ b/frontend/src/components/rename.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../utils/constants'
+import { gettext } from '../utils/constants';
 import toaster from './toast';
 
 const propTypes = {
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index 310935aa3a..035806555c 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -20,7 +20,7 @@ class SelectEditor extends React.Component {
     super(props);
     this.state = {
       isEditing: false,
-    }
+    };
     this.options = [];
   }
 
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 0e5f6089f7..869828fe6e 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -178,7 +178,7 @@ class SharedRepoListItem extends React.Component {
           if (folderPermEnabled) {
             operations = ['Rename', 'Folder Permission', 'Details'];
           } else {
-            operations = ['Rename', 'Details']
+            operations = ['Rename', 'Details'];
           }
         } else {
           operations.push('Unshare');
@@ -252,8 +252,8 @@ class SharedRepoListItem extends React.Component {
       // scene two: (share, unshare), (share), (unshare)
       operations = this.generatorOperations();
     }
-    const shareOperation   = <a href="#" className="op-icon sf2-icon-share" title={gettext("Share")} onClick={this.onItemShare}></a>;
-    const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext("Unshare")} onClick={this.onItemUnshare}></a>
+    const shareOperation   = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></a>;
+    const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext('Unshare')} onClick={this.onItemUnshare}></a>;
     const deleteOperation  = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
     
     if (this.isDeparementOnwerGroupMember) {
@@ -272,7 +272,7 @@ class SharedRepoListItem extends React.Component {
             />
             <DropdownMenu>
               {operations.map((item, index) => {
-                return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateMenuItem(item)}</DropdownItem>
+                return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateMenuItem(item)}</DropdownItem>;
               })}
             </DropdownMenu>
           </Dropdown>
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
index 26d60715b7..c7dc95da50 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
@@ -84,12 +84,12 @@ class SharedRepoListView extends React.Component {
       <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
         <thead>
           <tr>
-            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="40%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-            <th width="12%"><span className="sr-only">{gettext("Actions")}</span></th>
-            <th width={'14%'}>{gettext("Size")}</th>
+            <th width="12%"><span className="sr-only">{gettext('Actions')}</span></th>
+            <th width={'14%'}>{gettext('Size')}</th>
             <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            <th width="16%">{gettext("Owner")}</th>
+            <th width="16%">{gettext('Owner')}</th>
           </tr>
         </thead>
         <tbody>
@@ -108,13 +108,13 @@ class SharedRepoListView extends React.Component {
       <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
         <thead>
           <tr>
-            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="68%">
-              {gettext("Sort:")}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext("name")} {sortByName && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext("last update")} {sortByTime && sortIcon}</a>
+              {gettext('Sort:')}
+              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {sortByName && sortIcon}</a>
+              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {sortByTime && sortIcon}</a>
             </th>
-            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/components/toast/alert.js b/frontend/src/components/toast/alert.js
index 67b37efc42..340e8f8fad 100644
--- a/frontend/src/components/toast/alert.js
+++ b/frontend/src/components/toast/alert.js
@@ -71,14 +71,14 @@ class Alert extends React.PureComponent {
 
   getContainerStyle(intent) {
     switch (intent) {
-    case 'success':
-      return { borderStyle: this.containerBorderSuccess, iconColor: css({color: 'rgb(71, 184, 129)'}), iconClass: 'fa fa-check-circle' };
-    case 'warning':
-      return { borderStyle: this.containerBorderWarn, iconColor: css({color: 'rgb(217, 130, 43)'}) , iconClass: 'fa fa-exclamation-triangle' };
-    case 'none':
-      return { borderStyle: this.containerBorderNotify, iconColor: css({color: 'rgb(16, 112, 202)'}), iconClass: 'fa fa-exclamation-circle' };
-    case  'danger':
-      return { borderStyle: this.containerBorderDanger, iconColor: css({color: 'rgb(236, 76, 71)'}), iconClass: 'fa fa-exclamation-circle' };
+      case 'success':
+        return { borderStyle: this.containerBorderSuccess, iconColor: css({color: 'rgb(71, 184, 129)'}), iconClass: 'fa fa-check-circle' };
+      case 'warning':
+        return { borderStyle: this.containerBorderWarn, iconColor: css({color: 'rgb(217, 130, 43)'}) , iconClass: 'fa fa-exclamation-triangle' };
+      case 'none':
+        return { borderStyle: this.containerBorderNotify, iconColor: css({color: 'rgb(16, 112, 202)'}), iconClass: 'fa fa-exclamation-circle' };
+      case  'danger':
+        return { borderStyle: this.containerBorderDanger, iconColor: css({color: 'rgb(236, 76, 71)'}), iconClass: 'fa fa-exclamation-circle' };
     }
   }
 
diff --git a/frontend/src/components/toast/toast.js b/frontend/src/components/toast/toast.js
index 0c27b0f98c..94e8ee841d 100644
--- a/frontend/src/components/toast/toast.js
+++ b/frontend/src/components/toast/toast.js
@@ -40,9 +40,7 @@ const animationStyles = css({
   height: 0,
   transition: `all ${ANIMATION_DURATION}ms ${animationEasing.deceleration}`,
   '&[data-state="entering"], &[data-state="entered"]': {
-    animation: `${openAnimation} ${ANIMATION_DURATION}ms ${
-            animationEasing.spring
-            } both`
+    animation: `${openAnimation} ${ANIMATION_DURATION}ms ${animationEasing.spring} both`
   },
   '&[data-state="exiting"]': {
     animation: `${closeAnimation} 120ms ${animationEasing.acceleration} both`
@@ -51,45 +49,44 @@ const animationStyles = css({
 
 export default class Toast extends React.PureComponent {
   static propTypes = {
-        /**
-         * The z-index of the toast.
-         */
+    /**
+     * The z-index of the toast.
+     */
     zIndex: PropTypes.number,
 
-        /**
-         * Duration of the toast.
-         */
+    /**
+     * Duration of the toast.
+     */
     duration: PropTypes.number,
 
-        /**
-         * Function called when the toast is all the way closed.
-         */
+    /**
+     * Function called when the toast is all the way closed.
+     */
     onRemove: PropTypes.func,
 
-        /**
-         * The type of the alert.
-         */
-    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
-            .isRequired,
+    /**
+     * The type of the alert.
+     */
+    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger']).isRequired,
 
-        /**
-         * The title of the alert.
-         */
+    /**
+     * The title of the alert.
+     */
     title: PropTypes.node,
 
-        /**
-         * Description of the alert.
-         */
+    /**
+     * Description of the alert.
+     */
     children: PropTypes.node,
 
-        /**
-         * When true, show a close icon button inside of the toast.
-         */
+    /**
+     * When true, show a close icon button inside of the toast.
+     */
     hasCloseButton: PropTypes.bool,
 
-        /**
-         * When false, will close the Toast and call onRemove when finished.
-         */
+    /**
+     * When false, will close the Toast and call onRemove when finished.
+     */
     isShown: PropTypes.bool
   }
 
@@ -104,7 +101,7 @@ export default class Toast extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (prevProps.isShown !== this.props.isShown) {
-            // eslint-disable-next-line react/no-did-update-set-state
+      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         isShown: this.props.isShown
       });
@@ -162,23 +159,23 @@ export default class Toast extends React.PureComponent {
   render() {
     return (
       <Transition
-          appear
-          unmountOnExit
-          timeout={ANIMATION_DURATION}
-          in={this.state.isShown}
-          onExited={this.props.onRemove}
+        appear
+        unmountOnExit
+        timeout={ANIMATION_DURATION}
+        in={this.state.isShown}
+        onExited={this.props.onRemove}
       >
         {state => (
           <div
-              data-state={state}
-              className={animationStyles}
-              onMouseEnter={this.handleMouseEnter}
-              onMouseLeave={this.handleMouseLeave}
-              style={{
-                height: this.state.height,
-                zIndex: this.props.zIndex,
-                marginBottom: this.state.isShown ? 0 : -this.state.height
-              }}
+            data-state={state}
+            className={animationStyles}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+            style={{
+              height: this.state.height,
+              zIndex: this.props.zIndex,
+              marginBottom: this.state.isShown ? 0 : -this.state.height
+            }}
           >
             <div ref={this.onRef} style={{ padding: 8 }}>
               <Alert
@@ -190,7 +187,7 @@ export default class Toast extends React.PureComponent {
               />
             </div>
           </div>
-                )}
+        )}
       </Transition>
     );
   }
diff --git a/frontend/src/components/toast/toastManager.js b/frontend/src/components/toast/toastManager.js
index 370f899bfa..b5c7eec629 100644
--- a/frontend/src/components/toast/toastManager.js
+++ b/frontend/src/components/toast/toastManager.js
@@ -19,19 +19,19 @@ const hasCustomId = settings => Object.hasOwnProperty.call(settings, 'id');
 
 export default class ToastManager extends React.PureComponent {
   static propTypes = {
-        /**
-         * Function called with the `this.notify` function.
-         */
+    /**
+     * Function called with the `this.notify` function.
+     */
     bindNotify: PropTypes.func.isRequired,
 
-        /**
-         * Function called with the `this.getToasts` function.
-         */
+    /**
+     * Function called with the `this.getToasts` function.
+     */
     bindGetToasts: PropTypes.func.isRequired,
 
-        /**
-         * Function called with the `this.closeAll` function.
-         */
+    /**
+     * Function called with the `this.closeAll` function.
+     */
     bindCloseAll: PropTypes.func.isRequired
   }
 
@@ -58,10 +58,10 @@ export default class ToastManager extends React.PureComponent {
   }
 
   notify = (title, settings) => {
-        // If there's a custom toast ID passed, close existing toasts with the same custom ID
+    // If there's a custom toast ID passed, close existing toasts with the same custom ID
     if (hasCustomId(settings)) {
       for (const toast of this.state.toasts) {
-                // Since unique ID is still appended to a custom ID, skip the unique ID and check only prefix
+        // Since unique ID is still appended to a custom ID, skip the unique ID and check only prefix
         if (String(toast.id).startsWith(settings.id)) {
           this.closeToast(toast.id);
         }
@@ -94,10 +94,10 @@ export default class ToastManager extends React.PureComponent {
     };
   }
 
-    /**
-     * This will set isShown on the Toast which will close the toast.
-     * It won't remove the toast until onExited triggers onRemove.
-     */
+  /**
+   * This will set isShown on the Toast which will close the toast.
+   * It won't remove the toast until onExited triggers onRemove.
+   */
   closeToast = id => {
     this.setState(previousState => {
       return {
diff --git a/frontend/src/components/toast/toaster.js b/frontend/src/components/toast/toaster.js
index 37f229c093..383c8e1f11 100644
--- a/frontend/src/components/toast/toaster.js
+++ b/frontend/src/components/toast/toaster.js
@@ -19,9 +19,9 @@ export default class Toaster {
 
     ReactDOM.render(
       <ToastManager
-          bindNotify={this._bindNotify}
-          bindGetToasts={this._bindGetToasts}
-          bindCloseAll={this._bindCloseAll}
+        bindNotify={this._bindNotify}
+        bindGetToasts={this._bindGetToasts}
+        bindCloseAll={this._bindCloseAll}
       />,
       container
     );
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index fe25ac1c68..72759642d1 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -185,7 +185,7 @@ class DirOperationToolbar extends React.Component {
         <div className="operation">
           {(this.props.isViewFile && this.props.permission === 'rw' && !this.props.hasDraft ) && (
             <Fragment>
-            <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
+              <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
             </Fragment>
           )}
 
@@ -231,7 +231,7 @@ class DirOperationToolbar extends React.Component {
               onAddFile={this.onAddFile}
               checkDuplicatedName={this.checkDuplicatedName}
               addFileCancel={this.onCreateFileToggle}
-              />
+            />
           </ModalPortal>
         )}
         {this.state.isCreateFolderDialogShow && (
diff --git a/frontend/src/components/toolbar/groups-toolbar.js b/frontend/src/components/toolbar/groups-toolbar.js
index 1418444e57..57700987f9 100644
--- a/frontend/src/components/toolbar/groups-toolbar.js
+++ b/frontend/src/components/toolbar/groups-toolbar.js
@@ -24,7 +24,7 @@ class GroupsToolbar extends React.Component {
         <div className="cur-view-toolbar border-left-show">
           <div className="operation">
             <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext("New Group")}
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
             </Button>
           </div>
           <span title="Side Nav Menu" onClick={onShowSidePanel}
diff --git a/frontend/src/components/toolbar/repo-view-toobar.js b/frontend/src/components/toolbar/repo-view-toobar.js
index e991cf345f..7e104f7d4d 100644
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/frontend/src/components/toolbar/repo-view-toobar.js
@@ -10,6 +10,7 @@ const propTypes = {
   // isOwnLibrary: PropTypes.bool.isRequired,
   libraryType: PropTypes.string.isRequired,
   onCreateRepo: PropTypes.func.isRequired,
+  onShowSidePanel: PropTypes.func.isRequired,
 };
 
 class RepoViewToolbar extends React.Component {
diff --git a/frontend/src/components/tree-view/tree-helper.js b/frontend/src/components/tree-view/tree-helper.js
index 91841213e9..0ad75f2871 100644
--- a/frontend/src/components/tree-view/tree-helper.js
+++ b/frontend/src/components/tree-view/tree-helper.js
@@ -124,8 +124,8 @@ class TreeHelper {
     if (destNode) {
       nodePaths.forEach(nodePath => {
         let node = treeCopy.getNodeByPath(nodePath);
-          treeCopy.copyNode(node, destNode);
-        });
+        treeCopy.copyNode(node, destNode);
+      });
     }
     return treeCopy;
   }
diff --git a/frontend/src/components/tree-view/tree-node-menu.js b/frontend/src/components/tree-view/tree-node-menu.js
index 89a25e5f3f..83c8807b7f 100644
--- a/frontend/src/components/tree-view/tree-node-menu.js
+++ b/frontend/src/components/tree-view/tree-node-menu.js
@@ -17,7 +17,7 @@ class TreeNodeMenu extends React.Component {
     this.state = {
       isItemMenuShow: false,
       menuList: []
-    }
+    };
   }
 
   componentDidMount() {
@@ -66,12 +66,13 @@ class TreeNodeMenu extends React.Component {
     e.stopPropagation();
     this.setState(
       {isItemMenuShow: !this.state.isItemMenuShow }, () => {
-      if (this.state.isItemMenuShow) {
-        this.props.onFreezedItem()
-      } else {
-        this.props.onUnFreezedItem();
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.props.onUnFreezedItem();
+        }
       }
-    });
+    );
   }
 
   onMenuItemClick = (event) => {
diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js
index 51a3fd66a6..d2f47904c3 100644
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -15,6 +15,7 @@ const propTypes = {
   onNodeDragStart: PropTypes.func.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
   onUnFreezedItem: PropTypes.func.isRequired,
+  onMenuItemClick: PropTypes.func,
 };
 
 class TreeNodeView extends React.Component {
@@ -76,20 +77,20 @@ class TreeNodeView extends React.Component {
     let icon = '';
     let type = '';
     if (node.object.type === 'dir') {
-      icon = <i className="far fa-folder"></i>
+      icon = <i className="far fa-folder"></i>;
       type = 'dir';
     } else {
       let index = node.object.name.lastIndexOf('.');
       if (index === -1) {
-        icon = <i className="far fa-file"></i>
+        icon = <i className="far fa-file"></i>;
         type = 'file';
       } else {
         let suffix = node.object.name.slice(index).toLowerCase();
         if (suffix === '.png' || suffix === '.jpg') {
-          icon = <i className="far fa-image"></i>
+          icon = <i className="far fa-image"></i>;
           type = 'image';
         } else {
-          icon = <i className="far fa-file"></i>
+          icon = <i className="far fa-file"></i>;
           type = 'file';
         }
       }
diff --git a/frontend/src/components/tree-view/tree-node.js b/frontend/src/components/tree-view/tree-node.js
index 0a404754d1..3f9c5c8be1 100644
--- a/frontend/src/components/tree-view/tree-node.js
+++ b/frontend/src/components/tree-view/tree-node.js
@@ -108,7 +108,7 @@ class TreeNode {
       isExpanded: this.isExpanded,
       parentNode: this.parentNode,
       children: children,
-    }
+    };
 
     return treeNode;
   }
diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/wiki-markdown-viewer.js
index b97b34b8bd..aaa06d6f1d 100644
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/frontend/src/components/wiki-markdown-viewer.js
@@ -161,7 +161,7 @@ class WikiMarkdownViewer extends React.Component {
           onContentRendered={this.onContentRendered}
           modifyValueBeforeRender={this.modifyValueBeforeRender}
         />
-      )
+      );
     }
 
     return (
@@ -171,12 +171,12 @@ class WikiMarkdownViewer extends React.Component {
         activeTitleIndex={this.state.activeTitleIndex}
         onContentRendered={this.onContentRendered}
       />
-    )
+    );
   }
 
   render() {
     if (this.props.isFileLoading) {
-      return <Loading />
+      return <Loading />;
     }
     return (
       <div ref={this.markdownContainer} className="wiki-page-container" onScroll={this.onScrollHandler.bind(this)}>
@@ -192,7 +192,7 @@ class WikiMarkdownViewer extends React.Component {
 
 const defaultProps = {
   isWiki: false,
-}
+};
 
 WikiMarkdownViewer.propTypes = propTypes;
 MarkdownViewer.defaultProps = defaultProps;
diff --git a/frontend/src/draft-review.js b/frontend/src/draft-review.js
index e3e9e231dd..9fe1502fa6 100644
--- a/frontend/src/draft-review.js
+++ b/frontend/src/draft-review.js
@@ -73,14 +73,14 @@ class DraftReview extends React.Component {
         this.setState({
           isLoading: false,
           isShowDiff: false
-        })
+        });
         break;
-      case "open":
+      case 'open':
         if (!draftFileExists) {
           this.setState({
             isLoading: false,
             isShowDiff: false
-          })
+          });
           return;
         }
 
@@ -95,8 +95,8 @@ class DraftReview extends React.Component {
                     isLoading: false,
                     isShowDiff: false
                   }); 
-                })
-            })
+                });
+            });
           return;
         }
 
@@ -154,12 +154,12 @@ class DraftReview extends React.Component {
           }));
         }
         break;
-      case "finished":  
+      case 'finished':  
         if (!originFileExists) {
           this.setState({
             isLoading: false,
             isShowDiff: false
-          }) 
+          });
           return;
         }
 
@@ -322,8 +322,8 @@ class DraftReview extends React.Component {
     if (nativeSelection.isCollapsed === false) {
       const nativeRange = nativeSelection.getRangeAt(0);
       const focusNode = nativeSelection.focusNode;
-      if ((focusNode.tagName === "I") ||
-          (focusNode.nodeType !== 3 && focusNode.getAttribute("class") === "language-type")) {
+      if ((focusNode.tagName === 'I') ||
+          (focusNode.nodeType !== 3 && focusNode.getAttribute('class') === 'language-type')) {
         // fix select last paragraph
         let fragment = nativeRange.cloneContents();
         let startNode = fragment.firstChild.firstChild;
@@ -487,7 +487,7 @@ class DraftReview extends React.Component {
     if (typeof(key) === 'string') {
       const win = window;
       let element = win.document.querySelector(`[data-key="${key}"]`);
-      while (element.tagName === "CODE") {
+      while (element.tagName === 'CODE') {
         element = element.parentNode;
       }
       const scroller = this.findScrollContainer(element, win);
@@ -556,7 +556,7 @@ class DraftReview extends React.Component {
     let key = this.state.changedNodes[this.changeIndex];
     let element = win.document.querySelector(`[data-key="${key}"]`);
     // fix code-block or tables
-    while (element.className.indexOf('diff-') === -1 && element.tagName !== "BODY") {
+    while (element.className.indexOf('diff-') === -1 && element.tagName !== 'BODY') {
       element = element.parentNode;
     }
     const scroller = this.findScrollContainer(element, win);
@@ -624,8 +624,7 @@ class DraftReview extends React.Component {
             newMarkdownContent={this.state.draftContent}
             oldMarkdownContent={this.state.draftOriginContent}
             ref="diffViewer"
-          />
-        :
+          /> :
           <DiffViewer
             newMarkdownContent={this.state.draftContent}
             oldMarkdownContent={this.state.draftContent}
@@ -634,21 +633,21 @@ class DraftReview extends React.Component {
         }
         <i className="fa fa-plus-square review-comment-btn" ref="commentbtn" onMouseDown={this.addComment}></i>
       </div>
-    )  
+    );
   }
 
   renderContent = () => {
     switch(this.state.reviewStatus) {
-      case "closed":
+      case 'closed':
         return <p className="error">{gettext('The review has been closed.')}</p>;
-      case "open":
+      case 'open':
         if (!draftFileExists) {
           return <p className="error">{gettext('Draft has been deleted.')}</p>;
         }
         return this.showDiffViewer();
-      case "finished":
+      case 'finished':
         if (!originFileExists) {
-          return <p className="error">{gettext('Original file has been deleted.')}</p>
+          return <p className="error">{gettext('Original file has been deleted.')}</p>;
         }
         return this.showDiffViewer();
     }
@@ -667,14 +666,14 @@ class DraftReview extends React.Component {
           target="toggle-diff" toggle={this.toggleDiffTip}>
           {gettext('View diff')}</Tooltip>
       </div>
-    )  
+    );
   }
 
   renderDiffButton = () => {
     switch(this.state.reviewStatus) {
-      case "closed":
+      case 'closed':
         return;
-      case "open":
+      case 'open':
         if (!draftFileExists) {
           return;
         }
@@ -683,7 +682,7 @@ class DraftReview extends React.Component {
           return;
         }
         return this.showDiffButton();
-      case "finished":
+      case 'finished':
         if (!originFileExists) {
           return;
         } 
@@ -695,15 +694,15 @@ class DraftReview extends React.Component {
     let viewFile = <a href={OriginFileLink} className="view-file-link">{gettext('View File')}</a>;
     let editDraft = <a href={draftLink} className="draft-link">{gettext('Edit draft')}</a>;
     switch(this.state.reviewStatus) {
-      case "closed":
+      case 'closed':
         return viewFile;
-      case "open": 
+      case 'open': 
         if (!draftFileExists) {
           return viewFile;
         }
 
         return editDraft; 
-      case "finished":
+      case 'finished':
         if (!originFileExists) {
           return;
         }
@@ -713,18 +712,18 @@ class DraftReview extends React.Component {
 
   showNavItem = (showTab) => {
     switch(showTab) {
-      case "info":
+      case 'info':
         return (
           <NavItem className="nav-item">
-           <NavLink
-             className={classnames({ active: this.state.activeTab === 'reviewInfo' })}
-             onClick={() => { this.tabItemClick('reviewInfo');}}
-           >
-             <i className="fas fa-info-circle"></i>
-           </NavLink>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === 'reviewInfo' })}
+              onClick={() => { this.tabItemClick('reviewInfo');}}
+            >
+              <i className="fas fa-info-circle"></i>
+            </NavLink>
           </NavItem>
         );
-      case "comments":
+      case 'comments':
         return (
           <NavItem className="nav-item">
             <NavLink
@@ -732,12 +731,11 @@ class DraftReview extends React.Component {
               onClick={() => {this.tabItemClick('comments');}}
             >
               <i className="fa fa-comments"></i>
-              { this.state.commentsNumber > 0 &&
-                <div className='comments-number'>{this.state.commentsNumber}</div>}
+              {this.state.commentsNumber > 0 && <div className='comments-number'>{this.state.commentsNumber}</div>}
             </NavLink>
           </NavItem>
         );
-      case "history":
+      case 'history':
         return (
           <NavItem className="nav-item">
             <NavLink
@@ -753,42 +751,42 @@ class DraftReview extends React.Component {
 
   renderNavItems = () => {
     switch(this.state.reviewStatus) {
-      case "closed":
+      case 'closed':
         return (
           <Nav tabs className="review-side-panel-nav">
-            {this.showNavItem("info")}
+            {this.showNavItem('info')}
           </Nav>
         );
-      case "open":
+      case 'open':
         if (!draftFileExists) {
           return (
             <Nav tabs className="review-side-panel-nav">
-              {this.showNavItem("info")}
+              {this.showNavItem('info')}
             </Nav>
           );
         }
 
         return (
           <Nav tabs className="review-side-panel-nav">
-           {this.showNavItem('info')}
-           {this.showNavItem('comments')}
-           {this.showNavItem('history')}
+            {this.showNavItem('info')}
+            {this.showNavItem('comments')}
+            {this.showNavItem('history')}
           </Nav>
         );
-    case "finished":
-      if (!originFileExists) {
+      case 'finished':
+        if (!originFileExists) {
+          return (
+            <Nav tabs className="review-side-panel-nav">
+              {this.showNavItem('info')}
+            </Nav>
+          );
+        }
         return (
           <Nav tabs className="review-side-panel-nav">
-            {this.showNavItem("info")}
+            {this.showNavItem('info')}
+            {this.showNavItem('comments')}
           </Nav>
         );
-      }
-      return (
-        <Nav tabs className="review-side-panel-nav">
-           {this.showNavItem('info')}
-           {this.showNavItem('comments')}
-        </Nav>
-      )
     } 
   }
 
@@ -813,14 +811,18 @@ class DraftReview extends React.Component {
           </div>
           <div className="button-group">
             {this.renderDiffButton()}
-            {
-              this.state.reviewStatus === 'open' &&
+            {this.state.reviewStatus === 'open' &&
               <div className="cur-file-operation">
-                <button className='btn btn-secondary file-operation-btn' title={gettext('Close review')}
-                  onClick={this.onCloseReview}>{gettext('Close')}</button>
-                  { draftFileExists && <button className='btn btn-success file-operation-btn' title={gettext('Publish draft')}
-                  onClick={this.onPublishReview}>{gettext('Publish')}</button>
-                  }
+                <button className='btn btn-secondary file-operation-btn' title={gettext('Close review')} onClick={this.onCloseReview}>{gettext('Close')}</button>
+                {draftFileExists && 
+                  <button 
+                    className='btn btn-success file-operation-btn' 
+                    title={gettext('Publish draft')}
+                    onClick={this.onPublishReview}
+                  >
+                    {gettext('Publish')}
+                  </button>
+                }
               </div>
             }
             {
@@ -880,7 +882,7 @@ class DraftReview extends React.Component {
                       inResizing={this.state.inResizing}
                     />
                   </TabPane>
-                  { this.state.reviewStatus == 'finished'? '':
+                  {this.state.reviewStatus == 'finished' ? '' :
                     <TabPane tabId="history" className="history">
                       <HistoryList
                         activeItem={this.state.activeItem}
diff --git a/frontend/src/models/activity.js b/frontend/src/models/activity.js
index 5fdfe8a5d6..17fcefa2f5 100644
--- a/frontend/src/models/activity.js
+++ b/frontend/src/models/activity.js
@@ -1,7 +1,5 @@
-import moment from 'moment';
-
 class Acticity {
- constructor(json) {
+  constructor(json) {
     this.repo_id = json.repo_id;
     this.repo_name = json.repo_name;
     this.obj_type = json.obj_type;
@@ -27,7 +25,7 @@ class Acticity {
       this.old_path = json.old_path;
       this.review_id = json.review_id;
     }
- }
+  }
 }
 
 export default Acticity;
diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js
index a6c7bbd945..9719b51060 100644
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/frontend/src/pages/dashboard/files-activities.js
@@ -54,125 +54,125 @@ class TableBody extends Component {
 
       if (item.obj_type == 'repo') {
         switch(item.op_type) {
-        case 'create':
-          op = gettext('Created library');
-          details = <td>{libLink}</td>;
-          break;
-        case 'rename':
-          op = gettext('Renamed library');
-          details = <td>{item.old_repo_name} => {libLink}</td>;
-          break;
-        case 'delete':
-          op = gettext('Deleted library');
-          details = <td>{item.repo_name}</td>;
-          break;
-        case 'recover':
-          op = gettext('Restored library');
-          details = <td>{libLink}</td>;
-          break;
-        case 'clean-up-trash':
-          if (item.days == 0) {
-            op = gettext('Removed all items from trash.');
-          } else {
-            op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days);
-          }
-          details = <td>{libLink}</td>;
-          break;
+          case 'create':
+            op = gettext('Created library');
+            details = <td>{libLink}</td>;
+            break;
+          case 'rename':
+            op = gettext('Renamed library');
+            details = <td>{item.old_repo_name} => {libLink}</td>;
+            break;
+          case 'delete':
+            op = gettext('Deleted library');
+            details = <td>{item.repo_name}</td>;
+            break;
+          case 'recover':
+            op = gettext('Restored library');
+            details = <td>{libLink}</td>;
+            break;
+          case 'clean-up-trash':
+            if (item.days == 0) {
+              op = gettext('Removed all items from trash.');
+            } else {
+              op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days);
+            }
+            details = <td>{libLink}</td>;
+            break;
         }
       } else if (item.obj_type == 'review') {
         let fileURL = `${siteRoot}drafts/review/${item.review_id}`;
         let fileLink = <a href={fileURL}>{item.name}</a>;
         switch(item.op_type) {
-        case 'open':
-          op = gettext('Open review');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
-        case 'closed':
-          op = gettext('Close review');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
-        case 'finished':
-          op = gettext('Publish draft');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
+          case 'open':
+            op = gettext('Open review');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
+          case 'closed':
+            op = gettext('Close review');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
+          case 'finished':
+            op = gettext('Publish draft');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
         }
       } else if (item.obj_type == 'file') {
         let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
         let fileLink = <a href={fileURL}>{item.name}</a>;
         switch(item.op_type) {
-        case 'create':
-          if (item.name.endsWith("(draft).md")) {
-            op = gettext('Created draft');
+          case 'create':
+            if (item.name.endsWith('(draft).md')) {
+              op = gettext('Created draft');
+              details = <td>{fileLink}<br />{smallLibLink}</td>;
+              break;
+            }
+            op = gettext('Created file');
             details = <td>{fileLink}<br />{smallLibLink}</td>;
             break;
-          }
-          op = gettext('Created file');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
-        case 'delete':
-          if (item.name.endsWith("(draft).md")) {
-            op = gettext('Deleted draft');
+          case 'delete':
+            if (item.name.endsWith('(draft).md')) {
+              op = gettext('Deleted draft');
+              details = <td>{item.name}<br />{smallLibLink}</td>;
+              break;
+            }
+            op = gettext('Deleted file');
             details = <td>{item.name}<br />{smallLibLink}</td>;
             break;
-          }
-          op = gettext('Deleted file');
-          details = <td>{item.name}<br />{smallLibLink}</td>;
-          break;
-        case 'recover':
-          op = gettext('Restored file');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
-        case 'rename':
-          op = gettext('Renamed file');
-          details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
-          break;
-        case 'move':
-          var filePathLink = <a href={fileURL}>{item.path}</a>;
-          op = gettext('Moved file');
-          details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
-          break;
-        case 'edit': // update
-          if (item.name.endsWith("(draft).md")) {
-            op = gettext('Updated draft');
+          case 'recover':
+            op = gettext('Restored file');
+            details = <td>{fileLink}<br />{smallLibLink}</td>;
+            break;
+          case 'rename':
+            op = gettext('Renamed file');
+            details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
+            break;
+          case 'move':
+            var filePathLink = <a href={fileURL}>{item.path}</a>;
+            op = gettext('Moved file');
+            details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
+            break;
+          case 'edit': // update
+            if (item.name.endsWith('(draft).md')) {
+              op = gettext('Updated draft');
+              details = <td>{fileLink}<br />{smallLibLink}</td>;
+              break;
+            }
+            op = gettext('Updated file');
             details = <td>{fileLink}<br />{smallLibLink}</td>;
             break;
-          }
-          op = gettext('Updated file');
-          details = <td>{fileLink}<br />{smallLibLink}</td>;
-          break;
         }
       } else { // dir
         let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path);
         let dirLink = <a href={dirURL}>{item.name}</a>;
         switch(item.op_type) {
-        case 'create':
-          op = gettext('Created folder');
-          details = <td>{dirLink}<br />{smallLibLink}</td>;
-          break;
-        case 'delete':
-          op = gettext('Deleted folder');
-          details = <td>{item.name}<br />{smallLibLink}</td>;
-          break;
-        case 'recover':
-          op = gettext('Restored folder');
-          details = <td>{dirLink}<br />{smallLibLink}</td>;
-          break;
-        case 'rename':
-          op = gettext('Renamed folder');
-          details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
-          break;
-        case 'move':
-          var dirPathLink = <a href={dirURL}>{item.path}</a>;
-          op = gettext('Moved folder');
-          details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
-          break;
+          case 'create':
+            op = gettext('Created folder');
+            details = <td>{dirLink}<br />{smallLibLink}</td>;
+            break;
+          case 'delete':
+            op = gettext('Deleted folder');
+            details = <td>{item.name}<br />{smallLibLink}</td>;
+            break;
+          case 'recover':
+            op = gettext('Restored folder');
+            details = <td>{dirLink}<br />{smallLibLink}</td>;
+            break;
+          case 'rename':
+            op = gettext('Renamed folder');
+            details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
+            break;
+          case 'move':
+            var dirPathLink = <a href={dirURL}>{item.path}</a>;
+            op = gettext('Moved folder');
+            details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
+            break;
         }
       }
 
       let isShowDate = true;
       if (index > 0) {
         let lastEventTime = this.props.items[index - 1].time;
-        isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true
+        isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
       }
 
       return (
@@ -245,7 +245,7 @@ class FilesActivities extends Component {
 
   filterSuperfluousEvents = (events) => {
     events.map((item) => {
-      if (item.op_type === "finished") {
+      if (item.op_type === 'finished') {
         this.curPathList.push(item.path);
         this.oldPathList.push(item.old_path);
       }
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 760327a0ae..8438943797 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -26,6 +26,7 @@ const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onGroupChanged: PropTypes.func.isRequired,
+  onTabNavClick: PropTypes.func.isRequired,
   groupID: PropTypes.string,
 };
 
@@ -90,19 +91,19 @@ class GroupView extends React.Component {
         if (error.response.status == 403) {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Permission denied")
+            errMessage: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Error")
+            errMessage: gettext('Error')
           });
         }
       } else {
         this.setState({
           isLoading: false,
-          errMessage: gettext("Please check the network.")
+          errMessage: gettext('Please check the network.')
         });
       }
     });
@@ -124,19 +125,19 @@ class GroupView extends React.Component {
         if (error.response.status == 403) {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Permission denied")
+            errMessage: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Error")
+            errMessage: gettext('Error')
           });
         }
       } else {
         this.setState({
           isLoading: false,
-          errMessage: gettext("Please check the network.")
+          errMessage: gettext('Please check the network.')
         });
       }
     });
@@ -332,9 +333,9 @@ class GroupView extends React.Component {
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
               {canAddRepo && (
-              <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')}
-              </button>
+                <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')}
+                </button>
               )}
             </div>
           </div>
@@ -346,11 +347,11 @@ class GroupView extends React.Component {
               {currentGroup && (
                 <Fragment>
                   <div className="path-container">
-                    <Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext("Groups")}</Link>
+                    <Link to={`${siteRoot}groups/`} onClick={() => this.onTabNavClick('groups')}>{gettext('Groups')}</Link>
                     <span className="path-split">/</span>
                     <span>{currentGroup.name}</span>
                     {currentGroup.parent_group_id !== 0 && (
-                      <span className="department-group-icon fas fa-building" title={gettext("This is a special group representing a department.")}></span>
+                      <span className="department-group-icon fas fa-building" title={gettext('This is a special group representing a department.')}></span>
                     )}
                   </div>
                   <div className="path-tool">
diff --git a/frontend/src/pages/groups/groups-view.js b/frontend/src/pages/groups/groups-view.js
index febbdfc307..c43928771c 100644
--- a/frontend/src/pages/groups/groups-view.js
+++ b/frontend/src/pages/groups/groups-view.js
@@ -14,6 +14,7 @@ import '../../css/groups.css';
 
 const propTypes = {
   group: PropTypes.object.isRequired,
+  onItemDetails: PropTypes.func.isRequired,
 };
 
 
@@ -80,7 +81,7 @@ class RepoListViewPanel extends React.Component {
       </div>
     );
   }
- }
+}
 
 RepoListViewPanel.propTypes = propTypes;
 
@@ -95,7 +96,7 @@ class GroupsView extends React.Component {
       showAddGroupModal: false,
       isShowDetails: false,
       currentRepo: null,
-    }
+    };
   }
 
   listGroups = () => {
@@ -105,7 +106,7 @@ class GroupsView extends React.Component {
       let groupList = res.data.map(item => {
         let group = new Group(item);
         return group;
-      })
+      });
       this.setState({
         isLoading: false,
         groupList: groupList,
@@ -115,19 +116,19 @@ class GroupsView extends React.Component {
         if (error.response.status == 403) {
           this.setState({
             isLoading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             isLoading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
       } else {
         this.setState({
           isLoading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
@@ -174,7 +175,7 @@ class GroupsView extends React.Component {
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
             <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext("My Groups")}</h3>
+              <h3 className="sf-heading">{gettext('My Groups')}</h3>
             </div>
             <div className="cur-view-content cur-view-content-groups">
               {this.state.isLoading && <Loading />}
diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js
index 60d8bf0509..7eabda581f 100644
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -17,10 +17,10 @@ class Content extends Component {
       const desktopThead = (
         <thead>
           <tr>
-            <th width="13%">{gettext("Platform")}</th>
-            <th width="30%">{gettext("Device Name")}</th>
-            <th width="30%">{gettext("IP")}</th>
-            <th width="17%">{gettext("Last Access")}</th>
+            <th width="13%">{gettext('Platform')}</th>
+            <th width="30%">{gettext('Device Name')}</th>
+            <th width="30%">{gettext('IP')}</th>
+            <th width="17%">{gettext('Last Access')}</th>
             <th width="10%"></th>
           </tr>
         </thead>
@@ -28,7 +28,7 @@ class Content extends Component {
       const mobileThead = (
         <thead>
           <tr>
-            <th width="25%">{gettext("Platform")}</th>
+            <th width="25%">{gettext('Platform')}</th>
             <th width="70%">{gettext('Device Name')}</th>
             <th width="5%"></th>
           </tr>
@@ -101,11 +101,11 @@ class Item extends Component {
       this.setState({
         unlinked: true
       });
-      let msg_s = gettext("Successfully unlink %(name)s.");
+      let msg_s = gettext('Successfully unlink %(name)s.');
       msg_s = msg_s.replace('%(name)s', data.device_name);
       toaster.success(msg_s);
     }).catch((error) => {
-      let message = gettext("Failed to unlink %(name)s");
+      let message = gettext('Failed to unlink %(name)s');
       message = message.replace('%(name)s', data.device_name);
       toaster.danger(message);
     });
diff --git a/frontend/src/pages/my-libs/content.js b/frontend/src/pages/my-libs/content.js
index 373121cc7a..c7e2c91dbe 100644
--- a/frontend/src/pages/my-libs/content.js
+++ b/frontend/src/pages/my-libs/content.js
@@ -122,9 +122,9 @@ class Content extends Component {
           <tr>
             <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="76%">
-              {gettext("Sort:")}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext("name")} {sortByName && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext("last update")} {sortByTime && sortIcon}</a>
+              {gettext('Sort:')}
+              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {sortByName && sortIcon}</a>
+              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {sortByTime && sortIcon}</a>
             </th>
             <th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
           </tr>
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index c9f4783219..8921f2af79 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -21,7 +21,7 @@ const propTypes = {
   onHistorySetting: PropTypes.func.isRequired,
   onRepoDetails: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired
-}
+};
 
 class Item extends Component {
 
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index b8130362e9..98c30d38ef 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -53,9 +53,9 @@ class MyLibsDeleted extends Component {
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
               {(!this.state.isLoading && this.state.deletedRepoList.length === 0) &&
-               <div className="message empty-tip">
-                 <h2>{gettext('No deleted libraries.')}</h2>
-               </div>
+                <div className="message empty-tip">
+                  <h2>{gettext('No deleted libraries.')}</h2>
+                </div>
               }
               {this.state.deletedRepoList.length !== 0 && 
                 <div>
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index 564af1003a..e55f21c61c 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -82,7 +82,7 @@ class MyLibraries extends Component {
   onTransferRepo = (repoID) => {
     let items = this.state.items.filter(item => {
       return item.repo_id !== repoID;
-    })
+    });
     this.setState({items: items});
   }
 
@@ -113,7 +113,7 @@ class MyLibraries extends Component {
     this.setState({
       isShowDetails: true,
       currentRepo: repo
-    })
+    });
   }
 
   closeDetails = () => {
diff --git a/frontend/src/pages/repo-wiki-mode/side-panel.js b/frontend/src/pages/repo-wiki-mode/side-panel.js
index 2f4a7dcd7c..0680c5366e 100644
--- a/frontend/src/pages/repo-wiki-mode/side-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/side-panel.js
@@ -5,7 +5,6 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import TreeView from '../../components/tree-view/tree-view';
 import Logo from '../../components/logo';
 import Loading from '../../components/loading';
-import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import Delete from '../../components/dialog/delete-dialog';
 import Rename from '../../components/dialog/rename-dialog';
@@ -197,8 +196,8 @@ class SidePanel extends Component {
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.onFreezedItem}
                 onUnFreezedItem={this.onUnFreezedItem}
-              />
-            )}
+              />)
+            }
           </div>
         </div>
         {this.state.isAddFolderDialogShow && (
@@ -229,7 +228,7 @@ class SidePanel extends Component {
               onRename={this.onRenameNode}
               checkDuplicatedName={this.checkDuplicatedName}
               toggleCancel={this.onRenameToggle}
-              />
+            />
           </ModalPortal>
         )}
         {this.state.isDeleteDialogShow && (
diff --git a/frontend/src/pages/review/history-list.js b/frontend/src/pages/review/history-list.js
index 8647f63277..f36a38e0ea 100644
--- a/frontend/src/pages/review/history-list.js
+++ b/frontend/src/pages/review/history-list.js
@@ -51,7 +51,7 @@ class HistoryList extends React.Component {
 
   render() {
     return (
-      <div className="history-body" style={{ "height": "500px"}}>
+      <div className="history-body" style={{ 'height': '500px'}}>
         <ul onScroll={this.onScroll} className={'history-list-container'}>
           {
             this.props.historyList ?
@@ -62,15 +62,15 @@ class HistoryList extends React.Component {
                 }
                 return (
                   <HistoryItem
-                  onClick={this.onClick}
-                  ctime={item.ctime}
-                  className={this.props.activeItem === index ? 'item-active': ''}
-                  currentCommitId={item.commit_id}
-                  name={item.creator_name}
-                  index={index}
-                  key={index}
-                  preCommitId={arr[preItemIndex].commit_id}
-                />
+                    onClick={this.onClick}
+                    ctime={item.ctime}
+                    className={this.props.activeItem === index ? 'item-active': ''}
+                    currentCommitId={item.commit_id}
+                    name={item.creator_name}
+                    index={index}
+                    key={index}
+                    preCommitId={arr[preItemIndex].commit_id}
+                  />
                 );
               }) : <Loading/>
           }
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 18e2e79704..b5eea0a0af 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -26,7 +26,7 @@ class Content extends Component {
       const emptyTip = (
         <div className="empty-tip">
           <h2>{gettext('You have not shared any folders')}</h2>
-          <p>{gettext("You can share a single folder with a registered user if you don't want to share a whole library.")}</p>
+          <p>{gettext('You can share a single folder with a registered user if you don\'t want to share a whole library.')}</p>
         </div>
       );
 
@@ -40,8 +40,8 @@ class Content extends Component {
             <tr>
               <th width="4%">{/*icon*/}</th>
               <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <th width="30%">{gettext("Share To")}</th>
-              <th width="24%">{gettext("Permission")}</th>
+              <th width="30%">{gettext('Share To')}</th>
+              <th width="24%">{gettext('Permission')}</th>
               <th width="8%"></th>
             </tr>
           </thead>
@@ -222,20 +222,20 @@ class ShareAdminFolders extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
 
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
@@ -272,7 +272,7 @@ class ShareAdminFolders extends Component {
       <div className="main-panel-center">
         <div className="cur-view-container" id="share-admin-libs">
           <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext("Folders")}</h3>
+            <h3 className="sf-heading">{gettext('Folders')}</h3>
           </div>
           <div className="cur-view-content">
             <Content 
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index ada9643f79..a6268bf7a5 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -26,7 +26,7 @@ class Content extends Component {
       const emptyTip = (
         <div className="empty-tip">
           <h2>{gettext('You have not shared any libraries')}</h2>
-          <p>{gettext("You can share libraries with your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in.")}</p>
+          <p>{gettext('You can share libraries with your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in.')}</p>
         </div>
       );
 
@@ -40,8 +40,8 @@ class Content extends Component {
             <tr>
               <th width="4%">{/*icon*/}</th>
               <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-              <th width="30%">{gettext("Share To")}</th>
-              <th width="24%">{gettext("Permission")}</th>
+              <th width="30%">{gettext('Share To')}</th>
+              <th width="24%">{gettext('Permission')}</th>
               <th width="8%"></th>
             </tr>
           </thead>
@@ -202,19 +202,19 @@ class ShareAdminLibraries extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
@@ -267,7 +267,7 @@ class ShareAdminLibraries extends Component {
       <div className="main-panel-center">
         <div className="cur-view-container" id="share-admin-libs">
           <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext("Libraries")}</h3>
+            <h3 className="sf-heading">{gettext('Libraries')}</h3>
           </div>
           <div className="cur-view-content">
             <Content 
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index a40b03e305..b195cbecc8 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -53,8 +53,8 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <div className="empty-tip">
-          <h2>{gettext("You don't have any share links")}</h2>
-          <p>{gettext("You can generate a share link for a folder or a file. Anyone who receives this link can view the folder or the file online.")}</p>
+          <h2>{gettext('You don\'t have any share links')}</h2>
+          <p>{gettext('You can generate a share link for a folder or a file. Anyone who receives this link can view the folder or the file online.')}</p>
         </div>
       );
 
@@ -70,8 +70,8 @@ class Content extends Component {
               <tr>
                 <th width="4%">{/*icon*/}</th>
                 <th width="36%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-                <th width="24%">{gettext("Library")}</th>
-                <th width="12%">{gettext("Visits")}</th>
+                <th width="24%">{gettext('Library')}</th>
+                <th width="12%">{gettext('Visits')}</th>
                 <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
                 <th width="10%">{/*Operations*/}</th>
               </tr>
@@ -261,20 +261,20 @@ class ShareAdminShareLinks extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
 
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index 5e3882d9be..4dda1b8a1a 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -8,7 +8,7 @@ import SharedUploadInfo from '../../models/shared-upload-info';
 
 class Content extends Component {
 
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       modalOpen: false,
@@ -40,8 +40,8 @@ class Content extends Component {
     } else {
       const emptyTip = (
         <div className="empty-tip">
-          <h2>{gettext("You don't have any upload links")}</h2>
-          <p>{gettext("You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder.")}</p>
+          <h2>{gettext('You don\'t have any upload links')}</h2>
+          <p>{gettext('You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder.')}</p>
         </div>
       );
 
@@ -51,9 +51,9 @@ class Content extends Component {
             <thead>
               <tr>
                 <th width="4%">{/*icon*/}</th>
-                <th width="42%">{gettext("Name")}</th>
-                <th width="30%">{gettext("Library")}</th>
-                <th width="14%">{gettext("Visits")}</th>
+                <th width="42%">{gettext('Name')}</th>
+                <th width="30%">{gettext('Library')}</th>
+                <th width="14%">{gettext('Visits')}</th>
                 <th width="10%">{/*Operations*/}</th>
               </tr>
             </thead>
@@ -162,19 +162,19 @@ class ShareAdminUploadLinks extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index 0cb5104402..750fbbe836 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -49,12 +49,12 @@ class Content extends Component {
       const desktopThead = (
         <thead>
           <tr>
-            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="38%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-            <th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
-            <th width="14%">{gettext("Size")}</th>
+            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
+            <th width="14%">{gettext('Size')}</th>
             <th width="18%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            <th width="16%">{gettext("Owner")}</th>
+            <th width="16%">{gettext('Owner')}</th>
           </tr>
         </thead>
       );
@@ -62,13 +62,13 @@ class Content extends Component {
       const mobileThead = (
         <thead>
           <tr>
-            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="76%">
-              {gettext("Sort:")}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext("name")} {sortByName && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext("last update")} {sortByTime && sortIcon}</a>
+              {gettext('Sort:')}
+              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {sortByName && sortIcon}</a>
+              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {sortByTime && sortIcon}</a>
             </th>
-            <th width="6%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
           </tr>
         </thead>
       );
@@ -198,9 +198,9 @@ class Item extends Component {
           <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
           <td>
             {(isPro && data.is_admin) &&
-              <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+              <a href="#" className={shareIconClassName} title={gettext('Share')} onClick={this.share}></a>
             }
-            <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
+            <a href="#" className={leaveShareIconClassName} title={gettext('Leave Share')} onClick={this.leaveShare}></a>
           </td>
           <td>{data.size}</td>
           <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
@@ -236,26 +236,26 @@ class Item extends Component {
           </td>
           <td>
             {(isPro && data.is_admin) &&
-              <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+              <a href="#" className={shareIconClassName} title={gettext('Share')} onClick={this.share}></a>
             }
             <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
           </td>
         </tr>
-          {this.state.isShowSharedDialog && (
-            <ModalPotal>
-              <ShareDialog 
-                itemType={'library'}
-                itemName={data.repo_name}
-                itemPath={'/'}
-                repoID={data.repo_id}
-                repoEncrypted={data.encrypted}
-                enableDirPrivateShare={true}
-                userPerm={data.permission}
-                isAdmin={true}
-                toggleDialog={this.toggleShareDialog}
-              />
-            </ModalPotal>
-          )}
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+            <ShareDialog 
+              itemType={'library'}
+              itemName={data.repo_name}
+              itemPath={'/'}
+              repoID={data.repo_id}
+              repoEncrypted={data.encrypted}
+              enableDirPrivateShare={true}
+              userPerm={data.permission}
+              isAdmin={true}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPotal>
+        )}
       </Fragment>
     );
 
@@ -294,20 +294,20 @@ class SharedLibraries extends Component {
         if (error.response.status == 403) {
           this.setState({
             loading: false,
-            errorMsg: gettext("Permission denied")
+            errorMsg: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             loading: false,
-            errorMsg: gettext("Error")
+            errorMsg: gettext('Error')
           });
         }
 
       } else {
         this.setState({
           loading: false,
-          errorMsg: gettext("Please check the network.")
+          errorMsg: gettext('Please check the network.')
         });
       }
     });
@@ -326,7 +326,7 @@ class SharedLibraries extends Component {
       <div className="main-panel-center">
         <div className="cur-view-container">
           <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext("Shared with me")}</h3>
+            <h3 className="sf-heading">{gettext('Shared with me')}</h3>
           </div>
           <div className="cur-view-content">
             <Content
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index e8c18b6156..1c5a98f0c5 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/frontend/src/pages/shared-with-all/public-shared-view.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -33,7 +33,7 @@ class PublicSharedView extends React.Component {
       isCreateMenuShow: false,
       isCreateRepoDialogShow: false,
       isSelectRepoDialpgShow: false,
-    }
+    };
   }
 
   componentDidMount() {
@@ -51,19 +51,19 @@ class PublicSharedView extends React.Component {
         if (error.response.status == 403) {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Permission denied")
+            errMessage: gettext('Permission denied')
           });
           location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
         } else {
           this.setState({
             isLoading: false,
-            errMessage: gettext("Error")
+            errMessage: gettext('Error')
           });
         }
       } else {
         this.setState({
           isLoading: false,
-          errMessage: gettext("Please check the network.")
+          errMessage: gettext('Please check the network.')
         });
       }
     });
@@ -80,14 +80,14 @@ class PublicSharedView extends React.Component {
         owner_email: res.data.owner,
         mtime: res.data.mtime,
         encrypted: res.data.encrypted,
-      }
+      };
       let repo = new Repo(object);
       let repoList = this.addRepoItem(repo);
       this.setState({repoList: repoList});
       this.onCreateRepoToggle();
     }).catch(() => {
       // todo
-    })
+    });
   }
 
   onRepoSelectedHandler = (selectedRepoList) => {
@@ -98,7 +98,7 @@ class PublicSharedView extends React.Component {
       }).catch(() => {
         // todo
       });
-    })
+    });
   }
 
   onItemUnshare = (repo) => {
@@ -185,7 +185,7 @@ class PublicSharedView extends React.Component {
         <div className="main-panel-center">
           <div className="cur-view-container">
             <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext("Shared with all")}</h3>
+              <h3 className="sf-heading">{gettext('Shared with all')}</h3>
             </div>
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
diff --git a/frontend/src/pages/wiki/side-panel.js b/frontend/src/pages/wiki/side-panel.js
index 0a7d4f530b..f03fb35489 100644
--- a/frontend/src/pages/wiki/side-panel.js
+++ b/frontend/src/pages/wiki/side-panel.js
@@ -60,7 +60,7 @@ class SidePanel extends Component {
           )}
         </div>
       </Fragment>
-    )
+    );
   }
 
   render() {
@@ -73,7 +73,7 @@ class SidePanel extends Component {
           {this.props.isTreeDataLoading && <Loading /> }
           {!this.props.isTreeDataLoading && this.props.indexNode && this.renderIndexView() }
           {!this.props.isTreeDataLoading && !this.props.indexNode && this.renderTreeView() }
-          <div className="text-left p-2"><a href={siteRoot + 'library/' + repoID + "/" + slug} className="text-dark text-decoration-underline">{gettext('Go to Library')}</a></div>
+          <div className="text-left p-2"><a href={siteRoot + 'library/' + repoID + '/' + slug} className="text-dark text-decoration-underline">{gettext('Go to Library')}</a></div>
         </div>
       </div>
     );
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index b46a67bb22..79ca114f9b 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -123,15 +123,15 @@ class Wikis extends Component {
           <div className="cur-view-toolbar border-left-show">
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
-                <Dropdown tag="div" isOpen={this.state.isShowAddWikiMenu} toggle={this.onMenuToggle}>
-                  <DropdownToggle className="btn btn-secondary operation-item">
-                    <i className="fa fa-plus-square text-secondary mr-1"></i>{gettext('Add Wiki')}
-                  </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem onClick={this.onCreateToggle}>{gettext('New Wiki')}</DropdownItem>
-                    <DropdownItem onClick={this.onSelectToggle}>{gettext('Choose a library as Wiki')}</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
+              <Dropdown tag="div" isOpen={this.state.isShowAddWikiMenu} toggle={this.onMenuToggle}>
+                <DropdownToggle className="btn btn-secondary operation-item">
+                  <i className="fa fa-plus-square text-secondary mr-1"></i>{gettext('Add Wiki')}
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem onClick={this.onCreateToggle}>{gettext('New Wiki')}</DropdownItem>
+                  <DropdownItem onClick={this.onSelectToggle}>{gettext('Choose a library as Wiki')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
             </div>
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
diff --git a/frontend/src/repo-wiki-mode.js b/frontend/src/repo-wiki-mode.js
index 65f03a6012..24efd5c11b 100644
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import moment from 'moment';
-import { gettext, repoID, siteRoot, initialPath, isDir, slug , canGenerateShareLink, canGenerateUploadLink, username } from './utils/constants';
+import { gettext, repoID, siteRoot, initialPath, isDir, canGenerateShareLink, canGenerateUploadLink, username } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
 import collabServer from './utils/collab-server';
@@ -141,7 +141,7 @@ class Wiki extends Component {
           {id: 'repo_updated', duration: 3600}
         );
       }
-    })
+    });
   }
 
   loadWikiData = () => {
@@ -495,7 +495,7 @@ class Wiki extends Component {
 
   onMoveItem = (destRepo, dirent, moveToDirentPath) => {
     //just for view list state
-    let dirName = dirent.name
+    let dirName = dirent.name;
     let direntPath = Utils.joinPath(this.state.path, dirName);
     seafileAPI.moveDir(repoID, destRepo.repo_id,moveToDirentPath, this.state.path, dirName).then(res => {
       let nodeName = res.data[0].obj_name;
@@ -720,7 +720,7 @@ class Wiki extends Component {
       // first: direntList.length === 0;
       // second: all the direntList's items are dir;
       // third: direntList has dir and file;
-      let length = direntList.length
+      let length = direntList.length;
       if (length === 0 || direntList[length - 1].type === 'dir') {
         direntList.push(item);
       } else {
@@ -820,7 +820,7 @@ class Wiki extends Component {
           treeData: tree,
           currentNode: node
         });
-      })
+      });
     } else {
       let parentNode = tree.getNodeByPath(node.parentNode.path);
       parentNode.isExpanded = true;
@@ -946,7 +946,7 @@ class Wiki extends Component {
     if (repoID !== moveToRepo.repo_id) {
       let tree = treeHelper.deleteNodeByPath(this.state.treeData, nodePath);
       this.setState({treeData: tree});
-      return
+      return;
     }
     let tree = treeHelper.moveNodeByPath(this.state.treeData, nodePath, moveToPath, nodeName);
     this.setState({treeData: tree});
@@ -1026,7 +1026,7 @@ class Wiki extends Component {
       sortBy: sortBy,
       sortOrder: sortOrder,
       items: Utils.sortDirents(this.state.direntList, sortBy, sortOrder)
-    })
+    });
   }
 
   render() {
@@ -1039,7 +1039,7 @@ class Wiki extends Component {
             onLibDecryptDialog={this.onLibDecryptDialog}
           />
         </ModalPortal>
-      )
+      );
     }
 
     let showShareBtn = false,
diff --git a/frontend/src/shared-file-view-markdown.js b/frontend/src/shared-file-view-markdown.js
index 23c94ef995..96b798b29f 100644
--- a/frontend/src/shared-file-view-markdown.js
+++ b/frontend/src/shared-file-view-markdown.js
@@ -55,7 +55,7 @@ class SharedFileViewMarkdown extends React.Component {
         loading: false
       });
     });
-    if (trafficOverLimit == "True") {
+    if (trafficOverLimit == 'True') {
       toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
         duration: 3
       });
@@ -91,7 +91,7 @@ class SharedFileViewMarkdown extends React.Component {
 
   render() {
     if (this.state.loading) {
-      return <Loading />
+      return <Loading />;
     }
     return (
       <div className="shared-file-view-md">
@@ -116,7 +116,7 @@ class SharedFileViewMarkdown extends React.Component {
                     onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
                   </Button>
                 }{' '}
-                {(trafficOverLimit === "False") &&
+                {(trafficOverLimit === 'False') &&
                   <Button color="success" className="shared-file-op-btn">
                     <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
                   </Button>
@@ -126,12 +126,13 @@ class SharedFileViewMarkdown extends React.Component {
           </div>
           <div className="shared-file-view-body">
             <div className="md-view">
-              <MarkdownViewer markdownContent={this.state.markdownContent}
-                              showTOC={false}
-                              serviceURL={serviceURL}
-                              sharedToken={sharedToken}
-                              repoID={repoID}
-                              modifyValueBeforeRender={this.modifyValueBeforeRender}
+              <MarkdownViewer 
+                markdownContent={this.state.markdownContent}
+                showTOC={false}
+                serviceURL={serviceURL}
+                sharedToken={sharedToken}
+                repoID={repoID}
+                modifyValueBeforeRender={this.modifyValueBeforeRender}
               />
             </div>
           </div>
@@ -152,9 +153,9 @@ class SharedFileViewMarkdown extends React.Component {
 if (enableWatermark) {
   let watermark_txt;
   if (loginUser) {
-    watermark_txt = siteName + "  " + loginUser;
+    watermark_txt = siteName + '  ' + loginUser;
   } else {
-    watermark_txt = gettext("Anonymous User");
+    watermark_txt = gettext('Anonymous User');
   }
   watermark.init({
     watermark_txt: watermark_txt,
diff --git a/frontend/src/utils/url-decorator.js b/frontend/src/utils/url-decorator.js
index 7d20bf856c..a6fead0533 100644
--- a/frontend/src/utils/url-decorator.js
+++ b/frontend/src/utils/url-decorator.js
@@ -6,29 +6,29 @@ class URLDecorator {
     let url = '';
     let params = '';
     switch (options.type) {
-    case 'download_historic_file':
-      params = 'p=' + options.filePath;
-      url = siteRoot + 'repo/' + historyRepoID + '/' + options.objID + '/download?' + params;
-      break;
-    case 'download_dir_zip_url':
-      url = fileServerRoot + 'zip/' + options.token;
-      break;
-    case 'download_file_url':
-      url = siteRoot + 'lib/' + options.repoID + '/file' + Utils.encodePath(options.filePath) + '?dl=1';
-      break;
-    case 'file_revisions':
-      params = 'p=' + Utils.encodePath(options.filePath) + '&referer=' + Utils.encodePath(options.referer);
-      url = siteRoot + 'repo/file_revisions/' + options.repoID + '/?' + params;
-      break;
-    case 'open_via_client':
-      url = 'seafile://openfile?repo_id=' + options.repoID + '&path=' + Utils.encodePath(options.filePath);
-      break;
-    case 'draft_view':
-      url = siteRoot + 'lib/' + options.repoID + '/file' + options.filePath + '?mode=edit&draft_id=' + options.draftId;
-      break;
-    default:
-      url = '';
-      break;
+      case 'download_historic_file':
+        params = 'p=' + options.filePath;
+        url = siteRoot + 'repo/' + historyRepoID + '/' + options.objID + '/download?' + params;
+        break;
+      case 'download_dir_zip_url':
+        url = fileServerRoot + 'zip/' + options.token;
+        break;
+      case 'download_file_url':
+        url = siteRoot + 'lib/' + options.repoID + '/file' + Utils.encodePath(options.filePath) + '?dl=1';
+        break;
+      case 'file_revisions':
+        params = 'p=' + Utils.encodePath(options.filePath) + '&referer=' + Utils.encodePath(options.referer);
+        url = siteRoot + 'repo/file_revisions/' + options.repoID + '/?' + params;
+        break;
+      case 'open_via_client':
+        url = 'seafile://openfile?repo_id=' + options.repoID + '&path=' + Utils.encodePath(options.filePath);
+        break;
+      case 'draft_view':
+        url = siteRoot + 'lib/' + options.repoID + '/file' + options.filePath + '?mode=edit&draft_id=' + options.draftId;
+        break;
+      default:
+        url = '';
+        break;
     }
     return url;
   }
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 5214d3500b..d3fac9e1c2 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -280,22 +280,22 @@ export const Utils = {
     var title;
     let permission = repo.permission || repo.share_permission; //Compatible with regular repo and repo shared
     if (repo.encrypted) {
-      title = gettext("Encrypted library");
+      title = gettext('Encrypted library');
     } else if (repo.is_admin) { // shared with 'admin' permission
-      title = gettext("Admin access");
+      title = gettext('Admin access');
     } else {
       switch(permission) {
         case 'rw':
-          title = gettext("Read-Write library");
+          title = gettext('Read-Write library');
           break;
         case 'r':
-          title = gettext("Read-Only library");
+          title = gettext('Read-Only library');
           break;
         case 'cloud-edit':
-          title = gettext("Preview-Edit-on-Cloud library");
+          title = gettext('Preview-Edit-on-Cloud library');
           break;
         case 'preview':
-          title = gettext("Preview-on-Cloud library");
+          title = gettext('Preview-on-Cloud library');
           break;
       }
     }
@@ -306,16 +306,16 @@ export const Utils = {
     var title;
     switch(options.permission) {
       case 'rw':
-        title = gettext("Read-Write folder");
+        title = gettext('Read-Write folder');
         break;
       case 'r':
-        title = gettext("Read-Only folder");
+        title = gettext('Read-Only folder');
         break;
       case 'cloud-edit':
-        title = gettext("Preview-Edit-on-Cloud folder");
+        title = gettext('Preview-Edit-on-Cloud folder');
         break;
       case 'preview':
-        title = gettext("Preview-on-Cloud folder");
+        title = gettext('Preview-on-Cloud folder');
         break;
     }
     return title;
@@ -325,19 +325,19 @@ export const Utils = {
     var title;
     switch(permission) {
       case 'rw':
-        title = gettext("Read-Write");
+        title = gettext('Read-Write');
         break;
       case 'r':
-        title = gettext("Read-Only");
+        title = gettext('Read-Only');
         break;
       case 'admin':
-        title = gettext("Admin");
+        title = gettext('Admin');
         break;
       case 'cloud-edit':
-        title = gettext("Preview-Edit-on-Cloud");
+        title = gettext('Preview-Edit-on-Cloud');
         break;
       case 'preview':
-        title = gettext("Preview-on-Cloud");
+        title = gettext('Preview-on-Cloud');
         break;
     }
     return title;
@@ -347,19 +347,19 @@ export const Utils = {
     var title;
     switch(permission) {
       case 'rw':
-        title = gettext("User can read, write, upload, download and sync files.");
+        title = gettext('User can read, write, upload, download and sync files.');
         break;
       case 'r':
-        title = gettext("User can read, download and sync files.");
+        title = gettext('User can read, download and sync files.');
         break;
       case 'admin':
-        title = gettext("Besides Write permission, user can also share the library.");
+        title = gettext('Besides Write permission, user can also share the library.');
         break;
       case 'cloud-edit':
-        title = gettext("Same as Preview on cloud. But user can also edit files online via browser.");
+        title = gettext('Same as Preview on cloud. But user can also edit files online via browser.');
         break;
       case 'preview':
-        title = gettext("User can only view files online via browser. Files can't be downloaded.");
+        title = gettext('User can only view files online via browser. Files can\'t be downloaded.');
         break;
     }
     return title;
@@ -400,17 +400,17 @@ export const Utils = {
   formatBitRate: function(bits) {
     var Bs;
     if (typeof bits !== 'number') {
-        return '';
+      return '';
     }
     Bs = bits / 8;
     if (Bs >= 1000000000) {
-        return (Bs / 1000000000).toFixed(2) + ' GB/s';
+      return (Bs / 1000000000).toFixed(2) + ' GB/s';
     }
     if (Bs >= 1000000) {
-        return (Bs / 1000000).toFixed(2) + ' MB/s';
+      return (Bs / 1000000).toFixed(2) + ' MB/s';
     }
     if (Bs >= 1000) {
-        return (Bs / 1000).toFixed(2) + ' kB/s';
+      return (Bs / 1000).toFixed(2) + ' kB/s';
     }
     return Bs.toFixed(2) + ' B/s';
   },
@@ -456,19 +456,19 @@ export const Utils = {
   },
 
   isWikiInternalMarkdownLink: function(url, slug) {
-    var slug = encodeURIComponent(slug);
+    slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/wikis/' + slug + '.*\.md$');
     return re.test(url);
   },
 
   isWikiInternalDirLink: function(url, slug) {
-    var slug = encodeURIComponent(slug);
+    slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/wikis/' + slug + '.*');
     return re.test(url);
   },
 
   getPathFromWikiInternalMarkdownLink: function(url, slug) {
-    var slug = encodeURIComponent(slug);
+    slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/wikis/' + slug + '(.*\.md)');
     var array = re.exec(url);
     var path = array[1];
@@ -482,8 +482,8 @@ export const Utils = {
   },
   
   getPathFromWikiInternalDirLink: function(url, slug) {
-    var slug = encodeURIComponent(slug);
-    var re = new RegExp(serviceURL + '/wikis/' + slug+ '(/.*)');
+    slug = encodeURIComponent(slug);
+    var re = new RegExp(serviceURL + '/wikis/' + slug + '(/.*)');
     var array = re.exec(url);
     var path = array[1];
     try {
diff --git a/frontend/src/wiki.js b/frontend/src/wiki.js
index 8eeec6f119..e8afe7a147 100644
--- a/frontend/src/wiki.js
+++ b/frontend/src/wiki.js
@@ -153,7 +153,7 @@ class Wiki extends Component {
         isDataLoading: false,
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true})
+      this.setState({isLoadFailed: true});
     });
   }
 
@@ -169,7 +169,7 @@ class Wiki extends Component {
           treeData: tree,
           currentNode: node
         });
-      })
+      });
     } else {
       let parentNode = tree.getNodeByPath(node.parentNode.path);
       parentNode.isExpanded = true;