From 67210c73632dcedc79f598a1f5a3147e200513d6 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 18 Jul 2024 11:58:42 +0800
Subject: [PATCH] fix code format (#6365)

---
 frontend/.eslintrc.json                       |  83 +++--
 frontend/src/app.js                           |  16 +-
 frontend/src/components/btn-qr-code.js        |   4 +-
 frontend/src/components/common/account.js     |   6 +-
 .../src/components/common/event-bus-type.js   |   6 +-
 frontend/src/components/common/logout.js      |   2 +-
 frontend/src/components/common/notice-item.js |  36 +-
 .../src/components/common/notification.js     |  10 +-
 .../src/components/common/search-input.js     |   8 +-
 .../common/select/no-group-message.js         |   2 +-
 .../common/select/seahub-select-style.js      |   2 +-
 .../src/components/common/switch/index.js     |   4 +-
 .../components/context-menu/context-menu.js   |   4 +-
 frontend/src/components/copy-to-clipboard.js  |   4 +-
 .../src/components/cur-dir-path/dir-path.js   |   2 +-
 .../src/components/cur-dir-path/dir-tool.js   |  14 +-
 .../src/components/date-and-time-picker.js    |   2 +-
 .../dialog/add-abuse-report-dialog.js         |   8 +-
 .../src/components/dialog/add-wiki-dialog.js  |   2 +-
 .../components/dialog/add-wiki-page-dialog.js |   2 +-
 .../dialog/change-repo-password-dialog.js     |   4 +-
 frontend/src/components/dialog/clean-trash.js |   8 +-
 .../src/components/dialog/commit-details.js   |  20 +-
 .../common-operation-confirmation-dialog.js   |   2 +-
 .../dialog/confirm-delete-account.js          |   2 +-
 .../dialog/confirm-disconnect-dingtalk.js     |   2 +-
 .../dialog/confirm-disconnect-wechat.js       |   2 +-
 .../components/dialog/copy-dirent-dialog.js   |  14 +-
 .../copy-move-dirent-progress-dialog.js       |   2 +-
 .../components/dialog/create-file-dialog.js   |  14 +-
 .../components/dialog/create-folder-dialog.js |  14 +-
 .../components/dialog/create-group-dialog.js  |  10 +-
 .../components/dialog/create-repo-dialog.js   |  32 +-
 .../components/dialog/create-tag-dialog.js    |  10 +-
 .../custom-permission-editor.js               |  18 +-
 .../custom-permission-item.js                 |   6 +-
 .../custom-permission-manager.js              |   8 +-
 .../components/dialog/delete-folder-dialog.js |   2 +-
 .../components/dialog/delete-repo-dialog.js   |   8 +-
 .../components/dialog/dismiss-group-dialog.js |   4 +-
 .../components/dialog/edit-filetag-dialog.js  |   6 +-
 .../dialog/edit-repo-commit-labels.js         |   6 +-
 .../editor/number-editor.js                   |   2 +-
 .../editor/search-input.js                    |   4 +-
 .../editor/simple-text.js                     |   2 +-
 .../editor/single-select/index.js             |   3 +-
 .../single-select/single-select-editor.js     |   2 +-
 .../extra-metadata-attributes-dialog/index.js |   2 +-
 .../components/dialog/generate-upload-link.js |  47 +--
 .../components/dialog/group-members-dialog.js |  10 +-
 .../import-dingtalk-department-dialog.js      |   4 +-
 .../import-work-weixin-department-dialog.js   |   4 +-
 .../components/dialog/internal-link-dialog.js |   8 +-
 .../src/components/dialog/internal-link.js    |   2 +-
 .../dialog/invitation-revoke-dialog.js        |   2 +-
 .../dialog/label-repo-state-dialog.js         |   4 +-
 .../components/dialog/leave-group-dialog.js   |   4 +-
 .../dialog/lib-history-setting-dialog.js      |   8 +-
 .../dialog/lib-old-files-auto-del-dialog.js   |   6 +-
 .../lib-sub-folder-permission-dialog.js       |   6 +-
 ...-sub-folder-set-group-permission-dialog.js |  10 +-
 ...b-sub-folder-set-user-permission-dialog.js |  18 +-
 .../dialog/list-taggedfiles-dialog.js         |   6 +-
 .../components/dialog/move-dirent-dialog.js   |  18 +-
 frontend/src/components/dialog/op-menu.js     |   4 +-
 .../components/dialog/org-add-user-dialog.js  |  26 +-
 .../dialog/org-admin-invite-user-dialog.js    |   6 +-
 .../dialog/org-delete-department-dialog.js    |   2 +-
 .../dialog/org-delete-member-dialog.js        |   2 +-
 .../dialog/org-delete-repo-dialog.js          |   2 +-
 .../dialog/org-logs-file-update-detail.js     |   2 +-
 frontend/src/components/dialog/perm-select.js |   6 +-
 .../src/components/dialog/rename-dialog.js    |  16 +-
 .../src/components/dialog/rename-dirent.js    |  16 +-
 .../components/dialog/rename-group-dialog.js  |   8 +-
 .../components/dialog/rename-wiki-dialog.js   |   2 +-
 .../dialog/repo-api-token-dialog.js           |  26 +-
 .../repo-seatable-integration-dialog.js       |   6 +-
 .../dialog/repo-share-admin-dialog.js         |   4 +-
 .../dialog/repo-share-admin/group-shares.js   |   8 +-
 .../dialog/repo-share-admin/share-links.js    |   6 +-
 .../dialog/repo-share-admin/upload-links.js   |   6 +-
 .../dialog/repo-share-admin/user-shares.js    |   8 +-
 .../reset-encrypted-repo-password-dialog.js   |  10 +-
 .../dialog/reset-webdav-password.js           |  10 +-
 .../dialog/save-shared-file-dialog.js         |   2 +-
 .../components/dialog/search-file-dialog.js   |   4 +-
 .../components/dialog/set-webdav-password.js  |  10 +-
 .../src/components/dialog/share-admin-link.js |   2 +-
 .../src/components/dialog/share-dialog.js     |   4 +-
 .../components/dialog/share-repo-dialog.js    |  12 +-
 .../src/components/dialog/share-to-group.js   |  14 +-
 .../dialog/share-to-invite-people.js          |   3 +-
 .../dialog/share-to-other-server.js           |  10 +-
 .../src/components/dialog/share-to-user.js    |  18 +-
 .../src/components/dialog/sort-options.js     |  12 +-
 .../sysadmin-add-member-dialog.js             |   2 +-
 .../sysadmin-add-or-update-term-dialog.js     |  24 +-
 .../sysadmin-add-org-dialog.js                |   4 +-
 .../sysadmin-add-user-dialog.js               |   6 +-
 .../sysadmin-create-group-dialog.js           |   6 +-
 .../sysadmin-delete-department-dialog.js      |   2 +-
 .../sysadmin-delete-member-dialog.js          |   2 +-
 .../sysadmin-delete-repo-dialog.js            |   2 +-
 .../sysadmin-group-transfer-dialog.js         |   4 +-
 .../sysadmin-lib-history-setting-dialog.js    |   8 +-
 .../sysadmin-logs-export-excel-dialog.js      |   4 +-
 .../sysadmin-dialog/sysadmin-share-dialog.js  |   4 +-
 .../sysadmin-share-to-group.js                |  10 +-
 .../sysadmin-dialog/sysadmin-share-to-user.js |  14 +-
 .../dialog/sysadmin-dialog/update-user.js     |   2 +-
 frontend/src/components/dialog/tag-color.js   |   6 +-
 frontend/src/components/dialog/tag-name.js    |   3 +-
 .../components/dialog/terms-editor-dialog.js  |   4 +-
 .../components/dialog/terms-preview-dialog.js |   2 +-
 .../src/components/dialog/transfer-dialog.js  |   6 +-
 .../dialog/transfer-group-dialog.js           |   2 +-
 .../components/dialog/zip-download-dialog.js  |   4 +-
 .../dir-view-mode/dir-column-file.js          |   2 +-
 .../dir-view-mode/dir-column-nav.js           |  27 +-
 .../dir-view-mode/dir-column-view.js          |   2 +-
 .../dirent-detail/dirent-details.js           |   2 +-
 .../components/dirent-detail/file-details.js  |   2 +-
 .../components/dirent-detail/lib-details.js   |   4 +-
 .../dirent-grid-view/dirent-grid-item.js      |  24 +-
 .../dirent-grid-view/dirent-grid-view.js      |  38 +--
 .../dirent-list-view/dirent-list-item.js      |  66 ++--
 .../dirent-list-view/dirent-list-view.js      |  48 +--
 .../dirent-list-view/dirent-none-view.js      |  18 +-
 .../components/dirent-list-view/file-tag.js   |   5 +-
 .../dropdown-menu/item-dropdown-menu.js       |  10 +-
 .../components/file-chooser/file-chooser.js   |  24 +-
 .../components/file-chooser/repo-list-item.js |  18 +-
 .../file-chooser/searched-list-item.js        |   4 +-
 .../file-chooser/searched-list-view.js        |   2 +-
 .../components/file-chooser/tree-list-item.js |   8 +-
 .../components/file-chooser/tree-list-view.js |   4 +-
 .../src/components/file-content-view/image.js |   2 +-
 frontend/src/components/file-tag-list.js      |   2 +-
 .../components/file-uploader/file-uploader.js |  53 ++-
 .../file-uploader/upload-list-item.js         |  10 +-
 .../file-uploader/upload-progress-dialog.js   |   8 +-
 .../src/components/file-view/file-toolbar.js  |  12 +-
 .../src/components/file-view/file-view.js     |   4 +-
 frontend/src/components/group-members.js      |   2 +-
 .../history-list-view/history-list-item.js    |  12 +-
 .../history-list-view/history-list-view.js    |   8 +-
 .../history-trash-file-view/file-view.js      |   2 +-
 frontend/src/components/icon-button.js        |   2 +-
 .../components/list-and-add-group-members.js  |   4 +-
 frontend/src/components/main-side-nav.js      |   8 +-
 frontend/src/components/op-icon.js            |  21 +-
 .../internal-link-operation/index.js          |   2 +-
 frontend/src/components/pdf-viewer.js         |  18 +-
 .../src/components/permission-denied-tip.js   |   6 +-
 .../popover/edit-filetag-popover.js           |   2 +-
 frontend/src/components/popover/tag-item.js   |   4 +-
 .../src/components/popover/tag-list-footer.js |   6 +-
 .../src/components/popover/tag-list-item.js   |   5 +-
 .../components/popover/virtual-tag-color.js   |   6 +-
 .../popover/virtual-tag-list-item.js          |   3 +-
 .../components/popover/virtual-tag-name.js    |   5 +-
 frontend/src/components/rename.js             |   2 +-
 frontend/src/components/repo-info-bar.js      |   2 +-
 .../components/sdoc-wiki-page-viewer/index.js |   4 +-
 .../seafile-markdown-viewer/index.js          |   6 +-
 .../src/components/search/search-by-name.js   |   3 +-
 .../components/search/search-result-item.js   |   4 +-
 .../search/search-result-library.js           |   2 +-
 .../add-seatable-account-setting.js           |  15 +-
 .../delete-seatables-dialog.js                |   2 +-
 .../seatable-account-setting-item.js          |  10 +-
 .../components/select-editor/select-editor.js |   8 +-
 .../select-editor/share-permission-editor.js  |   2 +-
 frontend/src/components/send-link.js          |   3 +-
 .../src/components/set-link-expiration.js     |   2 +-
 .../src/components/share-link-panel/index.js  |   8 +-
 .../share-link-panel/link-creation.js         |  53 +--
 .../share-link-panel/link-details.js          |  20 +-
 .../components/share-link-panel/link-item.js  |   4 +-
 .../components/share-link-panel/link-list.js  |   2 +-
 .../shared-file-view/shared-file-view.js      |   4 +-
 .../file-uploader.js                          |  35 +-
 .../upload-list-item.js                       |  10 +-
 .../upload-progress-dialog.js                 |   8 +-
 .../shared-repo-list-item.js                  |  56 ++--
 .../shared-repo-list-view.js                  |   4 +-
 frontend/src/components/side-panel.js         |   2 +-
 frontend/src/components/subscription.js       |  25 +-
 .../src/components/system-notification.js     |  14 +-
 .../src/components/terms-preview-widget.js    |   2 +-
 .../toolbar/dir-operation-toolbar.js          |  30 +-
 .../toolbar/selected-dirents-toolbar.js       |   8 +-
 .../toolbar/single-dropdown-toolbar.js        |   4 +-
 .../components/toolbar/view-file-toolbar.js   |  18 +-
 frontend/src/components/tree-section/index.js |   4 +-
 .../src/components/tree-view/tree-helper.js   |  14 +-
 .../components/tree-view/tree-node-view.js    |  28 +-
 .../src/components/tree-view/tree-node.js     |   4 +-
 .../src/components/tree-view/tree-view.js     |  20 +-
 .../components/user-settings/email-notice.js  |  14 +-
 .../user-settings/language-setting.js         |   2 +-
 .../user-settings/linked-devices.js           |   4 +-
 .../user-settings/social-login-dingtalk.js    |   2 +-
 .../components/user-settings/social-login.js  |   2 +-
 .../user-settings/two-factor-auth.js          |   9 +-
 .../user-settings/user-avatar-form.js         |  10 +-
 .../user-settings/web-api-auth-token.js       |   5 +-
 frontend/src/components/view-modes.js         |   4 +-
 .../wiki-card-view/wiki-card-item.js          |   4 +-
 .../wiki-dir-list-view/wiki-dir-list-item.js  |   4 +-
 .../wiki-dir-list-view/wiki-dir-list-view.js  |  10 +-
 frontend/src/file-history-old.js              |  18 +-
 frontend/src/file-history.js                  |   6 +-
 frontend/src/metadata/api.js                  |   6 +-
 .../popover/filter-popover/index.js           |   3 +-
 .../components/table/container.js             |   5 +-
 .../metadata-view/components/table/index.js   |   2 +-
 .../table/table-main/records/index.js         |   3 +-
 .../record/cell/operation-btn/index.js        |   2 +-
 .../table-main/records/records-group-body.jsx |   3 +-
 .../metadata-view/hooks/collaborators.js      |   2 +-
 frontend/src/metadata/metadata-view/index.js  |   2 +-
 .../src/metadata/metadata-view/store/index.js |   3 +-
 .../utils/selected-cell-utils.js              |   3 +-
 frontend/src/models/dirent.js                 |   4 +-
 frontend/src/models/group.js                  |   2 +-
 frontend/src/models/repo-info.js              |   2 +-
 frontend/src/pages/dashboard/activity-item.js |   8 +-
 .../src/pages/dashboard/files-activities.js   |   6 +-
 .../pages/file-history-old/history-item.js    |   4 +-
 frontend/src/pages/file-history/side-panel.js |   8 +-
 frontend/src/pages/groups/group-item.js       |   2 +-
 frontend/src/pages/groups/group-view.js       |  50 +--
 .../src/pages/institution-admin/api/index.js  |   6 +-
 .../institution-admin/user-content/index.js   |   8 +-
 .../user-content/user-info.js                 |   4 +-
 .../institution-admin/user-list/user-item.js  |   2 +-
 .../pages/institution-admin/utils/index.js    |   4 +-
 .../src/pages/invitations/invitations-view.js |   8 +-
 .../lib-content-view/lib-content-container.js |   8 +-
 .../lib-content-view/lib-content-view.js      | 146 ++++----
 frontend/src/pages/libraries/index.js         |  24 +-
 .../pages/linked-devices/linked-devices.js    |   6 +-
 .../markdown-editor/detail-list-view/index.js |   2 +-
 .../src/pages/markdown-editor/editor-api.js   |  10 +-
 .../header-toolbar/button-item.js             |   8 +-
 .../header-toolbar/collab-users-button.js     |   2 +-
 .../header-toolbar/header-toolbar.js          |   8 +-
 .../header-toolbar/more-menu.js               |   4 +-
 frontend/src/pages/markdown-editor/index.js   |  34 +-
 frontend/src/pages/my-libs/my-libs-deleted.js |  13 +-
 frontend/src/pages/my-libs/my-libs.js         |  16 +-
 .../src/pages/my-libs/mylib-repo-list-item.js |  45 +--
 .../src/pages/my-libs/mylib-repo-list-view.js |   4 +-
 frontend/src/pages/my-libs/mylib-repo-menu.js |  10 +-
 .../pages/ocm-via-webdav/ocm-via-webdav.js    |   2 +-
 .../departments/department-libraries.js       |   4 +-
 .../org-admin/departments/department-list.js  |   8 +-
 .../departments/department-members.js         |   6 +-
 .../pages/org-admin/departments/department.js |   8 +-
 .../pages/org-admin/departments/group-item.js |   6 +-
 .../org-admin/departments/sub-departments.js  |   6 +-
 .../org-admin/devices/devices-by-platform.js  |  12 +-
 .../pages/org-admin/devices/devices-errors.js |   6 +-
 .../pages/org-admin/devices/devices-nav.js    |   6 +-
 frontend/src/pages/org-admin/index.js         |   6 +-
 frontend/src/pages/org-admin/input-item.js    |   6 +-
 .../org-admin/libraries/org-all-repos.js      |  16 +-
 .../pages/org-admin/libraries/org-repo-nav.js |   4 +-
 .../org-admin/libraries/org-repo-trash.js     |  24 +-
 .../src/pages/org-admin/org-admin-list.js     |   6 +-
 .../src/pages/org-admin/org-group-repos.js    |   4 +-
 .../org-admin/org-groups-search-groups.js     |  15 +-
 frontend/src/pages/org-admin/org-groups.js    |  10 +-
 frontend/src/pages/org-admin/org-info.js      |   6 +-
 frontend/src/pages/org-admin/org-links.js     |  10 +-
 .../pages/org-admin/org-logs-file-audit.js    |   3 +-
 .../pages/org-admin/org-logs-file-update.js   |   3 +-
 frontend/src/pages/org-admin/org-logs.js      |   6 +-
 .../src/pages/org-admin/org-saml-config.js    |   4 +-
 frontend/src/pages/org-admin/org-user-item.js |  12 +-
 .../src/pages/org-admin/org-user-repos.js     |   4 +-
 .../pages/org-admin/org-user-shared-repos.js  |   2 +-
 .../src/pages/org-admin/org-users-admins.js   |   8 +-
 .../src/pages/org-admin/org-users-list.js     |   8 +-
 frontend/src/pages/org-admin/org-users-nav.js |   4 +-
 .../pages/org-admin/org-users-search-users.js |  20 +-
 .../src/pages/org-admin/org-users-users.js    |  29 +-
 frontend/src/pages/org-admin/section.js       |   2 +-
 .../src/pages/org-admin/statistic/picker.js   |   2 +-
 .../org-admin/statistic/statistic-chart.js    |   6 +-
 .../statistic/statistic-common-tool.js        |  16 +-
 .../org-admin/statistic/statistic-file.js     |  20 +-
 .../org-admin/statistic/statistic-nav.js      |  10 +-
 .../org-admin/statistic/statistic-reports.js  |   4 +-
 .../org-admin/statistic/statistic-storage.js  |  10 +-
 .../statistic/statistic-traffic-users.js      |   2 +-
 .../org-admin/statistic/statistic-traffic.js  |  42 +--
 .../org-admin/statistic/statistic-users.js    |   6 +-
 .../org-admin/statistic/traffic-table-body.js |   8 +-
 .../org-admin/web-settings/input-item.js      |   6 +-
 .../pages/org-admin/web-settings/section.js   |   2 +-
 .../org-admin/web-settings/web-settings.js    |   4 +-
 .../sdoc/sdoc-file-history/history-version.js |  35 +-
 frontend/src/pages/search/advanced-search.js  |   2 +-
 frontend/src/pages/search/main-panel.js       |   4 +-
 frontend/src/pages/search/search-results.js   |   8 +-
 frontend/src/pages/share-admin/folders.js     |  20 +-
 frontend/src/pages/share-admin/libraries.js   |  12 +-
 frontend/src/pages/share-admin/share-links.js |  44 +--
 .../src/pages/share-admin/upload-links.js     |  20 +-
 .../share-with-ocm/remote-dir-content.js      |   8 +-
 .../pages/share-with-ocm/remote-dir-path.js   |   2 +-
 .../pages/share-with-ocm/remote-dir-view.js   |   6 +-
 .../pages/share-with-ocm/shared-with-ocm.js   |   4 +-
 frontend/src/pages/shared-libs/shared-libs.js |  24 +-
 frontend/src/pages/shared-with-all/index.js   |  18 +-
 frontend/src/pages/starred/starred.js         |  16 +-
 frontend/src/pages/sys-admin/abuse-reports.js |  14 +-
 .../pages/sys-admin/admin-logs/login-logs.js  |   2 +-
 .../pages/sys-admin/admin-logs/logs-nav.js    |   4 +-
 .../sys-admin/admin-logs/operation-logs.js    |  16 +-
 .../sys-admin/departments/department-list.js  |   6 +-
 .../departments/department-members.js         |   2 +-
 .../pages/sys-admin/departments/department.js |   8 +-
 .../pages/sys-admin/departments/group-item.js |   6 +-
 .../sys-admin/departments/sub-departments.js  |   8 +-
 .../sys-admin/devices/devices-by-platform.js  |  12 +-
 .../pages/sys-admin/devices/devices-errors.js |   6 +-
 .../pages/sys-admin/devices/devices-nav.js    |   6 +-
 .../pages/sys-admin/dingtalk-departments.js   |  12 +-
 .../dingtalk-department-members-list.js       |   6 +-
 .../dingtalk-departments-tree-node.js         |   3 +-
 .../pages/sys-admin/groups/group-members.js   |  14 +-
 .../src/pages/sys-admin/groups/group-nav.js   |   4 +-
 .../src/pages/sys-admin/groups/group-repos.js |  10 +-
 .../pages/sys-admin/groups/groups-content.js  |  12 +-
 frontend/src/pages/sys-admin/groups/groups.js |   4 +-
 .../pages/sys-admin/groups/search-groups.js   |   4 +-
 frontend/src/pages/sys-admin/index.js         |   8 +-
 frontend/src/pages/sys-admin/info.js          |   4 +-
 .../institutions/institution-admins.js        |  14 +-
 .../institutions/institution-info.js          |   6 +-
 .../sys-admin/institutions/institution-nav.js |   6 +-
 .../institutions/institution-users.js         |  18 +-
 .../sys-admin/institutions/institutions.js    |  14 +-
 .../sys-admin/invitations/invitations.js      |  10 +-
 .../src/pages/sys-admin/links/links-nav.js    |   4 +-
 .../src/pages/sys-admin/links/share-links.js  |   6 +-
 .../src/pages/sys-admin/links/upload-links.js |   4 +-
 .../sys-admin/logs-page/file-access-logs.js   |   8 +-
 .../logs-page/file-access-toggle-filter.js    |   2 +-
 .../sys-admin/logs-page/file-update-logs.js   |   4 +-
 .../pages/sys-admin/logs-page/login-logs.js   |   4 +-
 .../src/pages/sys-admin/logs-page/logs-nav.js |   8 +-
 .../logs-page/share-permission-logs.js        |   6 +-
 .../src/pages/sys-admin/main-panel-topbar.js  |   3 +-
 .../sys-admin/notifications/notifications.js  |  20 +-
 .../src/pages/sys-admin/orgs/org-groups.js    |  11 +-
 frontend/src/pages/sys-admin/orgs/org-info.js |  20 +-
 frontend/src/pages/sys-admin/orgs/org-nav.js  |  12 +-
 .../src/pages/sys-admin/orgs/org-repos.js     |  10 +-
 .../src/pages/sys-admin/orgs/org-users.js     |  34 +-
 .../src/pages/sys-admin/orgs/orgs-content.js  |   8 +-
 frontend/src/pages/sys-admin/orgs/orgs.js     |   8 +-
 .../src/pages/sys-admin/orgs/search-orgs.js   |   8 +-
 .../src/pages/sys-admin/repos/all-repos.js    |   8 +-
 .../src/pages/sys-admin/repos/dir-content.js  |   6 +-
 .../src/pages/sys-admin/repos/dir-path-bar.js |   2 +-
 .../src/pages/sys-admin/repos/dir-view.js     |   6 +-
 .../src/pages/sys-admin/repos/repos-nav.js    |   6 +-
 frontend/src/pages/sys-admin/repos/repos.js   |  24 +-
 .../src/pages/sys-admin/repos/search-repos.js |   6 +-
 .../src/pages/sys-admin/repos/system-repo.js  |   2 +-
 .../src/pages/sys-admin/repos/trash-repos.js  |  24 +-
 frontend/src/pages/sys-admin/search.js        |   2 +-
 .../src/pages/sys-admin/statistic/picker.js   |   2 +-
 .../sys-admin/statistic/statistic-chart.js    |   6 +-
 .../statistic/statistic-common-tool.js        |  16 +-
 .../sys-admin/statistic/statistic-file.js     |  20 +-
 .../sys-admin/statistic/statistic-nav.js      |  10 +-
 .../sys-admin/statistic/statistic-reports.js  |   4 +-
 .../sys-admin/statistic/statistic-storage.js  |  10 +-
 .../statistic/statistic-traffic-orgs.js       |   4 +-
 .../statistic/statistic-traffic-users.js      |   2 +-
 .../sys-admin/statistic/statistic-traffic.js  |  42 +--
 .../sys-admin/statistic/statistic-users.js    |   6 +-
 .../sys-admin/statistic/traffic-table-body.js |   8 +-
 .../sys-admin/terms-and-conditions/content.js |   4 +-
 .../sys-admin/terms-and-conditions/item.js    |  14 +-
 .../terms-and-conditions.js                   |   8 +-
 .../src/pages/sys-admin/users/ldap-users.js   |   2 +-
 .../src/pages/sys-admin/users/search-users.js |  20 +-
 .../src/pages/sys-admin/users/user-groups.js  |   8 +-
 .../src/pages/sys-admin/users/user-info.js    |  14 +-
 .../src/pages/sys-admin/users/user-links.js   |  16 +-
 .../src/pages/sys-admin/users/user-nav.js     |  10 +-
 .../src/pages/sys-admin/users/user-repos.js   |  16 +-
 .../sys-admin/users/user-shared-repos.js      |   2 +-
 .../pages/sys-admin/users/users-content.js    |  44 +--
 .../src/pages/sys-admin/users/users-nav.js    |   8 +-
 frontend/src/pages/sys-admin/users/users.js   |  26 +-
 .../sys-admin/virus-scan/all-virus-files.js   |  12 +-
 .../src/pages/sys-admin/virus-scan/nav.js     |   4 +-
 .../virus-scan/unhandled-virus-files.js       |  12 +-
 .../sys-admin/web-settings/input-item.js      |   8 +-
 .../pages/sys-admin/web-settings/section.js   |   2 +-
 .../sys-admin/web-settings/web-settings.js    |   8 +-
 .../sys-admin/work-weixin-departments.js      |  14 +-
 .../work-weixin-department-members-list.js    |   6 +-
 .../work-weixin-departments-tree-node.js      |   3 +-
 .../src/pages/upload-link/file-uploader.js    |  31 +-
 frontend/src/pages/upload-link/index.js       |   7 +-
 .../src/pages/upload-link/upload-list-item.js |  10 +-
 .../upload-link/upload-progress-dialog.js     |   4 +-
 .../src/pages/wiki/index-md-viewer/index.js   |   4 +-
 .../pages/wiki/index-md-viewer/nav-item.js    |   6 +-
 frontend/src/pages/wiki/index.js              |  58 ++--
 frontend/src/pages/wiki/side-panel.js         |   4 +-
 .../src/pages/wiki/utils/generate-navs.js     |   2 -
 .../src/pages/wiki2/common/nav-item-icon.js   |   2 +-
 frontend/src/pages/wiki2/side-panel.js        |   2 +-
 .../wiki2/wiki-right-header/page-cover.js     |   2 +-
 .../wiki2/wiki-right-header/page-icon.js      |   2 +-
 .../wiki2/wiki-right-header/page-title.js     |   2 +-
 frontend/src/pages/wikis/wikis.js             |   8 +-
 frontend/src/repo-folder-trash.js             |  30 +-
 frontend/src/repo-history.js                  |  36 +-
 frontend/src/repo-snapshot.js                 |  28 +-
 frontend/src/settings.js                      |  24 +-
 frontend/src/shared-dir-view.js               |  35 +-
 frontend/src/shared-file-view-document.js     |   2 +-
 frontend/src/shared-file-view-markdown.js     |   2 +-
 frontend/src/shared-file-view-sdoc.js         |   4 +-
 frontend/src/tc-accept.js                     |   6 +-
 frontend/src/tc-view.js                       |   2 +-
 frontend/src/user-notifications.js            |  16 +-
 frontend/src/utils/constants.js               |   8 +-
 frontend/src/utils/date-format-utils.js       |   2 +-
 frontend/src/utils/editor-utilities.js        |   6 +-
 frontend/src/utils/extra-attributes.js        |  12 +-
 frontend/src/utils/markdown-utils.js          |  10 +-
 frontend/src/utils/search-api.js              |   4 +-
 frontend/src/utils/subscription-api.js        |   2 +-
 frontend/src/utils/system-admin-api.js        |   6 +-
 frontend/src/utils/text-translation.js        |  60 ++--
 frontend/src/utils/utils.js                   | 312 +++++++++---------
 frontend/src/utils/wiki-api.js                |   8 +-
 frontend/src/view-file-text.js                |   4 +-
 450 files changed, 2425 insertions(+), 2385 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index fc5072ef7c..31e4a1db66 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -6,59 +6,52 @@
     "eslint:recommended"
   ],
   "rules": {
-    "indent": [
-      "warn",
-      2,
-      { "SwitchCase": 1 }
-    ],
-    "default-case": "off",
-    "linebreak-style": [
-      "warn",
-      "unix"
-    ],
-    "quotes": [
-      "warn",
-      "single"
-    ],
-    "semi": [
-      "warn",
-      "always"
-    ],
-
+    "jsx-a11y/anchor-is-valid": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "no-loop-func": "off",
     "eqeqeq": "off",
+    "default-case": "off",
+    "jsx-a11y/anchor-has-content": "off",
+    "no-mixed-operators": "off",
+    "no-useless-concat": "off",
     "no-useless-constructor": "off",
-    "no-restricted-globals": "off",
     "no-unused-expressions": "off",
-    "no-case-declarations": "warn",
-    "no-cond-assign": "warn",
-    "no-redeclare": "warn",
+    "no-prototype-builtins": "off",
+    "no-restricted-globals": "off",
+    "brace-style": "off",
+    "no-console": "off",
+    "no-cond-assign": "off",
+    "no-var": "off",
+    "no-case-declarations": "off",
+    "no-redeclare": "off",
+    "indent": ["warn", 2, { 
+      "SwitchCase": 1,
+      "ignoreComments": false
+    }],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["warn", "single"],
+    "semi": ["warn", "always"],
     "no-unreachable": "warn",
     "no-class-assign": "warn",
     "no-unused-vars": "warn",
+    "no-useless-escape": "off",
     "no-irregular-whitespace": "warn",
-    "no-console": "warn",
-    "no-self-assign": ["error", {"props": false}],
-    "no-useless-escape": "warn",
     "no-trailing-spaces": "warn",
-
     "react/jsx-indent": ["warn", 2],
-    "react/prop-types": "warn",
-    "react/display-name": "warn",
-    "no-mixed-operators": "off",
-    "no-useless-concat": "off",
-    "jsx-a11y/anchor-has-content": "off",
-    "jsx-a11y/href-no-hash": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    "space-before-blocks": ["warn", "always"],
-    "space-in-parens": ["warn", "never"],
-    "keyword-spacing": ["warn", {
-      "before": true,
-      "after": true,
-      "overrides": {
-        "if" : {
-          "after": true
-        }
-      }
-    }]
+    "eol-last": "error",
+    "space-before-function-paren": ["warn", {"named": "never"}],
+    "array-bracket-spacing": ["warn", "never"],
+    "object-curly-spacing": ["warn", "always"],
+    "spaced-comment": "warn",
+    "keyword-spacing": ["warn", {"before": true}],
+    "space-infix-ops": "error",
+    "key-spacing": ["error", { "beforeColon": false }],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "no-duplicate-imports": "error",
+    "one-var": ["error", "never"],
+    "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }],
+    "no-multi-spaces": "error",
+    "react/jsx-closing-tag-location": "error"
   }
 }
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 33cf841504..afad459feb 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -68,7 +68,7 @@ class App extends Component {
   onpopstate = (event) => {
     if (event.state && event.state.currentTab && event.state.pathPrefix) {
       let { currentTab, pathPrefix } = event.state;
-      this.setState({currentTab, pathPrefix});
+      this.setState({ currentTab, pathPrefix });
     }
   };
 
@@ -80,12 +80,12 @@ class App extends Component {
     }
   }
 
-  navigateClientUrlToLib = () =>{
+  navigateClientUrlToLib = () => {
     if (window.location.hash && window.location.hash.indexOf('common/lib') != -1) {
       let splitUrlArray = window.location.hash.split('/');
       let repoID = splitUrlArray[splitUrlArray.length - 2];
       let url = siteRoot + 'library/' + repoID + '/';
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     }
   };
 
@@ -102,7 +102,7 @@ class App extends Component {
       let href = window.location.href.split('/');
       currentTab = href[href.length - 2];
     }
-    this.setState({currentTab: currentTab});
+    this.setState({ currentTab: currentTab });
   }
 
   onCloseSidePanel = () => {
@@ -119,9 +119,9 @@ class App extends Component {
 
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
-      this.setState({currentTab: '', pathPrefix: []});
+      this.setState({ currentTab: '', pathPrefix: [] });
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let isWeChat = Utils.isWeChat();
@@ -135,7 +135,7 @@ class App extends Component {
   };
 
   onGroupChanged = (groupID) => {
-    setTimeout(function() {
+    setTimeout(function () {
       let url;
       if (groupID) {
         url = siteRoot + 'group/' + groupID + '/';
@@ -157,7 +157,7 @@ class App extends Component {
       pathPrefix: pathPrefix
     }, () => {
       let { currentTab, pathPrefix } = this.state;
-      window.history.replaceState({currentTab: currentTab, pathPrefix: pathPrefix}, null);
+      window.history.replaceState({ currentTab: currentTab, pathPrefix: pathPrefix }, null);
     });
     if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
       this.setState({ isSidePanelClosed: true });
diff --git a/frontend/src/components/btn-qr-code.js b/frontend/src/components/btn-qr-code.js
index 9ea10ee93e..1c0c4d402e 100644
--- a/frontend/src/components/btn-qr-code.js
+++ b/frontend/src/components/btn-qr-code.js
@@ -17,7 +17,7 @@ class ButtonQR extends React.Component {
       isPopoverOpen: false
     };
 
-    this.btnID = 'btn-' + Math.random().toString().substr(2,5);
+    this.btnID = 'btn-' + Math.random().toString().substr(2, 5);
   }
 
   togglePopover = () => {
@@ -35,7 +35,7 @@ class ButtonQR extends React.Component {
         <Popover placement="bottom" isOpen={isPopoverOpen} target={this.btnID} toggle={this.togglePopover}>
           <PopoverBody>
             <QRCode value={link} size={128} />
-            <p className="m-0 mt-1 text-center" style={{'maxWidth': '128px'}}>{gettext('Scan the QR code to view the shared content directly')}</p>
+            <p className="m-0 mt-1 text-center" style={{ 'maxWidth': '128px' }}>{gettext('Scan the QR code to view the shared content directly')}</p>
           </PopoverBody>
         </Popover>
       </div>
diff --git a/frontend/src/components/common/account.js b/frontend/src/components/common/account.js
index 7afc6c23f3..13ab2f413a 100644
--- a/frontend/src/components/common/account.js
+++ b/frontend/src/components/common/account.js
@@ -94,7 +94,7 @@ class Account extends Component {
       });
       this.isFirstMounted = false;
     } else {
-      this.setState({showInfo: !this.state.showInfo});
+      this.setState({ showInfo: !this.state.showInfo });
     }
   };
 
@@ -153,7 +153,7 @@ class Account extends Component {
           {this.renderAvatar()}
         </a>
         <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label={gettext('View profile and more')} onClick={this.onClickAccount}></span>
-        <div id="user-info-popup" className={`account-popup sf-popover ${this.state.showInfo? '':'hide'}`}>
+        <div id="user-info-popup" className={`account-popup sf-popover ${this.state.showInfo ? '' : 'hide'}`}>
           <div className="outer-caret up-outer-caret">
             <div className="inner-caret"></div>
           </div>
@@ -165,7 +165,7 @@ class Account extends Component {
             <div id="space-traffic">
               <div className="item">
                 <p>{gettext('Used:')}{' '}{this.state.quotaUsage} / {this.state.quotaTotal}</p>
-                <div id="quota-bar"><span id="quota-usage" className="usage" style={{width: this.state.usageRate}}></span></div>
+                <div id="quota-bar"><span id="quota-usage" className="usage" style={{ width: this.state.usageRate }}></span></div>
               </div>
             </div>
             <a href={siteRoot + 'profile/'} className="item">{gettext('Settings')}</a>
diff --git a/frontend/src/components/common/event-bus-type.js b/frontend/src/components/common/event-bus-type.js
index 18960d493c..ff04767358 100644
--- a/frontend/src/components/common/event-bus-type.js
+++ b/frontend/src/components/common/event-bus-type.js
@@ -29,9 +29,9 @@ export const EVENT_BUS_TYPE = {
 
   // modify view
   MODIFY_FILTERS: 'modify_filters',
-  MODIFY_SORTS:'modify_sorts',
-  MODIFY_GROUPBYS:'modify_groupbys',
-  MODIFY_HIDDEN_COLUMNS:'modify_hidden_columns',
+  MODIFY_SORTS: 'modify_sorts',
+  MODIFY_GROUPBYS: 'modify_groupbys',
+  MODIFY_HIDDEN_COLUMNS: 'modify_hidden_columns',
 
   // change
   VIEW_CHANGED: 'view_changed',
diff --git a/frontend/src/components/common/logout.js b/frontend/src/components/common/logout.js
index fa197ab2f1..6f87ec608b 100644
--- a/frontend/src/components/common/logout.js
+++ b/frontend/src/components/common/logout.js
@@ -4,7 +4,7 @@ import { siteRoot, gettext } from '../../utils/constants';
 export default function Logout() {
   return (
     <a className="logout-icon" href={`${siteRoot}accounts/logout/`} title={gettext('Log out')}>
-      <i className="sf3-font sf3-font-logout" style={{fontSize: '24px'}}></i>
+      <i className="sf3-font sf3-font-logout" style={{ fontSize: '24px' }}></i>
     </a>
   );
 }
diff --git a/frontend/src/components/common/notice-item.js b/frontend/src/components/common/notice-item.js
index 58d5a3f74f..f1f94b53e2 100644
--- a/frontend/src/components/common/notice-item.js
+++ b/frontend/src/components/common/notice-item.js
@@ -25,7 +25,7 @@ const MSG_TYPE_REPO_SHARE_PERM_DELETE = 'repo_share_perm_delete';
 
 class NoticeItem extends React.Component {
 
-  generatorNoticeInfo () {
+  generatorNoticeInfo() {
     let noticeItem = this.props.noticeItem;
     let noticeType = noticeItem.type;
     let detail = noticeItem.detail;
@@ -48,7 +48,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{user_link}', userLink);
       notice = notice.replace('{group_link}', groupLink);
 
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_SHARE) {
@@ -58,7 +58,7 @@ class NoticeItem extends React.Component {
       let shareFrom = detail.share_from_user_name;
 
       let repoName = detail.repo_name;
-      let repoUrl = siteRoot + 'library/' + detail.repo_id + '/' +  repoName + '/';
+      let repoUrl = siteRoot + 'library/' + detail.repo_id + '/' + repoName + '/';
 
       let path = detail.path;
       let notice = '';
@@ -78,7 +78,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{tagA}', `<a href='${Utils.encodePath(repoUrl)}'>`);
       notice = notice.replace('{/tagA}', '</a>');
 
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_SHARE_PERM_CHANGE) {
@@ -87,7 +87,7 @@ class NoticeItem extends React.Component {
       let shareFrom = detail.share_from_user_name;
       let permission = detail.permission;
       let repoName = detail.repo_name;
-      let repoUrl = siteRoot + 'library/' + detail.repo_id + '/' +  repoName + '/';
+      let repoUrl = siteRoot + 'library/' + detail.repo_id + '/' + repoName + '/';
       let path = detail.path;
       let notice = '';
       // 1. handle translate
@@ -107,7 +107,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{tagA}', `<a href='${Utils.encodePath(repoUrl)}'>`);
       notice = notice.replace('{/tagA}', '</a>');
 
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_SHARE_PERM_DELETE) {
@@ -128,7 +128,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{share_from}', shareFrom);
       notice = notice.replace('{repo_name}', repoName);
       notice = Utils.HTMLescape(notice);
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_SHARE_TO_GROUP) {
@@ -147,9 +147,9 @@ class NoticeItem extends React.Component {
       let notice = '';
       // 1. handle translate
       if (path === '/') {
-        notice =  gettext('{share_from} has shared a library named {repo_link} to group {group_link}.');
+        notice = gettext('{share_from} has shared a library named {repo_link} to group {group_link}.');
       } else {
-        notice =  gettext('{share_from} has shared a folder named {repo_link} to group {group_link}.');
+        notice = gettext('{share_from} has shared a folder named {repo_link} to group {group_link}.');
       }
 
       // 2. handle xss(cross-site scripting)
@@ -163,7 +163,7 @@ class NoticeItem extends React.Component {
       notice = notice.replace('{/tagA}', '</a>');
       notice = notice.replace('{tagB}', `<a href='${Utils.encodePath(groupUrl)}'>`);
       notice = notice.replace('{/tagB}', '</a>');
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_TRANSFER) {
@@ -185,7 +185,7 @@ class NoticeItem extends React.Component {
       // 3. add jump link
       notice = notice.replace('{tagA}', `<a href=${Utils.encodePath(repoUrl)}>`);
       notice = notice.replace('{/tagA}', '</a>');
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_FILE_UPLOADED) {
@@ -218,7 +218,7 @@ class NoticeItem extends React.Component {
         notice = notice.replace('{upload_file_link}', `${fileName}`);
         notice = Utils.HTMLescape(notice);
       }
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_FOLDER_UPLOADED) {
@@ -251,7 +251,7 @@ class NoticeItem extends React.Component {
         notice = notice.replace('{upload_folder_link}', `${folderName}`);
         notice = Utils.HTMLescape(notice);
       }
-      return {avatar_url, notice};
+      return { avatar_url, notice };
     }
 
     if (noticeType === MSG_TYPE_REPO_MONITOR) {
@@ -348,21 +348,21 @@ class NoticeItem extends React.Component {
       let notice = gettext('Your library {libraryName} has recently deleted a large number of files.');
       notice = notice.replace('{libraryName}', repoLink);
 
-      return { avatar_url : null, notice };
+      return { avatar_url: null, notice };
     }
 
     if (noticeType === MSG_TYPE_SAML_SSO_FAILED) {
       const { error_msg } = detail;
       let notice = gettext(error_msg);
 
-      return { avatar_url : null, notice };
+      return { avatar_url: null, notice };
     }
 
     // if (noticeType === MSG_TYPE_GUEST_INVITATION_ACCEPTED) {
 
     // }
 
-    return {avatar_url : null, notice : null};
+    return { avatar_url: null, notice: null };
   }
 
   onNoticeItemClick = () => {
@@ -387,7 +387,7 @@ class NoticeItem extends React.Component {
           <img src={avatar_url} width="32" height="32" className="avatar" alt="" />
         </td>
         <td className="pr-1 pr-md-8">
-          <p className="m-0" dangerouslySetInnerHTML={{__html: notice}}></p>
+          <p className="m-0" dangerouslySetInnerHTML={{ __html: notice }}></p>
         </td>
         <td>
           {moment(noticeItem.time).fromNow()}
@@ -398,7 +398,7 @@ class NoticeItem extends React.Component {
         <div className="notice-item">
           <div className="main-info">
             <img src={avatar_url} width="32" height="32" className="avatar" alt=""/>
-            <p className="brief" dangerouslySetInnerHTML={{__html: notice}}></p>
+            <p className="brief" dangerouslySetInnerHTML={{ __html: notice }}></p>
           </div>
           <p className="time">{moment(noticeItem.time).fromNow()}</p>
         </div>
diff --git a/frontend/src/components/common/notification.js b/frontend/src/components/common/notification.js
index ed318ce0ce..fca7dd4520 100644
--- a/frontend/src/components/common/notification.js
+++ b/frontend/src/components/common/notification.js
@@ -20,7 +20,7 @@ class Notification extends React.Component {
 
   componentDidMount() {
     seafileAPI.getUnseenNotificationCount().then(res => {
-      this.setState({unseenCount: res.data.unseen_count});
+      this.setState({ unseenCount: res.data.unseen_count });
     });
   }
 
@@ -34,7 +34,7 @@ class Notification extends React.Component {
       });
     } else {
       this.loadNotices();
-      this.setState({showNotice: true});
+      this.setState({ showNotice: true });
     }
   };
 
@@ -43,7 +43,7 @@ class Notification extends React.Component {
     let perPage = 5;
     seafileAPI.listNotifications(page, perPage).then(res => {
       let noticeList = res.data.notification_list;
-      this.setState({noticeList: noticeList});
+      this.setState({ noticeList: noticeList });
     });
   };
 
@@ -71,11 +71,11 @@ class Notification extends React.Component {
   onNotificationDialogToggle = () => {
     let newSearch = this.state.isShowNotificationDialog ? null : 'all';
     Utils.updateSearchParameter('notifications', newSearch);
-    this.setState({isShowNotificationDialog: !this.state.isShowNotificationDialog});
+    this.setState({ isShowNotificationDialog: !this.state.isShowNotificationDialog });
   };
 
   onNotificationListToggle = () => {
-    this.setState({showNotice: false});
+    this.setState({ showNotice: false });
   };
 
   onMarkAllNotifications = () => {
diff --git a/frontend/src/components/common/search-input.js b/frontend/src/components/common/search-input.js
index 428089010f..ecf26b9fc6 100644
--- a/frontend/src/components/common/search-input.js
+++ b/frontend/src/components/common/search-input.js
@@ -40,7 +40,7 @@ class SearchInput extends Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
-      this.setState({searchValue: nextProps.value});
+      this.setState({ searchValue: nextProps.value });
     }
   }
 
@@ -58,7 +58,7 @@ class SearchInput extends Component {
     this.timer && clearTimeout(this.timer);
     const { onChange, wait } = this.props;
     let text = e.target.value;
-    this.setState({searchValue: text || ''}, () => {
+    this.setState({ searchValue: text || '' }, () => {
       if (this.isInputtingChinese) return;
       this.timer = setTimeout(() => {
         onChange && onChange(this.state.searchValue.trim());
@@ -73,7 +73,7 @@ class SearchInput extends Component {
 
   clearSearch = () => {
     const { clearValue } = this.props;
-    this.setState({searchValue: ''}, () => {
+    this.setState({ searchValue: '' }, () => {
       clearValue && clearValue();
     });
   };
@@ -98,7 +98,7 @@ class SearchInput extends Component {
     if (!isClearable || !searchValue) return null;
     const { ClearIndicator } = components;
     if (React.isValidElement(ClearIndicator)) {
-      return React.cloneElement(ClearIndicator, {clearValue: this.clearSearch});
+      return React.cloneElement(ClearIndicator, { clearValue: this.clearSearch });
     } else if (this.isFunction(ClearIndicator)) {
       return <ClearIndicator clearValue={this.clearSearch} />;
     }
diff --git a/frontend/src/components/common/select/no-group-message.js b/frontend/src/components/common/select/no-group-message.js
index 7a9abcc9fa..362f72a5e3 100644
--- a/frontend/src/components/common/select/no-group-message.js
+++ b/frontend/src/components/common/select/no-group-message.js
@@ -4,7 +4,7 @@ import { gettext } from '../../../utils/constants';
 
 const NoGroupMessage = (props) => {
   return (
-    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+    <div {...props.innerProps} style={{ margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)' }}>{gettext('Group not found')}</div>
   );
 };
 
diff --git a/frontend/src/components/common/select/seahub-select-style.js b/frontend/src/components/common/select/seahub-select-style.js
index e86c7e6474..f7722afb4b 100644
--- a/frontend/src/components/common/select/seahub-select-style.js
+++ b/frontend/src/components/common/select/seahub-select-style.js
@@ -16,7 +16,7 @@ const MenuSelectStyle = {
     cursor: 'pointer',
     lineHeight: '1.5',
   }),
-  menuPortal:  base => ({ ...base, zIndex: 9999 }),
+  menuPortal: base => ({ ...base, zIndex: 9999 }),
   indicatorSeparator: () => {},
 };
 
diff --git a/frontend/src/components/common/switch/index.js b/frontend/src/components/common/switch/index.js
index 938c206bb0..fbf4d700c3 100644
--- a/frontend/src/components/common/switch/index.js
+++ b/frontend/src/components/common/switch/index.js
@@ -6,7 +6,7 @@ import '../../../css/switch.css';
 
 function Switch(props) {
   const { onChange, checked, placeholder, disabled, className, size, textPosition, setRef } = props;
-  return(
+  return (
     <div className={classnames('seahub-switch position-relative', className, size)} ref={setRef}>
       <label className="custom-switch">
         <input
@@ -20,7 +20,7 @@ function Switch(props) {
         {textPosition === 'left' &&
           <span className="custom-switch-description text-truncate">{placeholder}</span>
         }
-        <span className={classnames('custom-switch-indicator', {'disabled': disabled})}></span>
+        <span className={classnames('custom-switch-indicator', { 'disabled': disabled })}></span>
         {textPosition === 'right' &&
           <span className="custom-switch-description text-truncate">{placeholder}</span>
         }
diff --git a/frontend/src/components/context-menu/context-menu.js b/frontend/src/components/context-menu/context-menu.js
index 1db73c93ad..e95120350e 100644
--- a/frontend/src/components/context-menu/context-menu.js
+++ b/frontend/src/components/context-menu/context-menu.js
@@ -31,7 +31,7 @@ class ContextMenu extends React.Component {
     this.listenId = listener.register(this.handleShow, this.handleHide);
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     if (this.state.isVisible) {
       const wrapper = window.requestAnimationFrame || setTimeout;
 
@@ -105,7 +105,7 @@ class ContextMenu extends React.Component {
   handleHide = (e) => {
     if (this.state.isVisible && (!e.detail || !e.detail.id || e.detail.id === this.props.id)) {
       this.unregisterHandlers();
-      this.setState({ isVisible: false});
+      this.setState({ isVisible: false });
       callIfExists(this.props.onHideMenu, e);
     }
   };
diff --git a/frontend/src/components/copy-to-clipboard.js b/frontend/src/components/copy-to-clipboard.js
index 8a60a1424d..f5a51cf7de 100644
--- a/frontend/src/components/copy-to-clipboard.js
+++ b/frontend/src/components/copy-to-clipboard.js
@@ -1,7 +1,7 @@
 import deselectCurrent from 'toggle-selection';
 
 function copy(text) {
-  let reselectPrevious, range, selection, mark, success = false;
+  let reselectPrevious; let range; let selection; let mark; let success = false;
   try {
     reselectPrevious = deselectCurrent();
 
@@ -19,7 +19,7 @@ function copy(text) {
 
     const successful = document.execCommand('copy');
     if (!successful) {
-      //console.log('copy command was unsuccessful');
+      // console.log('copy command was unsuccessful');
     }
     success = true;
   } catch (err) {
diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index e88e2c8aff..b415f36432 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -195,7 +195,7 @@ class DirPath extends React.Component {
         {(this.props.isViewFile && fileTags.length !== 0) &&
           <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1 d-flex align-items-center">
             {fileTags.map((fileTag, index) => {
-              return (<span className="file-tag" key={fileTag.id} style={{zIndex: index, backgroundColor: fileTag.color}}></span>);
+              return (<span className="file-tag" key={fileTag.id} style={{ zIndex: index, backgroundColor: fileTag.color }}></span>);
             })}
             <UncontrolledTooltip target="column-mode-file-tags" placement="bottom">
               {tagTitle}
diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index b4b1f6f3ad..4c0d978903 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -35,10 +35,10 @@ class DirTool extends React.Component {
     };
 
     this.sortOptions = [
-      {value: 'name-asc', text: gettext('By name ascending')},
-      {value: 'name-desc', text: gettext('By name descending')},
-      {value: 'time-asc', text: gettext('By time ascending')},
-      {value: 'time-desc', text: gettext('By time descending')}
+      { value: 'name-asc', text: gettext('By name ascending') },
+      { value: 'name-desc', text: gettext('By name descending') },
+      { value: 'time-asc', text: gettext('By time ascending') },
+      { value: 'time-desc', text: gettext('By time descending') }
     ];
   }
 
@@ -56,11 +56,11 @@ class DirTool extends React.Component {
         dom = dom.parentNode;
       }
     }
-    this.setState({isRepoTagDialogOpen: false});
+    this.setState({ isRepoTagDialogOpen: false });
   };
 
   toggleCancel = () => {
-    this.setState({isRepoTagDialogOpen: false});
+    this.setState({ isRepoTagDialogOpen: false });
   };
 
   getMenu = () => {
@@ -78,7 +78,7 @@ class DirTool extends React.Component {
     const { key } = item;
     switch (key) {
       case 'Tags':
-        this.setState({isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen});
+        this.setState({ isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen });
         break;
     }
   };
diff --git a/frontend/src/components/date-and-time-picker.js b/frontend/src/components/date-and-time-picker.js
index 3a3e1842b4..d22b07e2e6 100644
--- a/frontend/src/components/date-and-time-picker.js
+++ b/frontend/src/components/date-and-time-picker.js
@@ -51,7 +51,7 @@ class Picker extends React.Component {
         onChange={this.props.onChange}
       >
         {
-          ({value}) => {
+          ({ value }) => {
             return (
               <div>
                 <input
diff --git a/frontend/src/components/dialog/add-abuse-report-dialog.js b/frontend/src/components/dialog/add-abuse-report-dialog.js
index 6ec7858c18..5743f8f5ea 100644
--- a/frontend/src/components/dialog/add-abuse-report-dialog.js
+++ b/frontend/src/components/dialog/add-abuse-report-dialog.js
@@ -34,7 +34,7 @@ class AddAbuseReportDialog extends React.Component {
     }
     seafileAPI.addAbuseReport(this.props.sharedToken, this.state.abuseType, this.state.description, this.state.reporter, this.props.filePath).then((res) => {
       this.props.toggleAddAbuseReportDialog();
-      toaster.success(gettext('Success'), {duration: 2});
+      toaster.success(gettext('Success'), { duration: 2 });
     }).catch((error) => {
       if (error.response) {
         this.setState({
@@ -49,17 +49,17 @@ class AddAbuseReportDialog extends React.Component {
     if (type === this.state.abuseType) {
       return;
     }
-    this.setState({abuseType: type});
+    this.setState({ abuseType: type });
   };
 
   setReporter = (event) => {
     let reporter = event.target.value.trim();
-    this.setState({reporter: reporter});
+    this.setState({ reporter: reporter });
   };
 
   setDescription = (event) => {
     let desc = event.target.value.trim();
-    this.setState({description: desc});
+    this.setState({ description: desc });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/add-wiki-dialog.js b/frontend/src/components/dialog/add-wiki-dialog.js
index 3545301ab8..e8dae4a57d 100644
--- a/frontend/src/components/dialog/add-wiki-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-dialog.js
@@ -96,7 +96,7 @@ class AddWikiDialog extends React.Component {
                 maxMenuHeight={200}
                 value={this.state.selectedOption}
                 components={{ NoOptionsMessage: (
-                  <div style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('No department')}</div>
+                  <div style={{ margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)' }}>{gettext('No department')}</div>
                 ) }}
                 noOptionsMessage={() => {return gettext('No options available');}}
               />
diff --git a/frontend/src/components/dialog/add-wiki-page-dialog.js b/frontend/src/components/dialog/add-wiki-page-dialog.js
index 77a5b39e09..3c1b5d9c11 100644
--- a/frontend/src/components/dialog/add-wiki-page-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-page-dialog.js
@@ -47,7 +47,7 @@ class AddWikiPageDialog extends React.Component {
 
     input.focus();
     const focusPosition = this.props.wikiPageName.length;
-    input.setSelectionRange(focusPosition,focusPosition);
+    input.setSelectionRange(focusPosition, focusPosition);
   };
 
   render() {
diff --git a/frontend/src/components/dialog/change-repo-password-dialog.js b/frontend/src/components/dialog/change-repo-password-dialog.js
index d631cfe23d..2d10500d09 100644
--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -99,9 +99,9 @@ class ChangeRepoPasswordDialog extends React.Component {
     title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
 
     return (
-      <Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
+      <Modal isOpen={true} style={{ height: 'auto' }} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>
-          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <form id="repo-change-passwd-form" action="" method="post">
diff --git a/frontend/src/components/dialog/clean-trash.js b/frontend/src/components/dialog/clean-trash.js
index d352ce4776..88ee5e8ee4 100644
--- a/frontend/src/components/dialog/clean-trash.js
+++ b/frontend/src/components/dialog/clean-trash.js
@@ -17,10 +17,10 @@ class CleanTrash extends React.Component {
   constructor(props) {
     super(props);
     this.options = [
-      {label: gettext('3 days ago'), value: 3},
-      {label: gettext('1 week ago'), value: 7},
-      {label: gettext('1 month ago'), value: 30},
-      {label: gettext('all'), value: 0}
+      { label: gettext('3 days ago'), value: 3 },
+      { label: gettext('1 week ago'), value: 7 },
+      { label: gettext('1 month ago'), value: 30 },
+      { label: gettext('all'), value: 0 }
     ];
     this.state = {
       inputValue: this.options[0],
diff --git a/frontend/src/components/dialog/commit-details.js b/frontend/src/components/dialog/commit-details.js
index d050d4675a..66eb202ecf 100644
--- a/frontend/src/components/dialog/commit-details.js
+++ b/frontend/src/components/dialog/commit-details.js
@@ -26,7 +26,7 @@ class CommitDetails extends React.Component {
   }
 
   componentDidMount() {
-    const {repoID, commitID} = this.props;
+    const { repoID, commitID } = this.props;
     seafileAPI.getCommitDetails(repoID, commitID).then((res) => {
       this.setState({
         isLoading: false,
@@ -43,7 +43,7 @@ class CommitDetails extends React.Component {
   }
 
   render() {
-    const { toggleDialog, commitTime} = this.props;
+    const { toggleDialog, commitTime } = this.props;
     return (
       <Modal isOpen={true} centered={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{gettext('Modification Details')}</ModalHeader>
@@ -60,12 +60,12 @@ class Content extends React.Component {
 
   renderDetails = (data) => {
     const detailsData = [
-      {type: 'new', title: gettext('New files')},
-      {type: 'removed', title: gettext('Deleted files')},
-      {type: 'renamed', title: gettext('Renamed or Moved files')},
-      {type: 'modified', title: gettext('Modified files')},
-      {type: 'newdir', title: gettext('New directories')},
-      {type: 'deldir', title: gettext('Deleted directories')}
+      { type: 'new', title: gettext('New files') },
+      { type: 'removed', title: gettext('Deleted files') },
+      { type: 'renamed', title: gettext('Renamed or Moved files') },
+      { type: 'modified', title: gettext('Modified files') },
+      { type: 'newdir', title: gettext('New directories') },
+      { type: 'deldir', title: gettext('Deleted directories') }
     ];
 
     let showDesc = true;
@@ -91,7 +91,7 @@ class Content extends React.Component {
               <ul>
                 {
                   data[item.type].map((item, index) => {
-                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item text-truncate"></li>;
+                    return <li key={index} dangerouslySetInnerHTML={{ __html: item }} className="commit-detail-item text-truncate"></li>;
                   })
                 }
               </ul>
@@ -103,7 +103,7 @@ class Content extends React.Component {
   };
 
   render() {
-    const {isLoading, errorMsg, commitDetails} = this.props.data;
+    const { isLoading, errorMsg, commitDetails } = this.props.data;
 
     if (isLoading) {
       return <Loading />;
diff --git a/frontend/src/components/dialog/common-operation-confirmation-dialog.js b/frontend/src/components/dialog/common-operation-confirmation-dialog.js
index 5fca5943fe..d7e06bec92 100644
--- a/frontend/src/components/dialog/common-operation-confirmation-dialog.js
+++ b/frontend/src/components/dialog/common-operation-confirmation-dialog.js
@@ -28,7 +28,7 @@ class CommonOperationConfirmationDialog extends Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{title}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: message}}></p>
+          <p dangerouslySetInnerHTML={{ __html: message }}></p>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/confirm-delete-account.js b/frontend/src/components/dialog/confirm-delete-account.js
index cace7063b8..9d3f392a43 100644
--- a/frontend/src/components/dialog/confirm-delete-account.js
+++ b/frontend/src/components/dialog/confirm-delete-account.js
@@ -21,7 +21,7 @@ class ConfirmDeleteAccount extends Component {
   };
 
   render() {
-    const {formActionURL, csrfToken, toggle} = this.props;
+    const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
         <ModalHeader toggle={toggle}>{gettext('Delete Account')}</ModalHeader>
diff --git a/frontend/src/components/dialog/confirm-disconnect-dingtalk.js b/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
index e3b201883d..47ade8d2ba 100644
--- a/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
+++ b/frontend/src/components/dialog/confirm-disconnect-dingtalk.js
@@ -21,7 +21,7 @@ class ConfirmDisconnectDingtalk extends Component {
   };
 
   render() {
-    const {formActionURL, csrfToken, toggle} = this.props;
+    const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
         <ModalHeader toggle={toggle}>{gettext('Disconnect')}</ModalHeader>
diff --git a/frontend/src/components/dialog/confirm-disconnect-wechat.js b/frontend/src/components/dialog/confirm-disconnect-wechat.js
index 99799cb9b6..79a35d8ca7 100644
--- a/frontend/src/components/dialog/confirm-disconnect-wechat.js
+++ b/frontend/src/components/dialog/confirm-disconnect-wechat.js
@@ -21,7 +21,7 @@ class ConfirmDisconnectWechat extends Component {
   };
 
   render() {
-    const {formActionURL, csrfToken, toggle} = this.props;
+    const { formActionURL, csrfToken, toggle } = this.props;
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
         <ModalHeader toggle={toggle}>{gettext('Disconnect')}</ModalHeader>
diff --git a/frontend/src/components/dialog/copy-dirent-dialog.js b/frontend/src/components/dialog/copy-dirent-dialog.js
index b56f406a5a..7b1c390eb1 100644
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/frontend/src/components/dialog/copy-dirent-dialog.js
@@ -49,7 +49,7 @@ class CopyDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || selectedPath === '') {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -62,7 +62,7 @@ class CopyDirent extends React.Component {
 
     // copy dirents to one of them. eg: A/B, A/C -> A/B
     if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -80,7 +80,7 @@ class CopyDirent extends React.Component {
       message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
       message = message.replace('%(src)s', copyDirentPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -94,13 +94,13 @@ class CopyDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
     // copy the dirent to itself. eg: A/B -> A/B
     if (selectedPath && direntPath === selectedPath) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -109,7 +109,7 @@ class CopyDirent extends React.Component {
       message = gettext('Can not copy directory %(src)s to its subdirectory %(des)s');
       message = message.replace('%(src)s', direntPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -149,7 +149,7 @@ class CopyDirent extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>
-          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></div>}
         </ModalHeader>
         <ModalBody>
           <FileChooser
diff --git a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
index fe3c6d6054..0b8467f72d 100644
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
@@ -14,7 +14,7 @@ const propTypes = {
 class CopyMoveDirentProgressDialog extends React.Component {
 
   render() {
-    let { type , asyncOperationProgress, asyncOperatedFilesLength } = this.props;
+    let { type, asyncOperationProgress, asyncOperatedFilesLength } = this.props;
     let title = type === 'move' ? gettext('Move {num} items') : gettext('Copy {num} items');
     title = title.replace('{num}', asyncOperatedFilesLength);
     let progressStyle = {
diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index ed568601ba..c3a35a9350 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -27,10 +27,10 @@ class CreateFile extends React.Component {
 
   componentDidMount() {
     let parentPath = this.props.parentPath;
-    if (parentPath[parentPath.length - 1] === '/') {  // mainPanel
-      this.setState({parentPath: parentPath});
+    if (parentPath[parentPath.length - 1] === '/') { // mainPanel
+      this.setState({ parentPath: parentPath });
     } else {
-      this.setState({parentPath: parentPath + '/'}); // sidePanel
+      this.setState({ parentPath: parentPath + '/' }); // sidePanel
     }
   }
 
@@ -40,9 +40,9 @@ class CreateFile extends React.Component {
 
   handleChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
     this.setState({
@@ -61,7 +61,7 @@ class CreateFile extends React.Component {
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
     } else {
       let path = this.state.parentPath + newName;
       this.props.onAddFile(path);
@@ -84,7 +84,7 @@ class CreateFile extends React.Component {
   onAfterModelOpened = () => {
     if (!this.newInput.current) return;
     this.newInput.current.focus();
-    this.newInput.current.setSelectionRange(0,0);
+    this.newInput.current.setSelectionRange(0, 0);
   };
 
   render() {
diff --git a/frontend/src/components/dialog/create-folder-dialog.js b/frontend/src/components/dialog/create-folder-dialog.js
index c9c1f64526..1f0c0e7a42 100644
--- a/frontend/src/components/dialog/create-folder-dialog.js
+++ b/frontend/src/components/dialog/create-folder-dialog.js
@@ -25,21 +25,21 @@ class CreateForder extends React.Component {
 
   componentDidMount() {
     let parentPath = this.props.parentPath;
-    if (parentPath[parentPath.length - 1] === '/') {  // mainPanel
-      this.setState({parentPath: parentPath});
+    if (parentPath[parentPath.length - 1] === '/') { // mainPanel
+      this.setState({ parentPath: parentPath });
     } else {
-      this.setState({parentPath: parentPath + '/'}); // sidePanel
+      this.setState({ parentPath: parentPath + '/' }); // sidePanel
     }
   }
 
   handleChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
-    this.setState({childName: e.target.value});
+    this.setState({ childName: e.target.value });
   };
 
   handleSubmit = () => {
@@ -53,7 +53,7 @@ class CreateForder extends React.Component {
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
     } else {
       let path = this.state.parentPath + newName;
       this.props.onAddFolder(path);
diff --git a/frontend/src/components/dialog/create-group-dialog.js b/frontend/src/components/dialog/create-group-dialog.js
index 7577fd42fe..9d6553fb91 100644
--- a/frontend/src/components/dialog/create-group-dialog.js
+++ b/frontend/src/components/dialog/create-group-dialog.js
@@ -20,9 +20,9 @@ class CreateGroupDialog extends React.Component {
     let name = event.target.value;
 
     if (!name.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
     this.setState({
       groupName: name
@@ -38,12 +38,12 @@ class CreateGroupDialog extends React.Component {
     let name = this.state.groupName.trim();
     if (name) {
       let that = this;
-      seafileAPI.createGroup(name).then((res)=> {
+      seafileAPI.createGroup(name).then((res) => {
         that.props.onCreateGroup(res.data);
         this.props.toggleDialog();
       }).catch((error) => {
         let errorMsg = Utils.getErrorMsg(error);
-        this.setState({errorMsg: errorMsg});
+        this.setState({ errorMsg: errorMsg });
       });
     } else {
       this.setState({
@@ -63,7 +63,7 @@ class CreateGroupDialog extends React.Component {
   };
 
   render() {
-    return(
+    return (
       <Modal isOpen={true} toggle={this.props.toggleDialog} autoFocus={false}>
         <ModalHeader toggle={this.props.toggleDialog}>{gettext('New Group')}</ModalHeader>
         <ModalBody>
diff --git a/frontend/src/components/dialog/create-repo-dialog.js b/frontend/src/components/dialog/create-repo-dialog.js
index fe14b1778a..b1a8a77c4a 100644
--- a/frontend/src/components/dialog/create-repo-dialog.js
+++ b/frontend/src/components/dialog/create-repo-dialog.js
@@ -28,29 +28,29 @@ class CreateRepoDialog extends React.Component {
     this.templateOptions = [];
     this.storageOptions = [];
     if (Array.isArray(libraryTemplates) && libraryTemplates.length) {
-      this.templateOptions = libraryTemplates.map((item) => { return {value: item, label: item}; });
+      this.templateOptions = libraryTemplates.map((item) => { return { value: item, label: item }; });
     }
     if (Array.isArray(storages) && storages.length) {
-      this.storageOptions = storages.map((item) => { return {value: item.id, label: item.name}; });
+      this.storageOptions = storages.map((item) => { return { value: item.id, label: item.name }; });
     }
   }
 
   handleRepoNameChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
-    this.setState({repoName: e.target.value});
+    this.setState({ repoName: e.target.value });
   };
 
   handlePassword1Change = (e) => {
-    this.setState({password1: e.target.value});
+    this.setState({ password1: e.target.value });
   };
 
   handlePassword2Change = (e) => {
-    this.setState({password2: e.target.value});
+    this.setState({ password2: e.target.value });
   };
 
   handleSubmit = () => {
@@ -81,12 +81,12 @@ class CreateRepoDialog extends React.Component {
     let repoName = this.state.repoName.trim();
     if (!repoName.length) {
       errMessage = gettext('Name is required');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     if (repoName.indexOf('/') > -1) {
       errMessage = gettext('Name should not include \'/\'.');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     if (this.state.encrypt) {
@@ -94,22 +94,22 @@ class CreateRepoDialog extends React.Component {
       let password2 = this.state.password2.trim();
       if (!password1.length) {
         errMessage = gettext('Please enter password');
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
         return false;
       }
       if (!password2.length) {
         errMessage = gettext('Please enter the password again');
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
         return false;
       }
       if (password1.length < repoPasswordMinLength) {
         errMessage = gettext('Password is too short');
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
         return false;
       }
       if (password1 !== password2) {
         errMessage = gettext('Passwords don\'t match');
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
         return false;
       }
     }
@@ -118,15 +118,15 @@ class CreateRepoDialog extends React.Component {
 
   onPermissionChange = (e) => {
     let permission = e.target.value;
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   handleStorageInputChange = (selectedItem) => {
-    this.setState({storage_id: selectedItem.value});
+    this.setState({ storage_id: selectedItem.value });
   };
 
   handlelibraryTemplatesInputChange = (selectedItem) => {
-    this.setState({library_template: selectedItem.value});
+    this.setState({ library_template: selectedItem.value });
   };
 
   onEncrypted = (e) => {
diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js
index 2939b1e97d..c766af77c6 100644
--- a/frontend/src/components/dialog/create-tag-dialog.js
+++ b/frontend/src/components/dialog/create-tag-dialog.js
@@ -29,7 +29,7 @@ class CreateTagDialog extends React.Component {
       tagName: e.target.value,
     });
     if (this.state.errorMsg) {
-      this.setState({errorMsg: ''});
+      this.setState({ errorMsg: '' });
     }
   };
 
@@ -55,7 +55,7 @@ class CreateTagDialog extends React.Component {
         errMessage = gettext('Tag "{name}" already exists.');
         errMessage = errMessage.replace('{name}', Utils.HTMLescape(name));
       }
-      this.setState({errorMsg: errMessage});
+      this.setState({ errorMsg: errMessage });
     });
   };
 
@@ -83,14 +83,14 @@ class CreateTagDialog extends React.Component {
             <div className="form-group">
               <label className="form-label">{gettext('Select a color')}</label>
               <div className="d-flex justify-content-between">
-                {TAG_COLORS.map((item, index)=>{
+                {TAG_COLORS.map((item, index) => {
                   return (
                     <div key={index} className="tag-color-option" onChange={this.selectTagcolor}>
                       <label className="colorinput">
-                        {index===0 ?
+                        {index === 0 ?
                           <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onClick={this.selectTagcolor}></input> :
                           <input name="color" type="radio" value={item} className="colorinput-input" onClick={this.selectTagcolor}></input>}
-                        <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor:item}}>
+                        <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{ backgroundColor: item }}>
                           <i className="sf2-icon-tick color-selected"></i>
                         </span>
                       </label>
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-editor.js b/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
index 63ed7656f3..cab7e6ddd8 100644
--- a/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
@@ -48,7 +48,7 @@ class CustomPermissionEditor extends React.Component {
         isLoading: false
       });
     } else {
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     }
 
   }
@@ -57,22 +57,22 @@ class CustomPermissionEditor extends React.Component {
     const { permission_name } = this.state;
     const newName = evt.target.value;
     if (newName === permission_name) return;
-    this.setState({permission_name: newName});
+    this.setState({ permission_name: newName });
   };
 
   onChangePermissionDescription = (evt) => {
     const { permission_desc } = this.state;
     const newDescription = evt.target.value;
     if (newDescription === permission_desc) return;
-    this.setState({permission_desc: newDescription});
+    this.setState({ permission_desc: newDescription });
   };
 
   onChangePermission = (type) => {
     return () => {
       const { permission } = this.state;
       const value = !permission[type];
-      const newPermission = Object.assign({}, permission, {[type]: value});
-      this.setState({permission: newPermission});
+      const newPermission = Object.assign({}, permission, { [type]: value });
+      this.setState({ permission: newPermission });
     };
   };
 
@@ -97,14 +97,14 @@ class CustomPermissionEditor extends React.Component {
     const { permission_name, permission_desc, permission } = this.state;
     const { isValid, errMessage } = this.validParams();
     if (!isValid) {
-      this.setState({errMessage});
+      this.setState({ errMessage });
       return;
     }
     this.props.onUpdateCustomPermission(permission_name, permission_desc, permission);
   };
 
   toggle = () => {
-    this.setState({tooltipOpen: !this.state.tooltipOpen});
+    this.setState({ tooltipOpen: !this.state.tooltipOpen });
   };
 
   render() {
@@ -167,10 +167,10 @@ class CustomPermissionEditor extends React.Component {
                   <Label check>
                     <Input type="checkbox" onChange={this.onChangePermission('modify')} checked={permission.modify}/>
                     <span>{gettext('Modify')}</span>
-                    <span id="modify-tip" className="sf3-font sf3-font-tips ml-2" style={{color: '#999'}}></span>
+                    <span id="modify-tip" className="sf3-font sf3-font-tips ml-2" style={{ color: '#999' }}></span>
                     <Tooltip
                       toggle={this.toggle}
-                      delay={{show: 0, hide: 0}}
+                      delay={{ show: 0, hide: 0 }}
                       target={'modify-tip'}
                       placement='bottom'
                       isOpen={this.state.tooltipOpen}>
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-item.js b/frontend/src/components/dialog/custom-permission/custom-permission-item.js
index 0175bf6098..92e632d123 100644
--- a/frontend/src/components/dialog/custom-permission/custom-permission-item.js
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-item.js
@@ -19,15 +19,15 @@ class CustomPermissionItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isShowOperations: true});
+    this.setState({ isShowOperations: true });
   };
 
   onMouseOver = () => {
-    this.setState({isShowOperations: true});
+    this.setState({ isShowOperations: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isShowOperations: false});
+    this.setState({ isShowOperations: false });
   };
 
   onEditCustomPermission = () => {
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-manager.js b/frontend/src/components/dialog/custom-permission/custom-permission-manager.js
index e8e81c9a7e..f3424f944a 100644
--- a/frontend/src/components/dialog/custom-permission/custom-permission-manager.js
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-manager.js
@@ -46,7 +46,7 @@ class CustomPermissionManager extends React.Component {
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     });
   };
 
@@ -93,7 +93,7 @@ class CustomPermissionManager extends React.Component {
     seafileAPI.deleteCustomPermission(repoID, permissionID).then(res => {
       const { permissions } = this.state;
       const newPermissions = permissions.filter(permission => permission.id !== permissionID);
-      this.setState({permissions: newPermissions});
+      this.setState({ permissions: newPermissions });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -101,11 +101,11 @@ class CustomPermissionManager extends React.Component {
   };
 
   onChangeMode = () => {
-    this.setState({currentMode: MANAGER_STATE.LIST});
+    this.setState({ currentMode: MANAGER_STATE.LIST });
   };
 
   onAddCustomPermission = () => {
-    this.setState({currentMode: MANAGER_STATE.ADD});
+    this.setState({ currentMode: MANAGER_STATE.ADD });
   };
 
   onEditCustomPermission = (permission) => {
diff --git a/frontend/src/components/dialog/delete-folder-dialog.js b/frontend/src/components/dialog/delete-folder-dialog.js
index a8bfd931ea..a906f2442c 100644
--- a/frontend/src/components/dialog/delete-folder-dialog.js
+++ b/frontend/src/components/dialog/delete-folder-dialog.js
@@ -55,7 +55,7 @@ class DeleteFolderDialog extends Component {
       <Modal isOpen={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{gettext('Delete Folder')}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: message}}></p>
+          <p dangerouslySetInnerHTML={{ __html: message }}></p>
           {alert_message && <p className="error">{alert_message}</p>}
         </ModalBody>
         <ModalFooter>
diff --git a/frontend/src/components/dialog/delete-repo-dialog.js b/frontend/src/components/dialog/delete-repo-dialog.js
index 454db568a7..05c2bcbb62 100644
--- a/frontend/src/components/dialog/delete-repo-dialog.js
+++ b/frontend/src/components/dialog/delete-repo-dialog.js
@@ -25,7 +25,7 @@ class DeleteRepoDialog extends Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!nextProps.isRepoDeleted) {
-      this.setState({isRequestSended: false});
+      this.setState({ isRequestSended: false });
     }
   }
 
@@ -39,7 +39,7 @@ class DeleteRepoDialog extends Component {
   }
 
   onDeleteRepo = () => {
-    this.setState({isRequestSended: true}, () => {
+    this.setState({ isRequestSended: true }, () => {
       this.props.onDeleteRepo(this.props.repo);
     });
   };
@@ -65,8 +65,8 @@ class DeleteRepoDialog extends Component {
       <Modal isOpen={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{gettext('Delete Library')}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: message}}></p>
-          { alert_message != '' && <p className="error" dangerouslySetInnerHTML={{__html: alert_message}}></p>}
+          <p dangerouslySetInnerHTML={{ __html: message }}></p>
+          { alert_message != '' && <p className="error" dangerouslySetInnerHTML={{ __html: alert_message }}></p>}
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/dismiss-group-dialog.js b/frontend/src/components/dialog/dismiss-group-dialog.js
index 2004fcc416..8f7c89a152 100644
--- a/frontend/src/components/dialog/dismiss-group-dialog.js
+++ b/frontend/src/components/dialog/dismiss-group-dialog.js
@@ -14,7 +14,7 @@ class DismissGroupDialog extends React.Component {
 
   dismissGroup = () => {
     let that = this;
-    seafileAPI.deleteGroup(this.props.groupID).then((res)=> {
+    seafileAPI.deleteGroup(this.props.groupID).then((res) => {
       that.props.onGroupChanged();
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -23,7 +23,7 @@ class DismissGroupDialog extends React.Component {
   };
 
   render() {
-    return(
+    return (
       <Modal isOpen={this.props.showDismissGroupDialog} toggle={this.props.toggleDismissGroupDialog}>
         <ModalHeader>{gettext('Delete Group')}</ModalHeader>
         <ModalBody>
diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index be5baff0e5..1b60ea5284 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -59,7 +59,7 @@ class TagItem extends React.Component {
     } else {
       let fileTag = null;
       let fileTagList = this.props.fileTagList;
-      for(let i = 0; i < fileTagList.length; i++) {
+      for (let i = 0; i < fileTagList.length; i++) {
         if (fileTagList[i].repo_tag_id === repoTag.id) {
           fileTag = fileTagList[i];
           break;
@@ -88,7 +88,7 @@ class TagItem extends React.Component {
         onMouseLeave={this.onMouseLeave}
       >
         <div className="d-flex align-items-center">
-          <span className="tag-color w-4 h-4 rounded-circle" style={{backgroundColor: repoTag.color}}></span>
+          <span className="tag-color w-4 h-4 rounded-circle" style={{ backgroundColor: repoTag.color }}></span>
           <span className="tag-name mx-2">{repoTag.name}</span>
         </div>
         {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
@@ -177,7 +177,7 @@ class EditFileTagDialog extends React.Component {
   };
 
   onRepoTagCreated = (repoTagID) => {
-    let {repoID, filePath} = this.props;
+    let { repoID, filePath } = this.props;
     seafileAPI.addFileTag(repoID, filePath, repoTagID).then(() => {
       this.props.onFileTagChanged();
     }).catch(error => {
diff --git a/frontend/src/components/dialog/edit-repo-commit-labels.js b/frontend/src/components/dialog/edit-repo-commit-labels.js
index 7de2e83a63..2ca9ebb8a2 100644
--- a/frontend/src/components/dialog/edit-repo-commit-labels.js
+++ b/frontend/src/components/dialog/edit-repo-commit-labels.js
@@ -20,7 +20,7 @@ class UpdateRepoCommitLabels extends React.Component {
     super(props);
     this.state = {
       inputValue: this.props.commitLabels.map((item, index) => {
-        return {label: item, value: item};
+        return { label: item, value: item };
       }),
       submitBtnDisabled: false
     };
@@ -35,7 +35,7 @@ class UpdateRepoCommitLabels extends React.Component {
   formSubmit = () => {
     const inputValue = this.state.inputValue;
     const labels = inputValue.map((item, index) => item.value).join(',');
-    const {repoID, commitID} = this.props;
+    const { repoID, commitID } = this.props;
 
     this.setState({
       submitBtnDisabled: true
@@ -62,7 +62,7 @@ class UpdateRepoCommitLabels extends React.Component {
         <ModalBody>
           <React.Fragment>
             <CreatableSelect
-              defaultValue={this.props.commitLabels.map((item, index) => { return {label: item, value: item}; })}
+              defaultValue={this.props.commitLabels.map((item, index) => { return { label: item, value: item }; })}
               isMulti={true}
               onChange={this.handleInputChange}
               placeholder=''
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/number-editor.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/number-editor.js
index a5202f3e5a..00c05cf590 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/number-editor.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/number-editor.js
@@ -23,7 +23,7 @@ class NumberEditor extends React.Component {
     }
     const initValue = event.target.value.trim();
 
-    //Prevent the repetition of periods bug in the Chinese input method of the Windows system
+    // Prevent the repetition of periods bug in the Chinese input method of the Windows system
     if (!isMac() && initValue.indexOf('.。') > -1) return;
     let value = replaceNumberNotAllowInput(initValue, format, currency_symbol);
     if (value === this.state.value) return;
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/search-input.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/search-input.js
index 6aad4b1bc5..2ed758e3a6 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/search-input.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/search-input.js
@@ -24,7 +24,7 @@ class SearchInput extends Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
-      this.setState({searchValue: nextProps.value});
+      this.setState({ searchValue: nextProps.value });
     }
   }
 
@@ -42,7 +42,7 @@ class SearchInput extends Component {
     this.timer && clearTimeout(this.timer);
     const { onChange, wait } = this.props;
     let text = e.target.value;
-    this.setState({searchValue: text || ''}, () => {
+    this.setState({ searchValue: text || '' }, () => {
       if (this.isInputtingChinese) return;
       this.timer = setTimeout(() => {
         onChange && onChange(this.state.searchValue.trim());
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/simple-text.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/simple-text.js
index 8e69a30e15..8d9f9fa15a 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/simple-text.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/simple-text.js
@@ -35,7 +35,7 @@ class SimpleText extends React.Component {
   onChange = (e) => {
     let value = e.target.value;
     if (value === this.state.value) return;
-    this.setState({value});
+    this.setState({ value });
   };
 
   onCut = (e) => {
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/index.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/index.js
index 018a0500b3..7ba627fd59 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/index.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/index.js
@@ -51,7 +51,8 @@ class SingleSelect extends Component {
                   className="single-select-option"
                   style={optionStyle}
                   title={optionName}
-                >{optionName}</div>
+                >{optionName}
+                </div>
               )}
             </div>
             {column.editable && (
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/single-select-editor.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/single-select-editor.js
index cffc4f3ab4..719b8c7024 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/single-select-editor.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/editor/single-select/single-select-editor.js
@@ -111,7 +111,7 @@ class SingleSelectEditor extends Component {
               const style = {
                 backgroundColor: option.color,
                 color: option.textColor || null,
-                maxWidth: Math.max(200 - 62,  column.width ? column.width  -62 : 0)
+                maxWidth: Math.max(200 - 62, column.width ? column.width - 62 : 0)
               };
               return (
                 <div className="single-select-option-container" key={option.id} onClick={this.onSelectOption.bind(this, isSelected ? null : option.id)}>
diff --git a/frontend/src/components/dialog/extra-metadata-attributes-dialog/index.js b/frontend/src/components/dialog/extra-metadata-attributes-dialog/index.js
index edde54ec0f..ea7245fae7 100644
--- a/frontend/src/components/dialog/extra-metadata-attributes-dialog/index.js
+++ b/frontend/src/components/dialog/extra-metadata-attributes-dialog/index.js
@@ -77,7 +77,7 @@ class ExtraMetadataAttributesDialog extends Component {
 
     let dirName = Utils.getDirName(filePath);
     let fileName = Utils.getFileName(filePath);
-    let parentDir = direntType === 'file' ?  dirName : dirName.slice(0, dirName.length - fileName.length - 1);
+    let parentDir = direntType === 'file' ? dirName : dirName.slice(0, dirName.length - fileName.length - 1);
 
     if (!parentDir.startsWith('/')) {
       parentDir = '/' + parentDir;
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index 043265661e..cfa1fa79c1 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -54,7 +54,7 @@ class GenerateUploadLink extends React.Component {
     seafileAPI.getUploadLink(repoID, path).then((res) => {
       if (res.data.length !== 0) {
         let sharedUploadInfo = new UploadLink(res.data[0]);
-        this.setState({sharedUploadInfo: sharedUploadInfo});
+        this.setState({ sharedUploadInfo: sharedUploadInfo });
       }
     }).catch((err) => {
       let errMsg = Utils.getErrorMsg(err, true);
@@ -109,7 +109,7 @@ class GenerateUploadLink extends React.Component {
   generateUploadLink = () => {
     let isValid = this.validateParamsInput();
     if (isValid) {
-      this.setState({errorInfo: ''});
+      this.setState({ errorInfo: '' });
 
       let { itemPath, repoID } = this.props;
       let { password, isExpireChecked, expType, expireDays, expDate } = this.state;
@@ -125,7 +125,7 @@ class GenerateUploadLink extends React.Component {
 
       seafileAPI.createUploadLink(repoID, itemPath, password, expirationTime).then((res) => {
         let sharedUploadInfo = new UploadLink(res.data);
-        this.setState({sharedUploadInfo: sharedUploadInfo});
+        this.setState({ sharedUploadInfo: sharedUploadInfo });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -139,19 +139,19 @@ class GenerateUploadLink extends React.Component {
     // check password params
     if (showPasswordInput) {
       if (password.length === 0) {
-        this.setState({errorInfo: gettext('Please enter a password.')});
+        this.setState({ errorInfo: gettext('Please enter a password.') });
         return false;
       }
       if (password.length < shareLinkPasswordMinLength) {
-        this.setState({errorInfo: gettext('The password is too short.')});
+        this.setState({ errorInfo: gettext('The password is too short.') });
         return false;
       }
       if (password !== passwordnew) {
-        this.setState({errorInfo: gettext('Passwords don\'t match')});
+        this.setState({ errorInfo: gettext('Passwords don\'t match') });
         return false;
       }
       if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) {
-        this.setState({errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)});
+        this.setState({ errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel) });
         return false;
       }
     }
@@ -159,7 +159,7 @@ class GenerateUploadLink extends React.Component {
     if (isExpireChecked) {
       if (expType == 'by-date') {
         if (!expDate) {
-          this.setState({errorInfo: gettext('Please select an expiration time')});
+          this.setState({ errorInfo: gettext('Please select an expiration time') });
           return false;
         }
         return true;
@@ -167,20 +167,20 @@ class GenerateUploadLink extends React.Component {
 
       let reg = /^\d+$/;
       if (!expireDays) {
-        this.setState({errorInfo: gettext('Please enter days')});
+        this.setState({ errorInfo: gettext('Please enter days') });
         return false;
       }
       if (!reg.test(expireDays)) {
-        this.setState({errorInfo: gettext('Please enter a non-negative integer')});
+        this.setState({ errorInfo: gettext('Please enter a non-negative integer') });
         return false;
       }
-      this.setState({expireDays: parseInt(expireDays)});
+      this.setState({ expireDays: parseInt(expireDays) });
     }
     return true;
   };
 
   onExpireChecked = (e) => {
-    this.setState({isExpireChecked: e.target.checked});
+    this.setState({ isExpireChecked: e.target.checked });
   };
 
   setExpType = (e) => {
@@ -197,7 +197,7 @@ class GenerateUploadLink extends React.Component {
 
   onExpireDaysChanged = (e) => {
     let day = e.target.value.trim();
-    this.setState({expireDays: day});
+    this.setState({ expireDays: day });
   };
 
   onCopyUploadLink = () => {
@@ -208,15 +208,15 @@ class GenerateUploadLink extends React.Component {
   };
 
   handleMouseOverExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: true});
+    this.setState({ isExpirationEditIconShow: true });
   };
 
   handleMouseOutExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: false});
+    this.setState({ isExpirationEditIconShow: false });
   };
 
   editExpirationToggle = () => {
-    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
+    this.setState({ isEditingExpiration: !this.state.isEditingExpiration });
   };
 
   updateExpiration = (e) => {
@@ -305,8 +305,9 @@ class GenerateUploadLink extends React.Component {
                       aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
                       onKeyDown={this.onIconKeyDown}
                       onClick={this.toggleStoredPasswordVisible}
-                      className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '': '-slash'}`}
-                    ></span>
+                      className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}
+                    >
+                    </span>
                   </div>
                 </dd>
               </FormGroup>
@@ -316,7 +317,7 @@ class GenerateUploadLink extends React.Component {
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
                 {!this.state.isEditingExpiration &&
-                  <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
+                  <dd style={{ width: '250px' }} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
                     {moment(sharedUploadInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
                     {this.state.isExpirationEditIconShow && (
                       <a href="#"
@@ -385,11 +386,11 @@ class GenerateUploadLink extends React.Component {
             <FormGroup>
               <Label for="passwd">{gettext('Password')}</Label>
               <span className="tip">{passwordLengthTip}</span>
-              <InputGroup style={{width: inputWidth}}>
-                <Input id="passwd" type={this.state.passwordVisible ? 'text':'password'} value={this.state.password || ''} onChange={this.inputPassword} />
+              <InputGroup style={{ width: inputWidth }}>
+                <Input id="passwd" type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
                   <Button onClick={this.togglePasswordVisible}>
-                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '': '-slash'}`}></i>
+                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '' : '-slash'}`}></i>
                   </Button>
                   <Button onClick={this.generatePassword}>
                     <i className="link-operation-icon sf3-font sf3-font-magic"></i>
@@ -399,7 +400,7 @@ class GenerateUploadLink extends React.Component {
             </FormGroup>
             <FormGroup>
               <Label for="passwd-again">{gettext('Password again')}</Label>
-              <Input id="passwd-again" style={{width: inputWidth}} type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
+              <Input id="passwd-again" style={{ width: inputWidth }} type={this.state.passwordVisible ? 'text' : 'password'} value={this.state.passwordnew || ''} onChange={this.inputPasswordNew} />
             </FormGroup>
           </div>
           }
diff --git a/frontend/src/components/dialog/group-members-dialog.js b/frontend/src/components/dialog/group-members-dialog.js
index 6b13ab21c5..ac950d6e42 100644
--- a/frontend/src/components/dialog/group-members-dialog.js
+++ b/frontend/src/components/dialog/group-members-dialog.js
@@ -18,10 +18,12 @@ class GroupMembers extends React.Component {
         <ModalBody className="px-0 group-members-container">
           <ul className="list-unstyled">
             {members.map((item, index) => {
-              return <li key={index} className="group-member px-4 py-2 d-flex align-items-center">
-                <img src={item.avatar_url} alt={item.name} className="avatar" />
-                <span className="ml-2 text-truncate" title={item.name}>{item.name}</span>
-              </li>;
+              return (
+                <li key={index} className="group-member px-4 py-2 d-flex align-items-center">
+                  <img src={item.avatar_url} alt={item.name} className="avatar" />
+                  <span className="ml-2 text-truncate" title={item.name}>{item.name}</span>
+                </li>
+              );
             })}
           </ul>
         </ModalBody>
diff --git a/frontend/src/components/dialog/import-dingtalk-department-dialog.js b/frontend/src/components/dialog/import-dingtalk-department-dialog.js
index c3b9f95508..425a867ece 100644
--- a/frontend/src/components/dialog/import-dingtalk-department-dialog.js
+++ b/frontend/src/components/dialog/import-dingtalk-department-dialog.js
@@ -16,7 +16,7 @@ class ImportDingtalkDepartmentDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading : false,
+      isLoading: false,
     };
   }
 
@@ -26,7 +26,7 @@ class ImportDingtalkDepartmentDialog extends React.Component {
 
   handleSubmit = () => {
     this.props.onImportDepartmentSubmit();
-    this.setState({ isLoading : true });
+    this.setState({ isLoading: true });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/import-work-weixin-department-dialog.js b/frontend/src/components/dialog/import-work-weixin-department-dialog.js
index 9b0e1ae0b0..06b7d9740f 100644
--- a/frontend/src/components/dialog/import-work-weixin-department-dialog.js
+++ b/frontend/src/components/dialog/import-work-weixin-department-dialog.js
@@ -16,7 +16,7 @@ class ImportWorkWeixinDepartmentDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isLoading : false,
+      isLoading: false,
     };
   }
 
@@ -26,7 +26,7 @@ class ImportWorkWeixinDepartmentDialog extends React.Component {
 
   handleSubmit = () => {
     this.props.onImportDepartmentSubmit();
-    this.setState({ isLoading : true });
+    this.setState({ isLoading: true });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/internal-link-dialog.js b/frontend/src/components/dialog/internal-link-dialog.js
index 3e6a904edb..60b5e08288 100644
--- a/frontend/src/components/dialog/internal-link-dialog.js
+++ b/frontend/src/components/dialog/internal-link-dialog.js
@@ -26,7 +26,7 @@ class InternalLinkDialog extends React.Component {
 
   componentDidMount() {
     if (this.props.internalLink) {
-      this.setState({smartLink: this.props.internalLink});
+      this.setState({ smartLink: this.props.internalLink });
       return;
     }
     this.getInternalLink();
@@ -44,19 +44,19 @@ class InternalLinkDialog extends React.Component {
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     });
   };
 
   copyToClipBoard = () => {
     copy(this.state.smartLink);
     const message = gettext('Internal link has been copied to clipboard');
-    toaster.success(message, {duration: 2});
+    toaster.success(message, { duration: 2 });
     this.toggle();
   };
 
   toggle = () => {
-    this.props.onInternalLinkDialogToggle({internalLink: ''});
+    this.props.onInternalLinkDialogToggle({ internalLink: '' });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/internal-link.js b/frontend/src/components/dialog/internal-link.js
index e0cfb138db..7da4266c06 100644
--- a/frontend/src/components/dialog/internal-link.js
+++ b/frontend/src/components/dialog/internal-link.js
@@ -46,7 +46,7 @@ class InternalLink extends React.Component {
 
   render() {
     if (this.state.isInternalLoding) {
-      return(<Loading />);
+      return (<Loading />);
     }
     return (
       <div>
diff --git a/frontend/src/components/dialog/invitation-revoke-dialog.js b/frontend/src/components/dialog/invitation-revoke-dialog.js
index 740599b04b..859cb01d42 100644
--- a/frontend/src/components/dialog/invitation-revoke-dialog.js
+++ b/frontend/src/components/dialog/invitation-revoke-dialog.js
@@ -50,7 +50,7 @@ class InvitationRevokeDialog extends React.Component {
       <Modal isOpen={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{gettext('Revoke Access')}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: content}}></p>
+          <p dangerouslySetInnerHTML={{ __html: content }}></p>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={toggleDialog}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/label-repo-state-dialog.js b/frontend/src/components/dialog/label-repo-state-dialog.js
index e0e5b1080c..676750e9b5 100644
--- a/frontend/src/components/dialog/label-repo-state-dialog.js
+++ b/frontend/src/components/dialog/label-repo-state-dialog.js
@@ -61,7 +61,7 @@ class LabelRepoStateDialog extends React.Component {
       submitBtnDisabled: true
     });
 
-    const {repoID, repoName} = this.props;
+    const { repoID, repoName } = this.props;
     const labels = inputValue.map((item, index) => item.value).join(',');
     seafileAPI.addNewRepoLabels(repoID, labels).then((res) => {
       const msg = gettext('Successfully added label(s) for library {placeholder}').replace('{placeholder}', repoName);
@@ -113,7 +113,7 @@ class Content extends React.Component {
           isMulti={true}
           onChange={this.props.handleChange}
           placeholder=''
-          options={existingLabels.map((item, index) => { return {label: item, value: item}; })}
+          options={existingLabels.map((item, index) => { return { label: item, value: item }; })}
         />
         {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
       </React.Fragment>
diff --git a/frontend/src/components/dialog/leave-group-dialog.js b/frontend/src/components/dialog/leave-group-dialog.js
index c192a9b0cf..ded8d7369f 100644
--- a/frontend/src/components/dialog/leave-group-dialog.js
+++ b/frontend/src/components/dialog/leave-group-dialog.js
@@ -13,7 +13,7 @@ class LeaveGroupDialog extends React.Component {
   }
 
   leaveGroup = () => {
-    seafileAPI.quitGroup(this.props.groupID, username).then((res)=> {
+    seafileAPI.quitGroup(this.props.groupID, username).then((res) => {
       this.props.onGroupChanged();
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -22,7 +22,7 @@ class LeaveGroupDialog extends React.Component {
   };
 
   render() {
-    return(
+    return (
       <Modal isOpen={true} toggle={this.props.toggleLeaveGroupDialog}>
         <ModalHeader toggle={this.props.toggleLeaveGroupDialog}>{gettext('Leave Group')}</ModalHeader>
         <ModalBody>
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-history-setting-dialog.js
index deed42201c..2e7c8cfdfb 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -55,7 +55,7 @@ class LibHistorySetting extends React.Component {
       let message = gettext('Successfully set library history.');
       seafileAPI.setRepoHistoryLimit(repoID, days).then(res => {
         toaster.success(message);
-        this.setState({keepDays: res.data.keep_days});
+        this.setState({ keepDays: res.data.keep_days });
         this.props.toggleDialog();
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -114,7 +114,7 @@ class LibHistorySetting extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>
@@ -128,11 +128,11 @@ class LibHistorySetting extends React.Component {
               <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/lib-old-files-auto-del-dialog.js b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
index 12aab81f16..c1ec865770 100644
--- a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
+++ b/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
@@ -50,7 +50,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
       }
 
     } else {
-      daysNeedTobeSet = 0;    // if no auto del, give 0 to server
+      daysNeedTobeSet = 0; // if no auto del, give 0 to server
     }
 
 
@@ -100,11 +100,11 @@ class LibOldFilesAutoDelDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={!this.state.isAutoDel} onChange={() =>{this.updateRadioCheck('noAutoDel');}}/>{' '}
+              <Input type="radio" name="radio1" checked={!this.state.isAutoDel} onChange={() => {this.updateRadioCheck('noAutoDel');}}/>{' '}
               <Label>{gettext('Do not automatically delete files')}</Label>
             </FormGroup>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.isAutoDel} onChange={() =>{this.updateRadioCheck('autoDel');}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.isAutoDel} onChange={() => {this.updateRadioCheck('autoDel');}}/>{' '}
               <Label>{gettext('Automatically delete files that are not modified within certain days:')}</Label>
               <Input
                 type="text"
diff --git a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
index 6173e18e8a..698d14cb90 100644
--- a/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-permission-dialog.js
@@ -27,7 +27,7 @@ class LibSubFolderPermissionDialog extends React.Component {
 
   toggle = (tab) => {
     if (this.state.activeTab !== tab) {
-      this.setState({activeTab: tab});
+      this.setState({ activeTab: tab });
     }
   };
 
@@ -90,9 +90,9 @@ class LibSubFolderPermissionDialog extends React.Component {
     title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName || folderName) + '</span>');
     return (
       <div>
-        <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+        <Modal isOpen={true} style={{ maxWidth: '980px' }} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+            <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
index eeba33e899..401470335b 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -18,11 +18,11 @@ class GroupItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteGroupPermissionItem = () => {
@@ -111,7 +111,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
   };
 
   componentDidMount() {
@@ -146,7 +146,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
   };
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   addGroupFolderPerm = () => {
@@ -220,7 +220,7 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
       }
       return sharedItem;
     });
-    this.setState({groupPermissionItems: groupPermissionItems});
+    this.setState({ groupPermissionItems: groupPermissionItems });
   };
 
   onSetSubFolder = (e) => {
diff --git a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
index 365b395b5c..e26c49ae6b 100644
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -18,11 +18,11 @@ class UserItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteUserFolderPermission = () => {
@@ -113,23 +113,23 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
   }
 
   handleUserSelectChange = (option) => {
-    this.setState({selectedUsers: option});
+    this.setState({ selectedUsers: option });
   };
 
   componentDidMount() {
-    const {repoID, folderPath, isDepartmentRepo} = this.props;
+    const { repoID, folderPath, isDepartmentRepo } = this.props;
     const request = isDepartmentRepo ?
       seafileAPI.listDepartmentRepoUserFolderPerm(repoID, folderPath) :
       seafileAPI.listUserFolderPerm(repoID, folderPath);
     request.then((res) => {
       if (res.data.length !== 0) {
-        this.setState({userFolderPermItems: res.data});
+        this.setState({ userFolderPermItems: res.data });
       }
     });
   }
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   addUserFolderPerm = () => {
@@ -200,7 +200,7 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
         }
         return item;
       });
-      this.setState({userFolderPermItems: userFolderPermItems});
+      this.setState({ userFolderPermItems: userFolderPermItems });
     });
   };
 
@@ -260,11 +260,11 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
     const thead = (
       <thead>
         <tr>
-          <th width={showPath ? '32%': '55%'}>{gettext('User')}</th>
+          <th width={showPath ? '32%' : '55%'}>{gettext('User')}</th>
           {showPath &&
           <th width="32%">{gettext('Folder')}</th>
           }
-          <th width={showPath ? '24%': '30%'}>{gettext('Permission')}</th>
+          <th width={showPath ? '24%' : '30%'}>{gettext('Permission')}</th>
           <th width={showPath ? '12%' : '15%'}></th>
         </tr>
       </thead>
diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index a150eb1f6a..7c9aded01a 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -29,7 +29,7 @@ class ListTaggedFilesDialog extends React.Component {
 
   onFileTagChanged = (TaggedFile) => {
     const path = TaggedFile.parent_path;
-    const dirent = {name: TaggedFile.filename};
+    const dirent = { name: TaggedFile.filename };
     let direntPath = path === '/' ? path + TaggedFile.filename : path + '/' + TaggedFile.filename;
     this.props.onFileTagChanged(dirent, direntPath);
   };
@@ -75,7 +75,7 @@ class ListTaggedFilesDialog extends React.Component {
   render() {
     let taggedFileList = this.state.taggedFileList;
     return (
-      <Modal isOpen={true} style={{maxWidth: '678px'}}>
+      <Modal isOpen={true} style={{ maxWidth: '678px' }}>
         <ModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
@@ -162,7 +162,7 @@ class TaggedFile extends React.Component {
         {taggedFile.file_deleted ?
           <Fragment>
             <td colSpan='3' className="name">{taggedFile.filename}{' '}
-              <span style={{color:'red'}}>{gettext('deleted')}</span>
+              <span style={{ color: 'red' }}>{gettext('deleted')}</span>
             </td>
           </Fragment>
           :
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index 8daba85f34..02fe8e68a3 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -50,7 +50,7 @@ class MoveDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || selectedPath === '') {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -63,13 +63,13 @@ class MoveDirent extends React.Component {
 
     // move dirents to one of them. eg: A/B, A/C -> A/B
     if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
     // move dirents to current path
     if (selectedPath && selectedPath === this.props.path && (repo.repo_id === repoID)) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -87,7 +87,7 @@ class MoveDirent extends React.Component {
       message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
       message = message.replace('%(src)s', moveDirentPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -102,19 +102,19 @@ class MoveDirent extends React.Component {
     let message = gettext('Invalid destination path');
 
     if (!repo || (repo.repo_id === repoID && selectedPath === '')) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
     // copy the dirent to itself. eg: A/B -> A/B
     if (selectedPath && direntPath === selectedPath) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
     // copy the dirent to current path
     if (selectedPath && this.props.path === selectedPath && repo.repo_id === repoID) {
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -123,7 +123,7 @@ class MoveDirent extends React.Component {
       message = gettext('Can not move directory %(src)s to its subdirectory %(des)s');
       message = message.replace('%(src)s', direntPath);
       message = message.replace('%(des)s', selectedPath);
-      this.setState({errMessage: message});
+      this.setState({ errMessage: message });
       return;
     }
 
@@ -169,7 +169,7 @@ class MoveDirent extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>
-          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></div>}
         </ModalHeader>
         <ModalBody>
           <FileChooser
diff --git a/frontend/src/components/dialog/op-menu.js b/frontend/src/components/dialog/op-menu.js
index 0dbcd492c4..5bd60af5b7 100644
--- a/frontend/src/components/dialog/op-menu.js
+++ b/frontend/src/components/dialog/op-menu.js
@@ -32,7 +32,7 @@ class OpMenu extends React.Component {
 
   toggleOperationMenu = (e) => {
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
+      { isItemMenuShow: !this.state.isItemMenuShow },
       () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
@@ -56,7 +56,7 @@ class OpMenu extends React.Component {
           aria-expanded={this.state.isItemMenuShow}
         />
         <DropdownMenu className="my-1 mr-2">
-          {operations.map((item, index )=> {
+          {operations.map((item, index ) => {
             return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{translateOperations(item)}</DropdownItem>);
           })}
         </DropdownMenu>
diff --git a/frontend/src/components/dialog/org-add-user-dialog.js b/frontend/src/components/dialog/org-add-user-dialog.js
index 0001e0536d..c04efab606 100644
--- a/frontend/src/components/dialog/org-add-user-dialog.js
+++ b/frontend/src/components/dialog/org-add-user-dialog.js
@@ -29,13 +29,13 @@ class AddOrgUserDialog extends React.Component {
     let isValid = this.validateInputParams();
     if (isValid) {
       let { email, name, password } = this.state;
-      this.setState({isAddingUser: true});
+      this.setState({ isAddingUser: true });
       this.props.handleSubmit(email, name.trim(), password);
     }
   };
 
   togglePasswordVisible = () => {
-    this.setState({isPasswordVisible: !this.state.isPasswordVisible}, () => {
+    this.setState({ isPasswordVisible: !this.state.isPasswordVisible }, () => {
       if (this.state.isPasswordVisible) {
         this.passwdInput.type = 'password';
         this.passwdNewInput.type = 'password';
@@ -60,17 +60,17 @@ class AddOrgUserDialog extends React.Component {
 
   inputEmail = (e) => {
     let email = e.target.value.trim();
-    this.setState({email: email});
+    this.setState({ email: email });
   };
 
   inputName = (e) => {
     let name = e.target.value;
-    this.setState({name: name});
+    this.setState({ name: name });
   };
 
   inputPassword = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({password: passwd}, () => {
+    this.setState({ password: passwd }, () => {
       if (this.state.isPasswordVisible) {
         this.passwdInput.type = 'password';
         this.passwdNewInput.type = 'password';
@@ -80,7 +80,7 @@ class AddOrgUserDialog extends React.Component {
 
   inputPasswordNew = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({passwdnew: passwd}, () => {
+    this.setState({ passwdnew: passwd }, () => {
       if (this.state.isPasswordVisible) {
         this.passwdInput.type = 'password';
         this.passwdNewInput.type = 'password';
@@ -97,13 +97,13 @@ class AddOrgUserDialog extends React.Component {
     let email = this.state.email;
     if (!email.length) {
       errMessage = gettext('email is required');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     let name = this.state.name.trim();
     if (!name.length) {
       errMessage = gettext('Name is required');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
 
@@ -111,17 +111,17 @@ class AddOrgUserDialog extends React.Component {
     let password2 = this.state.passwdnew;
     if (!password1.length) {
       errMessage = gettext('Please enter password');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     if (!password2.length) {
       errMessage = gettext('Please enter the password again');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     if (password1 !== password2) {
       errMessage = gettext('Passwords don\'t match');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     return true;
@@ -135,7 +135,7 @@ class AddOrgUserDialog extends React.Component {
           <Form>
             <FormGroup>
               <Label for="userEmail">{gettext('Email')}</Label>
-              <Input id="userEmail"  value={this.state.email || ''} onChange={this.inputEmail} />
+              <Input id="userEmail" value={this.state.email || ''} onChange={this.inputEmail} />
             </FormGroup>
             <FormGroup>
               <Label for="userName">{gettext('Name')}</Label>
@@ -157,7 +157,7 @@ class AddOrgUserDialog extends React.Component {
             </FormGroup>
             <FormGroup>
               <Label for="userPwdNew">{gettext('Confirm Password')}</Label>
-              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input;}}  className="passwd"   value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+              <Input id="userPwdNew" innerRef={input => {this.passwdNewInput = input;}} className="passwd" value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
             </FormGroup>
           </Form>
           {this.state.errMessage && <Label className="err-message">{this.state.errMessage}</Label>}
diff --git a/frontend/src/components/dialog/org-admin-invite-user-dialog.js b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
index 2499266072..c30b519793 100644
--- a/frontend/src/components/dialog/org-admin-invite-user-dialog.js
+++ b/frontend/src/components/dialog/org-admin-invite-user-dialog.js
@@ -23,7 +23,7 @@ class OrgAdminInviteUserDialog extends React.Component {
     let isValid = this.validateInputParams();
     if (isValid) {
       let { email } = this.state;
-      this.setState({isAddingUser: true});
+      this.setState({ isAddingUser: true });
       this.props.handleSubmit(email.trim());
     }
   };
@@ -37,7 +37,7 @@ class OrgAdminInviteUserDialog extends React.Component {
 
   inputEmail = (e) => {
     let email = e.target.value.trim();
-    this.setState({email: email});
+    this.setState({ email: email });
   };
 
   toggle = () => {
@@ -49,7 +49,7 @@ class OrgAdminInviteUserDialog extends React.Component {
     let email = this.state.email.trim();
     if (!email.length) {
       errMessage = gettext('email is required');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     return true;
diff --git a/frontend/src/components/dialog/org-delete-department-dialog.js b/frontend/src/components/dialog/org-delete-department-dialog.js
index 4ff009ae4e..07bb14711f 100644
--- a/frontend/src/components/dialog/org-delete-department-dialog.js
+++ b/frontend/src/components/dialog/org-delete-department-dialog.js
@@ -37,7 +37,7 @@ class DeleteDepartDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: subtitle}}></p>
+          <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/org-delete-member-dialog.js b/frontend/src/components/dialog/org-delete-member-dialog.js
index 56c4523c11..c1163b836d 100644
--- a/frontend/src/components/dialog/org-delete-member-dialog.js
+++ b/frontend/src/components/dialog/org-delete-member-dialog.js
@@ -39,7 +39,7 @@ class DeleteMemberDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
+          <div dangerouslySetInnerHTML={{ __html: subtitle }}></div>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/org-delete-repo-dialog.js b/frontend/src/components/dialog/org-delete-repo-dialog.js
index 514fc84519..39b39ec812 100644
--- a/frontend/src/components/dialog/org-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/org-delete-repo-dialog.js
@@ -32,7 +32,7 @@ class DeleteRepoDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: subtitle}}></div>
+          <div dangerouslySetInnerHTML={{ __html: subtitle }}></div>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/org-logs-file-update-detail.js b/frontend/src/components/dialog/org-logs-file-update-detail.js
index 61843933e7..587ee9e0e3 100644
--- a/frontend/src/components/dialog/org-logs-file-update-detail.js
+++ b/frontend/src/components/dialog/org-logs-file-update-detail.js
@@ -51,7 +51,7 @@ class FileUpdateDetailDialog extends React.Component {
       con += '<li class="list-group-item">' + items[i] + '</li>';
     }
     con += '</ul>';
-    return {__html: con};
+    return { __html: con };
   };
 
   renderContent = () => {
diff --git a/frontend/src/components/dialog/perm-select.js b/frontend/src/components/dialog/perm-select.js
index 6a88382f26..68af13abb0 100644
--- a/frontend/src/components/dialog/perm-select.js
+++ b/frontend/src/components/dialog/perm-select.js
@@ -33,7 +33,7 @@ class PermSelect extends React.Component {
     if (this.props.repoID) {
       this.listCustomPermissions();
     } else {
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     }
   }
 
@@ -49,7 +49,7 @@ class PermSelect extends React.Component {
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     });
   };
 
@@ -112,7 +112,7 @@ class PermSelect extends React.Component {
 
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalBody style={{maxHeight: '400px', overflow: 'auto'}}>
+        <ModalBody style={{ maxHeight: '400px', overflow: 'auto' }}>
           {isLoading && <Loading />}
           {!isLoading && permissions.map((item, index) => {
             return (
diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
index ec3de1b9c1..1110fa0fd9 100644
--- a/frontend/src/components/dialog/rename-dialog.js
+++ b/frontend/src/components/dialog/rename-dialog.js
@@ -24,7 +24,7 @@ class Rename extends React.Component {
   }
 
   UNSAFE_componentWillMount() {
-    this.setState({newName: this.props.currentNode.object.name});
+    this.setState({ newName: this.props.currentNode.object.name });
   }
 
   componentDidMount() {
@@ -38,24 +38,24 @@ class Rename extends React.Component {
 
   handleChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
-    this.setState({newName: e.target.value});
+    this.setState({ newName: e.target.value });
   };
 
   handleSubmit = () => {
     let { isValid, errMessage } = this.validateInput();
     if (!isValid) {
-      this.setState({errMessage : errMessage});
+      this.setState({ errMessage: errMessage });
     } else {
       let isDuplicated = this.checkDuplicatedName();
       if (isDuplicated) {
         let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
         errMessage = errMessage.replace('{name}', Utils.HTMLescape(this.state.newName));
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
       } else {
         this.props.onRename(this.state.newName);
       }
@@ -74,7 +74,7 @@ class Rename extends React.Component {
 
   changeState = (currentNode) => {
     let name = currentNode.object.name;
-    this.setState({newName: name});
+    this.setState({ newName: name });
   };
 
   validateInput = () => {
@@ -120,7 +120,7 @@ class Rename extends React.Component {
       <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
         <ModalBody>
-          <p>{type === 'file' ? gettext('New file name'): gettext('New folder name')}</p>
+          <p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
           <Input onKeyDown={this.handleKeyDown} innerRef={this.newInput} placeholder="newName" value={this.state.newName} onChange={this.handleChange} />
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
index f2d44c48d3..f0fc042d4d 100644
--- a/frontend/src/components/dialog/rename-dirent.js
+++ b/frontend/src/components/dialog/rename-dirent.js
@@ -24,7 +24,7 @@ class Rename extends React.Component {
   }
 
   UNSAFE_componentWillMount() {
-    this.setState({newName: this.props.dirent.name});
+    this.setState({ newName: this.props.dirent.name });
   }
 
   componentDidMount() {
@@ -38,24 +38,24 @@ class Rename extends React.Component {
 
   handleChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
-    this.setState({newName: e.target.value});
+    this.setState({ newName: e.target.value });
   };
 
   handleSubmit = () => {
     let { isValid, errMessage } = this.validateInput();
     if (!isValid) {
-      this.setState({errMessage : errMessage});
+      this.setState({ errMessage: errMessage });
     } else {
       let isDuplicated = this.checkDuplicatedName();
       if (isDuplicated) {
         let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
         errMessage = errMessage.replace('{name}', Utils.HTMLescape(this.state.newName));
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
       } else {
         this.props.onRename(this.state.newName);
         this.props.toggleCancel();
@@ -76,7 +76,7 @@ class Rename extends React.Component {
 
   changeState = (dirent) => {
     let name = dirent.name;
-    this.setState({newName: name});
+    this.setState({ newName: name });
   };
 
   validateInput = () => {
@@ -123,7 +123,7 @@ class Rename extends React.Component {
       <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
         <ModalBody>
-          <p>{type === 'file' ? gettext('New file name'): gettext('New folder name')}</p>
+          <p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
           <Input onKeyDown={this.handleKeyDown} innerRef={this.newInput} value={this.state.newName} onChange={this.handleChange} />
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
diff --git a/frontend/src/components/dialog/rename-group-dialog.js b/frontend/src/components/dialog/rename-group-dialog.js
index 76fa37f2ec..9c05ea0f44 100644
--- a/frontend/src/components/dialog/rename-group-dialog.js
+++ b/frontend/src/components/dialog/rename-group-dialog.js
@@ -18,9 +18,9 @@ class RenameGroupDialog extends React.Component {
 
   handleGroupNameChange = (event) => {
     if (!event.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
     let name = event.target.value;
@@ -33,7 +33,7 @@ class RenameGroupDialog extends React.Component {
     let name = this.state.newGroupName.trim();
     if (name) {
       let that = this;
-      seafileAPI.renameGroup(this.props.groupID, name).then((res)=> {
+      seafileAPI.renameGroup(this.props.groupID, name).then((res) => {
         that.props.loadGroup(this.props.groupID);
         that.props.onGroupChanged(res.data.id);
       }).catch(error => {
@@ -54,7 +54,7 @@ class RenameGroupDialog extends React.Component {
   };
 
   render() {
-    return(
+    return (
       <Modal isOpen={this.props.showRenameGroupDialog} toggle={this.props.toggleRenameGroupDialog}>
         <ModalHeader>{gettext('Rename Group')}</ModalHeader>
         <ModalBody>
diff --git a/frontend/src/components/dialog/rename-wiki-dialog.js b/frontend/src/components/dialog/rename-wiki-dialog.js
index e280aaad1b..66a8ea55a1 100644
--- a/frontend/src/components/dialog/rename-wiki-dialog.js
+++ b/frontend/src/components/dialog/rename-wiki-dialog.js
@@ -31,7 +31,7 @@ class RenameWikiDialog extends React.Component {
   handleSubmit = () => {
     let { isValid, errMessage } = this.validateInput();
     if (!isValid) {
-      this.setState({ errMessage : errMessage });
+      this.setState({ errMessage: errMessage });
     } else {
       this.props.onRename(this.state.newName.trim());
     }
diff --git a/frontend/src/components/dialog/repo-api-token-dialog.js b/frontend/src/components/dialog/repo-api-token-dialog.js
index 07592c6d9f..fc5d7a2f26 100644
--- a/frontend/src/components/dialog/repo-api-token-dialog.js
+++ b/frontend/src/components/dialog/repo-api-token-dialog.js
@@ -1,9 +1,9 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {gettext} from '../../utils/constants';
-import {Modal, ModalHeader, ModalBody, Button, Input} from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import { Modal, ModalHeader, ModalBody, Button, Input } from 'reactstrap';
 import RepoAPITokenPermissionEditor from '../select-editor/repo-api-token-permission-editor';
-import {seafileAPI} from '../../utils/seafile-api';
+import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import copy from 'copy-to-clipboard';
@@ -26,11 +26,11 @@ class APITokenItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   onDeleteAPIToken = () => {
@@ -136,7 +136,7 @@ class RepoAPITokenDialog extends React.Component {
   };
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   addAPIToken = () => {
@@ -147,7 +147,7 @@ class RepoAPITokenDialog extends React.Component {
     this.setState({
       isSubmitBtnActive: false,
     });
-    const {appName, permission, apiTokenList} = this.state;
+    const { appName, permission, apiTokenList } = this.state;
 
     seafileAPI.addRepoAPIToken(this.repo.repo_id, appName, permission).then((res) => {
       apiTokenList.push(res.data);
@@ -194,9 +194,9 @@ class RepoAPITokenDialog extends React.Component {
 
   handleError = (e) => {
     if (e.response) {
-      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3});
+      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), { duration: 3 });
     } else {
-      toaster.danger(gettext('Please check the network.'), {duration: 3});
+      toaster.danger(gettext('Please check the network.'), { duration: 3 });
     }
   };
 
@@ -261,7 +261,7 @@ class RepoAPITokenDialog extends React.Component {
               </tr>
             </tbody>
           </table>
-          <div style={{minHeight: '10rem', maxHeight: '18rem'}}>
+          <div style={{ minHeight: '10rem', maxHeight: '18rem' }}>
             {this.state.apiTokenList.length !== 0 &&
             <table className="table-thead-hidden w-xs-250">
               {thead}
@@ -285,11 +285,11 @@ class RepoAPITokenDialog extends React.Component {
     const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
     return (
       <Modal
-        isOpen={true} style={{maxWidth: '800px'}}
+        isOpen={true} style={{ maxWidth: '800px' }}
         toggle={this.props.onRepoAPITokenToggle}
       >
         <ModalHeader toggle={this.props.onRepoAPITokenToggle}>
-          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <div className="o-auto">
diff --git a/frontend/src/components/dialog/repo-seatable-integration-dialog.js b/frontend/src/components/dialog/repo-seatable-integration-dialog.js
index eb03223888..dc76d27622 100644
--- a/frontend/src/components/dialog/repo-seatable-integration-dialog.js
+++ b/frontend/src/components/dialog/repo-seatable-integration-dialog.js
@@ -56,12 +56,12 @@ class RepoSeaTableIntegrationDialog extends React.Component {
 
   changeTab = (tab) => {
     if (this.state.activeTab !== tab) {
-      this.setState({activeTab: tab});
+      this.setState({ activeTab: tab });
     }
   };
 
   changeStatus = (status) => {
-    this.setState({status});
+    this.setState({ status });
   };
 
   getFile = (detail, fileList) => {
@@ -155,7 +155,7 @@ class RepoSeaTableIntegrationDialog extends React.Component {
     return (
       <Modal isOpen={true} toggle={onSeaTableIntegrationToggle} className="account-dialog">
         <ModalHeader toggle={onSeaTableIntegrationToggle}>
-          <p dangerouslySetInnerHTML={{__html: title}} className="m-0"></p>
+          <p dangerouslySetInnerHTML={{ __html: title }} className="m-0"></p>
         </ModalHeader>
         <ModalBody className="account-dialog-content">
           <div className="account-dialog-main">
diff --git a/frontend/src/components/dialog/repo-share-admin-dialog.js b/frontend/src/components/dialog/repo-share-admin-dialog.js
index 2732d4f0d2..61f683b31c 100644
--- a/frontend/src/components/dialog/repo-share-admin-dialog.js
+++ b/frontend/src/components/dialog/repo-share-admin-dialog.js
@@ -53,9 +53,9 @@ class RepoShareAdminDialog extends React.Component {
     title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <div>
-        <Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+        <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+            <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             <Fragment>
diff --git a/frontend/src/components/dialog/repo-share-admin/group-shares.js b/frontend/src/components/dialog/repo-share-admin/group-shares.js
index ac53a02632..d8dfbd14c5 100644
--- a/frontend/src/components/dialog/repo-share-admin/group-shares.js
+++ b/frontend/src/components/dialog/repo-share-admin/group-shares.js
@@ -34,11 +34,11 @@ class Item extends Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   onDeleteLink = (e) => {
@@ -60,7 +60,7 @@ class Item extends Component {
 
   onEditPermission = (event) => {
     event.nativeEvent.stopImmediatePropagation();
-    this.setState({isShowPermEditor: true});
+    this.setState({ isShowPermEditor: true });
   };
 
   render() {
@@ -157,7 +157,7 @@ class RepoShareAdminGroupShares extends Component {
       let items = this.state.items.filter(shareItem => {
         return shareItem.path + shareItem.share_to !== item.path + item.share_to;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       let message = gettext('Successfully deleted 1 item');
       toaster.success(message);
     }).catch((error) => {
diff --git a/frontend/src/components/dialog/repo-share-admin/share-links.js b/frontend/src/components/dialog/repo-share-admin/share-links.js
index ceb1795008..aa8506860e 100644
--- a/frontend/src/components/dialog/repo-share-admin/share-links.js
+++ b/frontend/src/components/dialog/repo-share-admin/share-links.js
@@ -23,11 +23,11 @@ class Item extends Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   onDeleteLink = (e) => {
@@ -112,7 +112,7 @@ class RepoShareAdminShareLinks extends Component {
       let items = this.state.items.filter(linkItem => {
         return linkItem.token !== item.token;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       let message = gettext('Successfully deleted 1 item');
       toaster.success(message);
     }).catch((error) => {
diff --git a/frontend/src/components/dialog/repo-share-admin/upload-links.js b/frontend/src/components/dialog/repo-share-admin/upload-links.js
index de725b7b7e..428a996168 100644
--- a/frontend/src/components/dialog/repo-share-admin/upload-links.js
+++ b/frontend/src/components/dialog/repo-share-admin/upload-links.js
@@ -23,11 +23,11 @@ class Item extends Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   onDeleteLink = (e) => {
@@ -102,7 +102,7 @@ class RepoShareAdminUploadLinks extends Component {
       let items = this.state.items.filter(linkItem => {
         return linkItem.token !== item.token;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       let message = gettext('Successfully deleted 1 item');
       toaster.success(message);
     }).catch((error) => {
diff --git a/frontend/src/components/dialog/repo-share-admin/user-shares.js b/frontend/src/components/dialog/repo-share-admin/user-shares.js
index ddd5737c60..e185a9bbe6 100644
--- a/frontend/src/components/dialog/repo-share-admin/user-shares.js
+++ b/frontend/src/components/dialog/repo-share-admin/user-shares.js
@@ -34,11 +34,11 @@ class Item extends Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   onDeleteLink = (e) => {
@@ -60,7 +60,7 @@ class Item extends Component {
 
   onEditPermission = (event) => {
     event.nativeEvent.stopImmediatePropagation();
-    this.setState({isShowPermEditor: true});
+    this.setState({ isShowPermEditor: true });
   };
 
   render() {
@@ -157,7 +157,7 @@ class RepoShareAdminUserShares extends Component {
       let items = this.state.items.filter(shareItem => {
         return shareItem.path + shareItem.share_to !== item.path + item.share_to;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       let message = gettext('Successfully deleted 1 item');
       toaster.success(message);
     }).catch((error) => {
diff --git a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
index 1328129c27..2ec3141ef9 100644
--- a/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
+++ b/frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js
@@ -23,15 +23,15 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
 
   componentDidMount() {
     seafileAPI.resetAndSendEncryptedRepoPassword(this.props.repoID).then((res) => {
-      this.setState({showLoading: false});
-      this.setState({showSuccess: true});
+      this.setState({ showLoading: false });
+      this.setState({ showSuccess: true });
     }).catch((error) => {
       if (error.response) {
         this.setState({
           errMessage: error.response.data.error_msg
         });
-        this.setState({showLoading: false});
-        this.setState({showError: true});
+        this.setState({ showLoading: false });
+        this.setState({ showError: true });
       }
     });
   }
@@ -51,7 +51,7 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
             <span>{gettext('Sending new password...')}</span>
           )}
           {this.state.showSuccess && (
-            <div dangerouslySetInnerHTML={{__html:message}} />
+            <div dangerouslySetInnerHTML={{ __html: message }} />
           )}
           {this.state.showError && (
             <span className="err-message">{this.state.errMessage}</span>
diff --git a/frontend/src/components/dialog/reset-webdav-password.js b/frontend/src/components/dialog/reset-webdav-password.js
index 3d8d0c19df..a202a0a8d3 100644
--- a/frontend/src/components/dialog/reset-webdav-password.js
+++ b/frontend/src/components/dialog/reset-webdav-password.js
@@ -26,16 +26,16 @@ class ResetWebdavPassword extends Component {
   submit = () => {
 
     if (this.state.password.length === 0) {
-      this.setState({errMsg: gettext('Please enter a password.')});
+      this.setState({ errMsg: gettext('Please enter a password.') });
       return false;
     }
     if (this.state.password.length < webdavSecretMinLength) {
-      this.setState({errMsg: gettext('The password is too short.')});
+      this.setState({ errMsg: gettext('The password is too short.') });
       return false;
     }
 
     if (Utils.getStrengthLevel(this.state.password) < webdavSecretStrengthLevel) {
-      this.setState({errMsg: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', webdavSecretStrengthLevel)});
+      this.setState({ errMsg: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', webdavSecretStrengthLevel) });
       return false;
     }
 
@@ -47,7 +47,7 @@ class ResetWebdavPassword extends Component {
   };
 
   handleInputChange = (e) => {
-    this.setState({password: e.target.value});
+    this.setState({ password: e.target.value });
   };
 
   togglePasswordVisible = () => {
@@ -75,7 +75,7 @@ class ResetWebdavPassword extends Component {
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
             <InputGroupAddon addonType="append">
               <Button onClick={this.togglePasswordVisible}>
-                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
+                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
               </Button>
               <Button onClick={this.generatePassword}>
                 <i className="sf3-font sf3-font-magic"></i>
diff --git a/frontend/src/components/dialog/save-shared-file-dialog.js b/frontend/src/components/dialog/save-shared-file-dialog.js
index 643f3e4485..37f00f7623 100644
--- a/frontend/src/components/dialog/save-shared-file-dialog.js
+++ b/frontend/src/components/dialog/save-shared-file-dialog.js
@@ -31,7 +31,7 @@ class SaveSharedFileDialog extends React.Component {
       this.props.handleSaveSharedFile();
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
     });
   };
 
diff --git a/frontend/src/components/dialog/search-file-dialog.js b/frontend/src/components/dialog/search-file-dialog.js
index d8e27811ca..640a5b86eb 100644
--- a/frontend/src/components/dialog/search-file-dialog.js
+++ b/frontend/src/components/dialog/search-file-dialog.js
@@ -75,7 +75,7 @@ class SearchFileDialog extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('Search')}</ModalHeader>
-        <ModalBody style={{height: '250px'}} className="o-auto">
+        <ModalBody style={{ height: '250px' }} className="o-auto">
           <div className="d-flex">
             <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} autoFocus={true} />
             <button type="submit" className={`btn btn-primary flex-shrink-0 ${isSubmitting ? 'btn-loading' : ''}`} onClick={this.searchFile} disabled={isSubmitDisabled}>{gettext('Search')}</button>
@@ -136,7 +136,7 @@ class FileItem extends React.PureComponent {
       `${siteRoot}lib/${repoID}/file${Utils.encodePath(item.path)}` :
       `${siteRoot}library/${repoID}/${Utils.encodePath(repoName + item.path)}`;
 
-    return(
+    return (
       <tr>
         <td className="text-center"><img src={item.type == 'file' ? Utils.getFileIconUrl(item.path) : Utils.getFolderIconUrl()} alt="" width="24" /></td>
         <td>
diff --git a/frontend/src/components/dialog/set-webdav-password.js b/frontend/src/components/dialog/set-webdav-password.js
index e6d1e1d5a1..d96ef419e4 100644
--- a/frontend/src/components/dialog/set-webdav-password.js
+++ b/frontend/src/components/dialog/set-webdav-password.js
@@ -26,16 +26,16 @@ class SetWebdavPassword extends Component {
   submit = () => {
 
     if (this.state.password.length === 0) {
-      this.setState({errMsg: gettext('Please enter a password.')});
+      this.setState({ errMsg: gettext('Please enter a password.') });
       return false;
     }
     if (this.state.password.length < webdavSecretMinLength) {
-      this.setState({errMsg: gettext('The password is too short.')});
+      this.setState({ errMsg: gettext('The password is too short.') });
       return false;
     }
 
     if (Utils.getStrengthLevel(this.state.password) < webdavSecretStrengthLevel) {
-      this.setState({errMsg: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', webdavSecretStrengthLevel)});
+      this.setState({ errMsg: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', webdavSecretStrengthLevel) });
       return false;
     }
 
@@ -47,7 +47,7 @@ class SetWebdavPassword extends Component {
   };
 
   handleInputChange = (e) => {
-    this.setState({password: e.target.value});
+    this.setState({ password: e.target.value });
   };
 
   togglePasswordVisible = () => {
@@ -75,7 +75,7 @@ class SetWebdavPassword extends Component {
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
             <InputGroupAddon addonType="append">
               <Button onClick={this.togglePasswordVisible}>
-                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': 'slash'}`}></i>
+                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : 'slash'}`}></i>
               </Button>
               <Button onClick={this.generatePassword}>
                 <i className="sf3-font sf3-font-magic"></i>
diff --git a/frontend/src/components/dialog/share-admin-link.js b/frontend/src/components/dialog/share-admin-link.js
index 4f394a637f..6e6692afd3 100644
--- a/frontend/src/components/dialog/share-admin-link.js
+++ b/frontend/src/components/dialog/share-admin-link.js
@@ -19,7 +19,7 @@ class ShareAdminLink extends React.Component {
   copyToClipboard = () => {
     copy(this.props.link);
     this.props.toggleDialog();
-    toaster.success(gettext('The link is copied to the clipboard.'), {duration: 2});
+    toaster.success(gettext('The link is copied to the clipboard.'), { duration: 2 });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index e0d6bda75c..8bc37e61de 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -311,7 +311,7 @@ class ShareDialog extends React.Component {
       return (
         <div className="external-share-message mt-2">
           <h6>{additionalShareDialogNote.title}</h6>
-          <p style={{fontSize: '14px', color: '#666'}} className="text-wrap m-0">{additionalShareDialogNote.content}</p>
+          <p style={{ fontSize: '14px', color: '#666' }} className="text-wrap m-0">{additionalShareDialogNote.content}</p>
         </div>
       );
     }
@@ -322,7 +322,7 @@ class ShareDialog extends React.Component {
     const { itemType, itemName } = this.props;
     return (
       <div>
-        <Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+        <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog} tag="div">
             <h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
             {this.renderExternalShareMessage()}
diff --git a/frontend/src/components/dialog/share-repo-dialog.js b/frontend/src/components/dialog/share-repo-dialog.js
index 9947a96072..dd704edb56 100644
--- a/frontend/src/components/dialog/share-repo-dialog.js
+++ b/frontend/src/components/dialog/share-repo-dialog.js
@@ -36,7 +36,7 @@ class ShareRepoListItem extends React.Component {
         <td className="name">{repo.repo_name}</td>
         <td>{moment(repo.last_modified).fromNow()}</td>
         <td>
-          <Input style={{height: '1.5rem', padding: 0}} type="select" name="select" onChange={this.onPermissionChange} value={repo.sharePermission}>
+          <Input style={{ height: '1.5rem', padding: 0 }} type="select" name="select" onChange={this.onPermissionChange} value={repo.sharePermission}>
             <option value='rw'>{gettext('Read-Write')}</option>
             <option value='r'>{gettext('Read-Only')}</option>
           </Input>
@@ -67,13 +67,13 @@ class ShareRepoDialog extends React.Component {
   }
 
   componentDidMount() {
-    seafileAPI.listRepos({type: 'mine'}).then(res => {
+    seafileAPI.listRepos({ type: 'mine' }).then(res => {
       let repoList = res.data.repos.map(item => {
         let repo = new Repo(item);
         repo.sharePermission = 'rw';
         return repo;
       });
-      this.setState({repoList: repoList});
+      this.setState({ repoList: repoList });
     });
   }
 
@@ -87,7 +87,7 @@ class ShareRepoDialog extends React.Component {
         return item.repo_id !== repo.repo_id;
       });
     }
-    this.setState({selectedRepoList: selectedRepoList});
+    this.setState({ selectedRepoList: selectedRepoList });
   };
 
   onPermissionChange = (repo, permission) => {
@@ -97,13 +97,13 @@ class ShareRepoDialog extends React.Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   handleSubmit = () => {
     if (this.state.selectedRepoList.length === 0) {
       let errMessage = gettext('Please select a library to share.');
-      this.setState({errMessage: errMessage});
+      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 3d32351986..2775ac25b8 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -18,11 +18,11 @@ class GroupItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteShareItem = () => {
@@ -144,7 +144,7 @@ class ShareToGroup extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
   };
 
   componentDidMount() {
@@ -168,7 +168,7 @@ class ShareToGroup extends React.Component {
         obj.label = res.data[i].name;
         options.push(obj);
       }
-      this.setState({options: options});
+      this.setState({ options: options });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -191,7 +191,7 @@ class ShareToGroup extends React.Component {
   };
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   shareToGroup = () => {
@@ -212,7 +212,7 @@ class ShareToGroup extends React.Component {
         // todo modify api
         let items = res.data.success.map(item => {
           let sharedItem = {
-            'group_info': { 'id': item.group_id, 'name': item.group_name},
+            'group_info': { 'id': item.group_id, 'name': item.group_name },
             'permission': item.permission,
             'share_type': 'group',
           };
@@ -306,7 +306,7 @@ class ShareToGroup extends React.Component {
       }
       return sharedItem;
     });
-    this.setState({sharedItems: sharedItems});
+    this.setState({ sharedItems: sharedItems });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/share-to-invite-people.js b/frontend/src/components/dialog/share-to-invite-people.js
index dd4a91661c..ffd8817428 100644
--- a/frontend/src/components/dialog/share-to-invite-people.js
+++ b/frontend/src/components/dialog/share-to-invite-people.js
@@ -298,7 +298,8 @@ class ShareToInvitePeople extends React.Component {
               </td>
               <td>
                 <Button color="primary" onClick={this.shareAndInvite} className="submit-btn" disabled={isSubmitting}
-                >{isSubmitting ? <Loading /> : gettext('Submit')}</Button>
+                >{isSubmitting ? <Loading /> : gettext('Submit')}
+                </Button>
               </td>
             </tr>
             {this.state.errorMsg.length > 0 &&
diff --git a/frontend/src/components/dialog/share-to-other-server.js b/frontend/src/components/dialog/share-to-other-server.js
index ab2808e660..c45e6ace08 100644
--- a/frontend/src/components/dialog/share-to-other-server.js
+++ b/frontend/src/components/dialog/share-to-other-server.js
@@ -20,11 +20,11 @@ class ShareItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteShareItem = () => {
@@ -133,7 +133,7 @@ class ShareToOtherServer extends React.Component {
 
   componentDidMount() {
     seafileAPI.listOCMSharesPrepare(this.props.repoID).then((res) => {
-      this.setState({ocmShares: res.data.ocm_share_list});
+      this.setState({ ocmShares: res.data.ocm_share_list });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       this.setState({
@@ -195,7 +195,7 @@ class ShareToOtherServer extends React.Component {
       let ocmShares = this.state.ocmShares.filter(item => {
         return item.id != id;
       });
-      this.setState({ocmShares: ocmShares});
+      this.setState({ ocmShares: ocmShares });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -204,7 +204,7 @@ class ShareToOtherServer extends React.Component {
   };
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index e1442e2d34..6983b83013 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -22,19 +22,19 @@ class UserItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   userAvatarOnMouseEnter = () => {
-    this.setState({isUserDetailsPopoverOpen: true});
+    this.setState({ isUserDetailsPopoverOpen: true });
   };
 
   userAvatarOnMouseLeave = () => {
-    this.setState({isUserDetailsPopoverOpen: false});
+    this.setState({ isUserDetailsPopoverOpen: false });
   };
 
   deleteShareItem = () => {
@@ -183,7 +183,7 @@ class ShareToUser extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
     this.options = [];
   };
 
@@ -192,7 +192,7 @@ class ShareToUser extends React.Component {
     let repoID = this.props.repoID;
     seafileAPI.listSharedItems(repoID, path, 'user').then((res) => {
       if (res.data.length !== 0) {
-        this.setState({sharedItems: res.data});
+        this.setState({ sharedItems: res.data });
       }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -201,7 +201,7 @@ class ShareToUser extends React.Component {
   }
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   shareToUser = () => {
@@ -224,7 +224,7 @@ class ShareToUser extends React.Component {
         // todo modify api
         let items = res.data.success.map(item => {
           let sharedItem = {
-            'user_info': { 'nickname': item.user_name, 'name': item.user_email},
+            'user_info': { 'nickname': item.user_name, 'name': item.user_email },
             'permission': item.permission,
             'share_type': 'user',
           };
@@ -332,7 +332,7 @@ class ShareToUser extends React.Component {
       }
       return sharedItem;
     });
-    this.setState({sharedItems: sharedItems});
+    this.setState({ sharedItems: sharedItems });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/sort-options.js b/frontend/src/components/dialog/sort-options.js
index bada3cb676..8df3cbd4fd 100644
--- a/frontend/src/components/dialog/sort-options.js
+++ b/frontend/src/components/dialog/sort-options.js
@@ -16,12 +16,12 @@ class SortOptions extends React.Component {
   constructor(props) {
     super(props);
     this.sortOptions = this.props.sortOptions || [
-      {value: 'name-asc', text: gettext('By name ascending')},
-      {value: 'name-desc', text: gettext('By name descending')},
-      {value: 'size-asc', text: gettext('By size ascending')},
-      {value: 'size-desc', text: gettext('By size descending')},
-      {value: 'time-asc', text: gettext('By time ascending')},
-      {value: 'time-desc', text: gettext('By time descending')}
+      { value: 'name-asc', text: gettext('By name ascending') },
+      { value: 'name-desc', text: gettext('By name descending') },
+      { value: 'size-asc', text: gettext('By size ascending') },
+      { value: 'size-desc', text: gettext('By size descending') },
+      { value: 'time-asc', text: gettext('By time ascending') },
+      { value: 'time-desc', text: gettext('By time descending') }
     ];
     const { sortBy, sortOrder } = this.props;
     this.state = {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
index acc8928aa2..99aef9dbe7 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-member-dialog.js
@@ -9,7 +9,7 @@ import UserSelect from '../../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
-  groupID:  PropTypes.string.isRequired,
+  groupID: PropTypes.string.isRequired,
   onAddNewMembers: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
index 39ddadd5ed..f1ae748ee0 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog.js
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert, FormGroup, Label } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
@@ -42,41 +42,41 @@ class AddOrUpdateTermDialog extends React.Component {
   }
 
   handleNameChange = (e) => {
-    this.setState({name: e.target.value});
+    this.setState({ name: e.target.value });
   };
 
   handleVersionNumberChange = (e) => {
-    this.setState({versionNumber: e.target.value.trim()});
+    this.setState({ versionNumber: e.target.value.trim() });
   };
 
   handleTextChange = (e) => {
-    this.setState({text: e.target.value.trim()});
+    this.setState({ text: e.target.value.trim() });
   };
 
   setActive = () => {
-    this.setState({isActive: true});
+    this.setState({ isActive: true });
   };
 
   setInActive = () => {
-    this.setState({isActive: false});
+    this.setState({ isActive: false });
   };
 
   addTerm = () => {
     let { name, versionNumber, text, isActive } = this.state;
     if (name === '') {
-      this.setState({errMsg: gettext('Name is required.')});
+      this.setState({ errMsg: gettext('Name is required.') });
       return;
     }
     if (versionNumber === '') {
-      this.setState({errMsg: gettext('Version Number is required.')});
+      this.setState({ errMsg: gettext('Version Number is required.') });
       return;
     }
     if (isNaN(versionNumber)) {
-      this.setState({errMsg: gettext('Version Number must be a number.')});
+      this.setState({ errMsg: gettext('Version Number must be a number.') });
       return;
     }
     if (text === '') {
-      this.setState({errMsg: gettext('Text is required.')});
+      this.setState({ errMsg: gettext('Text is required.') });
       return;
     }
     if (this.props.isUpdate) {
@@ -87,11 +87,11 @@ class AddOrUpdateTermDialog extends React.Component {
   };
 
   onContentClick = () => {
-    this.setState({isConditionsEditorDialogShow: !this.state.isConditionsEditorDialogShow});
+    this.setState({ isConditionsEditorDialogShow: !this.state.isConditionsEditorDialogShow });
   };
 
   onCloseEditorDialog = () => {
-    this.setState({isConditionsEditorDialogShow: false});
+    this.setState({ isConditionsEditorDialogShow: false });
   };
 
   onUpdateContent = (content) => {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
index 0a5278350e..ab9b4efb9d 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js
@@ -24,7 +24,7 @@ class SysAdminAddOrgDialog extends React.Component {
   checkSubmitBtnActive = () => {
     const { name, email, password, passwordAgain } = this.state;
     let btnActive = true;
-    if (name.trim() !='' &&
+    if (name.trim() != '' &&
       email.trim() != '' &&
       password.trim() != '' &&
       passwordAgain.trim() != '') {
@@ -72,7 +72,7 @@ class SysAdminAddOrgDialog extends React.Component {
   handleSubmit = () => {
     let { name, email, password, passwordAgain } = this.state;
     if (password != passwordAgain) {
-      this.setState({errorMsg: gettext('Passwords do not match.')});
+      this.setState({ errorMsg: gettext('Passwords do not match.') });
       return;
     }
     const data = {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
index 5210276ac9..96256c0dc6 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js
@@ -49,7 +49,7 @@ class SysAdminAddUserDialog extends React.Component {
   };
 
   togglePasswordVisible = () => {
-    this.setState({isPasswordVisible: !this.state.isPasswordVisible});
+    this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
   };
 
   inputPassword = (e) => {
@@ -99,7 +99,7 @@ class SysAdminAddUserDialog extends React.Component {
   handleSubmit = () => {
     const { email, password, passwordAgain, name, role } = this.state;
     if (password != passwordAgain) {
-      this.setState({errorMsg: gettext('Passwords do not match.')});
+      this.setState({ errorMsg: gettext('Passwords do not match.') });
       return;
     }
     let data = {
@@ -155,7 +155,7 @@ class SysAdminAddUserDialog extends React.Component {
                 <Input autoComplete="new-password" type={isPasswordVisible ? 'text' : 'password'} value={password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
                   <Button className="mt-0" onClick={this.togglePasswordVisible}>
-                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
+                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
                   </Button>
                   <Button className="mt-0" onClick={this.generatePassword}>
                     <i className="link-operation-icon sf3-font sf3-font-magic"></i>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
index 451646ef66..9b376a3b49 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
@@ -24,12 +24,12 @@ class SysAdminCreateGroupDialog extends React.Component {
 
   handleRepoNameChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
-    this.setState({groupName: e.target.value});
+    this.setState({ groupName: e.target.value });
   };
 
   handleSubmit = () => {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
index 410d401f3f..3d5be5041c 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-department-dialog.js
@@ -38,7 +38,7 @@ class DeleteDepartmentDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Department')}</ModalHeader>
         <ModalBody>
-          <p dangerouslySetInnerHTML={{__html: tipMessage}}></p>
+          <p dangerouslySetInnerHTML={{ __html: tipMessage }}></p>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
index 78c5a0aec8..656c63ceba 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-member-dialog.js
@@ -39,7 +39,7 @@ class DeleteMemberDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Member')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: tipMessage}}></div>
+          <div dangerouslySetInnerHTML={{ __html: tipMessage }}></div>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
index 0af2619c76..2a1d77c0cd 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-delete-repo-dialog.js
@@ -32,7 +32,7 @@ class DeleteRepoDialog extends React.Component {
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Delete Library')}</ModalHeader>
         <ModalBody>
-          <div dangerouslySetInnerHTML={{__html: tipMessage}}></div>
+          <div dangerouslySetInnerHTML={{ __html: tipMessage }}></div>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggle}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
index 9d7541deac..0a413ccacc 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js
@@ -36,12 +36,12 @@ class SysAdminTransferGroupDialog extends React.Component {
 
   render() {
     const { submitBtnDisabled } = this.state;
-    const groupName = '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) +'</span>';
+    const groupName = '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) + '</span>';
     const msg = gettext('Transfer Group {placeholder} to').replace('{placeholder}', groupName);
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span dangerouslySetInnerHTML={{__html: msg}}></span>
+          <span dangerouslySetInnerHTML={{ __html: msg }}></span>
         </ModalHeader>
         <ModalBody>
           <UserSelect
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
index ef9a648a84..0121ac4d14 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js
@@ -55,7 +55,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
       let message = gettext('Successfully set library history.');
       seafileAPI.sysAdminUpdateRepoHistorySetting(repoID, days).then(res => {
         toaster.success(message);
-        this.setState({keepDays: res.data.keep_days});
+        this.setState({ keepDays: res.data.keep_days });
         this.props.toggleDialog();
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
@@ -112,7 +112,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>
@@ -121,11 +121,11 @@ class SysAdminLibHistorySettingDialog extends React.Component {
               <Label>{gettext('Keep full history')}</Label>
             </FormGroup>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.noHistory} onChange={() =>{this.setLimitDays('noHistory');}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.noHistory} onChange={() => {this.setLimitDays('noHistory');}}/>{' '}
               <Label>{gettext('Don\'t keep history')}</Label>
             </FormGroup>
             <FormGroup check>
-              <Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() =>{this.setLimitDays('autoHistory');}}/>{' '}
+              <Input type="radio" name="radio1" checked={this.state.autoHistory} onChange={() => {this.setLimitDays('autoHistory');}}/>{' '}
               <Label>{gettext('Only keep a period of history:')}</Label>
               <Input
                 type="text"
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
index d78ce67b54..56738c800d 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js
@@ -40,7 +40,7 @@ class LogsExportExcelDialog extends React.Component {
     }
   };
 
-  sysExportLogs = (logType) =>{
+  sysExportLogs = (logType) => {
     let { startDateStr, endDateStr } = this.state;
     let task_id = '';
     systemAdminAPI.sysAdminExportLogsExcel(startDateStr, endDateStr, logType).then(res => {
@@ -57,7 +57,7 @@ class LogsExportExcelDialog extends React.Component {
         this.timer = setInterval(() => {
           systemAdminAPI.queryAsyncOperationExportExcel(task_id).then(res => {
             if (res.data.is_finished === true){
-              this.setState({isFinished: true});
+              this.setState({ isFinished: true });
               clearInterval(this.timer);
               location.href = siteRoot + 'sys/log/export-excel/?task_id=' + task_id + '&log_type=' + logType;
             }
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
index 71f0b69d95..8936d10c69 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-dialog.js
@@ -32,7 +32,7 @@ class SysAdminShareDialog extends React.Component {
 
   toggle = (tab) => {
     if (this.state.activeTab !== tab) {
-      this.setState({activeTab: tab});
+      this.setState({ activeTab: tab });
     }
   };
 
@@ -80,7 +80,7 @@ class SysAdminShareDialog extends React.Component {
   render() {
     return (
       <div>
-        <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+        <Modal isOpen={true} style={{ maxWidth: '720px' }} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="op-target" title={this.props.itemName}>{this.props.itemName}</span></ModalHeader>
           <ModalBody className="share-dialog-content">
             {this.renderDirContent()}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
index 97c9200726..d44035fa4f 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
@@ -18,11 +18,11 @@ class GroupItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteShareItem = () => {
@@ -127,7 +127,7 @@ class SysAdminShareToGroup extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
   };
 
   componentDidMount() {
@@ -166,7 +166,7 @@ class SysAdminShareToGroup extends React.Component {
   };
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   shareToGroup = () => {
@@ -228,7 +228,7 @@ class SysAdminShareToGroup extends React.Component {
       }
       return sharedItem;
     });
-    this.setState({sharedItems: sharedItems});
+    this.setState({ sharedItems: sharedItems });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
index 2e47f76f4e..968f2799b4 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
@@ -18,11 +18,11 @@ class UserItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({isOperationShow: true});
+    this.setState({ isOperationShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOperationShow: false});
+    this.setState({ isOperationShow: false });
   };
 
   deleteShareItem = () => {
@@ -126,7 +126,7 @@ class SysAdminShareToUser extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
     this.options = [];
   };
 
@@ -134,7 +134,7 @@ class SysAdminShareToUser extends React.Component {
     let repoID = this.props.repoID;
     seafileAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => {
       if (res.data.length !== 0) {
-        this.setState({sharedItems: res.data});
+        this.setState({ sharedItems: res.data });
       }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -143,7 +143,7 @@ class SysAdminShareToUser extends React.Component {
   }
 
   setPermission = (permission) => {
-    this.setState({permission: permission});
+    this.setState({ permission: permission });
   };
 
   shareToUser = () => {
@@ -154,7 +154,7 @@ class SysAdminShareToUser extends React.Component {
         users[i] = this.state.selectedOption[i].email;
       }
     }
-    seafileAPI.sysAdminAddRepoSharedItem(repoID, 'user' , users, this.state.permission).then(res => {
+    seafileAPI.sysAdminAddRepoSharedItem(repoID, 'user', users, this.state.permission).then(res => {
       let errorMsg = [];
       if (res.data.failed.length > 0) {
         for (let i = 0 ; i < res.data.failed.length ; i++) {
@@ -215,7 +215,7 @@ class SysAdminShareToUser extends React.Component {
       }
       return sharedItem;
     });
-    this.setState({sharedItems: sharedItems});
+    this.setState({ sharedItems: sharedItems });
   };
 
   render() {
diff --git a/frontend/src/components/dialog/sysadmin-dialog/update-user.js b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
index 438da85998..18577911f5 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/update-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/update-user.js
@@ -40,7 +40,7 @@ class UpdateUser extends React.Component {
   };
 
   render() {
-    const  { toggleDialog } = this.props;
+    const { toggleDialog } = this.props;
     return (
       <Modal isOpen={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{this.props.dialogTitle}</ModalHeader>
diff --git a/frontend/src/components/dialog/tag-color.js b/frontend/src/components/dialog/tag-color.js
index e2998dab31..e4e0281fa2 100644
--- a/frontend/src/components/dialog/tag-color.js
+++ b/frontend/src/components/dialog/tag-color.js
@@ -68,7 +68,7 @@ class TagColor extends React.Component {
         <span
           id={`tag-${id}-color`}
           className="tag-color cursor-pointer rounded-circle d-flex align-items-center justify-content-center"
-          style={{backgroundColor: tagColor}}
+          style={{ backgroundColor: tagColor }}
           onClick={this.togglePopover}
         >
           <i className="sf3-font sf3-font-down text-white"></i>
@@ -82,12 +82,12 @@ class TagColor extends React.Component {
         >
           <PopoverBody className="p-2">
             <div className="d-flex justify-content-between">
-              {colorList.map((item, index)=>{
+              {colorList.map((item, index) => {
                 return (
                   <div key={index} className="tag-color-option mx-1">
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
-                      <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
+                      <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{ backgroundColor: item }}>
                         <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
diff --git a/frontend/src/components/dialog/tag-name.js b/frontend/src/components/dialog/tag-name.js
index 1fbc106150..a5925da2b7 100644
--- a/frontend/src/components/dialog/tag-name.js
+++ b/frontend/src/components/dialog/tag-name.js
@@ -86,7 +86,8 @@ class TagName extends React.Component {
           <span
             onClick={this.toggleMode}
             className="cursor-pointer flex-fill"
-          >{tagName}</span>
+          >{tagName}
+          </span>
         }
       </div>
     );
diff --git a/frontend/src/components/dialog/terms-editor-dialog.js b/frontend/src/components/dialog/terms-editor-dialog.js
index 4975a16f6a..a22cb72f93 100644
--- a/frontend/src/components/dialog/terms-editor-dialog.js
+++ b/frontend/src/components/dialog/terms-editor-dialog.js
@@ -39,7 +39,7 @@ class TermsEditorDialog extends React.Component {
   };
 
   onContentChanged = () => {
-    return this.setState({isValueChanged: true});
+    return this.setState({ isValueChanged: true });
   };
 
   getCurrentContent = () => {
@@ -61,7 +61,7 @@ class TermsEditorDialog extends React.Component {
         className={'conditions-editor-dialog'}
         contentClassName={'conditions-editor-dialog-content'}
         size={'lg'}
-        style={{width: 770}}
+        style={{ width: 770 }}
       >
         <ModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</ModalHeader>
         <ModalBody className={'conditions-editor-dialog-main'}>
diff --git a/frontend/src/components/dialog/terms-preview-dialog.js b/frontend/src/components/dialog/terms-preview-dialog.js
index 79ebddf265..0bbc736d22 100644
--- a/frontend/src/components/dialog/terms-preview-dialog.js
+++ b/frontend/src/components/dialog/terms-preview-dialog.js
@@ -27,7 +27,7 @@ class TermsPreviewDialog extends React.Component {
       <Modal
         isOpen={true}
         size={'lg'}
-        style={{width: 600}}
+        style={{ width: 600 }}
         wrapClassName={'conditions-perview-wrapper'}
         toggle={this.toggle}
       >
diff --git a/frontend/src/components/dialog/transfer-dialog.js b/frontend/src/components/dialog/transfer-dialog.js
index 8c8830f6ba..0976c9aeca 100644
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -14,7 +14,7 @@ import {
 } from 'reactstrap';
 import makeAnimated from 'react-select/animated';
 import { seafileAPI } from '../../utils/seafile-api';
-import {gettext, isPro, orgID} from '../../utils/constants';
+import { gettext, isPro, orgID } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
@@ -169,7 +169,7 @@ class TransferDialog extends React.Component {
     let title = gettext('Transfer Library {library_name}');
     title = title.replace('{library_name}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
-      <Modal isOpen={true} style={{maxWidth: '720px'}} toggle={this.props.toggleDialog} className="transfer-dialog">
+      <Modal isOpen={true} style={{ maxWidth: '720px' }} toggle={this.props.toggleDialog} className="transfer-dialog">
         <ModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
         </ModalHeader>
diff --git a/frontend/src/components/dialog/transfer-group-dialog.js b/frontend/src/components/dialog/transfer-group-dialog.js
index 18113b68f8..65c0b0c720 100644
--- a/frontend/src/components/dialog/transfer-group-dialog.js
+++ b/frontend/src/components/dialog/transfer-group-dialog.js
@@ -40,7 +40,7 @@ class TransferGroupDialog extends React.Component {
         this.props.toggleTransferGroupDialog();
       }).catch((error) => {
         let errMessage = Utils.getErrorMsg(error);
-        this.setState({errMessage: errMessage});
+        this.setState({ errMessage: errMessage });
       });
     }
   };
diff --git a/frontend/src/components/dialog/zip-download-dialog.js b/frontend/src/components/dialog/zip-download-dialog.js
index 63418fffdc..ec6afcce38 100644
--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/frontend/src/components/dialog/zip-download-dialog.js
@@ -81,7 +81,7 @@ class ZipDownloadDialog extends React.Component {
         });
       } else {
         this.setState({
-          zipProgress: data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(2) + '%'
+          zipProgress: data.total == 0 ? '100%' : (data.zipped / data.total * 100).toFixed(2) + '%'
         });
         if (data['total'] == data['zipped']) {
           clearInterval(interval);
@@ -132,7 +132,7 @@ class ZipDownloadDialog extends React.Component {
 class Content extends React.Component {
 
   render() {
-    const {isLoading, errorMsg, zipProgress} = this.props.data;
+    const { isLoading, errorMsg, zipProgress } = this.props.data;
 
     if (isLoading) {
       return <Loading />;
diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js
index 7ea6adaf6b..28285e74d7 100644
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -24,7 +24,7 @@ class DirColumnFile extends React.Component {
   componentDidMount() {
     if (this.props.hash) {
       let hash = this.props.hash;
-      setTimeout(function() {
+      setTimeout(function () {
         window.location.hash = hash;
       }, 500);
     }
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index 067e5a657c..12aaf61dd4 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -9,8 +9,7 @@ import Move from '../../components/dialog/move-dirent-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ImageDialog from '../../components/dialog/image-dialog';
-import { siteRoot, thumbnailSizeForOriginal } from '../../utils/constants';
-import { gettext } from '../../utils/constants';
+import { gettext, siteRoot, thumbnailSizeForOriginal } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TreeSection from '../../components/tree-section';
 import DirViews from './dir-views';
@@ -62,11 +61,11 @@ class DirColumnNav extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({opNode: nextProps.currentNode});
+    this.setState({ opNode: nextProps.currentNode });
   }
 
   onNodeClick = (node) => {
-    this.setState({opNode: node});
+    this.setState({ opNode: node });
     if (Utils.imageCheck(node?.object?.name || '')) {
       this.showNodeImagePopup(node);
       return;
@@ -75,7 +74,7 @@ class DirColumnNav extends React.Component {
   };
 
   onMenuItemClick = (operation, node) => {
-    this.setState({opNode: node});
+    this.setState({ opNode: node });
     switch (operation) {
       case 'New Folder':
         if (!node) {
@@ -117,7 +116,7 @@ class DirColumnNav extends React.Component {
         opNode: root,
       });
     } else {
-      this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
+      this.setState({ isAddFileDialogShow: !this.state.isAddFileDialogShow });
     }
   };
 
@@ -129,29 +128,29 @@ class DirColumnNav extends React.Component {
         opNode: root,
       });
     } else {
-      this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+      this.setState({ isAddFolderDialogShow: !this.state.isAddFolderDialogShow });
     }
   };
 
   onRenameToggle = () => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+    this.setState({ isRenameDialogShow: !this.state.isRenameDialogShow });
   };
 
   onCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onAddFolderNode = (dirPath) => {
-    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+    this.setState({ isAddFolderDialogShow: !this.state.isAddFolderDialogShow });
     this.props.onAddFolderNode(dirPath);
   };
 
   onRenameNode = (newName) => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+    this.setState({ isRenameDialogShow: !this.state.isRenameDialogShow });
     let node = this.state.opNode;
     this.props.onRenameNode(node, newName);
   };
@@ -292,7 +291,7 @@ class DirColumnNav extends React.Component {
     const select = this.props.inResizing ? 'none' : '';
     return (
       <Fragment>
-        <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}} onScroll={this.stopTreeScrollPropagation}>
+        <div className="dir-content-nav" role="navigation" style={{ flex: (flex), userSelect: select }} onScroll={this.stopTreeScrollPropagation}>
           {this.renderContent()}
         </div>
         {this.state.isAddFolderDialogShow && (
@@ -367,7 +366,7 @@ class DirColumnNav extends React.Component {
   }
 }
 
-DirColumnNav.defaultProps={
+DirColumnNav.defaultProps = {
   navRate: 0.25
 };
 
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
index 5d646f8da1..cd5595ab6e 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -179,7 +179,7 @@ class DirColumnView extends React.Component {
           </>
         )}
         <div
-          className="dir-content-main" style={{userSelect: select, flex: mainFlex}}
+          className="dir-content-main" style={{ userSelect: select, flex: mainFlex }}
           onScroll={this.props.isViewFile ? () => {} : this.props.onItemsScroll}
           ref={this.dirContentMain}
         >
diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index 12e6a613aa..128e67823d 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -60,7 +60,7 @@ class DirentDetail extends React.Component {
             break;
           }
         }
-        this.setState({folderDirent: folderDirent});
+        this.setState({ folderDirent: folderDirent });
         this.updateDetailView(folderDirent, path);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/components/dirent-detail/file-details.js b/frontend/src/components/dirent-detail/file-details.js
index ca1539915b..08230d23fd 100644
--- a/frontend/src/components/dirent-detail/file-details.js
+++ b/frontend/src/components/dirent-detail/file-details.js
@@ -47,7 +47,7 @@ class FileDetails extends React.Component {
         let file_tag = new FileTag(item);
         fileTagList.push(file_tag);
       });
-      this.setState({fileTagList: fileTagList});
+      this.setState({ fileTagList: fileTagList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/components/dirent-detail/lib-details.js b/frontend/src/components/dirent-detail/lib-details.js
index 35c4c1a624..d5ecaa0c2c 100644
--- a/frontend/src/components/dirent-detail/lib-details.js
+++ b/frontend/src/components/dirent-detail/lib-details.js
@@ -34,7 +34,7 @@ class LibDetail extends React.Component {
 
   getFileCounts = (repo) => {
     seafileAPI.getRepoInfo(repo.repo_id).then(res => {
-      this.setState({fileCount: res.data.file_count});
+      this.setState({ fileCount: res.data.file_count });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -57,7 +57,7 @@ class LibDetail extends React.Component {
         </div>
         <div className="detail-body dirent-info">
           <div className="img">
-            <img src={bigIconUrl} height="96"  alt="" />
+            <img src={bigIconUrl} height="96" alt="" />
           </div>
           <div className="dirent-table-container">
             <table className="table-thead-hidden">
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
index cf4f98ddc5..726b25d7ea 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -63,7 +63,7 @@ class DirentGridItem extends React.Component {
   onItemClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    this.setState({isGridSelected: false});
+    this.setState({ isGridSelected: false });
 
     const { dirent, activeDirent } = this.props;
 
@@ -77,7 +77,7 @@ class DirentGridItem extends React.Component {
     this.clickTimeout = setTimeout(() => {
       this.clickTimeout = null;
       this.handleSingleClick(dirent, activeDirent);
-    }, 250); //A click within 250 milliseconds is considered a single click.
+    }, 250); // A click within 250 milliseconds is considered a single click.
   };
 
   handleSingleClick = (dirent, activeDirent) => {
@@ -121,7 +121,7 @@ class DirentGridItem extends React.Component {
     if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
-    let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path};
+    let dragStartItemData = { nodeDirent: this.props.dirent, nodeParentPath: this.props.path };
     dragStartItemData = JSON.stringify(dragStartItemData);
 
     e.dataTransfer.effectAllowed = 'move';
@@ -133,7 +133,7 @@ class DirentGridItem extends React.Component {
       return false;
     }
     if (this.props.dirent.type === 'dir') {
-      this.setState({isGridDropTipShow: true});
+      this.setState({ isGridDropTipShow: true });
     }
   };
 
@@ -149,20 +149,20 @@ class DirentGridItem extends React.Component {
     if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
-    this.setState({isGridDropTipShow: false});
+    this.setState({ isGridDropTipShow: false });
   };
 
   onGridItemDragDrop = (e) => {
     if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
-    this.setState({isGridDropTipShow: false});
+    this.setState({ isGridDropTipShow: false });
     if (e.dataTransfer.files.length) { // uploaded files
       return;
     }
     let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartItemData = JSON.parse(dragStartItemData);
-    let {nodeDirent, nodeParentPath} = dragStartItemData;
+    let { nodeDirent, nodeParentPath } = dragStartItemData;
     let dropItemData = this.props.dirent;
 
     if (nodeDirent.name === dropItemData.name) {
@@ -177,7 +177,7 @@ class DirentGridItem extends React.Component {
     this.onItemMove(this.props.currentRepoInfo, nodeDirent, selectedPath, nodeParentPath);
   };
 
-  onGridItemMouseDown = (event) =>{
+  onGridItemMouseDown = (event) => {
     this.props.onGridItemMouseDown(event);
   };
 
@@ -299,7 +299,7 @@ class DirentGridItem extends React.Component {
                   {dirent.file_tags.map((fileTag, index) => {
                     let length = dirent.file_tags.length;
                     return (
-                      <span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
+                      <span className="file-tag" key={fileTag.id} style={{ zIndex: length - index, backgroundColor: fileTag.color }}></span>
                     );
                   })}
                 </div>
@@ -313,13 +313,15 @@ class DirentGridItem extends React.Component {
                 className="sf-link grid-file-name-link"
                 onClick={this.onItemClick}
                 title={dirent.name}
-              >{showName}</a> :
+              >{showName}
+              </a> :
               <a
                 className="grid-file-name-link"
                 href={dirent.type === 'dir' ? dirHref : fileHref}
                 onClick={this.onItemClick}
                 title={dirent.name}
-              >{showName}</a>
+              >{showName}
+              </a>
             }
           </div>
         </li>
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index 7ac83e218d..a0531b052d 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -90,39 +90,39 @@ class DirentGridView extends React.Component {
 
   onGridItemClick = (dirent) => {
     hideMenu();
-    this.setState({activeDirent: dirent});
+    this.setState({ activeDirent: dirent });
     this.props.onGridItemClick(dirent);
   };
 
   onMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onAddFolder = (dirPath) => {
-    this.setState({isCreateFolderDialogShow: false});
+    this.setState({ isCreateFolderDialogShow: false });
     this.props.onAddFolder(dirPath);
   };
 
   onItemShare = (e) => {
-    e.nativeEvent.stopImmediatePropagation(); //for document event
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    e.nativeEvent.stopImmediatePropagation(); // for document event
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   closeSharedDialog = () => {
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   onItemDelete = (currentObject, e) => {
-    e.nativeEvent.stopImmediatePropagation(); //for document event
+    e.nativeEvent.stopImmediatePropagation(); // for document event
     this.props.onItemDelete(currentObject);
   };
 
   onItemConvert = (currentObject, e, dstType) => {
-    e.nativeEvent.stopImmediatePropagation(); //for document event
+    e.nativeEvent.stopImmediatePropagation(); // for document event
     this.props.onItemConvert(currentObject, dstType);
   };
 
@@ -136,7 +136,7 @@ class DirentGridView extends React.Component {
 
   onMenuItemClick = (operation, currentObject, event) => {
     hideMenu();
-    switch(operation) {
+    switch (operation) {
       case 'Download':
         this.onItemDownload(currentObject, event);
         break;
@@ -256,7 +256,7 @@ class DirentGridView extends React.Component {
         isZipDialogOpen: true
       });
     } else {
-      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
+      let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
       location.href = url;
     }
   };
@@ -274,15 +274,15 @@ class DirentGridView extends React.Component {
   };
 
   onItemMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onItemCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onPermissionItem = () => {
-    this.setState({isPermissionDialogOpen: !this.state.isPermissionDialogOpen});
+    this.setState({ isPermissionDialogOpen: !this.state.isPermissionDialogOpen });
   };
 
   onLockItem = (currentObject) => {
@@ -330,7 +330,7 @@ class DirentGridView extends React.Component {
   onHistory = (currentObject) => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(currentObject);
-    let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath});
+    let url = URLDecorator.getUrl({ type: 'file_revisions', repoID: repoID, filePath: filePath });
     location.href = url;
   };
 
@@ -343,7 +343,7 @@ class DirentGridView extends React.Component {
   onOpenViaClient = (currentObject) => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(currentObject);
-    let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
+    let url = URLDecorator.getUrl({ type: 'open_via_client', repoID: repoID, filePath: filePath });
     location.href = url;
   };
 
@@ -382,7 +382,7 @@ class DirentGridView extends React.Component {
   };
 
   closeImagePopup = () => {
-    this.setState({isImagePopupOpen: false});
+    this.setState({ isImagePopupOpen: false });
   };
 
   moveToPrevImage = () => {
@@ -481,7 +481,7 @@ class DirentGridView extends React.Component {
 
     hideMenu();
 
-    this.setState({activeDirent: currentObject});
+    this.setState({ activeDirent: currentObject });
 
     let showMenuConfig = {
       id: id,
@@ -505,7 +505,7 @@ class DirentGridView extends React.Component {
   };
 
   render() {
-    let {direntList, path} = this.props;
+    let { direntList, path } = this.props;
     let dirent = this.state.activeDirent ? this.state.activeDirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
 
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 761d7e710c..cfd17910a1 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -103,7 +103,7 @@ class DirentListItem extends React.Component {
         isOperationShow: false,
       }, () => {
         if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) {
-          this.setState({isOperationShow: true});
+          this.setState({ isOperationShow: true });
         }
       });
     }
@@ -115,7 +115,7 @@ class DirentListItem extends React.Component {
     });
   };
 
-  //UI Interactive
+  // UI Interactive
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
@@ -124,7 +124,7 @@ class DirentListItem extends React.Component {
       });
     }
     if (this.state.canDrag) {
-      this.setState({isDragTipShow: true});
+      this.setState({ isDragTipShow: true });
     }
   };
 
@@ -136,7 +136,7 @@ class DirentListItem extends React.Component {
       });
     }
     if (this.state.canDrag) {
-      this.setState({isDragTipShow: true});
+      this.setState({ isDragTipShow: true });
     }
   };
 
@@ -147,7 +147,7 @@ class DirentListItem extends React.Component {
         isOperationShow: false,
       });
     }
-    this.setState({isDragTipShow: false});
+    this.setState({ isDragTipShow: false });
   };
 
   unfreezeItem = () => {
@@ -158,7 +158,7 @@ class DirentListItem extends React.Component {
     this.props.unfreezeItem();
   };
 
-  //buiness handler
+  // buiness handler
   onItemSelected = () => {
     this.props.onItemSelected(this.props.dirent);
   };
@@ -221,14 +221,14 @@ class DirentListItem extends React.Component {
 
   onItemDelete = (e) => {
     e.preventDefault();
-    e.nativeEvent.stopImmediatePropagation(); //for document event
+    e.nativeEvent.stopImmediatePropagation(); // for document event
     this.props.onItemDelete(this.props.dirent);
   };
 
   onItemShare = (e) => {
     e.preventDefault();
-    e.nativeEvent.stopImmediatePropagation(); //for document event
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    e.nativeEvent.stopImmediatePropagation(); // for document event
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   exportDocx = () => {
@@ -240,7 +240,7 @@ class DirentListItem extends React.Component {
   };
 
   closeSharedDialog = () => {
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   onMobileMenuItemClick = (e) => {
@@ -249,7 +249,7 @@ class DirentListItem extends React.Component {
   };
 
   onMenuItemClick = (operation, event) => {
-    switch(operation) {
+    switch (operation) {
       case 'Download':
         this.onItemDownload(event);
         break;
@@ -319,9 +319,9 @@ class DirentListItem extends React.Component {
     }
   };
 
-  onItemConvert = (e, dstType)=> {
+  onItemConvert = (e, dstType) => {
     e.preventDefault();
-    e.nativeEvent.stopImmediatePropagation(); //for document event
+    e.nativeEvent.stopImmediatePropagation(); // for document event
     this.props.onItemConvert(this.props.dirent, dstType);
   };
 
@@ -359,15 +359,15 @@ class DirentListItem extends React.Component {
   };
 
   onItemMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onItemCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onPermissionItem = () => {
-    this.setState({isPermissionDialogOpen: !this.state.isPermissionDialogOpen});
+    this.setState({ isPermissionDialogOpen: !this.state.isPermissionDialogOpen });
   };
 
   onLockItem = () => {
@@ -415,7 +415,7 @@ class DirentListItem extends React.Component {
   onHistory = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
-    let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath});
+    let url = URLDecorator.getUrl({ type: 'file_revisions', repoID: repoID, filePath: filePath });
     location.href = url;
   };
 
@@ -428,11 +428,11 @@ class DirentListItem extends React.Component {
   onOpenViaClient = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
-    let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
+    let url = URLDecorator.getUrl({ type: 'open_via_client', repoID: repoID, filePath: filePath });
     location.href = url;
   };
 
-  onConvertWithONLYOFFICE = ()=> {
+  onConvertWithONLYOFFICE = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     seafileAPI.onlyofficeConvert(repoID, filePath).then(res => {
@@ -467,7 +467,7 @@ class DirentListItem extends React.Component {
         });
       }
     } else {
-      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
+      let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
       location.href = url;
     }
   };
@@ -485,7 +485,7 @@ class DirentListItem extends React.Component {
 
   onTagTooltipToggle = (e) => {
     e.stopPropagation();
-    this.setState({isShowTagTooltip: !this.state.isShowTagTooltip});
+    this.setState({ isShowTagTooltip: !this.state.isShowTagTooltip });
   };
 
   onItemMove = (destRepo, dirent, selectedPath, currentPath) => {
@@ -501,9 +501,9 @@ class DirentListItem extends React.Component {
     if (selectedDirentList.length > 0 && selectedDirentList.includes(this.props.dirent)) { // drag items and selectedDirentList include item
       this.props.onShowDirentsDraggablePreview();
       e.dataTransfer.setDragImage(this.refs.empty_content, 0, 0); // Show an empty content
-      let selectedList =  selectedDirentList.map(item => {
+      let selectedList = selectedDirentList.map(item => {
         let nodeRootPath = this.getDirentPath(item);
-        let dragStartItemData = {nodeDirent: item, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
+        let dragStartItemData = { nodeDirent: item, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath };
         return dragStartItemData;
       });
       selectedList = JSON.stringify(selectedList);
@@ -516,7 +516,7 @@ class DirentListItem extends React.Component {
     }
 
     let nodeRootPath = this.getDirentPath(this.props.dirent);
-    let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
+    let dragStartItemData = { nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath };
     dragStartItemData = JSON.stringify(dragStartItemData);
 
     e.dataTransfer.setData('applicaiton/drag-item-info', dragStartItemData);
@@ -528,7 +528,7 @@ class DirentListItem extends React.Component {
     }
     if (this.props.dirent.type === 'dir') {
       e.stopPropagation();
-      this.setState({isDropTipshow: true});
+      this.setState({ isDropTipshow: true });
     }
   };
 
@@ -551,14 +551,14 @@ class DirentListItem extends React.Component {
     if (this.props.dirent.type === 'dir') {
       e.stopPropagation();
     }
-    this.setState({isDropTipshow: false});
+    this.setState({ isDropTipshow: false });
   };
 
   onItemDragDrop = (e) => {
     if (Utils.isIEBrower() || !this.state.canDrag) {
       return false;
     }
-    this.setState({isDropTipshow: false});
+    this.setState({ isDropTipshow: false });
     if (e.dataTransfer.files.length) { // uploaded files
       return;
     }
@@ -569,14 +569,14 @@ class DirentListItem extends React.Component {
     }
     let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartItemData = JSON.parse(dragStartItemData);
-    if (Array.isArray(dragStartItemData)) { //move items
-      let direntPaths =  dragStartItemData.map(draggedItem => {
+    if (Array.isArray(dragStartItemData)) { // move items
+      let direntPaths = dragStartItemData.map(draggedItem => {
         return draggedItem.nodeRootPath;
       });
 
       let selectedPath = Utils.joinPath(this.props.path, this.props.dirent.name);
 
-      if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) { //eg; A/B, A/C --> A/B
+      if (direntPaths.some(direntPath => { return direntPath === selectedPath;})) { // eg; A/B, A/C --> A/B
         return;
       }
 
@@ -698,10 +698,10 @@ class DirentListItem extends React.Component {
     let isActive = (activeDirent && activeDirent.name === dirent.name) || dirent.isSelected;
     let trClass = this.state.highlight ? 'tr-highlight ' : '';
     trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
-    trClass += isActive  ? 'tr-active' : '';
+    trClass += isActive ? 'tr-active' : '';
     trClass += isActive ? 'tr-active' : '';
 
-    let lockedInfo = dirent.is_freezed ? gettext('Frozen by {name}'): gettext('locked by {name}');
+    let lockedInfo = dirent.is_freezed ? gettext('Frozen by {name}') : gettext('locked by {name}');
     lockedInfo = lockedInfo.replace('{name}', dirent.lock_owner_name);
 
     const isDesktop = Utils.isDesktop();
@@ -748,7 +748,7 @@ class DirentListItem extends React.Component {
               <img ref='drag_icon' src={iconUrl} width="24" alt='' />
             }
             {dirent.is_locked && <img className="locked" src={lockedImageUrl} alt={lockedMessage} title={lockedInfo}/>}
-            <div ref="empty_content" style={{position: 'absolute', width: '1px', height: '1px'}}></div>
+            <div ref="empty_content" style={{ position: 'absolute', width: '1px', height: '1px' }}></div>
           </div>
         </td>
         <td className="name">
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 3074890eeb..c9a0de81f9 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -100,11 +100,11 @@ class DirentListView extends React.Component {
   }
 
   freezeItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   unfreezeItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onItemRename = (dirent, newName) => {
@@ -125,7 +125,7 @@ class DirentListView extends React.Component {
   };
 
   onItemSelected = (dirent) => {
-    this.setState({activeDirent: null});
+    this.setState({ activeDirent: null });
     this.props.onItemSelected(dirent);
   };
 
@@ -134,7 +134,7 @@ class DirentListView extends React.Component {
     if (this.props.selectedDirentList.length > 0 && !this.state.activeDirent ) {
       return;
     }
-    this.setState({activeDirent: dirent});
+    this.setState({ activeDirent: dirent });
     this.props.onDirentClick(dirent);
   };
 
@@ -204,7 +204,7 @@ class DirentListView extends React.Component {
   };
 
   closeImagePopup = () => {
-    this.setState({isImagePopupOpen: false});
+    this.setState({ isImagePopupOpen: false });
   };
 
   onCreateFileToggle = (fileType) => {
@@ -215,11 +215,11 @@ class DirentListView extends React.Component {
   };
 
   onCreateFolderToggle = () => {
-    this.setState({isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow});
+    this.setState({ isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow });
   };
 
   onAddFolder = (dirPath) => {
-    this.setState({isCreateFolderDialogShow: false});
+    this.setState({ isCreateFolderDialogShow: false });
     this.props.onAddFolder(dirPath);
   };
 
@@ -232,11 +232,11 @@ class DirentListView extends React.Component {
   };
 
   onMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onItemsDownload = () => {
@@ -244,8 +244,8 @@ class DirentListView extends React.Component {
     if (selectedDirentList.length) {
       if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
         let direntPath = Utils.joinPath(path, selectedDirentList[0].name);
-        let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
-        location.href= url;
+        let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
+        location.href = url;
         return;
       }
 
@@ -261,7 +261,7 @@ class DirentListView extends React.Component {
   };
 
   onCloseZipDownloadDialog = () => {
-    this.setState({isProgressDialogShow: false});
+    this.setState({ isProgressDialogShow: false });
   };
 
   // common contextmenu handle
@@ -401,7 +401,7 @@ class DirentListView extends React.Component {
   };
 
   onContainerMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'New Folder':
         this.onCreateFolderToggle();
         break;
@@ -431,7 +431,7 @@ class DirentListView extends React.Component {
   };
 
   onDirentsMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Move':
         this.onMoveToggle();
         break;
@@ -523,7 +523,7 @@ class DirentListView extends React.Component {
       if (this.state.isListDropTipShow) {
         return ;
       }
-      this.setState({isListDropTipShow: true});
+      this.setState({ isListDropTipShow: true });
     }
   };
 
@@ -544,7 +544,7 @@ class DirentListView extends React.Component {
     }
     this.enteredCounter--;
     if (this.enteredCounter === 0) {
-      this.setState({isListDropTipShow: false});
+      this.setState({ isListDropTipShow: false });
     }
   };
 
@@ -554,16 +554,16 @@ class DirentListView extends React.Component {
     }
     e.persist();
     this.enteredCounter = 0;
-    this.setState({isListDropTipShow: false});
+    this.setState({ isListDropTipShow: false });
     if (e.dataTransfer.files.length) { // uploaded files
       return;
     }
     let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartItemData = JSON.parse(dragStartItemData);
 
-    let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartItemData;
+    let { nodeDirent, nodeParentPath, nodeRootPath } = dragStartItemData;
 
-    if (Array.isArray(dragStartItemData)) { //selected items
+    if (Array.isArray(dragStartItemData)) { // selected items
       return;
     }
 
@@ -616,18 +616,18 @@ class DirentListView extends React.Component {
         onDragLeave={this.onTableDragLeave}
         onDrop={this.tableDrop}
       >
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? (
             <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
               <tr>
                 <th width="3%" className="pl10">
                   <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected} aria-label={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')} />
                 </th>
-                <th width="3%" className="pl10">{/*icon */}</th>
-                <th width="5%" className="pl10">{/*star */}</th>
+                <th width="3%" className="pl10">{/* icon */}</th>
+                <th width="5%" className="pl10">{/* star */}</th>
                 <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-                <th width="6%">{/*tag */}</th>
-                <th width="18%">{/*operation */}</th>
+                <th width="6%">{/* tag */}</th>
+                <th width="18%">{/* operation */}</th>
                 <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
                 <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
               </tr>
diff --git a/frontend/src/components/dirent-list-view/dirent-none-view.js b/frontend/src/components/dirent-list-view/dirent-none-view.js
index 538e6d3616..00869b032d 100644
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@@ -54,17 +54,23 @@ class DirentNodeView extends React.Component {
           <p className="text-secondary text-center">{gettext('This folder has no content at this time.')}</p>
           <p className="text-secondary text-center">{gettext('You can create files quickly')}{' +'}</p>
           <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
-            {'+ Markdown'}</button>
+            {'+ Markdown'}
+          </button>
           <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
-            {'+ PPT'}</button>
+            {'+ PPT'}
+          </button>
           <br />
           <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
-            {'+ Word'}</button>
+            {'+ Word'}
+          </button>
           <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
-            {'+ Excel'}</button>
+            {'+ Excel'}
+          </button>
           <br />
-          {enableSeadoc && !currentRepoInfo.encrypted && <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>
-            {'+ SeaDoc'}</button>}
+          {enableSeadoc && !currentRepoInfo.encrypted &&
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>
+            {'+ SeaDoc'}
+          </button>}
         </div>
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
diff --git a/frontend/src/components/dirent-list-view/file-tag.js b/frontend/src/components/dirent-list-view/file-tag.js
index 8dc36ac6cc..f99f7bf2d1 100644
--- a/frontend/src/components/dirent-list-view/file-tag.js
+++ b/frontend/src/components/dirent-list-view/file-tag.js
@@ -20,8 +20,9 @@ export default class FileTag extends React.PureComponent {
           className="file-tag"
           id={fileTagID}
           key={fileTag.id}
-          style={{zIndex:length - index, backgroundColor:fileTag.color}}
-        ></span>
+          style={{ zIndex: length - index, backgroundColor: fileTag.color }}
+        >
+        </span>
         <UncontrolledTooltip target={fileTagID} placement="bottom">
           {fileTag.name}
         </UncontrolledTooltip>
diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
index bcf28c6612..bd32e72221 100644
--- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js
+++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
@@ -39,14 +39,14 @@ class ItemDropdownMenu extends React.Component {
     }
     let { item } = this.props;
     let menuList = this.props.getMenuList(item);
-    this.setState({menuList: menuList});
+    this.setState({ menuList: menuList });
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {  // for toolbar item operation
+  UNSAFE_componentWillReceiveProps(nextProps) { // for toolbar item operation
     let { item } = nextProps;
     if (item.name !== this.props.item.name) {
       let menuList = this.props.getMenuList(item);
-      this.setState({menuList: menuList});
+      this.setState({ menuList: menuList });
     }
   }
 
@@ -62,7 +62,7 @@ class ItemDropdownMenu extends React.Component {
 
   onHideMenu = () => {
     if (this.state.isItemMenuShow) {
-      this.setState({isItemMenuShow: false});
+      this.setState({ isItemMenuShow: false });
       if (typeof(this.props.unfreezeItem) === 'function') {
         this.props.unfreezeItem();
       }
@@ -84,7 +84,7 @@ class ItemDropdownMenu extends React.Component {
 
   toggleOperationMenu = () => {
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
+      { isItemMenuShow: !this.state.isItemMenuShow },
       () => {
         if (this.state.isItemMenuShow && typeof(this.props.freezeItem) === 'function') {
           this.props.freezeItem();
diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index 36d5324d03..f10740e95c 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -47,7 +47,7 @@ class FileChooser extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.repoID) {  // current_repo_and_other_repos, only_current_library
+    if (this.props.repoID) { // current_repo_and_other_repos, only_current_library
       let repoID = this.props.repoID;
       seafileAPI.getRepoInfo(repoID).then(res => {
         // need to optimized
@@ -65,7 +65,7 @@ class FileChooser extends React.Component {
         let repos = res.data.repos;
         let repoList = [];
         let repoIdList = [];
-        for(let i = 0; i < repos.length; i++) {
+        for (let i = 0; i < repos.length; i++) {
           if (repos[i].permission !== 'rw') {
             continue;
           }
@@ -76,7 +76,7 @@ class FileChooser extends React.Component {
           repoIdList.push(repos[i].repo_id);
         }
         repoList = Utils.sortRepos(repoList, 'name', 'asc');
-        this.setState({repoList: repoList});
+        this.setState({ repoList: repoList });
       });
     }
   }
@@ -89,7 +89,7 @@ class FileChooser extends React.Component {
         let repos = res.data.repos;
         let repoList = [];
         let repoIdList = [];
-        for(let i = 0; i < repos.length; i++) {
+        for (let i = 0; i < repos.length; i++) {
           if (repos[i].permission !== 'rw') {
             continue;
           }
@@ -111,12 +111,12 @@ class FileChooser extends React.Component {
       });
     }
     else {
-      this.setState({isOtherRepoShow: !this.state.isOtherRepoShow});
+      this.setState({ isOtherRepoShow: !this.state.isOtherRepoShow });
     }
   };
 
   onCurrentRepoToggle = () => {
-    this.setState({isCurrentRepoShow: !this.state.isCurrentRepoShow});
+    this.setState({ isCurrentRepoShow: !this.state.isCurrentRepoShow });
   };
 
   onDirentItemClick = (repo, filePath, dirent) => {
@@ -152,7 +152,7 @@ class FileChooser extends React.Component {
   onSearchInfoChanged = (event) => {
     let searchInfo = event.target.value.trim();
 
-    this.setState({searchInfo: searchInfo});
+    this.setState({ searchInfo: searchInfo });
 
     if (this.inputValue === searchInfo) {
       return false;
@@ -176,7 +176,7 @@ class FileChooser extends React.Component {
     }
 
     if (this.inputValue === '' || this.getValueLength(this.inputValue) < 3) {
-      this.setState({isResultGot: false});
+      this.setState({ isResultGot: false });
       return false;
     }
 
@@ -204,7 +204,7 @@ class FileChooser extends React.Component {
       this.cancelRequest();
     }
 
-    this.setState({isResultGot: false});
+    this.setState({ isResultGot: false });
 
     this.source = seafileAPI.getSource();
     this.sendRequest(queryData, this.source.token);
@@ -235,10 +235,10 @@ class FileChooser extends React.Component {
   };
 
   getValueLength = (str) => {
-    var i = 0, code, len = 0;
+    var i = 0; var code; var len = 0;
     for (; i < str.length; i++) {
       code = str.charCodeAt(i);
-      if (code == 10) { //solve enter problem
+      if (code == 10) { // solve enter problem
         len += 2;
       } else if (code < 0x007f) {
         len += 1;
@@ -361,7 +361,7 @@ class FileChooser extends React.Component {
         });
       }
       else {
-        this.setState({isOtherRepoShow: !this.state.isOtherRepoShow});
+        this.setState({ isOtherRepoShow: !this.state.isOtherRepoShow });
       }
     }
     this.onCloseSearching();
diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index f8afde335b..43c71fc209 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -34,7 +34,7 @@ class RepoListItem extends React.Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const { isCurrentRepo, currentPath, repo, selectedItemInfo } = this.props;
 
     // render search result
@@ -42,7 +42,7 @@ class RepoListItem extends React.Component {
     if (repoID && repoID === repo.repo_id) {
       this.loadRepoDirentList(repo);
       setTimeout(() => {
-        this.setState({isShowChildren: true});
+        this.setState({ isShowChildren: true });
         this.loadNodeAndParentsByPath(repoID, filePath);
       }, 0);
       return;
@@ -93,7 +93,7 @@ class RepoListItem extends React.Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
@@ -111,34 +111,34 @@ class RepoListItem extends React.Component {
           direntList = res.data.dirent_list.filter(item => item.type === 'dir');
         }
         this.addResponseListToNode(direntList, node);
-        this.setState({treeData: tree});
+        this.setState({ treeData: tree });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
     } else {
       tree.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     }
   };
 
   onNodeCollapse = (node) => {
     let tree = treeHelper.collapseNode(this.state.treeData, node);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   loadNodeAndParentsByPath = (repoID, path, expandNode) => {
 
     let tree = this.state.treeData.clone();
 
-    seafileAPI.listDir(repoID, path, {with_parents: true}).then(res => {
+    seafileAPI.listDir(repoID, path, { with_parents: true }).then(res => {
       let direntList = res.data.dirent_list;
       direntList = direntList.filter(item => item.type === 'dir');
       let results = {};
       for (let i = 0; i < direntList.length; i++) {
         let object = direntList[i];
         let parentDir = object.parent_dir;
-        let key = parentDir === '/' ?  '/' : parentDir.slice(0, parentDir.length - 1);
+        let key = parentDir === '/' ? '/' : parentDir.slice(0, parentDir.length - 1);
         if (!results[key]) {
           results[key] = [];
         }
@@ -168,7 +168,7 @@ class RepoListItem extends React.Component {
     e.stopPropagation();
     let repo = this.props.repo;
     this.loadRepoDirentList(repo);
-    this.setState({isShowChildren: !this.state.isShowChildren});
+    this.setState({ isShowChildren: !this.state.isShowChildren });
   };
 
   onDirentItemClick = (filePath, dirent) => {
diff --git a/frontend/src/components/file-chooser/searched-list-item.js b/frontend/src/components/file-chooser/searched-list-item.js
index a4dd80e03f..c2e6bcd76c 100644
--- a/frontend/src/components/file-chooser/searched-list-item.js
+++ b/frontend/src/components/file-chooser/searched-list-item.js
@@ -19,11 +19,11 @@ class SearchedListItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({highlight: true});
+    this.setState({ highlight: true });
   };
 
   onMouseLeave = () => {
-    this.setState({highlight: false});
+    this.setState({ highlight: false });
   };
 
   onClick = () => {
diff --git a/frontend/src/components/file-chooser/searched-list-view.js b/frontend/src/components/file-chooser/searched-list-view.js
index 6586506d83..a04fc88321 100644
--- a/frontend/src/components/file-chooser/searched-list-view.js
+++ b/frontend/src/components/file-chooser/searched-list-view.js
@@ -18,7 +18,7 @@ class SearchedListView extends React.Component {
   }
 
   onItemClick = (item) => {
-    this.setState({currentItem: item});
+    this.setState({ currentItem: item });
     this.props.onItemClick(item);
   };
 
diff --git a/frontend/src/components/file-chooser/tree-list-item.js b/frontend/src/components/file-chooser/tree-list-item.js
index 76018db79c..60aa27e9d2 100644
--- a/frontend/src/components/file-chooser/tree-list-item.js
+++ b/frontend/src/components/file-chooser/tree-list-item.js
@@ -17,7 +17,7 @@ class TreeViewItem extends React.Component {
 
   constructor(props) {
     super(props);
-    let filePath = this.props.filePath ?  this.props.filePath +  '/' + this.props.node.object.name : this.props.node.path;
+    let filePath = this.props.filePath ? this.props.filePath + '/' + this.props.node.object.name : this.props.node.path;
 
     this.state = {
       filePath: filePath,
@@ -35,7 +35,7 @@ class TreeViewItem extends React.Component {
   };
 
   onItemClick = (e) => {
-    e.stopPropagation();  // need prevent event popup
+    e.stopPropagation(); // need prevent event popup
     let isCurrentRepo = false;
     if (this.props.selectedRepo) {
       isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
@@ -59,7 +59,7 @@ class TreeViewItem extends React.Component {
     if (!node.hasChildren()) {
       return '';
     }
-    return(
+    return (
       <div className="list-view-content">
         {node.children.map(item => {
           return (
@@ -99,7 +99,7 @@ class TreeViewItem extends React.Component {
 
     return (
       <div className="file-chooser-item">
-        <div className={`${node.path === '/'? 'hide': ''}`}>
+        <div className={`${node.path === '/' ? 'hide' : ''}`}>
           <div className={`${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''} item-info`} onClick={this.onItemClick}>
             <div className="item-text">
               <span className="name user-select-none ellipsis" title={node.object && node.object.name}>{node.object && node.object.name}</span>
diff --git a/frontend/src/components/file-chooser/tree-list-view.js b/frontend/src/components/file-chooser/tree-list-view.js
index 181b069b60..916949c8d4 100644
--- a/frontend/src/components/file-chooser/tree-list-view.js
+++ b/frontend/src/components/file-chooser/tree-list-view.js
@@ -16,8 +16,8 @@ const propTypes = {
 class TreeListView extends React.Component {
 
   render() {
-    return(
-      <div className="list-view-content" style={{'marginLeft': '-1.5rem'}}>
+    return (
+      <div className="list-view-content" style={{ 'marginLeft': '-1.5rem' }}>
         <TreeListItem
           node={this.props.treeData.root}
           onNodeCollapse={this.props.onNodeCollapse}
diff --git a/frontend/src/components/file-content-view/image.js b/frontend/src/components/file-content-view/image.js
index fc86a70f05..e764066cac 100644
--- a/frontend/src/components/file-content-view/image.js
+++ b/frontend/src/components/file-content-view/image.js
@@ -13,7 +13,7 @@ const {
   xmindImageSrc // for xmind file
 } = window.app.pageOptions;
 
-let previousImageUrl, nextImageUrl;
+let previousImageUrl; let nextImageUrl;
 if (previousImage) {
   previousImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(previousImage)}`;
 }
diff --git a/frontend/src/components/file-tag-list.js b/frontend/src/components/file-tag-list.js
index db724c19f0..12f5f4ebeb 100644
--- a/frontend/src/components/file-tag-list.js
+++ b/frontend/src/components/file-tag-list.js
@@ -9,7 +9,7 @@ function FileTagList(props) {
         const color = fileTag.tag_color || fileTag.color;
         const name = fileTag.tag_name || fileTag.name || '';
         return (
-          <li key={fileTag.id} style={{backgroundColor: color}} className="file-tag-item">
+          <li key={fileTag.id} style={{ backgroundColor: color }} className="file-tag-item">
             <span className="tag-name" title={name}>{name}</span>
           </li>
         );
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index 1bdbb25ae5..c6728478b5 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -2,10 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Resumablejs from '@seafile/resumablejs';
 import MD5 from 'MD5';
-import { resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
+import { gettext, resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { gettext } from '../../utils/constants';
 import UploadProgressDialog from './upload-progress-dialog';
 import UploadRemindDialog from '../dialog/upload-remind-dialog';
 import toaster from '../toast';
@@ -81,7 +80,7 @@ class FileUploader extends React.Component {
 
     this.resumable.assignBrowse(this.uploadInput.current, true);
 
-    //Enable or Disable DragAnd Drop
+    // Enable or Disable DragAnd Drop
     if (this.props.dragAndDrop === true) {
       this.resumable.enableDropOnDocument();
     }
@@ -153,26 +152,26 @@ class FileUploader extends React.Component {
   maxFileSizeErrorCallback = (file) => {
     let { forbidUploadFileList } = this.state;
     forbidUploadFileList.push(file);
-    this.setState({forbidUploadFileList: forbidUploadFileList});
+    this.setState({ forbidUploadFileList: forbidUploadFileList });
   };
 
   onChunkingComplete = (resumableFile) => {
 
-    //get parent_dir relative_path
+    // get parent_dir relative_path
     let path = this.props.path === '/' ? '/' : this.props.path + '/';
     let fileName = resumableFile.fileName;
     let relativePath = resumableFile.relativePath;
     let isFile = fileName === relativePath;
 
-    //update formdata
+    // update formdata
     resumableFile.formData = {};
     if (isFile) { // upload file
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
       };
     } else { // upload folder
       let relative_path = relativePath.slice(0, relativePath.lastIndexOf('/') + 1);
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
         relative_path: relative_path
       };
@@ -310,7 +309,7 @@ class FileUploader extends React.Component {
 
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
-    this.setState({totalProgress: progress});
+    this.setState({ totalProgress: progress });
     Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
   };
 
@@ -343,7 +342,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-      this.setState({uploadFileList: uploadFileList});
+      this.setState({ uploadFileList: uploadFileList });
 
       return;
     }
@@ -365,7 +364,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-      this.setState({uploadFileList: uploadFileList});
+      this.setState({ uploadFileList: uploadFileList });
 
       return;
     }
@@ -387,17 +386,17 @@ class FileUploader extends React.Component {
       }
       return item;
     });
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   getFileServerErrorMessage = (key) => {
     const errorMessage = {
-      'File locked by others.': gettext('File is locked by others.'),       // 403
-      'Invalid filename.': gettext('Invalid filename.'),                    // 440
-      'File already exists.': gettext('File already exists.'),              // 441
-      'File size is too large.': gettext('File size is too large.'),        // 442
-      'Out of quota.': gettext('Out of quota.'),                            // 443
-      'Internal error.': gettext('Internal Server Error'),                  // 500
+      'File locked by others.': gettext('File is locked by others.'), // 403
+      'Invalid filename.': gettext('Invalid filename.'), // 440
+      'File already exists.': gettext('File already exists.'), // 441
+      'File size is too large.': gettext('File size is too large.'), // 442
+      'Out of quota.': gettext('Out of quota.'), // 443
+      'Internal error.': gettext('Internal Server Error'), // 500
     };
     return errorMessage[key] || key;
   };
@@ -409,7 +408,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage);
+      errorMessage = JSON.parse(errorMessage);
       error = this.getFileServerErrorMessage(errorMessage.error);
     }
 
@@ -421,7 +420,7 @@ class FileUploader extends React.Component {
       return item;
     });
 
-    this.loaded = 0;  // reset loaded data;
+    this.loaded = 0; // reset loaded data;
     this.setState({
       retryFileList: this.state.retryFileList,
       uploadFileList: uploadFileList
@@ -483,7 +482,7 @@ class FileUploader extends React.Component {
   };
 
   generateUniqueIdentifier = (file) => {
-    let relativePath = file.webkitRelativePath||file.relativePath||file.fileName||file.name;
+    let relativePath = file.webkitRelativePath || file.relativePath || file.fileName || file.name;
     return MD5(relativePath + new Date()) + relativePath;
   };
 
@@ -512,7 +511,7 @@ class FileUploader extends React.Component {
     this.resumable.files = [];
     // reset upload link loaded
     this.isUploadLinkLoaded = false;
-    this.setState({isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: []});
+    this.setState({ isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: [] });
     Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
   };
 
@@ -533,7 +532,7 @@ class FileUploader extends React.Component {
       this.loaded = 0;
     }
 
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   onCancelAllUploading = () => {
@@ -642,7 +641,7 @@ class FileUploader extends React.Component {
       let resumableFile = this.resumable.files[this.resumable.files.length - 1];
       resumableFile.formData['replace'] = 1;
       resumableFile.formData['target_file'] = resumableFile.formData.parent_dir + resumableFile.fileName;
-      this.setState({isUploadRemindDialogShow: false});
+      this.setState({ isUploadRemindDialogShow: false });
       this.setUploadFileList(this.resumable.files);
       this.resumable.upload();
     }).catch(error => {
@@ -654,7 +653,7 @@ class FileUploader extends React.Component {
   uploadFile = () => {
     let resumableFile = this.resumable.files[this.resumable.files.length - 1];
     let { repoID, path } = this.props;
-    seafileAPI.getFileServerUploadLink(repoID, path).then((res) => {  // get upload link
+    seafileAPI.getFileServerUploadLink(repoID, path).then((res) => { // get upload link
       this.resumable.opts.target = res.data + '?ret-json=1';
       this.setState({
         isUploadRemindDialogShow: false,
@@ -672,8 +671,8 @@ class FileUploader extends React.Component {
   };
 
   cancelFileUpload = () => {
-    this.resumable.files.pop(); //delete latest file；
-    this.setState({isUploadRemindDialogShow: false});
+    this.resumable.files.pop(); // delete latest file；
+    this.setState({ isUploadRemindDialogShow: false });
   };
 
   render() {
diff --git a/frontend/src/components/file-uploader/upload-list-item.js b/frontend/src/components/file-uploader/upload-list-item.js
index 1d712651a9..fda9919772 100644
--- a/frontend/src/components/file-uploader/upload-list-item.js
+++ b/frontend/src/components/file-uploader/upload-list-item.js
@@ -39,7 +39,7 @@ class UploadListItem extends React.Component {
       }
     }
 
-    this.setState({uploadState: uploadState});
+    this.setState({ uploadState: uploadState });
   }
 
   onUploadCancel = (e) => {
@@ -89,7 +89,7 @@ class UploadListItem extends React.Component {
                   {resumableFile.isUploading() && (
                     <div className="progress-container">
                       <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>
                       {(resumableFile.remainingTime === -1) && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
                       {(resumableFile.remainingTime > 0) && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
@@ -99,7 +99,7 @@ class UploadListItem extends React.Component {
                   {!resumableFile.isUploading() && (
                     <div className="progress-container d-flex align-items-center">
                       <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>
                     </div>
                   )}
@@ -109,7 +109,7 @@ class UploadListItem extends React.Component {
                 <>
                   <div className="progress-container d-flex align-items-center">
                     <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>
                   </div>
                   {this.state.uploadState === UPLOAD_UPLOADING && (
@@ -134,7 +134,7 @@ class UploadListItem extends React.Component {
           {this.state.uploadState === UPLOAD_ERROR && (
             <div className="d-flex align-items-center">
               <span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
-              <span className="upload-failure-msg" dangerouslySetInnerHTML={{__html: error}}></span>
+              <span className="upload-failure-msg" dangerouslySetInnerHTML={{ __html: error }}></span>
             </div>
           )}
         </td>
diff --git a/frontend/src/components/file-uploader/upload-progress-dialog.js b/frontend/src/components/file-uploader/upload-progress-dialog.js
index 6cf974c410..073459a558 100644
--- a/frontend/src/components/file-uploader/upload-progress-dialog.js
+++ b/frontend/src/components/file-uploader/upload-progress-dialog.js
@@ -16,7 +16,7 @@ const propTypes = {
   onUploadCancel: PropTypes.func.isRequired,
   onUploadRetry: PropTypes.func.isRequired,
   onUploadRetryAll: PropTypes.func.isRequired,
-  isUploading : PropTypes.bool.isRequired
+  isUploading: PropTypes.bool.isRequired
 };
 
 class UploadProgressDialog extends React.Component {
@@ -34,7 +34,7 @@ class UploadProgressDialog extends React.Component {
 
   onMinimizeUpload = (e) => {
     e.nativeEvent.stopImmediatePropagation();
-    this.setState({isMinimized: !this.state.isMinimized});
+    this.setState({ isMinimized: !this.state.isMinimized });
   };
 
   onCloseUpload = (e) => {
@@ -59,7 +59,7 @@ class UploadProgressDialog extends React.Component {
     }
 
     return (
-      <div className="uploader-list-view mw-100" style={{height: this.state.isMinimized ? document.querySelector('.uploader-list-header').offsetHeight : '20rem'}}>
+      <div className="uploader-list-view mw-100" style={{ height: this.state.isMinimized ? document.querySelector('.uploader-list-header').offsetHeight : '20rem' }}>
         <div className="uploader-list-header flex-shrink-0">
           <div>
             {isUploading ? (
@@ -67,7 +67,7 @@ class UploadProgressDialog extends React.Component {
                 <span>{gettext('File Uploading...')}</span>
                 <span className="ml-2">{`${totalProgress}% (${Utils.formatBitRate(uploadBitrate)})`}</span>
                 <div className="progress">
-                  <div className="progress-bar" role="progressbar" style={{width: `${totalProgress}%`}} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
+                  <div className="progress-bar" role="progressbar" style={{ width: `${totalProgress}%` }} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
                 </div>
               </>
             ) : (
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 1c1ffa88c5..766378d783 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -50,19 +50,19 @@ class FileToolbar extends React.Component {
         this.customPermission = permissionRes.data.permission;
         // share dialog need a global custom_permission
         window.custom_permission = this.customPermission;
-        this.setState({isLoading: false});
-      } catch(error) {
+        this.setState({ isLoading: false });
+      } catch (error) {
         let errorMsg = Utils.getErrorMsg(error);
         toaster.danger(errorMsg);
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
       }
     } else {
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     }
   }
 
   toggleShareDialog = () => {
-    this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
+    this.setState({ isShareDialogOpen: !this.state.isShareDialogOpen });
   };
 
   toggleMoreOpMenu = () => {
@@ -85,7 +85,7 @@ class FileToolbar extends React.Component {
     const { isLocked, lockedByMe } = this.props;
     const { moreDropdownOpen } = this.state;
     let showLockUnlockBtn = false;
-    let lockUnlockText, lockUnlockIcon;
+    let lockUnlockText; let lockUnlockIcon;
     if (canLockUnlockFile) {
       if (!isLocked) {
         showLockUnlockBtn = true;
diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index 387812b49d..3d804ca0cd 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -44,7 +44,7 @@ class FileView extends React.Component {
   }
 
   toggleDetailsPanel = () => {
-    this.setState({isDetailsPanelOpen: !this.state.isDetailsPanelOpen});
+    this.setState({ isDetailsPanelOpen: !this.state.isDetailsPanelOpen });
   };
 
   toggleStar = () => {
@@ -120,7 +120,7 @@ class FileView extends React.Component {
             repoID={repoID}
             repoName={repoName}
             path={parentDir}
-            dirent={{'name': fileName, type: 'file'}}
+            dirent={{ 'name': fileName, type: 'file' }}
             togglePanel={this.toggleDetailsPanel}
           />
           }
diff --git a/frontend/src/components/group-members.js b/frontend/src/components/group-members.js
index 3d5467a787..3f15bb6e1f 100644
--- a/frontend/src/components/group-members.js
+++ b/frontend/src/components/group-members.js
@@ -138,7 +138,7 @@ class Member extends React.PureComponent {
     });
     const currentSelectedOption = this.roleOptions.filter(item => item.isSelected)[0];
 
-    return(
+    return (
       <tr onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave} className={this.state.highlight ? 'tr-highlight' : ''} tabIndex="0" onFocus={this.handleMouseOver}>
         <th scope="row"><img className="avatar" src={item.avatar_url} alt="" /></th>
         <td>{item.name}</td>
diff --git a/frontend/src/components/history-list-view/history-list-item.js b/frontend/src/components/history-list-view/history-list-item.js
index 47c8e65f69..dc3b17e55d 100644
--- a/frontend/src/components/history-list-view/history-list-item.js
+++ b/frontend/src/components/history-list-view/history-list-item.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, filePath } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
 
@@ -31,23 +31,23 @@ class HistoryListItem extends React.Component {
 
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
-      this.setState({isShowOperationIcon: true});
+      this.setState({ isShowOperationIcon: true });
     }
   };
 
   onMouseLeave = () => {
     if (!this.props.isItemFreezed) {
-      this.setState({isShowOperationIcon: false});
+      this.setState({ isShowOperationIcon: false });
     }
   };
 
   onToggleClick = (e) => {
-    this.setState({isMenuShow: !this.state.isMenuShow});
+    this.setState({ isMenuShow: !this.state.isMenuShow });
     this.props.onFreezedItemToggle();
   };
 
   onItemClick = () => {
-    this.setState({isShowOperationIcon: false});  //restore to default state
+    this.setState({ isShowOperationIcon: false }); // restore to default state
     if (this.props.item.commit_id === this.props.currentItem.commit_id) {
       return;
     }
@@ -74,7 +74,7 @@ class HistoryListItem extends React.Component {
       isHigtlightItem = this.props.item.commit_id === this.props.currentItem.commit_id;
     }
     let objID = this.props.currentItem.rev_file_id;
-    let url = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: objID});
+    let url = URLDecorator.getUrl({ type: 'download_historic_file', filePath: filePath, objID: objID });
     return (
       <li
         className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`}
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 00dce81b55..5f9d98d1c8 100644
--- a/frontend/src/components/history-list-view/history-list-view.js
+++ b/frontend/src/components/history-list-view/history-list-view.js
@@ -25,7 +25,7 @@ class HistoryListView extends React.Component {
   componentDidMount = () => {
     let historyList = this.props.historyList;
     if (historyList.length > 0) {
-      this.setState({currentItem: historyList[0]});
+      this.setState({ currentItem: historyList[0] });
       if (historyList === 1) {
         this.props.onItemClick(historyList[0]);
       } else {
@@ -35,13 +35,13 @@ class HistoryListView extends React.Component {
   };
 
   onFreezedItemToggle = () => {
-    this.setState({isItemFreezed: !this.state.isItemFreezed});
+    this.setState({ isItemFreezed: !this.state.isItemFreezed });
   };
 
   onScrollHandler = (event) => {
     const clientHeight = event.target.clientHeight;
     const scrollHeight = event.target.scrollHeight;
-    const scrollTop    = event.target.scrollTop;
+    const scrollTop = event.target.scrollTop;
     const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
     let hasMore = this.props.hasMore;
     if (isBottom && hasMore) {
@@ -50,7 +50,7 @@ class HistoryListView extends React.Component {
   };
 
   onItemClick = (item, currentIndex) => {
-    this.setState({currentItem: item});
+    this.setState({ currentItem: item });
     if (currentIndex !== this.props.historyList.length) {
       let preItem = this.props.historyList[currentIndex + 1];
       this.props.onItemClick(item, preItem);
diff --git a/frontend/src/components/history-trash-file-view/file-view.js b/frontend/src/components/history-trash-file-view/file-view.js
index d73c7a26b7..d62081a748 100644
--- a/frontend/src/components/history-trash-file-view/file-view.js
+++ b/frontend/src/components/history-trash-file-view/file-view.js
@@ -30,7 +30,7 @@ class FileView extends React.Component {
         <div className="file-view-header d-flex justify-content-between align-items-center">
           <div className="text-truncate mr-4">
             <h2 className="file-title text-truncate" title={fileName}>{fileName}</h2>
-            <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}`: commitTime}</p>
+            <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}` : commitTime}</p>
           </div>
           {canDownloadFile && <Download />}
         </div>
diff --git a/frontend/src/components/icon-button.js b/frontend/src/components/icon-button.js
index 796774eeb0..b0777e4863 100644
--- a/frontend/src/components/icon-button.js
+++ b/frontend/src/components/icon-button.js
@@ -32,7 +32,7 @@ class IconButton extends React.Component {
         <i className={this.props.icon}></i>
         <Tooltip
           toggle={this.toggle}
-          delay={{show: 0, hide: 0}}
+          delay={{ show: 0, hide: 0 }}
           target={this.props.id}
           placement='bottom'
           isOpen={this.state.tooltipOpen}>
diff --git a/frontend/src/components/list-and-add-group-members.js b/frontend/src/components/list-and-add-group-members.js
index 636c44bce4..9ce695e89f 100644
--- a/frontend/src/components/list-and-add-group-members.js
+++ b/frontend/src/components/list-and-add-group-members.js
@@ -103,10 +103,10 @@ class ManageMembersDialog extends React.Component {
     if (hasNextPage && !isLoadingMore) {
       const clientHeight = event.target.clientHeight;
       const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
+      const scrollTop = event.target.scrollTop;
       const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
       if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
+        this.setState({ isLoadingMore: true }, () => {
           this.listGroupMembers(page + 1);
         });
       }
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index e40e7f10e4..844b69c114 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -29,7 +29,7 @@ class MainSideNav extends React.Component {
     this.state = {
       filesNavUnfolded: false,
       sharedExtended: false,
-      closeSideBar:false,
+      closeSideBar: false,
       groupItems: [],
       isCreateGroupDialogOpen: false,
     };
@@ -45,7 +45,7 @@ class MainSideNav extends React.Component {
 
   loadGroups = () => {
     let _this = this;
-    seafileAPI.listGroups().then(res =>{
+    seafileAPI.listGroups().then(res => {
       let groupList = res.data.map(item => {
         let group = new Group(item);
         return group;
@@ -241,7 +241,7 @@ class MainSideNav extends React.Component {
                 <span className="nav-text">{gettext('Files')}</span>
                 <span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
               </Link>
-              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0}}>
+              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{ height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0 }}>
                 {canAddRepo && (
                   <li className={`nav-item ${this.getActiveClass('my-libs') || this.getActiveClass('deleted')}`}>
                     <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
@@ -309,7 +309,7 @@ class MainSideNav extends React.Component {
 
           <h2 className="mb-2 pt-1 px-2 font-weight-normal heading">{gettext('Help and resources')}</h2>
           {sideNavFooterCustomHtml ? (
-            <div className='side-nav-footer' dangerouslySetInnerHTML={{__html: sideNavFooterCustomHtml}}></div>
+            <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
           ) : (
             <ul className="nav nav-pills flex-column nav-container">
               <li className='nav-item'>
diff --git a/frontend/src/components/op-icon.js b/frontend/src/components/op-icon.js
index b486bc81dc..0f7022ced9 100644
--- a/frontend/src/components/op-icon.js
+++ b/frontend/src/components/op-icon.js
@@ -12,15 +12,18 @@ class OpIcon extends React.Component {
 
   render() {
     const { className, op, title } = this.props;
-    return (<span
-      tabIndex="0"
-      role="button"
-      className={className}
-      title={title}
-      aria-label={title}
-      onClick={op}
-      onKeyDown={Utils.onKeyDown}
-    ></span>);
+    return (
+      <span
+        tabIndex="0"
+        role="button"
+        className={className}
+        title={title}
+        aria-label={title}
+        onClick={op}
+        onKeyDown={Utils.onKeyDown}
+      >
+      </span>
+    );
   }
 }
 
diff --git a/frontend/src/components/operations/internal-link-operation/index.js b/frontend/src/components/operations/internal-link-operation/index.js
index 78f71c403b..dae8f8dfa1 100644
--- a/frontend/src/components/operations/internal-link-operation/index.js
+++ b/frontend/src/components/operations/internal-link-operation/index.js
@@ -18,7 +18,7 @@ class InternalLinkOperation extends React.Component {
   }
 
   onInternalLinkDialogToggle = () => {
-    this.setState({isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog});
+    this.setState({ isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog });
   };
 
   render() {
diff --git a/frontend/src/components/pdf-viewer.js b/frontend/src/components/pdf-viewer.js
index ebe1979620..c882862487 100644
--- a/frontend/src/components/pdf-viewer.js
+++ b/frontend/src/components/pdf-viewer.js
@@ -59,7 +59,7 @@ class PDFViewer extends React.Component {
             </div>
             <div id="sidebarResizer"></div>
           </div>
-          {/*<!-- sidebarContainer -->*/}
+          {/* <!-- sidebarContainer -->*/}
 
           <div id="mainContainer">
             <div className="findbar hidden doorHanger" id="findbar">
@@ -94,7 +94,7 @@ class PDFViewer extends React.Component {
                 <span id="findMsg" className="toolbarLabel"></span>
               </div>
             </div>
-            {/*<!-- findbar -->*/}
+            {/* <!-- findbar -->*/}
 
             <div className="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
               <div className="editorParamsToolbarContainer">
@@ -218,7 +218,7 @@ class PDFViewer extends React.Component {
                 </button>
               </div>
             </div>
-            {/*<!-- secondaryToolbar -->*/}
+            {/* <!-- secondaryToolbar -->*/}
 
             <div className="toolbar">
               <div id="toolbarContainer">
@@ -313,7 +313,7 @@ class PDFViewer extends React.Component {
                 </div>
                 <div id="loadingBar">
                   <span className="loading-icon loading-tip"></span>
-                  {/*<div className="progress">
+                  {/* <div className="progress">
                     <div className="glimmer">
                     </div>
                   </div>*/}
@@ -325,7 +325,7 @@ class PDFViewer extends React.Component {
               <div id="viewer" className="pdfViewer"></div>
             </div>
           </div>
-          {/*<!-- mainContainer -->*/}
+          {/* <!-- mainContainer -->*/}
 
           <div id="dialogContainer">
             <dialog id="passwordDialog">
@@ -404,7 +404,7 @@ class PDFViewer extends React.Component {
                 <button id="documentPropertiesClose" className="dialogButton"><span data-l10n-id="document_properties_close">Close</span></button>
               </div>
             </dialog>
-            <dialog id="printServiceDialog" style={{minWidth: '200px'}}>
+            <dialog id="printServiceDialog" style={{ minWidth: '200px' }}>
               <div className="row">
                 <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
               </div>
@@ -417,11 +417,11 @@ class PDFViewer extends React.Component {
               </div>
             </dialog>
           </div>
-          {/*<!-- dialogContainer -->*/}
+          {/* <!-- dialogContainer -->*/}
 
         </div>
-        {/*<!-- outerContainer -->*/}
-        {/*<div id="printContainer"></div>*/}
+        {/* <!-- outerContainer -->*/}
+        {/* <div id="printContainer"></div>*/}
         <input type="file" id="fileInput" className="hidden" />
       </React.Fragment>
     );
diff --git a/frontend/src/components/permission-denied-tip.js b/frontend/src/components/permission-denied-tip.js
index 7543f9af58..6cd5bd34d9 100644
--- a/frontend/src/components/permission-denied-tip.js
+++ b/frontend/src/components/permission-denied-tip.js
@@ -4,10 +4,10 @@ import { gettext, loginUrl } from '../utils/constants';
 function PermissionDeniedTip() {
   let reloginUrl = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
   let errorTip = gettext('Permission denied. Please try {placeholder-left}login again.{placeholder-right}');
-  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href='+ reloginUrl + '>');
+  errorTip = errorTip.replace('{placeholder-left}', '<a class="action-link p-0" href=' + reloginUrl + '>');
   errorTip = errorTip.replace('{placeholder-right}', '</a>');
-  return(
-    <span className="error" dangerouslySetInnerHTML={{__html: errorTip}}></span>
+  return (
+    <span className="error" dangerouslySetInnerHTML={{ __html: errorTip }}></span>
   );
 }
 
diff --git a/frontend/src/components/popover/edit-filetag-popover.js b/frontend/src/components/popover/edit-filetag-popover.js
index cfb31d8cf1..5d8988df56 100644
--- a/frontend/src/components/popover/edit-filetag-popover.js
+++ b/frontend/src/components/popover/edit-filetag-popover.js
@@ -81,7 +81,7 @@ class EditFileTagPopover extends React.Component {
     } else {
       let fileTag = null;
       let fileTagList = this.props.fileTagList;
-      for(let i = 0; i < fileTagList.length; i++) {
+      for (let i = 0; i < fileTagList.length; i++) {
         if (fileTagList[i].repo_tag_id === repoTag.id) {
           fileTag = fileTagList[i];
           break;
diff --git a/frontend/src/components/popover/tag-item.js b/frontend/src/components/popover/tag-item.js
index d295f9560b..4b59f78305 100644
--- a/frontend/src/components/popover/tag-item.js
+++ b/frontend/src/components/popover/tag-item.js
@@ -36,7 +36,7 @@ class TagItem extends React.Component {
     } else {
       let fileTag = null;
       let fileTagList = this.props.fileTagList;
-      for(let i = 0; i < fileTagList.length; i++) {
+      for (let i = 0; i < fileTagList.length; i++) {
         if (fileTagList[i].repo_tag_id === repoTag.id) {
           fileTag = fileTagList[i];
           break;
@@ -63,7 +63,7 @@ class TagItem extends React.Component {
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
       >
-        <div className="tag-item d-flex align-items-center" style={{backgroundColor: repoTag.color}}>
+        <div className="tag-item d-flex align-items-center" style={{ backgroundColor: repoTag.color }}>
           <span className="tag-name">{repoTag.name}</span>
         </div>
         {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
diff --git a/frontend/src/components/popover/tag-list-footer.js b/frontend/src/components/popover/tag-list-footer.js
index 6082193038..ab0f584922 100644
--- a/frontend/src/components/popover/tag-list-footer.js
+++ b/frontend/src/components/popover/tag-list-footer.js
@@ -24,7 +24,7 @@ export default class TagListFooter extends Component {
   }
 
   toggleTooltip = () => {
-    this.setState({showTooltip: !this.state.showTooltip});
+    this.setState({ showTooltip: !this.state.showTooltip });
   };
 
   onClickImport = () => {
@@ -109,10 +109,10 @@ export default class TagListFooter extends Component {
   render() {
     return (
       <div className="tag-list-footer">
-        <span className="sf3-font sf3-font-tips mr-2" style={{color: '#999'}} id="import-export-tags-tip"></span>
+        <span className="sf3-font sf3-font-tips mr-2" style={{ color: '#999' }} id="import-export-tags-tip"></span>
         <Tooltip
           toggle={this.toggleTooltip}
-          delay={{show: 0, hide: 0}}
+          delay={{ show: 0, hide: 0 }}
           target='import-export-tags-tip'
           placement='bottom'
           isOpen={this.state.showTooltip}
diff --git a/frontend/src/components/popover/tag-list-item.js b/frontend/src/components/popover/tag-list-item.js
index 41932f853c..ec9ba5d2da 100644
--- a/frontend/src/components/popover/tag-list-item.js
+++ b/frontend/src/components/popover/tag-list-item.js
@@ -10,7 +10,7 @@ import './list-tag-popover.css';
 const tagListItemPropTypes = {
   item: PropTypes.object.isRequired,
   repoID: PropTypes.string.isRequired,
-  onDeleteTag : PropTypes.func.isRequired
+  onDeleteTag: PropTypes.func.isRequired
 };
 
 class TagListItem extends React.Component {
@@ -54,7 +54,8 @@ class TagListItem extends React.Component {
           onClick={this.deleteTag}
           aria-label={gettext('Delete')}
           title={gettext('Delete')}
-        ></button>
+        >
+        </button>
       </li>
     );
   }
diff --git a/frontend/src/components/popover/virtual-tag-color.js b/frontend/src/components/popover/virtual-tag-color.js
index 2fd67ac01a..b720ddd762 100644
--- a/frontend/src/components/popover/virtual-tag-color.js
+++ b/frontend/src/components/popover/virtual-tag-color.js
@@ -60,7 +60,7 @@ export default class VirtualTagColor extends React.Component {
         <span
           id={`tag-${id}-color`}
           className="tag-color cursor-pointer rounded-circle d-flex align-items-center justify-content-center"
-          style={{backgroundColor: tagColor}}
+          style={{ backgroundColor: tagColor }}
           onClick={this.togglePopover}
         >
           <i className="sf3-font sf3-font-down text-white"></i>
@@ -74,12 +74,12 @@ export default class VirtualTagColor extends React.Component {
         >
           <PopoverBody className="p-2">
             <div className="d-flex justify-content-between">
-              {colorList.map((item, index)=>{
+              {colorList.map((item, index) => {
                 return (
                   <div key={index} className="tag-color-option mx-1">
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
-                      <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
+                      <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{ backgroundColor: item }}>
                         <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
diff --git a/frontend/src/components/popover/virtual-tag-list-item.js b/frontend/src/components/popover/virtual-tag-list-item.js
index 4ac7a0e550..f5ae5d510e 100644
--- a/frontend/src/components/popover/virtual-tag-list-item.js
+++ b/frontend/src/components/popover/virtual-tag-list-item.js
@@ -51,7 +51,8 @@ export default class VirtualTagListItem extends React.Component {
           onClick={this.deleteVirtualTag}
           aria-label={gettext('Delete')}
           title={gettext('Delete')}
-        ></button>
+        >
+        </button>
       </li>
     );
   }
diff --git a/frontend/src/components/popover/virtual-tag-name.js b/frontend/src/components/popover/virtual-tag-name.js
index e22b909e80..b50dbdf48e 100644
--- a/frontend/src/components/popover/virtual-tag-name.js
+++ b/frontend/src/components/popover/virtual-tag-name.js
@@ -80,8 +80,9 @@ export default class VirtualTagName extends React.Component {
           <span
             onClick={this.toggleMode}
             className="cursor-pointer flex-fill"
-            style={{width: 100, height: 20}}
-          >{tagName}</span>
+            style={{ width: 100, height: 20 }}
+          >{tagName}
+          </span>
         }
       </div>
     );
diff --git a/frontend/src/components/rename.js b/frontend/src/components/rename.js
index 4c60ca3b83..5b7b61a4a1 100644
--- a/frontend/src/components/rename.js
+++ b/frontend/src/components/rename.js
@@ -46,7 +46,7 @@ class Rename extends React.Component {
   };
 
   onChange = (e) => {
-    this.setState({name: e.target.value});
+    this.setState({ name: e.target.value });
   };
 
   onKeyDown = (e) => {
diff --git a/frontend/src/components/repo-info-bar.js b/frontend/src/components/repo-info-bar.js
index 1b4752bbcb..6be6552285 100644
--- a/frontend/src/components/repo-info-bar.js
+++ b/frontend/src/components/repo-info-bar.js
@@ -48,7 +48,7 @@ class RepoInfoBar extends React.Component {
             {usedRepoTags.map((usedRepoTag) => {
               return (
                 <li key={usedRepoTag.id} className="used-tag-item">
-                  <span className="used-tag" style={{backgroundColor:usedRepoTag.color}}></span>
+                  <span className="used-tag" style={{ backgroundColor: usedRepoTag.color }}></span>
                   <span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
                   <button type="button" className="used-tag-files border-0 bg-transparent" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
                     {usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}
diff --git a/frontend/src/components/sdoc-wiki-page-viewer/index.js b/frontend/src/components/sdoc-wiki-page-viewer/index.js
index 42e294fa95..100c371cdf 100644
--- a/frontend/src/components/sdoc-wiki-page-viewer/index.js
+++ b/frontend/src/components/sdoc-wiki-page-viewer/index.js
@@ -32,11 +32,11 @@ class SdocWikiPageViewer extends React.Component {
 
   changeInlineNode = (item) => {
     const { repoID } = this.props;
-    let url, imagePath;
+    let url; let imagePath;
     // isPublicWiki: in the old version, only public wiki need replace image url
     if (item.type == 'image') { // change image url
       url = item.data.src;
-      const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
+      const re = new RegExp(serviceURL + '/lib/' + repoID + '/file.*raw=1');
       // different repo
       if (re.test(url)) {
         // get image path
diff --git a/frontend/src/components/seafile-markdown-viewer/index.js b/frontend/src/components/seafile-markdown-viewer/index.js
index 8421bbb297..105cc44359 100644
--- a/frontend/src/components/seafile-markdown-viewer/index.js
+++ b/frontend/src/components/seafile-markdown-viewer/index.js
@@ -36,11 +36,11 @@ class SeafileMarkdownViewer extends React.Component {
 
   changeInlineNode = (item) => {
     const { repoID } = this.props;
-    let url, imagePath;
+    let url; let imagePath;
     // isPublicWiki: in the old version, only public wiki need replace image url
     if (item.type == 'image') { // change image url
       url = item.data.src;
-      const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
+      const re = new RegExp(serviceURL + '/lib/' + repoID + '/file.*raw=1');
       // different repo
       if (re.test(url)) {
         // get image path
@@ -90,7 +90,7 @@ class SeafileMarkdownViewer extends React.Component {
       value: markdownContent,
       scrollRef: this.scrollRef,
       onLinkClick: this.onLinkClick,
-      ...(isWiki && {beforeRenderCallback: this.modifyValueBeforeRender})
+      ...(isWiki && { beforeRenderCallback: this.modifyValueBeforeRender })
     };
 
     return (
diff --git a/frontend/src/components/search/search-by-name.js b/frontend/src/components/search/search-by-name.js
index 36d141de8e..122045ca82 100644
--- a/frontend/src/components/search/search-by-name.js
+++ b/frontend/src/components/search/search-by-name.js
@@ -33,7 +33,8 @@ class SearchByName extends Component {
           className="sf3-font sf3-font-search top-search-file-icon"
           onClick={this.toggleDialog}
           title={gettext('Search files in this library')}
-        ></i>
+        >
+        </i>
         {this.state.isDialogOpen &&
         <SearchFileDialog
           repoID={repoID}
diff --git a/frontend/src/components/search/search-result-item.js b/frontend/src/components/search/search-result-item.js
index e21362614d..e99f28f3b2 100644
--- a/frontend/src/components/search/search-result-item.js
+++ b/frontend/src/components/search/search-result-item.js
@@ -33,7 +33,7 @@ class SearchResultItem extends React.Component {
 
     return (
       <li
-        className={classnames('search-result-item', {'search-result-item-highlight': this.props.isHighlight })}
+        className={classnames('search-result-item', { 'search-result-item-highlight': this.props.isHighlight })}
         onClick={this.onClickHandler}
         ref={ref => this.props.setRef(ref)}
       >
@@ -41,7 +41,7 @@ class SearchResultItem extends React.Component {
         <div className="item-content">
           <div className="item-name ellipsis">{item.name}</div>
           <div className="item-link ellipsis">{showName}</div>
-          <div className="item-text ellipsis" dangerouslySetInnerHTML={{__html: item.content}}></div>
+          <div className="item-text ellipsis" dangerouslySetInnerHTML={{ __html: item.content }}></div>
         </div>
       </li>
     );
diff --git a/frontend/src/components/search/search-result-library.js b/frontend/src/components/search/search-result-library.js
index 4386d07124..174638cc64 100644
--- a/frontend/src/components/search/search-result-library.js
+++ b/frontend/src/components/search/search-result-library.js
@@ -6,7 +6,7 @@ import { Utils } from '../../utils/utils';
 function SearchResultLibrary(props) {
   const { item, isHighlight, onClick } = props;
   return (
-    <li className={classnames('search-result-item', {'search-result-item-highlight': isHighlight })} onClick={() => onClick(item)}>
+    <li className={classnames('search-result-item', { 'search-result-item-highlight': isHighlight })} onClick={() => onClick(item)}>
       <img className='lib-item-img' src={Utils.getDefaultLibIconUrl(true)} alt="" />
       <div className="item-content d-flex justify-content-between align-items-center ellipsis">{item.name}</div>
     </li>
diff --git a/frontend/src/components/seatable-integration-account-setting-widgets/add-seatable-account-setting.js b/frontend/src/components/seatable-integration-account-setting-widgets/add-seatable-account-setting.js
index df0208d3bb..9d9cc23808 100644
--- a/frontend/src/components/seatable-integration-account-setting-widgets/add-seatable-account-setting.js
+++ b/frontend/src/components/seatable-integration-account-setting-widgets/add-seatable-account-setting.js
@@ -23,7 +23,7 @@ class AddSeatableAccountSetting extends Component {
       seatable_url: currentDtableInfo?.seatable_url || '',
       seatable_api_token: currentDtableInfo?.base_api_token || '',
       successMessage: null,
-      stage: 'toCheck',  // toCheck: need to check -> toSubmit: need to submit
+      stage: 'toCheck', // toCheck: need to check -> toSubmit: need to submit
       passwordType: 'password'
     };
   }
@@ -81,7 +81,7 @@ class AddSeatableAccountSetting extends Component {
       errMessage = gettext('SeaTable API token is required');
     }
 
-    this.setState({errMessage});
+    this.setState({ errMessage });
     if (errMessage) return;
     let detail = {
       base_name,
@@ -110,9 +110,9 @@ class AddSeatableAccountSetting extends Component {
 
   togglePasswordShow = () => {
     if (this.state.passwordType === 'password') {
-      this.setState({passwordType: 'text'});
+      this.setState({ passwordType: 'text' });
     } else {
-      this.setState({passwordType: 'password'});
+      this.setState({ passwordType: 'password' });
     }
   };
 
@@ -123,15 +123,16 @@ class AddSeatableAccountSetting extends Component {
         <div className="add-account-header d-flex align-items-center justify-content-between">
           <span>
             <span className="back-btn d-inline-flex align-items-center justify-content-center" onClick={this.props.changeStatus}>
-              <i className="link-icon icon-left sf3-font sf3-font-arrow" style={{transform: 'rotate(180deg)', color: '#999'}}></i>
+              <i className="link-icon icon-left sf3-font sf3-font-arrow" style={{ transform: 'rotate(180deg)', color: '#999' }}></i>
             </span>
             <span className="add-account-header-text">{gettext('Add SeaTable Integration')}</span>
           </span>
           <button
-            onClick={stage === 'toCheck'? this.testSeatableAPIToken : this.addSeatableAccountSetting}
+            onClick={stage === 'toCheck' ? this.testSeatableAPIToken : this.addSeatableAccountSetting}
             type="button"
             className="btn btn-primary add-account-btn"
-          >{stage === 'toCheck' ? gettext('Check') : gettext('Submit')}</button>
+          >{stage === 'toCheck' ? gettext('Check') : gettext('Submit')}
+          </button>
         </div>
         <div className="base-account">
           <div className="account-name-desc">
diff --git a/frontend/src/components/seatable-integration-account-setting-widgets/delete-seatables-dialog.js b/frontend/src/components/seatable-integration-account-setting-widgets/delete-seatables-dialog.js
index 0d1fab945b..0b68146fca 100644
--- a/frontend/src/components/seatable-integration-account-setting-widgets/delete-seatables-dialog.js
+++ b/frontend/src/components/seatable-integration-account-setting-widgets/delete-seatables-dialog.js
@@ -12,7 +12,7 @@ class DeleteSeatablesDialog extends Component {
     closeDialog: PropTypes.func,
   };
 
-  render () {
+  render() {
     const { accountName, closeDialog } = this.props;
     return (
       <Modal isOpen={true} toggle={closeDialog}>
diff --git a/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-item.js b/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-item.js
index fff5d88762..2f5939a2cf 100644
--- a/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-item.js
+++ b/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-item.js
@@ -5,7 +5,7 @@ import { gettext } from '../../utils/constants';
 
 class SeatableAccountItem extends Component {
 
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = {
       isShowDialog: false,
@@ -21,11 +21,11 @@ class SeatableAccountItem extends Component {
   };
 
   openDialog = () => {
-    this.setState({isShowDialog: true});
+    this.setState({ isShowDialog: true });
   };
 
   closeDialog = () => {
-    this.setState({isShowDialog: false});
+    this.setState({ isShowDialog: false });
   };
 
   onDeleteSeatables = () => {
@@ -51,7 +51,7 @@ class SeatableAccountItem extends Component {
             title={gettext('Edit')}
             aria-label={gettext('Edit')}
           >
-            <i className="sf2-icon-edit" style={{color: '#999'}}></i>
+            <i className="sf2-icon-edit" style={{ color: '#999' }}></i>
           </span>
           <span
             className="account-operation-btn"
@@ -59,7 +59,7 @@ class SeatableAccountItem extends Component {
             title={gettext('Delete')}
             aria-label={gettext('Delete')}
           >
-            <i className="sf3-font-delete1 sf3-font" style={{color: '#999'}}></i>
+            <i className="sf3-font-delete1 sf3-font" style={{ color: '#999' }}></i>
           </span>
         </td>
         {isShowDialog &&
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index 51139061a7..abcae3eff0 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -48,7 +48,7 @@ class SelectEditor extends React.Component {
       let option = {};
       option.value = options[i];
       if (!options[i].length) { // it's ''. for example, intitution option in 'system admin - users' page can be ''.
-        option.label = <div style={{minHeight: '1em'}}></div>;
+        option.label = <div style={{ minHeight: '1em' }}></div>;
       } else {
         option.label = <div>{this.props.translateOption(options[i])}{ this.props.translateExplanation && <div className="permission-editor-explanation">{this.props.translateExplanation(options[i])}</div>}</div>;
       }
@@ -82,7 +82,7 @@ class SelectEditor extends React.Component {
   onEditPermission = (e) => {
     e.preventDefault();
     e.nativeEvent.stopImmediatePropagation();
-    this.setState({isEditing: true});
+    this.setState({ isEditing: true });
     this.props.toggleItemFreezed && this.props.toggleItemFreezed(true);
   };
 
@@ -91,7 +91,7 @@ class SelectEditor extends React.Component {
     if (permission !== this.props.currentOption) {
       this.props.onOptionChanged(permission);
     }
-    this.setState({isEditing: false});
+    this.setState({ isEditing: false });
     this.props.toggleItemFreezed && this.props.toggleItemFreezed(false);
   };
 
@@ -100,7 +100,7 @@ class SelectEditor extends React.Component {
   };
 
   onMenuClose = () => {
-    this.setState({isEditing: false});
+    this.setState({ isEditing: false });
     this.props.toggleItemFreezed && this.props.toggleItemFreezed(false);
   };
 
diff --git a/frontend/src/components/select-editor/share-permission-editor.js b/frontend/src/components/select-editor/share-permission-editor.js
index 8b6c3b4bab..1da3eb4a60 100644
--- a/frontend/src/components/select-editor/share-permission-editor.js
+++ b/frontend/src/components/select-editor/share-permission-editor.js
@@ -78,7 +78,7 @@ class SharePermissionEditor extends React.Component {
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
-      this.setState({isLoading: false});
+      this.setState({ isLoading: false });
     });
   };
 
diff --git a/frontend/src/components/send-link.js b/frontend/src/components/send-link.js
index 6c737ba289..2d5efbc348 100644
--- a/frontend/src/components/send-link.js
+++ b/frontend/src/components/send-link.js
@@ -104,7 +104,8 @@ class SendLink extends React.Component {
             id="msg"
             value={msg}
             onChange={this.handleMsgInputChange}
-          ></textarea>
+          >
+          </textarea>
         </FormGroup>
         {errorMsg && <p className="error">{errorMsg}</p>}
         <Button color="primary" onClick={this.sendLink} disabled={btnDisabled} className="mr-2">{gettext('Send')}</Button>
diff --git a/frontend/src/components/set-link-expiration.js b/frontend/src/components/set-link-expiration.js
index 2c91e754c2..4ef20cc90b 100644
--- a/frontend/src/components/set-link-expiration.js
+++ b/frontend/src/components/set-link-expiration.js
@@ -83,7 +83,7 @@ class SetLinkExpiration extends React.Component {
           </Label>
           {expType == 'by-days' && (
             <Fragment>
-              <InputGroup style={{width: inputWidth}}>
+              <InputGroup style={{ width: inputWidth }}>
                 <Input type="text" value={expireDays} onChange={onExpireDaysChanged} />
                 <InputGroupAddon addonType="append">
                   <InputGroupText>{gettext('days')}</InputGroupText>
diff --git a/frontend/src/components/share-link-panel/index.js b/frontend/src/components/share-link-panel/index.js
index 16803a64bc..3f361d0bd5 100644
--- a/frontend/src/components/share-link-panel/index.js
+++ b/frontend/src/components/share-link-panel/index.js
@@ -44,7 +44,7 @@ class ShareLinkPanel extends React.Component {
   componentDidMount() {
     const { page } = this.state;
     const { repoID, itemPath: path } = this.props;
-    seafileAPI.listShareLinks({repoID, path, page}).then((res) => {
+    seafileAPI.listShareLinks({ repoID, path, page }).then((res) => {
       this.setState({
         isLoading: false,
         hasMore: res.data.length == PER_PAGE,
@@ -192,10 +192,10 @@ class ShareLinkPanel extends React.Component {
     if (!this.state.isLoadingMore && this.state.hasMore) {
       const clientHeight = event.target.clientHeight;
       const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
+      const scrollTop = event.target.scrollTop;
       const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
       if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
+        this.setState({ isLoadingMore: true }, () => {
           this.getMore();
         });
       }
@@ -205,7 +205,7 @@ class ShareLinkPanel extends React.Component {
   getMore = () => {
     const { page, shareLinks } = this.state;
     const { repoID, itemPath: path } = this.props;
-    seafileAPI.listShareLinks({repoID, path, page: page + 1}).then((res) => {
+    seafileAPI.listShareLinks({ repoID, path, page: page + 1 }).then((res) => {
       this.setState({
         isLoadingMore: false,
         hasMore: res.data.length == PER_PAGE,
diff --git a/frontend/src/components/share-link-panel/link-creation.js b/frontend/src/components/share-link-panel/link-creation.js
index e82686aec9..6bc24f5162 100644
--- a/frontend/src/components/share-link-panel/link-creation.js
+++ b/frontend/src/components/share-link-panel/link-creation.js
@@ -83,22 +83,22 @@ class LinkCreation extends React.Component {
 
   inputPassword = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({password: passwd});
+    this.setState({ password: passwd });
   };
 
   inputPasswordNew = (e) => {
     let passwd = e.target.value.trim();
-    this.setState({passwdnew: passwd});
+    this.setState({ passwdnew: passwd });
   };
 
   setPermission = (e) => {
-    this.setState({currentPermission: e.target.value});
+    this.setState({ currentPermission: e.target.value });
   };
 
   generateShareLink = () => {
     let isValid = this.validateParamsInput();
     if (isValid) {
-      this.setState({errorInfo: ''});
+      this.setState({ errorInfo: '' });
       let { type, itemPath, repoID } = this.props;
       let { linkAmount, isShowPasswordInput, password, isExpireChecked, expType, expireDays, expDate } = this.state;
 
@@ -135,7 +135,7 @@ class LinkCreation extends React.Component {
         let resp_data = error.response.data;
         let errMessage = resp_data && resp_data['error_msg'];
         if (errMessage === 'Folder permission denied.') {
-          this.setState({errorInfo: gettext('Share links cannot be generated because "Invisible", "Online Read-Write" or "Online Read-Only" is set for you on some folder(s) in the library.')});
+          this.setState({ errorInfo: gettext('Share links cannot be generated because "Invisible", "Online Read-Write" or "Online Read-Only" is set for you on some folder(s) in the library.') });
         } else {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
@@ -145,12 +145,12 @@ class LinkCreation extends React.Component {
   };
 
   onExpireChecked = (e) => {
-    this.setState({isExpireChecked: e.target.checked});
+    this.setState({ isExpireChecked: e.target.checked });
   };
 
   onExpireDaysChanged = (e) => {
     let day = e.target.value.trim();
-    this.setState({expireDays: day});
+    this.setState({ expireDays: day });
   };
 
   validateParamsInput = () => {
@@ -159,30 +159,30 @@ class LinkCreation extends React.Component {
 
     if (type == 'batch') {
       if (!Number.isInteger(parseInt(linkAmount)) || parseInt(linkAmount) <= 1) {
-        this.setState({errorInfo: gettext('Please enter an integer bigger than 1 as number of links.')});
+        this.setState({ errorInfo: gettext('Please enter an integer bigger than 1 as number of links.') });
         return false;
       }
       if (parseInt(linkAmount) > SHARE_LINK_MAX_NUMBER) {
-        this.setState({errorInfo: gettext('Please enter an integer not bigger than {max_number} as number of links.').replace('{max_number}', SHARE_LINK_MAX_NUMBER)});
+        this.setState({ errorInfo: gettext('Please enter an integer not bigger than {max_number} as number of links.').replace('{max_number}', SHARE_LINK_MAX_NUMBER) });
         return false;
       }
     }
 
     if (type == 'single' && isShowPasswordInput) {
       if (password.length === 0) {
-        this.setState({errorInfo: gettext('Please enter a password.')});
+        this.setState({ errorInfo: gettext('Please enter a password.') });
         return false;
       }
       if (password.length < shareLinkPasswordMinLength) {
-        this.setState({errorInfo: gettext('The password is too short.')});
+        this.setState({ errorInfo: gettext('The password is too short.') });
         return false;
       }
       if (password !== passwdnew) {
-        this.setState({errorInfo: gettext('Passwords don\'t match')});
+        this.setState({ errorInfo: gettext('Passwords don\'t match') });
         return false;
       }
       if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) {
-        this.setState({errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)});
+        this.setState({ errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel) });
         return false;
       }
     }
@@ -190,7 +190,7 @@ class LinkCreation extends React.Component {
     if (isExpireChecked) {
       if (expType == 'by-date') {
         if (!expDate) {
-          this.setState({errorInfo: gettext('Please select an expiration time')});
+          this.setState({ errorInfo: gettext('Please select an expiration time') });
           return false;
         }
         return true;
@@ -199,11 +199,11 @@ class LinkCreation extends React.Component {
       // by days
       let reg = /^\d+$/;
       if (!expireDays) {
-        this.setState({errorInfo: gettext('Please enter days')});
+        this.setState({ errorInfo: gettext('Please enter days') });
         return false;
       }
       if (!reg.test(expireDays)) {
-        this.setState({errorInfo: gettext('Please enter a non-negative integer')});
+        this.setState({ errorInfo: gettext('Please enter a non-negative integer') });
         return false;
       }
 
@@ -213,26 +213,26 @@ class LinkCreation extends React.Component {
 
       if (minDays !== 0 && maxDays == 0) {
         if (expireDays < minDays) {
-          this.setState({errorInfo: 'Please enter valid days'});
+          this.setState({ errorInfo: 'Please enter valid days' });
           return false;
         }
       }
 
       if (minDays === 0 && maxDays !== 0 ) {
         if (expireDays > maxDays) {
-          this.setState({errorInfo: 'Please enter valid days'});
+          this.setState({ errorInfo: 'Please enter valid days' });
           return false;
         }
       }
 
       if (minDays !== 0 && maxDays !== 0) {
         if (expireDays < minDays || expireDays > maxDays) {
-          this.setState({errorInfo: 'Please enter valid days'});
+          this.setState({ errorInfo: 'Please enter valid days' });
           return false;
         }
       }
 
-      this.setState({expireDays: expireDays});
+      this.setState({ expireDays: expireDays });
     }
 
     return true;
@@ -249,7 +249,7 @@ class LinkCreation extends React.Component {
   };
 
   render() {
-    const { userPerm, type, permissionOptions  } = this.props;
+    const { userPerm, type, permissionOptions } = this.props;
     const { isCustomPermission } = Utils.getUserPermission(userPerm);
 
     return (
@@ -257,13 +257,14 @@ class LinkCreation extends React.Component {
         <div className="d-flex align-items-center pb-2 border-bottom">
           <h6 className="font-weight-normal m-0">
             <button className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon border-0 bg-transparent text-secondary p-0 mr-2" onClick={this.goBack} title={gettext('Back')} aria-label={gettext('Back')}></button>
-            {type == 'batch' ? gettext('Generate links in batch') : gettext('Generate Link')}</h6>
+            {type == 'batch' ? gettext('Generate links in batch') : gettext('Generate Link')}
+          </h6>
         </div>
         <Form className="pt-4">
           {type == 'batch' && (
             <FormGroup>
               <Label for="link-number" className="p-0">{gettext('Number of links')}</Label>
-              <Input type="number" id="link-number" value={this.state.linkAmount} onChange={this.onLinkAmountChange} style={{width: inputWidth}} />
+              <Input type="number" id="link-number" value={this.state.linkAmount} onChange={this.onLinkAmountChange} style={{ width: inputWidth }} />
             </FormGroup>
           )}
           <FormGroup check>
@@ -283,11 +284,11 @@ class LinkCreation extends React.Component {
                 <FormGroup>
                   <Label for="passwd">{gettext('Password')}</Label>
                   <span className="tip">{gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)').replace('{passwordMinLength}', shareLinkPasswordMinLength).replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)}</span>
-                  <InputGroup style={{width: inputWidth}}>
+                  <InputGroup style={{ width: inputWidth }}>
                     <Input id="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword} />
                     <InputGroupAddon addonType="append">
                       <Button onClick={this.togglePasswordVisible}>
-                        <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
+                        <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '' : '-slash'}`}></i>
                       </Button>
                       <Button onClick={this.generatePassword}>
                         <i className="link-operation-icon sf3-font sf3-font-magic"></i>
@@ -297,7 +298,7 @@ class LinkCreation extends React.Component {
                 </FormGroup>
                 <FormGroup>
                   <Label for="passwd-again">{gettext('Password again')}</Label>
-                  <Input id="passwd-again" style={{width: inputWidth}} type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+                  <Input id="passwd-again" style={{ width: inputWidth }} type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
                 </FormGroup>
               </div>
             }
diff --git a/frontend/src/components/share-link-panel/link-details.js b/frontend/src/components/share-link-panel/link-details.js
index 8082688d98..b72d126d50 100644
--- a/frontend/src/components/share-link-panel/link-details.js
+++ b/frontend/src/components/share-link-panel/link-details.js
@@ -63,15 +63,15 @@ class LinkDetails extends React.Component {
   };
 
   handleMouseOverExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: true});
+    this.setState({ isExpirationEditIconShow: true });
   };
 
   handleMouseOutExpirationEditIcon = () => {
-    this.setState({isExpirationEditIconShow: false});
+    this.setState({ isExpirationEditIconShow: false });
   };
 
   editingExpirationToggle = () => {
-    this.setState({isEditingExpiration: !this.state.isEditingExpiration});
+    this.setState({ isEditingExpiration: !this.state.isEditingExpiration });
   };
 
   setExpType = (e) => {
@@ -88,7 +88,7 @@ class LinkDetails extends React.Component {
 
   onExpireDaysChanged = (e) => {
     let day = e.target.value.trim();
-    this.setState({expireDays: day});
+    this.setState({ expireDays: day });
   };
 
   updateExpiration = () => {
@@ -112,11 +112,11 @@ class LinkDetails extends React.Component {
   };
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   changePerm = (permOption) => {
@@ -131,7 +131,7 @@ class LinkDetails extends React.Component {
   };
 
   toggleLinkDeleteDialog = () => {
-    this.setState({isLinkDeleteDialogOpen: !this.state.isLinkDeleteDialogOpen});
+    this.setState({ isLinkDeleteDialogOpen: !this.state.isLinkDeleteDialogOpen });
   };
 
   toggleSendLink = () => {
@@ -190,7 +190,7 @@ class LinkDetails extends React.Component {
               <dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
               <dd className="d-flex align-items-center">
                 <span className="mr-1">{this.state.storedPasswordVisible ? sharedLinkInfo.password : '***************'}</span>
-                <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '': '-slash'}`}></span>
+                <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '' : '-slash'}`}></span>
               </dd>
             </>
           )}
@@ -198,7 +198,7 @@ class LinkDetails extends React.Component {
             <>
               <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
               {!this.state.isEditingExpiration &&
-              <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
+              <dd style={{ width: '250px' }} onMouseEnter={this.handleMouseOverExpirationEditIcon} onMouseLeave={this.handleMouseOutExpirationEditIcon}>
                 {moment(sharedLinkInfo.expire_date).format('YYYY-MM-DD HH:mm:ss')}
                 {this.state.isExpirationEditIconShow && (
                   <a href="#"
@@ -237,7 +237,7 @@ class LinkDetails extends React.Component {
           {sharedLinkInfo.permissions && (
             <>
               <dt className="text-secondary font-weight-normal">{gettext('Permission:')}</dt>
-              <dd style={{width:'250px'}} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+              <dd style={{ width: '250px' }} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
                 <Selector
                   isDropdownToggleShown={isOpIconShown && !sharedLinkInfo.is_expired}
                   currentSelectedOption={currentSelectedPermOption}
diff --git a/frontend/src/components/share-link-panel/link-item.js b/frontend/src/components/share-link-panel/link-item.js
index 20edbcb1d1..f7b2786aac 100644
--- a/frontend/src/components/share-link-panel/link-item.js
+++ b/frontend/src/components/share-link-panel/link-item.js
@@ -9,7 +9,7 @@ import CommonOperationConfirmationDialog from '../../components/dialog/common-op
 
 const propTypes = {
   item: PropTypes.object.isRequired,
-  showLinkDetails : PropTypes.func.isRequired,
+  showLinkDetails: PropTypes.func.isRequired,
   toggleSelectLink: PropTypes.func.isRequired,
   deleteLink: PropTypes.func.isRequired
 };
@@ -48,7 +48,7 @@ class LinkItem extends React.Component {
   };
 
   toggleDeleteShareLinkDialog = () => {
-    this.setState({isDeleteShareLinkDialogOpen: !this.state.isDeleteShareLinkDialogOpen});
+    this.setState({ isDeleteShareLinkDialogOpen: !this.state.isDeleteShareLinkDialogOpen });
   };
 
   onCopyIconClicked = (e) => {
diff --git a/frontend/src/components/share-link-panel/link-list.js b/frontend/src/components/share-link-panel/link-list.js
index 8c04d7eba5..aa6abb0213 100644
--- a/frontend/src/components/share-link-panel/link-list.js
+++ b/frontend/src/components/share-link-panel/link-list.js
@@ -29,7 +29,7 @@ class LinkList extends React.Component {
   }
 
   toggleDeleteShareLinksDialog = () => {
-    this.setState({isDeleteShareLinksDialogOpen: !this.state.isDeleteShareLinksDialogOpen});
+    this.setState({ isDeleteShareLinksDialogOpen: !this.state.isDeleteShareLinksDialogOpen });
   };
 
   toggleSelectAllLinks = (e) => {
diff --git a/frontend/src/components/shared-file-view/shared-file-view.js b/frontend/src/components/shared-file-view/shared-file-view.js
index 563c14d724..a2b05ef764 100644
--- a/frontend/src/components/shared-file-view/shared-file-view.js
+++ b/frontend/src/components/shared-file-view/shared-file-view.js
@@ -66,11 +66,11 @@ class SharedFileView extends React.Component {
       });
     }
     if (!canDownload) {
-      document.addEventListener('contextmenu', function(e) {
+      document.addEventListener('contextmenu', function (e) {
         e.preventDefault();
         return false;
       });
-      document.addEventListener('keydown', function(e) {
+      document.addEventListener('keydown', function (e) {
         // prevent ctrl + s/p/a/c, i.e, 'save', 'print', 'select all', 'copy'
         // metaKey: for mac
         if ((e.ctrlKey || e.metaKey) && (e.which == 83 || e.which == 80 || e.which == 65 || e.which == 67)) {
diff --git a/frontend/src/components/shared-link-file-uploader/file-uploader.js b/frontend/src/components/shared-link-file-uploader/file-uploader.js
index 98417306bb..92aeb6c708 100644
--- a/frontend/src/components/shared-link-file-uploader/file-uploader.js
+++ b/frontend/src/components/shared-link-file-uploader/file-uploader.js
@@ -4,10 +4,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Resumablejs from '@seafile/resumablejs';
 import MD5 from 'MD5';
-import { resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
+import { gettext, resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { gettext } from '../../utils/constants';
 import UploadProgressDialog from './upload-progress-dialog';
 import toaster from '../toast';
 import '../../css/file-uploader.css';
@@ -15,7 +14,7 @@ import '../../css/file-uploader.css';
 const propTypes = {
   token: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
-  //direntList: PropTypes.array.isRequired,
+  // direntList: PropTypes.array.isRequired,
   filetypes: PropTypes.array,
   chunkSize: PropTypes.number,
   withCredentials: PropTypes.bool,
@@ -79,7 +78,7 @@ class FileUploader extends React.Component {
 
     this.resumable.assignBrowse(this.uploadInput.current, true);
 
-    //Enable or Disable DragAnd Drop
+    // Enable or Disable DragAnd Drop
     if (this.props.dragAndDrop === true) {
       this.resumable.enableDropOnDocument();
     }
@@ -151,26 +150,26 @@ class FileUploader extends React.Component {
   maxFileSizeErrorCallback = (file) => {
     let { forbidUploadFileList } = this.state;
     forbidUploadFileList.push(file);
-    this.setState({forbidUploadFileList: forbidUploadFileList});
+    this.setState({ forbidUploadFileList: forbidUploadFileList });
   };
 
   onChunkingComplete = (resumableFile) => {
 
-    //get parent_dir relative_path
+    // get parent_dir relative_path
     let path = this.props.path === '/' ? '/' : this.props.path + '/';
     let fileName = resumableFile.fileName;
     let relativePath = resumableFile.relativePath;
     let isFile = fileName === relativePath;
 
-    //update formdata
+    // update formdata
     resumableFile.formData = {};
     if (isFile) { // upload file
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
       };
     } else { // upload folder
       let relative_path = relativePath.slice(0, relativePath.lastIndexOf('/') + 1);
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
         relative_path: relative_path
       };
@@ -307,7 +306,7 @@ class FileUploader extends React.Component {
 
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
-    this.setState({totalProgress: progress});
+    this.setState({ totalProgress: progress });
     Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
   };
 
@@ -390,7 +389,7 @@ class FileUploader extends React.Component {
       }
       return item;
     });
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   onFileError = (resumableFile, message) => {
@@ -400,7 +399,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage);
+      errorMessage = JSON.parse(errorMessage);
       error = errorMessage.error;
       if (error === 'File locked by others.') {
         error = gettext('File is locked by others.');
@@ -418,7 +417,7 @@ class FileUploader extends React.Component {
       return item;
     });
 
-    this.loaded = 0;  // reset loaded data;
+    this.loaded = 0; // reset loaded data;
     this.setState({
       retryFileList: this.state.retryFileList,
       uploadFileList: uploadFileList
@@ -481,7 +480,7 @@ class FileUploader extends React.Component {
   };
 
   generateUniqueIdentifier = (file) => {
-    let relativePath = file.webkitRelativePath||file.relativePath||file.fileName||file.name;
+    let relativePath = file.webkitRelativePath || file.relativePath || file.fileName || file.name;
     return MD5(relativePath + new Date()) + relativePath;
   };
 
@@ -510,7 +509,7 @@ class FileUploader extends React.Component {
     this.resumable.files = [];
     // reset upload link loaded
     this.isUploadLinkLoaded = false;
-    this.setState({isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: []});
+    this.setState({ isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: [] });
     Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
   };
 
@@ -531,7 +530,7 @@ class FileUploader extends React.Component {
       this.loaded = 0;
     }
 
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   onCancelAllUploading = () => {
@@ -655,8 +654,8 @@ class FileUploader extends React.Component {
   };
 
   cancelFileUpload = () => {
-    this.resumable.files.pop(); //delete latest file；
-    this.setState({isUploadRemindDialogShow: false});
+    this.resumable.files.pop(); // delete latest file；
+    this.setState({ isUploadRemindDialogShow: false });
   };
 
   render() {
diff --git a/frontend/src/components/shared-link-file-uploader/upload-list-item.js b/frontend/src/components/shared-link-file-uploader/upload-list-item.js
index 1d712651a9..fda9919772 100644
--- a/frontend/src/components/shared-link-file-uploader/upload-list-item.js
+++ b/frontend/src/components/shared-link-file-uploader/upload-list-item.js
@@ -39,7 +39,7 @@ class UploadListItem extends React.Component {
       }
     }
 
-    this.setState({uploadState: uploadState});
+    this.setState({ uploadState: uploadState });
   }
 
   onUploadCancel = (e) => {
@@ -89,7 +89,7 @@ class UploadListItem extends React.Component {
                   {resumableFile.isUploading() && (
                     <div className="progress-container">
                       <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>
                       {(resumableFile.remainingTime === -1) && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
                       {(resumableFile.remainingTime > 0) && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
@@ -99,7 +99,7 @@ class UploadListItem extends React.Component {
                   {!resumableFile.isUploading() && (
                     <div className="progress-container d-flex align-items-center">
                       <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>
                     </div>
                   )}
@@ -109,7 +109,7 @@ class UploadListItem extends React.Component {
                 <>
                   <div className="progress-container d-flex align-items-center">
                     <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>
                   </div>
                   {this.state.uploadState === UPLOAD_UPLOADING && (
@@ -134,7 +134,7 @@ class UploadListItem extends React.Component {
           {this.state.uploadState === UPLOAD_ERROR && (
             <div className="d-flex align-items-center">
               <span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
-              <span className="upload-failure-msg" dangerouslySetInnerHTML={{__html: error}}></span>
+              <span className="upload-failure-msg" dangerouslySetInnerHTML={{ __html: error }}></span>
             </div>
           )}
         </td>
diff --git a/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js b/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
index 6cf974c410..073459a558 100644
--- a/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
+++ b/frontend/src/components/shared-link-file-uploader/upload-progress-dialog.js
@@ -16,7 +16,7 @@ const propTypes = {
   onUploadCancel: PropTypes.func.isRequired,
   onUploadRetry: PropTypes.func.isRequired,
   onUploadRetryAll: PropTypes.func.isRequired,
-  isUploading : PropTypes.bool.isRequired
+  isUploading: PropTypes.bool.isRequired
 };
 
 class UploadProgressDialog extends React.Component {
@@ -34,7 +34,7 @@ class UploadProgressDialog extends React.Component {
 
   onMinimizeUpload = (e) => {
     e.nativeEvent.stopImmediatePropagation();
-    this.setState({isMinimized: !this.state.isMinimized});
+    this.setState({ isMinimized: !this.state.isMinimized });
   };
 
   onCloseUpload = (e) => {
@@ -59,7 +59,7 @@ class UploadProgressDialog extends React.Component {
     }
 
     return (
-      <div className="uploader-list-view mw-100" style={{height: this.state.isMinimized ? document.querySelector('.uploader-list-header').offsetHeight : '20rem'}}>
+      <div className="uploader-list-view mw-100" style={{ height: this.state.isMinimized ? document.querySelector('.uploader-list-header').offsetHeight : '20rem' }}>
         <div className="uploader-list-header flex-shrink-0">
           <div>
             {isUploading ? (
@@ -67,7 +67,7 @@ class UploadProgressDialog extends React.Component {
                 <span>{gettext('File Uploading...')}</span>
                 <span className="ml-2">{`${totalProgress}% (${Utils.formatBitRate(uploadBitrate)})`}</span>
                 <div className="progress">
-                  <div className="progress-bar" role="progressbar" style={{width: `${totalProgress}%`}} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
+                  <div className="progress-bar" role="progressbar" style={{ width: `${totalProgress}%` }} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
                 </div>
               </>
             ) : (
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 d84d3cee4e..053fc474f1 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
@@ -101,12 +101,12 @@ class SharedRepoListItem extends React.Component {
   toggleOperationMenu = (e) => {
     let dataset = e.target ? e.target.dataset : null;
     if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
-      this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+      this.setState({ isItemMenuShow: !this.state.isItemMenuShow });
       return;
     }
 
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
+      { isItemMenuShow: !this.state.isItemMenuShow },
       () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
@@ -159,7 +159,7 @@ class SharedRepoListItem extends React.Component {
 
   onMenuItemClick = (e) => {
     let operation = e.target.dataset.toggle;
-    switch(operation) {
+    switch (operation) {
       case 'Rename':
         this.onItemRenameToggle();
         break;
@@ -238,20 +238,20 @@ class SharedRepoListItem extends React.Component {
 
   onRenameCancel = () => {
     this.props.onUnfreezedItem();
-    this.setState({isRenaming: !this.state.isRenaming});
+    this.setState({ isRenaming: !this.state.isRenaming });
   };
 
   onItemFolderPermissionToggle = () => {
-    this.setState({isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen});
+    this.setState({ isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen });
   };
 
   onHistorySettingToggle = () => {
-    this.setState({isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow});
+    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
   };
 
   onItemShare = (e) => {
     e.preventDefault();
-    this.setState({isShowSharedDialog: true});
+    this.setState({ isShowSharedDialog: true });
   };
 
   onItemUnshare = (e) => {
@@ -261,12 +261,12 @@ class SharedRepoListItem extends React.Component {
 
   onItemDeleteToggle = (e) => {
     e.preventDefault();
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+    this.setState({ isDeleteDialogShow: !this.state.isDeleteDialogShow });
   };
 
   onItemDelete = () => {
     const { currentGroup, repo } = this.props;
-    if (!currentGroup) {  // repo can not be deleted in share all module
+    if (!currentGroup) { // repo can not be deleted in share all module
       return;
     }
 
@@ -291,41 +291,41 @@ class SharedRepoListItem extends React.Component {
       }
       toaster.danger(errMessage);
 
-      this.setState({isRepoDeleted: false});
+      this.setState({ isRepoDeleted: false });
     });
   };
 
   toggleShareDialog = () => {
-    this.setState({isShowSharedDialog: false});
+    this.setState({ isShowSharedDialog: false });
   };
 
   toggleRepoShareAdminDialog = () => {
-    this.setState({isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen});
+    this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
   toggleOldFilesAutoDelDialog = () => {
-    this.setState({isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen});
+    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
   };
 
   onSeaTableIntegrationToggle = () => {
-    this.setState({isSeaTableIntegrationShow: !this.state.isSeaTableIntegrationShow});
+    this.setState({ isSeaTableIntegrationShow: !this.state.isSeaTableIntegrationShow });
   };
 
   onAPITokenToggle = () => {
-    this.setState({isAPITokenDialogShow: !this.state.isAPITokenDialogShow});
+    this.setState({ isAPITokenDialogShow: !this.state.isAPITokenDialogShow });
   };
 
   onChangePasswordToggle = () => {
-    this.setState({isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow});
+    this.setState({ isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow });
   };
 
   onResetPasswordToggle = () => {
-    this.setState({isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow});
+    this.setState({ isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow });
   };
 
   translateMenuItem = (menuItem) => {
     let translateResult = '';
-    switch(menuItem) {
+    switch (menuItem) {
       case 'Rename':
         translateResult = gettext('Rename');
         break;
@@ -388,8 +388,8 @@ class SharedRepoListItem extends React.Component {
 
   generatorOperations = () => {
     let { repo, currentGroup } = this.props;
-    //todo this have a bug; use current api is not return admins param;
-    let isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1; //for group repolist;
+    // todo this have a bug; use current api is not return admins param;
+    let isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1; // for group repolist;
     let isRepoOwner = repo.owner_email === username;
     let isAdmin = repo.is_admin;
     let operations = [];
@@ -475,7 +475,7 @@ class SharedRepoListItem extends React.Component {
           aria-expanded={this.state.isItemMenuShow}
           onClick={this.clickOperationMenuToggle}
         />
-        <div className={`${this.state.isItemMenuShow?'':'d-none'}`} onClick={this.toggleOperationMenu}>
+        <div className={`${this.state.isItemMenuShow ? '' : 'd-none'}`} onClick={this.toggleOperationMenu}>
           <div className="mobile-operation-menu-bg-layer"></div>
           <div className="mobile-operation-menu">
             {operations.map((item, index) => {
@@ -520,12 +520,12 @@ class SharedRepoListItem extends React.Component {
               data-toggle="dropdown"
               aria-expanded={this.state.isItemMenuShow}
               aria-haspopup={true}
-              style={{'minWidth': '0'}}
+              style={{ 'minWidth': '0' }}
               onClick={this.clickOperationMenuToggle}
               onKeyDown={this.onDropdownToggleKeyDown}
             />
             <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
-              {operations.map((item, index)=> {
+              {operations.map((item, index) => {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
                 } else if (item == 'Advanced') {
@@ -546,7 +546,7 @@ class SharedRepoListItem extends React.Component {
                         <i className="sf3-font-down sf3-font rotate-270"></i>
                       </DropdownToggle>
                       <DropdownMenu>
-                        {advancedOperations.map((item, index)=> {
+                        {advancedOperations.map((item, index) => {
                           return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateMenuItem(item)}</DropdownItem>);
                         })}
                       </DropdownMenu>
@@ -583,7 +583,7 @@ class SharedRepoListItem extends React.Component {
                       data-toggle="dropdown"
                       aria-expanded={this.state.isItemMenuShow}
                       aria-haspopup={true}
-                      style={{'minWidth': '0'}}
+                      style={{ 'minWidth': '0' }}
                       onClick={this.clickOperationMenuToggle}
                       onKeyDown={this.onDropdownToggleKeyDown}
                     />
@@ -609,7 +609,7 @@ class SharedRepoListItem extends React.Component {
     const { repo_name: repoName } = this.props.repo;
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully unstarred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -619,7 +619,7 @@ class SharedRepoListItem extends React.Component {
       });
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully starred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -713,7 +713,7 @@ class SharedRepoListItem extends React.Component {
     this.repoURL = libPath;
     return (
       <Fragment>
-        <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
           <td onClick={this.visitRepo}><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
           <td onClick={this.visitRepo}>
             {this.state.isRenaming ?
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 bc4fe7e808..e440e8742d 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
@@ -64,11 +64,11 @@ class SharedRepoListView extends React.Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onItemRename = (repo, newName) => {
diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js
index c8d0ced9dd..d1b0a5e596 100644
--- a/frontend/src/components/side-panel.js
+++ b/frontend/src/components/side-panel.js
@@ -23,7 +23,7 @@ class SidePanel extends React.Component {
     const { children, isSidePanelFolded, style } = this.props;
     return (
       <div
-        className={classnames('side-panel', {'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed})}
+        className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })}
         style={isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : style}
       >
         <MediaQuery query="(max-width: 767.8px)">
diff --git a/frontend/src/components/subscription.js b/frontend/src/components/subscription.js
index 91724ba9b9..98fcba86a6 100644
--- a/frontend/src/components/subscription.js
+++ b/frontend/src/components/subscription.js
@@ -33,14 +33,14 @@ class Plans extends Component {
   }
 
   togglePlan = (plan) => {
-    this.setState({currentPlan: plan}, () => {
+    this.setState({ currentPlan: plan }, () => {
     });
   };
 
   onPay = () => {
     let { paymentType } = this.props;
     let { currentPlan, assetQuotaUnitCount, count } = this.state;
-    let totalAmount, assetQuota, newUserCount;
+    let totalAmount; let assetQuota; let newUserCount;
 
     // parse
     if (paymentType === 'paid') {
@@ -75,7 +75,7 @@ class Plans extends Component {
     } else if (count > 9999) {
       count = 9999;
     }
-    this.setState({count: count});
+    this.setState({ count: count });
   };
 
   onAssetQuotaUnitCountInputChange = (e) => {
@@ -89,7 +89,7 @@ class Plans extends Component {
     } else if (count > 9999) {
       count = 9999;
     }
-    this.setState({assetQuotaUnitCount: count});
+    this.setState({ assetQuotaUnitCount: count });
   };
 
   renderPaidOrExtendTime = () => {
@@ -158,7 +158,7 @@ class Plans extends Component {
               <span className='order-into'>{'实际支付金额'}</span>
               <span className='order-price'>
                 {originalTotalAmount !== totalAmount &&
-                  <span style={{fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a'}}>{'￥' + originalTotalAmount}</span>
+                  <span style={{ fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a' }}>{'￥' + originalTotalAmount}</span>
                 }
                 <span>{'￥' + totalAmount + ' '}</span>
               </span>
@@ -182,7 +182,7 @@ class Plans extends Component {
         <span className='py-2 mb-0 text-orange font-500 text-center'>
           {'¥ '}<span className="price-version-plan-price">{currentPlan.price}</span>{' ' + currentPlan.description}
         </span>
-        <InputGroup style={{marginBottom: '5px'}} className='user-numbers'>
+        <InputGroup style={{ marginBottom: '5px' }} className='user-numbers'>
           <InputGroupAddon addonType="prepend">
             <InputGroupText>{operationIntro}</InputGroupText>
           </InputGroupAddon>
@@ -201,7 +201,7 @@ class Plans extends Component {
         <span className='py-2 text-orange mb-0 font-500 price-version-plan-whole-price text-center'>
           {'总价 ¥ ' + totalAmount}
           {originalTotalAmount !== totalAmount &&
-            <span style={{fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a'}}>{' ￥' + originalTotalAmount}</span>
+            <span style={{ fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a' }}>{' ￥' + originalTotalAmount}</span>
           }
         </span>
         <span className='py-2 mb-0 text-lg-size font-500 price-version-plan-valid-day text-center'>{'有效期至 ' + currentPlan.new_term_end}</span>
@@ -223,7 +223,7 @@ class Plans extends Component {
         <span className='py-2 mb-0 text-orange font-500 text-center'>
           {'¥ '}<span className="price-version-plan-price">{currentPlan.asset_quota_price}</span>{' ' + currentPlan.asset_quota_description}
         </span>
-        <InputGroup style={{marginBottom: '5px'}} className='space-quota'>
+        <InputGroup style={{ marginBottom: '5px' }} className='space-quota'>
           <InputGroupAddon addonType="prepend">
             <InputGroupText><span className="font-500">{operationIntro}</span></InputGroupText>
           </InputGroupAddon>
@@ -245,7 +245,7 @@ class Plans extends Component {
         <span className='py-4 text-orange mb-0 font-500 price-version-plan-whole-price text-center'>
           {'总价 ¥ ' + totalAmount}
           {originalTotalAmount !== totalAmount &&
-            <span style={{fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a'}}>{' ￥' + originalTotalAmount}</span>
+            <span style={{ fontSize: 'small', textDecoration: 'line-through', color: '#9a9a9a' }}>{' ￥' + originalTotalAmount}</span>
           }
         </span>
         <span className='py-2 mb-0 text-lg-size font-500 price-version-plan-valid-day text-center'>{'有效期至 ' + currentPlan.new_term_end}</span>
@@ -263,7 +263,7 @@ class Plans extends Component {
       return this.renderAddUser();
     } else if (paymentType === 'buy_quota') {
       return this.renderBuyQuota();
-    }  else {
+    } else {
       toaster.danger(gettext('Internal Server Error.'));
       return;
     }
@@ -333,7 +333,7 @@ class PlansDialog extends Component {
     const { isLoading, isWaiting, planList } = this.state;
     const { toggleDialog, paymentTypeTrans, paymentType } = this.props;
     const modalStyle = (paymentType === 'paid' || paymentType === 'extend_time') ?
-      {width: '560px', maxWidth: '560px'} : {width: '560px'};
+      { width: '560px', maxWidth: '560px' } : { width: '560px' };
 
     if (isLoading) {
       return (
@@ -494,7 +494,8 @@ class Subscription extends Component {
                 key={index}
                 className="btn btn-outline-primary mr-4"
                 onClick={this.togglePaymentType.bind(this, item)}
-              >{name}</button>
+              >{name}
+              </button>
             );
           })}
           {!this.state.subscription &&
diff --git a/frontend/src/components/system-notification.js b/frontend/src/components/system-notification.js
index bf982a8acf..9b1a66283b 100644
--- a/frontend/src/components/system-notification.js
+++ b/frontend/src/components/system-notification.js
@@ -13,14 +13,14 @@ class SystemNotification extends React.Component {
   }
 
   close = () => {
-    this.setState({isClosed: true});
+    this.setState({ isClosed: true });
 
     if (navigator.cookieEnabled) {
-      let date = new Date(),
-        cookies = document.cookie.split('; '),
-        infoIDExist = false,
-        newInfoID = curNoteID + '_';
-      date.setTime(date.getTime() + 14*24*60*60*1000);
+      let date = new Date();
+      let cookies = document.cookie.split('; ');
+      let infoIDExist = false;
+      let newInfoID = curNoteID + '_';
+      date.setTime(date.getTime() + 14 * 24 * 60 * 60 * 1000);
       newInfoID += '; expires=' + date.toGMTString() + '; path=' + siteRoot;
       for (var i = 0, len = cookies.length; i < len; i++) {
         if (cookies[i].split('=')[0] == 'info_id') {
@@ -42,7 +42,7 @@ class SystemNotification extends React.Component {
 
     return (
       <div id="info-bar" className="d-flex justify-content-between">
-        <p id="info-bar-info" className="m-0" dangerouslySetInnerHTML={{__html: curNoteMsg}}></p>
+        <p id="info-bar-info" className="m-0" dangerouslySetInnerHTML={{ __html: curNoteMsg }}></p>
         <button className="close sf2-icon-x1" title={gettext('Close')} aria-label={gettext('Close')} onClick={this.close}></button>
       </div>
     );
diff --git a/frontend/src/components/terms-preview-widget.js b/frontend/src/components/terms-preview-widget.js
index e7b6848c05..1459df4900 100644
--- a/frontend/src/components/terms-preview-widget.js
+++ b/frontend/src/components/terms-preview-widget.js
@@ -54,7 +54,7 @@ class TermsPreviewWidget extends React.Component {
 
     return (
       <div className="conditions-preview-container" onClick={this.props.onContentClick}>
-        <div dangerouslySetInnerHTML={{__html: this.state.innerHtml}}></div>
+        <div dangerouslySetInnerHTML={{ __html: this.state.innerHtml }}></div>
       </div>
     );
   }
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 1a77a3e569..3f429abb55 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -42,11 +42,11 @@ class DirOperationToolbar extends React.Component {
   }
 
   toggleDesktopOpMenu = () => {
-    this.setState({isDesktopMenuOpen: !this.state.isDesktopMenuOpen});
+    this.setState({ isDesktopMenuOpen: !this.state.isDesktopMenuOpen });
   };
 
   toggleMobileOpMenu = () => {
-    this.setState({isMobileOpMenuOpen: !this.state.isMobileOpMenuOpen});
+    this.setState({ isMobileOpMenuOpen: !this.state.isMobileOpMenuOpen });
   };
 
   onUploadFile = (e) => {
@@ -64,7 +64,7 @@ class DirOperationToolbar extends React.Component {
   };
 
   onCreateFolderToggle = () => {
-    this.setState({isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow});
+    this.setState({ isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow });
   };
 
   onCreateFileToggle = () => {
@@ -110,7 +110,7 @@ class DirOperationToolbar extends React.Component {
   };
 
   onAddFolder = (dirPath) => {
-    this.setState({isCreateFolderDialogShow: false});
+    this.setState({ isCreateFolderDialogShow: false });
     this.props.onAddFolder(dirPath);
   };
 
@@ -181,8 +181,8 @@ class DirOperationToolbar extends React.Component {
             'icon': 'upload-files',
             'text': gettext('Upload'),
             subOpList: [
-              {'text': gettext('Upload Files'), 'onClick': this.onUploadFile},
-              {'text': gettext('Upload Folder'), 'onClick': this.onUploadFolder}
+              { 'text': gettext('Upload Files'), 'onClick': this.onUploadFile },
+              { 'text': gettext('Upload Folder'), 'onClick': this.onUploadFolder }
             ]
           });
         } else {
@@ -196,16 +196,16 @@ class DirOperationToolbar extends React.Component {
 
       if (canCreate) {
         let newSubOpList = [
-          {'text': gettext('New Folder'), 'onClick': this.onCreateFolderToggle},
-          {'text': gettext('New File'), 'onClick': this.onCreateFileToggle},
+          { 'text': gettext('New Folder'), 'onClick': this.onCreateFolderToggle },
+          { 'text': gettext('New File'), 'onClick': this.onCreateFileToggle },
           'Divider',
-          {'text': gettext('New Markdown File'), 'onClick': this.onCreateMarkdownToggle},
-          {'text': gettext('New Excel File'), 'onClick': this.onCreateExcelToggle},
-          {'text': gettext('New PowerPoint File'), 'onClick': this.onCreatePPTToggle},
-          {'text': gettext('New Word File'), 'onClick': this.onCreateWordToggle}
+          { 'text': gettext('New Markdown File'), 'onClick': this.onCreateMarkdownToggle },
+          { 'text': gettext('New Excel File'), 'onClick': this.onCreateExcelToggle },
+          { 'text': gettext('New PowerPoint File'), 'onClick': this.onCreatePPTToggle },
+          { 'text': gettext('New Word File'), 'onClick': this.onCreateWordToggle }
         ];
         if (enableSeadoc && !repoEncrypted) {
-          newSubOpList.push({'text': gettext('New SeaDoc File'), 'onClick': this.onCreateSeaDocToggle});
+          newSubOpList.push({ 'text': gettext('New SeaDoc File'), 'onClick': this.onCreateSeaDocToggle });
         }
         opList.push({
           'icon': 'new',
@@ -237,7 +237,7 @@ class DirOperationToolbar extends React.Component {
               <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
             </DropdownToggle>
             <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
-              {opList.map((item, index)=> {
+              {opList.map((item, index) => {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
                 } else if (item.subOpList) {
@@ -260,7 +260,7 @@ class DirOperationToolbar extends React.Component {
                         <i className="sf3-font-down sf3-font rotate-270"></i>
                       </DropdownToggle>
                       <DropdownMenu>
-                        {item.subOpList.map((item, index)=> {
+                        {item.subOpList.map((item, index) => {
                           if (item == 'Divider') {
                             return <DropdownItem key={index} divider />;
                           } else {
diff --git a/frontend/src/components/toolbar/selected-dirents-toolbar.js b/frontend/src/components/toolbar/selected-dirents-toolbar.js
index af5affa6b7..5e8fed8db8 100644
--- a/frontend/src/components/toolbar/selected-dirents-toolbar.js
+++ b/frontend/src/components/toolbar/selected-dirents-toolbar.js
@@ -60,11 +60,11 @@ class MultipleDirOperationToolbar extends React.Component {
   }
 
   onMoveToggle = () => {
-    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
+    this.setState({ isMoveDialogShow: !this.state.isMoveDialogShow });
   };
 
   onCopyToggle = () => {
-    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
+    this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
   onItemsDelete = () => {
@@ -76,8 +76,8 @@ class MultipleDirOperationToolbar extends React.Component {
     if (selectedDirentList.length) {
       if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
         let direntPath = Utils.joinPath(path, selectedDirentList[0].name);
-        let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
-        location.href= url;
+        let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
+        location.href = url;
         return;
       }
       if (!useGoFileserver) {
diff --git a/frontend/src/components/toolbar/single-dropdown-toolbar.js b/frontend/src/components/toolbar/single-dropdown-toolbar.js
index 3850ff0275..3b5bdbd795 100644
--- a/frontend/src/components/toolbar/single-dropdown-toolbar.js
+++ b/frontend/src/components/toolbar/single-dropdown-toolbar.js
@@ -16,7 +16,7 @@ class SingleDropdownToolbar extends React.Component {
   }
 
   toggleDropdownMenu = () => {
-    this.setState({isDropdownMenuOpen: !this.state.isDropdownMenuOpen});
+    this.setState({ isDropdownMenuOpen: !this.state.isDropdownMenuOpen });
   };
 
   onDropdownToggleKeyDown = (e) => {
@@ -47,7 +47,7 @@ class SingleDropdownToolbar extends React.Component {
           >
           </DropdownToggle>
           <DropdownMenu>
-            {opList.map((item, index)=> {
+            {opList.map((item, index) => {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
               } else {
diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
index 0d1b650659..d51ec6e172 100644
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -36,7 +36,7 @@ class ViewFileToolbar extends React.Component {
   }
 
   toggleDropdownMenu = () => {
-    this.setState({isDropdownMenuOpen: !this.state.isDropdownMenuOpen});
+    this.setState({ isDropdownMenuOpen: !this.state.isDropdownMenuOpen });
   };
 
   onDropdownToggleKeyDown = (e) => {
@@ -56,7 +56,7 @@ class ViewFileToolbar extends React.Component {
   toggleSubMenu = (e) => {
     e.stopPropagation();
     this.setState({
-      isSubMenuShown: !this.state.isSubMenuShown}, () => {
+      isSubMenuShown: !this.state.isSubMenuShown }, () => {
       this.toggleDropdownMenu();
     });
   };
@@ -82,15 +82,15 @@ class ViewFileToolbar extends React.Component {
   };
 
   toggleMore = () => {
-    this.setState({isMoreMenuShow: !this.state.isMoreMenuShow});
+    this.setState({ isMoreMenuShow: !this.state.isMoreMenuShow });
   };
 
   onShareToggle = () => {
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   onEditFileTagToggle = () => {
-    this.setState({isEditTagDialogShow: !this.state.isEditTagDialogShow});
+    this.setState({ isEditTagDialogShow: !this.state.isEditTagDialogShow });
   };
 
   onHistoryClick = () => {
@@ -138,8 +138,8 @@ class ViewFileToolbar extends React.Component {
       }
 
       opList.push(
-        {'icon': 'tag', 'text': gettext('Tags'), 'onClick': this.onEditFileTagToggle},
-        {'icon': 'history', 'text': gettext('History'), 'onClick': this.onHistoryClick}
+        { 'icon': 'tag', 'text': gettext('Tags'), 'onClick': this.onEditFileTagToggle },
+        { 'icon': 'history', 'text': gettext('History'), 'onClick': this.onHistoryClick }
       );
     }
 
@@ -159,7 +159,7 @@ class ViewFileToolbar extends React.Component {
             <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
           <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
-            {opList.map((item, index)=> {
+            {opList.map((item, index) => {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
               } else if (item.subOpList) {
@@ -181,7 +181,7 @@ class ViewFileToolbar extends React.Component {
                       <i className="sf3-font-down sf3-font rotate-270"></i>
                     </DropdownToggle>
                     <DropdownMenu>
-                      {item.subOpList.map((item, index)=> {
+                      {item.subOpList.map((item, index) => {
                         if (item == 'Divider') {
                           return <DropdownItem key={index} divider />;
                         } else {
diff --git a/frontend/src/components/tree-section/index.js b/frontend/src/components/tree-section/index.js
index 46c85e463c..40f8724f1c 100644
--- a/frontend/src/components/tree-section/index.js
+++ b/frontend/src/components/tree-section/index.js
@@ -44,9 +44,9 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl
   }, []);
 
   return (
-    <div className={classnames('tree-section', {[className]: className})}>
+    <div className={classnames('tree-section', { [className]: className })}>
       <div
-        className={classnames('tree-section-header', {'tree-section-header-hover': highlight})}
+        className={classnames('tree-section-header', { 'tree-section-header-hover': highlight })}
         onMouseEnter={onMouseEnter}
         onMouseOver={onMouseOver}
         onMouseLeave={onMouseLeave}
diff --git a/frontend/src/components/tree-view/tree-helper.js b/frontend/src/components/tree-view/tree-helper.js
index 502d6436b7..7272fa9767 100644
--- a/frontend/src/components/tree-view/tree-helper.js
+++ b/frontend/src/components/tree-view/tree-helper.js
@@ -5,7 +5,7 @@ import Dirent from '../../models/dirent';
 
 class TreeHelper {
 
-  expandNode(tree, node) {  // This tree has been cloned
+  expandNode(tree, node) { // This tree has been cloned
     tree.expandNode(node);
   }
 
@@ -79,7 +79,7 @@ class TreeHelper {
     let treeCopy = tree.clone();
     let node = treeCopy.getNodeByPath(nodePath);
     let destNode = treeCopy.getNodeByPath(destPath);
-    if (destNode && node) {        // node has loaded
+    if (destNode && node) { // node has loaded
       node.object.name = nodeName; // need not update path
       treeCopy.moveNode(node, destNode);
     }
@@ -98,7 +98,7 @@ class TreeHelper {
         treeCopy.moveNode(node, destNode);
       });
     } else {
-      nodePaths.forEach(nodePath=> {
+      nodePaths.forEach(nodePath => {
         let node = treeCopy.getNodeByPath(nodePath);
         treeCopy.delete(node);
       });
@@ -111,8 +111,8 @@ class TreeHelper {
     let destNode = treeCopy.getNodeByPath(destPath);
     let treeNode = treeCopy.getNodeByPath(nodePath);
     if (destNode) {
-      let node = treeNode.clone();  // need a dup
-      node.object.name = nodeName;  // need not update path
+      let node = treeNode.clone(); // need a dup
+      node.object.name = nodeName; // need not update path
       treeCopy.copyNode(node, destNode);
     }
     return treeCopy;
@@ -132,8 +132,8 @@ class TreeHelper {
 
   buildTree() {
     let tree = new Tree();
-    let object = new Dirent({name: '/'});
-    let root = new TreeNode({object, isLoaded: false, isExpanded: true});
+    let object = new Dirent({ name: '/' });
+    let root = new TreeNode({ object, isLoaded: false, isExpanded: true });
     tree.setRoot(root);
     return tree;
   }
diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js
index 122e232152..e4c34d7312 100644
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -25,7 +25,7 @@ const propTypes = {
   onNodeDrop: PropTypes.func,
   handleContextClick: PropTypes.func.isRequired,
   onNodeDragEnter: PropTypes.func.isRequired,
-  onNodeDragLeave:PropTypes.func.isRequired,
+  onNodeDragLeave: PropTypes.func.isRequired,
 };
 
 class TreeNodeView extends React.Component {
@@ -119,7 +119,7 @@ class TreeNodeView extends React.Component {
       return false;
     }
     if (this.props.node.object.type === 'dir') {
-      this.setState({isNodeDropShow: true});
+      this.setState({ isNodeDropShow: true });
     }
     this.props.onNodeDragEnter(e, this.props.node);
   };
@@ -135,7 +135,7 @@ class TreeNodeView extends React.Component {
     if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
-    this.setState({isNodeDropShow: false});
+    this.setState({ isNodeDropShow: false });
     this.props.onNodeDragLeave(e, this.props.node);
   };
 
@@ -144,12 +144,12 @@ class TreeNodeView extends React.Component {
       return false;
     }
     e.stopPropagation();
-    this.setState({isNodeDropShow: false});
+    this.setState({ isNodeDropShow: false });
     this.props.onNodeDrop(e, this.props.node);
   };
 
   unfreezeItem = () => {
-    this.setState({isShowOperationMenu: false});
+    this.setState({ isShowOperationMenu: false });
     this.props.unfreezeItem();
   };
 
@@ -170,7 +170,7 @@ class TreeNodeView extends React.Component {
 
   handleContextClick = (event) => {
     this.props.handleContextClick(event, this.props.node);
-    this.setState({isShowOperationMenu: false});
+    this.setState({ isShowOperationMenu: false });
   };
 
   getNodeTypeAndIcon = () => {
@@ -201,11 +201,11 @@ class TreeNodeView extends React.Component {
         }
       }
     }
-    return {icon, type};
+    return { icon, type };
   };
 
   calculateMenuList = (node) => {
-    let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} =  TextTranslation;
+    let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT } = TextTranslation;
 
     let menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
     if (node.object.type === 'dir') {
@@ -284,7 +284,7 @@ class TreeNodeView extends React.Component {
       <div className="tree-node">
         <div
           type={type}
-          className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}
+          className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/' ? 'hide' : ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}
           title={node.object.name}
           onMouseEnter={this.onMouseEnter}
           onMouseOver={this.onMouseOver}
@@ -301,15 +301,17 @@ class TreeNodeView extends React.Component {
             onDragLeave={this.onNodeDragLeave}
             onDragOver={this.onNodeDragMove}
             onDrop={this.onNodeDrop}
-            style={{paddingLeft: leftIndent + 5}}
-          >{node.object.name}</div>
-          <div className="left-icon" style={{left: leftIndent - 40}}>
+            style={{ paddingLeft: leftIndent + 5 }}
+          >{node.object.name}
+          </div>
+          <div className="left-icon" style={{ left: leftIndent - 40 }}>
             {type === 'dir' && (!node.isLoaded || (node.isLoaded && node.hasChildren())) && (
               <i
                 className={`folder-toggle-icon sf3-font sf3-font-down ${node.isExpanded ? '' : 'rotate-270'}`}
                 onMouseDown={e => e.stopPropagation()}
                 onClick={this.onLoadToggle}
-              ></i>
+              >
+              </i>
             )}
             <i className="tree-node-icon">{icon}</i>
           </div>
diff --git a/frontend/src/components/tree-view/tree-node.js b/frontend/src/components/tree-view/tree-node.js
index 97a559885c..5810e5fa0e 100644
--- a/frontend/src/components/tree-view/tree-node.js
+++ b/frontend/src/components/tree-view/tree-node.js
@@ -1,7 +1,7 @@
 class TreeNode {
 
   constructor({ path, object, isLoaded, isPreload, isExpanded, parentNode }) {
-    this.path = path || object.name;  // The default setting is the object name, which is set to a relative path when the father is set.
+    this.path = path || object.name; // The default setting is the object name, which is set to a relative path when the father is set.
     this.object = object;
     this.isLoaded = isLoaded || false;
     this.isPreload = isPreload || false;
@@ -30,7 +30,7 @@ class TreeNode {
   setParent(parentNode) {
     this.path = this.generatePath(parentNode);
     this.parentNode = parentNode;
-    this.isLoaded = false;  // update parentNode need loaded data again;
+    this.isLoaded = false; // update parentNode need loaded data again;
   }
 
   hasChildren() {
diff --git a/frontend/src/components/tree-view/tree-view.js b/frontend/src/components/tree-view/tree-view.js
index 33619f7c32..3d39e6a4fa 100644
--- a/frontend/src/components/tree-view/tree-view.js
+++ b/frontend/src/components/tree-view/tree-view.js
@@ -52,7 +52,7 @@ class TreeView extends React.Component {
     if (Utils.isIEBrower()) {
       return false;
     }
-    let dragStartNodeData = {nodeDirent: node.object, nodeParentPath: node.parentNode.path, nodeRootPath: node.path};
+    let dragStartNodeData = { nodeDirent: node.object, nodeParentPath: node.parentNode.path, nodeRootPath: node.path };
     dragStartNodeData = JSON.stringify(dragStartNodeData);
 
     e.dataTransfer.effectAllowed = 'move';
@@ -109,17 +109,17 @@ class TreeView extends React.Component {
     let dragStartNodeData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartNodeData = JSON.parse(dragStartNodeData);
 
-    let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartNodeData;
+    let { nodeDirent, nodeParentPath, nodeRootPath } = dragStartNodeData;
     let dropNodeData = node;
 
-    if (Array.isArray(dragStartNodeData)) { //move items
-      if (!dropNodeData) { //move items to root
+    if (Array.isArray(dragStartNodeData)) { // move items
+      if (!dropNodeData) { // move items to root
         if (dragStartNodeData[0].nodeParentPath === '/') {
-          this.setState({isTreeViewDropTipShow: false});
+          this.setState({ isTreeViewDropTipShow: false });
           return;
         }
         this.props.onItemsMove(this.props.currentRepoInfo, '/');
-        this.setState({isTreeViewDropTipShow: false});
+        this.setState({ isTreeViewDropTipShow: false });
         return;
       }
       this.onMoveItems(dragStartNodeData, dropNodeData, this.props.currentRepoInfo, dropNodeData.path);
@@ -128,11 +128,11 @@ class TreeView extends React.Component {
 
     if (!dropNodeData) {
       if (nodeParentPath === '/') {
-        this.setState({isTreeViewDropTipShow: false});
+        this.setState({ isTreeViewDropTipShow: false });
         return;
       }
       this.onItemMove(this.props.currentRepoInfo, nodeDirent, '/', nodeParentPath);
-      this.setState({isTreeViewDropTipShow: false});
+      this.setState({ isTreeViewDropTipShow: false });
       return;
     }
 
@@ -198,11 +198,11 @@ class TreeView extends React.Component {
   };
 
   freezeItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   unfreezeItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onMenuItemClick = (operation, node) => {
diff --git a/frontend/src/components/user-settings/email-notice.js b/frontend/src/components/user-settings/email-notice.js
index b2f3fe34d1..3959822496 100644
--- a/frontend/src/components/user-settings/email-notice.js
+++ b/frontend/src/components/user-settings/email-notice.js
@@ -16,16 +16,16 @@ class EmailNotice extends React.Component {
 
     // interval: in seconds
     this.fileUpdatesOptions = [
-      {interval: 0, text: gettext('Don\'t send emails')},
-      {interval: 3600, text: gettext('Per hour')},
-      {interval: 14400, text: gettext('Per 4 hours')},
-      {interval: 86400, text: gettext('Per day')},
-      {interval: 604800, text: gettext('Per week')}
+      { interval: 0, text: gettext('Don\'t send emails') },
+      { interval: 3600, text: gettext('Per hour') },
+      { interval: 14400, text: gettext('Per 4 hours') },
+      { interval: 86400, text: gettext('Per day') },
+      { interval: 604800, text: gettext('Per week') }
     ];
 
     this.collaborateOptions = [
-      {interval: 0, text: gettext('Don\'t send emails')},
-      {interval: 3600, text: gettext('Per hour') + ' (' + gettext('If notifications have not been read within one hour, they will be sent to your mailbox.') + ')'}
+      { interval: 0, text: gettext('Don\'t send emails') },
+      { interval: 3600, text: gettext('Per hour') + ' (' + gettext('If notifications have not been read within one hour, they will be sent to your mailbox.') + ')' }
     ];
 
     this.state = {
diff --git a/frontend/src/components/user-settings/language-setting.js b/frontend/src/components/user-settings/language-setting.js
index e929430d50..09e1a605d4 100644
--- a/frontend/src/components/user-settings/language-setting.js
+++ b/frontend/src/components/user-settings/language-setting.js
@@ -26,7 +26,7 @@ class LanguageSetting extends React.Component {
         <h3 className="setting-item-heading">{gettext('Language Setting')}</h3>
         <SeahubSelect
           className='language-selector'
-          value={{value: currentLang.langCode, label: currentLang.langName}}
+          value={{ value: currentLang.langCode, label: currentLang.langName }}
           options={options}
           onChange={this.onSelectChange}
         />
diff --git a/frontend/src/components/user-settings/linked-devices.js b/frontend/src/components/user-settings/linked-devices.js
index 331037ad56..e3a00baf87 100644
--- a/frontend/src/components/user-settings/linked-devices.js
+++ b/frontend/src/components/user-settings/linked-devices.js
@@ -44,7 +44,7 @@ class Content extends Component {
 
       const isDesktop = Utils.isDesktop();
       return items.length ? (
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? desktopThead : mobileThead}
           <tbody>
             {items.map((item, index) => {
@@ -52,7 +52,7 @@ class Content extends Component {
             })}
           </tbody>
         </table>
-      ): emptyTip;
+      ) : emptyTip;
     }
   }
 }
diff --git a/frontend/src/components/user-settings/social-login-dingtalk.js b/frontend/src/components/user-settings/social-login-dingtalk.js
index 3d669d9b1c..55eb8d19f1 100644
--- a/frontend/src/components/user-settings/social-login-dingtalk.js
+++ b/frontend/src/components/user-settings/social-login-dingtalk.js
@@ -36,7 +36,7 @@ class SocialLoginDintalk extends React.Component {
       <React.Fragment>
         <div className="setting-item" id="social-auth">
           <h3 className="setting-item-heading">{gettext('Social Login')}</h3>
-          <p className="mb-2">{langCode == 'zh-cn' ? '钉钉': 'Dingtalk'}</p>
+          <p className="mb-2">{langCode == 'zh-cn' ? '钉钉' : 'Dingtalk'}</p>
           {socialConnectedDingtalk ?
             <button className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</button> :
             <a href={`${siteRoot}dingtalk/connect/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-outline-primary">{gettext('Connect')}</a>
diff --git a/frontend/src/components/user-settings/social-login.js b/frontend/src/components/user-settings/social-login.js
index 2290fdd8ff..84a22aa5c0 100644
--- a/frontend/src/components/user-settings/social-login.js
+++ b/frontend/src/components/user-settings/social-login.js
@@ -36,7 +36,7 @@ class SocialLogin extends React.Component {
       <React.Fragment>
         <div className="setting-item" id="social-auth">
           <h3 className="setting-item-heading">{gettext('Social Login')}</h3>
-          <p className="mb-2">{langCode == 'zh-cn' ? '企业微信': 'WeChat Work'}</p>
+          <p className="mb-2">{langCode == 'zh-cn' ? '企业微信' : 'WeChat Work'}</p>
           {socialConnected ?
             <button className="btn btn-outline-primary" onClick={this.confirmDisconnect}>{gettext('Disconnect')}</button> :
             <a href={`${siteRoot}work-weixin/oauth-connect/?next=${encodeURIComponent(socialNextPage)}`} className="btn btn-outline-primary">{gettext('Connect')}</a>
diff --git a/frontend/src/components/user-settings/two-factor-auth.js b/frontend/src/components/user-settings/two-factor-auth.js
index 9be463542b..323700bf5a 100644
--- a/frontend/src/components/user-settings/two-factor-auth.js
+++ b/frontend/src/components/user-settings/two-factor-auth.js
@@ -17,14 +17,16 @@ class TwoFactorAuthentication extends React.Component {
       <React.Fragment>
         <p className="mb-2">{gettext('Status: enabled')}</p>
         <a className="btn btn-outline-primary mb-4" href={`${siteRoot}profile/two_factor_authentication/disable/`}>
-          {gettext('Disable Two-Factor Authentication')}</a>
+          {gettext('Disable Two-Factor Authentication')}
+        </a>
         <p className="mb-2">
           {gettext('If you don\'t have any device with you, you can access your account using backup codes.')}
           {backupTokens == 1 ? gettext('You have only one backup code remaining.') :
             gettext('You have {num} backup codes remaining.').replace('{num}', backupTokens)}
         </p>
         <a href={`${siteRoot}profile/two_factor_authentication/backup/tokens/`}
-          className="btn btn-outline-primary">{gettext('Show Codes')}</a>
+          className="btn btn-outline-primary">{gettext('Show Codes')}
+        </a>
       </React.Fragment>
     );
   };
@@ -34,7 +36,8 @@ class TwoFactorAuthentication extends React.Component {
       <React.Fragment>
         <p className="mb-2">{gettext('Two-factor authentication is not enabled for your account. Enable two-factor authentication for enhanced account security.')}</p>
         <a href={`${siteRoot}profile/two_factor_authentication/setup/`} className="btn btn-outline-primary">
-          {gettext('Enable Two-Factor Authentication')}</a>
+          {gettext('Enable Two-Factor Authentication')}
+        </a>
       </React.Fragment>
     );
   };
diff --git a/frontend/src/components/user-settings/user-avatar-form.js b/frontend/src/components/user-settings/user-avatar-form.js
index 01dee03a89..112024f68b 100644
--- a/frontend/src/components/user-settings/user-avatar-form.js
+++ b/frontend/src/components/user-settings/user-avatar-form.js
@@ -37,22 +37,22 @@ class UserAvatarForm extends React.Component {
     }
 
     const fileExt = fileName.substr((fileName.lastIndexOf('.') + 1)).toLowerCase();
-    const allowedExt = ['jpg','jpeg', 'png', 'gif'];
+    const allowedExt = ['jpg', 'jpeg', 'png', 'gif'];
     if (allowedExt.indexOf(fileExt) == -1) {
       const errorMsg = gettext('File extensions can only be {placeholder}.')
         .replace('{placeholder}', allowedExt.join(', '));
-      toaster.danger(errorMsg, {duration: 5});
+      toaster.danger(errorMsg, { duration: 5 });
       return false;
     }
 
     // file size should be less than 1MB
-    if (file.size > 1024*1024) {
+    if (file.size > 1024 * 1024) {
       const errorMsg = gettext('The file is too large. Allowed maximum size is 1MB.');
-      toaster.danger(errorMsg, {duration: 5});
+      toaster.danger(errorMsg, { duration: 5 });
       return false;
     }
 
-    //this.form.current.submit();
+    // this.form.current.submit();
     seafileAPI.updateUserAvatar(file, 160).then((res) => {
       this.setState({
         avatarSrc: res.data.avatar_url
diff --git a/frontend/src/components/user-settings/web-api-auth-token.js b/frontend/src/components/user-settings/web-api-auth-token.js
index 8dfa5b33b1..1a418657d0 100644
--- a/frontend/src/components/user-settings/web-api-auth-token.js
+++ b/frontend/src/components/user-settings/web-api-auth-token.js
@@ -84,8 +84,9 @@ class WebAPIAuthToken extends React.Component {
                   aria-label={isAuthTokenVisible ? gettext('Hide') : gettext('Show')}
                   onKeyDown={this.onIconKeyDown}
                   onClick={this.toggleAuthTokenVisible}
-                  className={`eye-icon sf3-font sf3-font-eye${this.state.isAuthTokenVisible ? '': '-slash'}`}
-                ></span>
+                  className={`eye-icon sf3-font sf3-font-eye${this.state.isAuthTokenVisible ? '' : '-slash'}`}
+                >
+                </span>
               </div>
               <button className="btn btn-outline-primary mt-2" onClick={this.deleteAuthToken}>{gettext('Delete')}</button>
             </React.Fragment>
diff --git a/frontend/src/components/view-modes.js b/frontend/src/components/view-modes.js
index 4528aefbaf..32f1b97b5c 100644
--- a/frontend/src/components/view-modes.js
+++ b/frontend/src/components/view-modes.js
@@ -27,8 +27,8 @@ class ViewModes extends React.Component {
     const { isDropdownMenuOpen } = this.state;
     const { currentViewMode } = this.props;
     const options = [
-      {'icon': 'list-view', 'text': gettext('List view'), 'value': 'list'},
-      {'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid'}
+      { 'icon': 'list-view', 'text': gettext('List view'), 'value': 'list' },
+      { 'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid' }
     ];
     return (
       <Dropdown
diff --git a/frontend/src/components/wiki-card-view/wiki-card-item.js b/frontend/src/components/wiki-card-view/wiki-card-item.js
index e6f05f727f..25963c7622 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-item.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-item.js
@@ -64,7 +64,7 @@ class WikiCardItem extends Component {
   };
 
   toggleDropDownMenu = () => {
-    this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+    this.setState({ isItemMenuShow: !this.state.isItemMenuShow });
   };
 
   onClickDropdown = (e) => {
@@ -117,7 +117,7 @@ class WikiCardItem extends Component {
                 data-toggle="dropdown"
                 aria-expanded={this.state.isItemMenuShow}
                 aria-haspopup={true}
-                style={{'minWidth': '0'}}
+                style={{ 'minWidth': '0' }}
               />
               <DropdownMenu right={true} className="dtable-dropdown-menu">
                 <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
diff --git a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
index 22dffb6ede..0df9f51e27 100644
--- a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
+++ b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
@@ -19,11 +19,11 @@ class WikiDirListItem extends React.Component {
   }
 
   onMouseEnter = () => {
-    this.setState({highlight: true});
+    this.setState({ highlight: true });
   };
 
   onMouseLeave = () => {
-    this.setState({highlight: false});
+    this.setState({ highlight: false });
   };
 
   onContextMenu = (event) => {
diff --git a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
index fc525bbccc..1e744f45e2 100644
--- a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
+++ b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
@@ -15,14 +15,14 @@ class WikiDirListView extends React.Component {
   render() {
     const isDesktop = Utils.isDesktop();
     return (
-      <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+      <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
         <thead>
           {isDesktop ? (
             <tr>
-              <th style={{width: '4%'}}></th>
-              <th style={{width: '66%'}}>{gettext('Name')}</th>
-              <th style={{width: '15%'}}>{gettext('Size')}</th>
-              <th style={{width: '15%'}}>{gettext('Last Update')}</th>
+              <th style={{ width: '4%' }}></th>
+              <th style={{ width: '66%' }}>{gettext('Name')}</th>
+              <th style={{ width: '15%' }}>{gettext('Size')}</th>
+              <th style={{ width: '15%' }}>{gettext('Last Update')}</th>
             </tr>
           ) : (
             <tr>
diff --git a/frontend/src/file-history-old.js b/frontend/src/file-history-old.js
index 3eb176aeef..f625ffe23a 100644
--- a/frontend/src/file-history-old.js
+++ b/frontend/src/file-history-old.js
@@ -43,7 +43,7 @@ class FileHistory extends React.Component {
     editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       let historyData = res.data;
       if (!historyData) {
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
         throw Error('There is an error in server.');
       }
       this.initNewRecords(res.data);
@@ -54,7 +54,7 @@ class FileHistory extends React.Component {
     seafileAPI.listOldFileHistoryRecords(repoID, filePath).then((res) => {
       let historyData = res.data;
       if (!historyData) {
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
         throw Error('There is an error in server.');
       }
       this.initOldRecords(res.data);
@@ -70,7 +70,7 @@ class FileHistory extends React.Component {
         path = oldPath ? oldPath : path;
         seafileAPI.listOldFileHistoryRecords(historyRepoID, path, commitID).then((res) => {
           if (!res.data) {
-            this.setState({isLoading: false});
+            this.setState({ isLoading: false });
             throw Error('There is an error in server.');
           }
           this.setState({
@@ -81,7 +81,7 @@ class FileHistory extends React.Component {
       } else {
         seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
           if (!res.data) {
-            this.setState({isLoading: false});
+            this.setState({ isLoading: false });
             throw Error('There is an error in server.');
           }
           this.setState({
@@ -110,13 +110,13 @@ class FileHistory extends React.Component {
         isLoading: false,
       });
     } else {
-      this.setState({nextCommit: result.next_start_commit,});
+      this.setState({ nextCommit: result.next_start_commit, });
       if (this.state.nextCommit) {
         seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
           this.initOldRecords(res.data);
         });
       } else {
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
       }
     }
   }
@@ -147,7 +147,7 @@ class FileHistory extends React.Component {
         let commitID = this.state.nextCommit;
         let filePath = this.state.filePath;
         let oldFilePath = this.state.oldFilePath;
-        this.setState({isReloadingData: true});
+        this.setState({ isReloadingData: true });
         if (oldFilePath) {
           seafileAPI.listOldFileHistoryRecords(historyRepoID, oldFilePath, commitID).then((res) => {
             this.updateOldRecords(res.data, oldFilePath);
@@ -180,7 +180,7 @@ class FileHistory extends React.Component {
         isReloadingData: false,
       });
     } else {
-      this.setState({nextCommit: result.next_start_commit,});
+      this.setState({ nextCommit: result.next_start_commit, });
       if (this.state.nextCommit) {
         seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
           this.updateOldRecords(res.data, filePath);
@@ -194,7 +194,7 @@ class FileHistory extends React.Component {
     let filePath = item.path;
     editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
-        this.setState({isLoading: true});
+        this.setState({ isLoading: true });
         this.refershFileList();
       }
     });
diff --git a/frontend/src/file-history.js b/frontend/src/file-history.js
index 90f315186f..5a49e9bf56 100644
--- a/frontend/src/file-history.js
+++ b/frontend/src/file-history.js
@@ -20,7 +20,7 @@ class FileHistory extends React.Component {
     };
   }
 
-  setDiffContent = (newMarkdownContent, oldMarkdownContent)=> {
+  setDiffContent = (newMarkdownContent, oldMarkdownContent) => {
     this.setState({
       renderingContent: false,
       newMarkdownContent: newMarkdownContent,
@@ -29,8 +29,8 @@ class FileHistory extends React.Component {
   };
 
 
-  onHistoryItemClick = (item, preItem)=> {
-    this.setState({renderingContent: true});
+  onHistoryItemClick = (item, preItem) => {
+    this.setState({ renderingContent: true });
     seafileAPI.getFileRevision(historyRepoID, item.commit_id, item.path).then((res) => {
       axios.all([
         seafileAPI.getFileContent(res.data),
diff --git a/frontend/src/metadata/api.js b/frontend/src/metadata/api.js
index da598c7b55..f71542b478 100644
--- a/frontend/src/metadata/api.js
+++ b/frontend/src/metadata/api.js
@@ -7,7 +7,7 @@ class MetadataManagerAPI {
     this.server = server;
     this.username = username;
     this.password = password;
-    this.token = token;  //none
+    this.token = token; // none
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
@@ -36,7 +36,7 @@ class MetadataManagerAPI {
   _sendPostRequest(url, form) {
     if (form.getHeaders) {
       return this.req.post(url, form, {
-        headers:form.getHeaders()
+        headers: form.getHeaders()
       });
     } else {
       return this.req.post(url, form);
@@ -94,7 +94,7 @@ class MetadataManagerAPI {
     if (name) {
       params['name'] = name;
     }
-    return this.req.get(url, {params: params});
+    return this.req.get(url, { params: params });
   }
 
   updateMetadataRecord = (repoID, recordID, columnName, newValue) => {
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/index.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/index.js
index 600cfdc6f4..88745738eb 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/index.js
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/index.js
@@ -7,11 +7,10 @@ import {
   FILTER_COLUMN_OPTIONS,
   getValidFilters,
 } from '../../../_basic';
-import { getEventClassName } from '../../../utils';
+import { getEventClassName, gettext } from '../../../utils';
 import { getFilterByColumn } from '../../../utils/filters-utils';
 import FiltersList from './widgets';
 import { EVENT_BUS_TYPE } from '../../../constants';
-import { gettext } from '../../../utils';
 
 import './index.css';
 
diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js
index 8df96fdb5b..f4e799556c 100644
--- a/frontend/src/metadata/metadata-view/components/table/container.js
+++ b/frontend/src/metadata/metadata-view/components/table/container.js
@@ -1,12 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import toaster from '../../../../components/toast';
-import { EVENT_BUS_TYPE } from '../../constants';
+import { EVENT_BUS_TYPE, PER_LOAD_NUMBER, MAX_LOAD_NUMBER } from '../../constants';
 import { CommonlyUsedHotkey } from '../../_basic';
 import { gettext } from '../../utils';
 import { useMetadata } from '../../hooks';
-import TableMain from  './table-main';
+import TableMain from './table-main';
 import RecordDetailsDialog from '../record-details-dialog';
-import { PER_LOAD_NUMBER, MAX_LOAD_NUMBER } from '../../constants';
 import { Utils } from '../../../../utils/utils';
 
 import './index.css';
diff --git a/frontend/src/metadata/metadata-view/components/table/index.js b/frontend/src/metadata/metadata-view/components/table/index.js
index 4f90b3d94a..1ae29e0768 100644
--- a/frontend/src/metadata/metadata-view/components/table/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CenteredLoading } from '@seafile/sf-metadata-ui-component';
 import { useMetadata } from '../../hooks';
-import Container from  './container';
+import Container from './container';
 
 import './index.css';
 
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
index 45e596a924..9034ec6c2f 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
@@ -5,7 +5,7 @@ import RecordsBody from './records-body';
 import RecordsGroupBody from './records-group-body';
 import RecordsFooter from './record-footer';
 import { HorizontalScrollbar } from '../../../scrollbar';
-import { recalculate } from '../../../../utils/column-utils';
+import { recalculate, setColumnOffsets } from '../../../../utils/column-utils';
 import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE } from '../../../../constants';
 import {
   isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
@@ -15,7 +15,6 @@ import RecordMetrics from '../../../../utils/record-metrics';
 import { isShiftKeyDown } from '../../../../utils/keyboard-utils';
 import { getVisibleBoundaries } from '../../../../utils/viewport';
 import { getColOverScanEndIdx, getColOverScanStartIdx } from '../../../../utils/grid';
-import { setColumnOffsets } from '../../../../utils/column-utils';
 
 class Records extends Component {
 
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/operation-btn/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/operation-btn/index.js
index 888bbcd7e6..f693cfb4b5 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/operation-btn/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/operation-btn/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from'reactstrap';
+import { UncontrolledTooltip } from 'reactstrap';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
 import { CellType } from '../../../../../../../_basic';
 import { EVENT_BUS_TYPE, EDITOR_TYPE } from '../../../../../../../constants';
diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
index bbd849d510..853f19c60b 100644
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx
@@ -8,11 +8,10 @@ import { RightScrollbar } from '../../../scrollbar';
 import Record from './record';
 import { createGroupMetrics, getGroupRecordByIndex, isNestedGroupRow } from '../../../../utils/group-metrics';
 import RecordMetrics from '../../../../utils/record-metrics';
-import { isColumnSupportDirectEdit, isColumnSupportEdit } from '../../../../utils/column-utils';
+import { isFrozen, isNameColumn, isColumnSupportDirectEdit, isColumnSupportEdit } from '../../../../utils/column-utils';
 import { isShiftKeyDown } from '../../../../utils/keyboard-utils';
 import { isSelectedCellSupportOpenEditor } from '../../../../utils/selected-cell-utils';
 import { getColumnScrollPosition, getColVisibleEndIdx, getColVisibleStartIdx } from '../../../../utils/records-body-utils';
-import { isFrozen, isNameColumn } from '../../../../utils/column-utils';
 import { GROUP_HEADER_HEIGHT, GROUP_ROW_TYPE, GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH, EVENT_BUS_TYPE } from '../../../../constants';
 import { addClassName, removeClassName } from '../../../../utils';
 
diff --git a/frontend/src/metadata/metadata-view/hooks/collaborators.js b/frontend/src/metadata/metadata-view/hooks/collaborators.js
index 222d3260e5..9e0fa7a656 100644
--- a/frontend/src/metadata/metadata-view/hooks/collaborators.js
+++ b/frontend/src/metadata/metadata-view/hooks/collaborators.js
@@ -9,7 +9,7 @@ export const CollaboratorsProvider = ({
 }) => {
   const collaboratorsCacheRef = useRef({});
   const [collaboratorsCache, setCollaboratorsCache] = useState({});
-  const [collaborators, setCollaborators ] = useState([]);
+  const [collaborators, setCollaborators] = useState([]);
 
   const { store } = useMetadata();
 
diff --git a/frontend/src/metadata/metadata-view/index.js b/frontend/src/metadata/metadata-view/index.js
index 2145b6f051..4aa1cb04ed 100644
--- a/frontend/src/metadata/metadata-view/index.js
+++ b/frontend/src/metadata/metadata-view/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MetadataProvider, CollaboratorsProvider, RecordDetailsProvider } from  './hooks/index';
+import { MetadataProvider, CollaboratorsProvider, RecordDetailsProvider } from './hooks/index';
 import { Table } from './components/index';
 
 const SeafileMetadata = ({ ...params }) => {
diff --git a/frontend/src/metadata/metadata-view/store/index.js b/frontend/src/metadata/metadata-view/store/index.js
index 9893cc640c..6cbc5c60bc 100644
--- a/frontend/src/metadata/metadata-view/store/index.js
+++ b/frontend/src/metadata/metadata-view/store/index.js
@@ -4,12 +4,11 @@ import {
   getRowsByIds,
 } from '../_basic';
 import { Operation, LOCAL_APPLY_OPERATION_TYPE, NEED_APPLY_AFTER_SERVER_OPERATION, OPERATION_TYPE, UNDO_OPERATION_TYPE } from './operations';
-import { EVENT_BUS_TYPE } from '../constants';
+import { EVENT_BUS_TYPE, PER_LOAD_NUMBER } from '../constants';
 import DataProcessor from './data-processor';
 import ServerOperator from './server-operator';
 import { getColumns } from '../utils/column-utils';
 import { Metadata, User } from '../model';
-import { PER_LOAD_NUMBER } from '../constants';
 
 class Store {
 
diff --git a/frontend/src/metadata/metadata-view/utils/selected-cell-utils.js b/frontend/src/metadata/metadata-view/utils/selected-cell-utils.js
index 9c4a020e62..8e32719a3a 100644
--- a/frontend/src/metadata/metadata-view/utils/selected-cell-utils.js
+++ b/frontend/src/metadata/metadata-view/utils/selected-cell-utils.js
@@ -1,9 +1,8 @@
 import { Z_INDEX, getGroupByPath, isFunction } from '../_basic';
-import { getColumnByIndex } from './column-utils';
+import { getColumnByIndex, canEdit } from './column-utils';
 import { SUPPORT_PREVIEW_COLUMN_TYPES } from '../constants';
 import { getGroupRecordByIndex } from './group-metrics';
 import RowUtils from './row-utils';
-import { canEdit } from './column-utils';
 
 const SELECT_DIRECTION = {
   UP: 'upwards',
diff --git a/frontend/src/models/dirent.js b/frontend/src/models/dirent.js
index ac8845c81f..c15c3912a6 100644
--- a/frontend/src/models/dirent.js
+++ b/frontend/src/models/dirent.js
@@ -25,8 +25,8 @@ class Dirent {
       this.is_locked = json.is_locked || false;
       this.is_freezed = json.is_freezed || false;
       this.lock_time = json.lock_time || '';
-      this.lock_owner= json.lock_owner || null;
-      this.lock_owner_name= json.lock_owner_name || null;
+      this.lock_owner = json.lock_owner || null;
+      this.lock_owner_name = json.lock_owner_name || null;
       this.locked_by_me = json.locked_by_me || false;
       this.modifier_name = json.modifier_name || '';
       this.modifier_email = json.modifier_email || '';
diff --git a/frontend/src/models/group.js b/frontend/src/models/group.js
index 9bc59c5c7c..1252af5b24 100644
--- a/frontend/src/models/group.js
+++ b/frontend/src/models/group.js
@@ -1,6 +1,6 @@
 class Group {
   constructor(object) {
-    this.id= object.id;
+    this.id = object.id;
     this.name = object.name;
     this.owner = object.owner;
     this.admins = object.admins || [];
diff --git a/frontend/src/models/repo-info.js b/frontend/src/models/repo-info.js
index a62570a1d0..6663225046 100644
--- a/frontend/src/models/repo-info.js
+++ b/frontend/src/models/repo-info.js
@@ -19,7 +19,7 @@ class RepoInfo {
     this.has_been_shared_out = object.has_been_shared_out;
     this.encrypted = object.encrypted;
     this.lib_need_decrypt = object.lib_need_decrypt;
-    this.last_modified= object.last_modified;
+    this.last_modified = object.last_modified;
     this.status = object.status;
   }
 }
diff --git a/frontend/src/pages/dashboard/activity-item.js b/frontend/src/pages/dashboard/activity-item.js
index 402aa592ad..262828210c 100644
--- a/frontend/src/pages/dashboard/activity-item.js
+++ b/frontend/src/pages/dashboard/activity-item.js
@@ -34,8 +34,8 @@ class ActivityItem extends Component {
 
   render() {
     const isDesktop = this.props.isDesktop;
-    let {item, index, items} = this.props;
-    let op, details, moreDetails = false;
+    let { item, index, items } = this.props;
+    let op; let details; let moreDetails = false;
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
 
     let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/';
@@ -43,7 +43,7 @@ class ActivityItem extends Component {
     let smallLibLink = <a className="small text-secondary" href={libURL}>{item.repo_name}</a>;
 
     if (item.obj_type == 'repo') {
-      switch(item.op_type) {
+      switch (item.op_type) {
         case 'create':
           op = gettext('Created library');
           details = libLink;
@@ -80,7 +80,7 @@ class ActivityItem extends Component {
       op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
       details = (
         <Fragment>
-          <p className="m-0 d-inline" dangerouslySetInnerHTML={{__html: firstLine}}></p>
+          <p className="m-0 d-inline" dangerouslySetInnerHTML={{ __html: firstLine }}></p>
           {isDesktop && <button type="button" onClick={this.onListCreatedFilesToggle} className="activity-details text-secondary ml-2 border-0 p-0 bg-transparent">{gettext('details')}</button>}
         </Fragment>
       );
diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js
index a3e13d2148..cdfd472b45 100644
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/frontend/src/pages/dashboard/files-activities.js
@@ -225,10 +225,10 @@ class FilesActivities extends Component {
     if (!this.state.isLoadingMore && this.state.hasMore) {
       const clientHeight = event.target.clientHeight;
       const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
+      const scrollTop = event.target.scrollTop;
       const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
       if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
+        this.setState({ isLoadingMore: true }, () => {
           this.getMore();
         });
       }
@@ -247,7 +247,7 @@ class FilesActivities extends Component {
                 <Link to={`${siteRoot}dashboard/`} className={`nav-link${onlyMine ? '' : ' active'}`}>{gettext('All Activities')}</Link>
               </li>
               <li className="nav-item">
-                <Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active': ''}`}>{gettext('My Activities')}</Link>
+                <Link to={`${siteRoot}my-activities/`} className={`nav-link${onlyMine ? ' active' : ''}`}>{gettext('My Activities')}</Link>
               </li>
             </ul>
           </div>
diff --git a/frontend/src/pages/file-history-old/history-item.js b/frontend/src/pages/file-history-old/history-item.js
index ddc661e3ce..8972716eb1 100644
--- a/frontend/src/pages/file-history-old/history-item.js
+++ b/frontend/src/pages/file-history-old/history-item.js
@@ -45,7 +45,7 @@ class HistoryItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let downloadUrl = URLDecorator.getUrl({type: 'download_historic_file', filePath: filePath, objID: item.rev_file_id});
+    let downloadUrl = URLDecorator.getUrl({ type: 'download_historic_file', filePath: filePath, objID: item.rev_file_id });
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.creator_email)}/`;
     let viewUrl = `${siteRoot}repo/${historyRepoID}/history/files/?obj_id=${item.rev_file_id}&commit_id=${item.commit_id}&p=${Utils.encodePath(filePath)}`;
     let diffUrl = `${siteRoot}repo/text_diff/${historyRepoID}/?commit=${item.commit_id}&p=${Utils.encodePath(filePath)}`;
@@ -126,7 +126,7 @@ class MoreMenu extends React.PureComponent {
           {index !== 0 && <a href="#" onClick={onItemRestore}><DropdownItem>{gettext('Restore')}</DropdownItem></a>}
           {canDownload && <a href={downloadUrl}><DropdownItem>{gettext('Download')}</DropdownItem></a>}
           <a href={viewUrl}><DropdownItem>{gettext('View')}</DropdownItem></a>
-          {/*canCompare && <a href={diffUrl}><DropdownItem>{gettext('Diff')}</DropdownItem></a>*/}
+          {/* canCompare && <a href={diffUrl}><DropdownItem>{gettext('Diff')}</DropdownItem></a>*/}
           {index != 0 && <DropdownItem tag="a" href={snapshotURL} target="_blank">{gettext('View Related Snapshot')}</DropdownItem>}
         </DropdownMenu>
       </Dropdown>
diff --git a/frontend/src/pages/file-history/side-panel.js b/frontend/src/pages/file-history/side-panel.js
index fdc44d0e84..ce35e33fcd 100644
--- a/frontend/src/pages/file-history/side-panel.js
+++ b/frontend/src/pages/file-history/side-panel.js
@@ -29,7 +29,7 @@ class SidePanel extends React.Component {
     editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
       let historyList = res.data;
       if (historyList.length === 0) {
-        this.setState({isLoading: false});
+        this.setState({ isLoading: false });
         throw Error('there has an error in server');
       }
       this.initResultState(res.data);
@@ -77,7 +77,7 @@ class SidePanel extends React.Component {
       });
       editUtilities.listFileHistoryRecords(filePath, currentPage, PER_PAGE).then(res => {
         this.updateResultState(res.data);
-        this.setState({isReloadingData: false});
+        this.setState({ isReloadingData: false });
       });
     }
   };
@@ -86,7 +86,7 @@ class SidePanel extends React.Component {
     let commitId = currentItem.commit_id;
     editUtilities.revertFile(filePath, commitId).then(res => {
       if (res.data.success) {
-        this.setState({isLoading: true});
+        this.setState({ isLoading: true });
         this.refershFileList();
       }
       let message = gettext('Successfully restored.');
@@ -94,7 +94,7 @@ class SidePanel extends React.Component {
     });
   };
 
-  onItemClick =(item, preItem) => {
+  onItemClick = (item, preItem) => {
     this.props.onItemClick(item, preItem);
   };
 
diff --git a/frontend/src/pages/groups/group-item.js b/frontend/src/pages/groups/group-item.js
index a73d7abe2b..884a8004c9 100644
--- a/frontend/src/pages/groups/group-item.js
+++ b/frontend/src/pages/groups/group-item.js
@@ -119,7 +119,7 @@ class GroupItem extends React.Component {
             <a href={`${siteRoot}group/${group.id}/`} title={group.name} className="ellipsis">{group.name}</a>
             {isDeptAdmin && (
               <SingleDropdownToolbar
-                opList={[{'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog}]}
+                opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
               />
             )}
           </h4>
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 8c9846bc43..a1422d9c28 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -1,4 +1,4 @@
-import React,{ Fragment } from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import { gettext, username, canAddRepo } from '../../utils/constants';
@@ -80,7 +80,7 @@ class GroupView extends React.Component {
     seafileAPI.getGroup(groupID).then((res) => {
       let currentGroup = new Group(res.data);
       let emptyTip = this.getEmptyTip(currentGroup);
-      let isStaff  = currentGroup.admins.indexOf(username) > -1;  //for item operations
+      let isStaff = currentGroup.admins.indexOf(username) > -1; // for item operations
       let isOwner = currentGroup.owner === username ? true : false;
       let isDepartmentGroup = currentGroup.parent_group_id !== 0;
       this.setState({
@@ -90,7 +90,7 @@ class GroupView extends React.Component {
         isDepartmentGroup: isDepartmentGroup,
         isOwner: isOwner,
         currentPage: 1,
-        repoList: []  // empty it for the current group
+        repoList: [] // empty it for the current group
       }, () => {
         this.loadRepos(this.state.currentPage);
         this.listGroupMembers();
@@ -145,7 +145,7 @@ class GroupView extends React.Component {
           </EmptyTip>
         );
       } else {
-        if (currentGroup.admins.indexOf(username) == -1) {  // is a member of this group
+        if (currentGroup.admins.indexOf(username) == -1) { // is a member of this group
           emptyTip = (
             <EmptyTip>
               <h2>{gettext('No libraries')}</h2>
@@ -165,13 +165,13 @@ class GroupView extends React.Component {
   };
 
   onCreateRepoToggle = () => {
-    this.setState({isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow});
+    this.setState({ isCreateRepoDialogShow: !this.state.isCreateRepoDialogShow });
   };
 
   onCreateRepo = (repo, groupOwnerType) => {
     let groupId = this.props.groupID;
     if (groupOwnerType && groupOwnerType === 'department') {
-      seafileAPI.createGroupOwnedLibrary(groupId, repo).then(res => { //need modify endpoint api
+      seafileAPI.createGroupOwnedLibrary(groupId, repo).then(res => { // need modify endpoint api
         let object = {
           repo_id: res.data.id,
           repo_name: res.data.name,
@@ -184,7 +184,7 @@ class GroupView extends React.Component {
         };
         let repo = new Repo(object);
         let repoList = this.addRepoItem(repo);
-        this.setState({repoList: repoList});
+        this.setState({ repoList: repoList });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -194,7 +194,7 @@ class GroupView extends React.Component {
       seafileAPI.createGroupRepo(groupId, repo).then(res => {
         let repo = new Repo(res.data);
         let repoList = this.addRepoItem(repo);
-        this.setState({repoList: repoList});
+        this.setState({ repoList: repoList });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -208,7 +208,7 @@ class GroupView extends React.Component {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repo.repo_id;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
     this.loadGroup(groupID);
   };
 
@@ -224,7 +224,7 @@ class GroupView extends React.Component {
       let repoList = this.state.repoList.filter(item => {
         return item.repo_id !== repo.repo_id;
       });
-      this.setState({repoList: repoList});
+      this.setState({ repoList: repoList });
       this.loadGroup(group.id);
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -240,7 +240,7 @@ class GroupView extends React.Component {
         }
         return item;
       });
-      this.setState({repoList: repoList});
+      this.setState({ repoList: repoList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -254,7 +254,7 @@ class GroupView extends React.Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   toggleDismissGroupDialog = () => {
@@ -278,13 +278,13 @@ class GroupView extends React.Component {
     });
   };
 
-  toggleImportMembersDialog= () => {
+  toggleImportMembersDialog = () => {
     this.setState({
       showImportMembersDialog: !this.state.showImportMembersDialog
     });
   };
 
-  importMembersInBatch= (file) => {
+  importMembersInBatch = (file) => {
     toaster.notify(gettext('It may take some time, please wait.'));
     seafileAPI.importGroupMembersViaFile(this.state.currentGroup.id, file).then((res) => {
       res.data.failed.forEach(item => {
@@ -369,10 +369,10 @@ class GroupView extends React.Component {
     if (hasNextPage && !isLoadingMore) {
       const clientHeight = event.target.clientHeight;
       const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
+      const scrollTop = event.target.scrollTop;
       const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
       if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
+        this.setState({ isLoadingMore: true }, () => {
           this.loadRepos(currentPage + 1);
         });
       }
@@ -390,24 +390,24 @@ class GroupView extends React.Component {
     const opList = [];
     if ((!isDepartmentGroup && canAddRepo) ||
       (isDepartmentGroup && isStaff)) {
-      opList.push({'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle});
+      opList.push({ 'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle });
     }
-    opList.push({'text': gettext('Members'), 'onClick': this.toggleMembersDialog});
+    opList.push({ 'text': gettext('Members'), 'onClick': this.toggleMembersDialog });
     if (currentGroup) {
       if (isStaff || isOwner) {
-        opList.push({'text': gettext('Rename'), 'onClick': this.toggleRenameGroupDialog});
+        opList.push({ 'text': gettext('Rename'), 'onClick': this.toggleRenameGroupDialog });
         if (isOwner) {
-          opList.push({'text': gettext('Transfer'), 'onClick': this.toggleTransferGroupDialog});
+          opList.push({ 'text': gettext('Transfer'), 'onClick': this.toggleTransferGroupDialog });
         }
-        opList.push({'text': gettext('Import members'), 'onClick': this.toggleImportMembersDialog});
-        opList.push({'text': gettext('Manage members'), 'onClick': this.toggleManageMembersDialog});
+        opList.push({ 'text': gettext('Import members'), 'onClick': this.toggleImportMembersDialog });
+        opList.push({ 'text': gettext('Manage members'), 'onClick': this.toggleManageMembersDialog });
         if (isOwner) {
-          opList.push({'text': gettext('Delete group'), 'onClick': this.toggleDismissGroupDialog});
+          opList.push({ 'text': gettext('Delete group'), 'onClick': this.toggleDismissGroupDialog });
         }
       }
 
       if (!isOwner && !isDepartmentGroup) {
-        opList.push({'text': gettext('Leave group'), 'onClick': this.toggleLeaveGroupDialog});
+        opList.push({ 'text': gettext('Leave group'), 'onClick': this.toggleLeaveGroupDialog });
       }
     }
 
@@ -445,7 +445,7 @@ class GroupView extends React.Component {
                         {currentGroup.group_quota > 0 &&
                           <div className="department-usage-container">
                             <div className="department-usage">
-                              <span id="quota-bar" className="department-quota-bar"><span id="quota-usage" className="usage" style={{width: useRate}}></span></span>
+                              <span id="quota-bar" className="department-quota-bar"><span id="quota-usage" className="usage" style={{ width: useRate }}></span></span>
                               <span className="department-quota-info">{Utils.bytesToSize(currentGroup.group_quota_usage)} / {Utils.bytesToSize(currentGroup.group_quota)}</span>
                             </div>
                           </div>
diff --git a/frontend/src/pages/institution-admin/api/index.js b/frontend/src/pages/institution-admin/api/index.js
index 1236e8d598..7b2b9dffde 100644
--- a/frontend/src/pages/institution-admin/api/index.js
+++ b/frontend/src/pages/institution-admin/api/index.js
@@ -8,7 +8,7 @@ class InstAdminAPI {
     this.server = server;
     this.username = username;
     this.password = password;
-    this.token = token;  //none
+    this.token = token; // none
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
@@ -37,7 +37,7 @@ class InstAdminAPI {
   _sendPostRequest(url, form) {
     if (form.getHeaders) {
       return this.req.post(url, form, {
-        headers:form.getHeaders()
+        headers: form.getHeaders()
       });
     } else {
       return this.req.post(url, form);
@@ -73,7 +73,7 @@ class InstAdminAPI {
     const params = {
       q: q
     };
-    return this.req.get(url, {params: params});
+    return this.req.get(url, { params: params });
   }
 
   deleteInstitutionUser(email) {
diff --git a/frontend/src/pages/institution-admin/user-content/index.js b/frontend/src/pages/institution-admin/user-content/index.js
index 52f5b1b7c1..531169b6df 100644
--- a/frontend/src/pages/institution-admin/user-content/index.js
+++ b/frontend/src/pages/institution-admin/user-content/index.js
@@ -4,9 +4,9 @@ import { Link } from '@gatsbyjs/reach-router';
 import { gettext, siteRoot } from '../../../utils/constants';
 
 const NAV_ITEMS = [
-  {name: 'info', urlPart: '', text: gettext('Info')},
-  {name: 'owned-repos', urlPart: 'owned-libraries', text: gettext('Owned Libraries')},
-  {name: 'groups', urlPart: 'groups', text: gettext('Groups')}
+  { name: 'info', urlPart: '', text: gettext('Info') },
+  { name: 'owned-repos', urlPart: 'owned-libraries', text: gettext('Owned Libraries') },
+  { name: 'groups', urlPart: 'groups', text: gettext('Groups') }
 ];
 
 const UserContent = ({ children, ...rest }) => {
@@ -34,4 +34,4 @@ UserContent.propTypes = {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 };
 
-export default UserContent;
\ No newline at end of file
+export default UserContent;
diff --git a/frontend/src/pages/institution-admin/user-content/user-info.js b/frontend/src/pages/institution-admin/user-content/user-info.js
index 7a87bf4797..9be4e2018d 100644
--- a/frontend/src/pages/institution-admin/user-content/user-info.js
+++ b/frontend/src/pages/institution-admin/user-content/user-info.js
@@ -28,7 +28,7 @@ export default function UserInfo() {
   const updateQuota = useCallback((quote) => {
     instAdminAPI.setInstitutionUserQuote(user.email, quote).then(res => {
       // convert value to mb
-      const newUser = {...user, quota_total: quote * 1000 * 1000};
+      const newUser = { ...user, quota_total: quote * 1000 * 1000 };
       setUser(newUser);
     });
   }, [user]);
@@ -43,7 +43,7 @@ export default function UserInfo() {
       <dl className="m-0">
         <dt className="info-item-heading">{gettext('Avatar')}</dt>
         <dd className="info-item-content">
-          <img src={user.avatar_url} alt={user.name} width="80" className="rounded"  />
+          <img src={user.avatar_url} alt={user.name} width="80" className="rounded" />
         </dd>
 
         <dt className="info-item-heading">{gettext('Email')}</dt>
diff --git a/frontend/src/pages/institution-admin/user-list/user-item.js b/frontend/src/pages/institution-admin/user-list/user-item.js
index 2150878ed6..3ce7bca793 100644
--- a/frontend/src/pages/institution-admin/user-list/user-item.js
+++ b/frontend/src/pages/institution-admin/user-list/user-item.js
@@ -6,7 +6,7 @@ import { gettext, username } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import moment from 'moment';
 
-const OPERATIONS =[
+const OPERATIONS = [
   {
     value: 'active',
     text: gettext('active'),
diff --git a/frontend/src/pages/institution-admin/utils/index.js b/frontend/src/pages/institution-admin/utils/index.js
index a4fdb5445e..f1e72d97de 100644
--- a/frontend/src/pages/institution-admin/utils/index.js
+++ b/frontend/src/pages/institution-admin/utils/index.js
@@ -1,8 +1,8 @@
 export const getNavMessage = (url) => {
   const paths = url.split('/');
-  const adminIdx = paths.findIndex(item => item ==='useradmin');
+  const adminIdx = paths.findIndex(item => item === 'useradmin');
   const email = paths[adminIdx + 1];
   const nav = paths[adminIdx + 2];
   const username = decodeURIComponent(email);
   return { username, nav };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index 8aa1214ded..4bbd332a61 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -51,7 +51,7 @@ class Item extends React.Component {
     });
     const token = this.props.invitation.token;
     seafileAPI.deleteInvitation(token).then((res) => {
-      this.setState({deleted: true});
+      this.setState({ deleted: true });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       const errorMsg = Utils.getErrorMsg(error);
@@ -63,7 +63,7 @@ class Item extends React.Component {
   };
 
   revokeItem = () => {
-    this.setState({deleted: true});
+    this.setState({ deleted: true });
   };
 
   toggleRevokeDialog = (e) => {
@@ -195,7 +195,7 @@ class Content extends Component {
 
     const isDesktop = Utils.isDesktop();
     return (
-      <table className={`table-hover${isDesktop ? '': ' table-thead-hidden'}`}>
+      <table className={`table-hover${isDesktop ? '' : ' table-thead-hidden'}`}>
         <thead>
           {isDesktop ?
             <tr>
@@ -276,7 +276,7 @@ class InvitationsView extends React.Component {
               <h3 className="sf-heading">
                 {gettext('Invite Guest')}
                 <SingleDropdownToolbar
-                  opList={[{'text': gettext('Invite Guest'), 'onClick': this.toggleInvitePeopleDialog}]}
+                  opList={[{ 'text': gettext('Invite Guest'), 'onClick': this.toggleInvitePeopleDialog }]}
                 />
               </h3>
             </div>
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 883ce0f5ce..175ca2b2bd 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -113,7 +113,7 @@ class LibContentContainer extends React.Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.path !== this.props.path || nextProps.updateDetail !== this.props.updateDetail) {
-      this.setState({currentDirent: null});
+      this.setState({ currentDirent: null });
     }
   }
 
@@ -128,12 +128,12 @@ class LibContentContainer extends React.Component {
   };
 
   onDirentClick = (dirent) => {
-    this.setState({currentDirent: dirent});
+    this.setState({ currentDirent: dirent });
     this.props.onDirentClick(dirent);
   };
 
   onItemSelected = (dirent) => {
-    this.setState({currentDirent: dirent});
+    this.setState({ currentDirent: dirent });
     this.props.onItemSelected(dirent);
   };
 
@@ -150,7 +150,7 @@ class LibContentContainer extends React.Component {
   checkCurrentDirent = (deletedDirent) => {
     let { currentDirent } = this.state;
     if (currentDirent && deletedDirent.name === currentDirent.name) {
-      this.setState({currentDirent: null});
+      this.setState({ currentDirent: null });
     }
   };
 
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 88b5d13d95..b209fd8f25 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -72,7 +72,7 @@ class LibContentView extends React.Component {
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isAllDirentSelected: false,
-      dirID: '',  // for update dir list
+      dirID: '', // for update dir list
       errorMsg: '',
       isDirentDetailShow: false,
       direntDetailPanelTab: '',
@@ -125,7 +125,7 @@ class LibContentView extends React.Component {
   UNSAFE_componentWillMount() {
     const hash = window.location.hash;
     if (hash.slice(0, 1) === '#') {
-      this.setState({hash: hash});
+      this.setState({ hash: hash });
     }
   }
 
@@ -139,7 +139,7 @@ class LibContentView extends React.Component {
     }
   }
 
-  calculatePara = async(props) => {
+  calculatePara = async (props) => {
     const { repoID, eventBus } = props;
     this.unsubscribeEvent = eventBus.subscribe(EVENT_BUS_TYPE.SEARCH_LIBRARY_CONTENT, this.onSearchedClick);
     // eg: http://127.0.0.1:8000/library/repo_id/repo_name/**/**/\
@@ -332,7 +332,7 @@ class LibContentView extends React.Component {
       seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
         seafileAPI.getFileContent(res.data).then((res) => {
           if (this.state.content !== res.data) {
-            this.setState({isFileLoading: true});
+            this.setState({ isFileLoading: true });
           }
           this.setState({
             content: res.data,
@@ -403,7 +403,7 @@ class LibContentView extends React.Component {
           userPerm: user_perm,
         });
       }).catch(() => {
-        this.setState({isTreeDataLoading: false});
+        this.setState({ isTreeDataLoading: false });
       });
     } else {
       this.loadNodeAndParentsByPath(path);
@@ -433,7 +433,7 @@ class LibContentView extends React.Component {
     // update location
     let repoInfo = this.state.currentRepoInfo;
     let url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name) + Utils.encodePath(path);
-    window.history.pushState({url: url, path: path}, path, url);
+    window.history.pushState({ url: url, path: path }, path, url);
   };
 
   showFile = (filePath) => {
@@ -444,7 +444,7 @@ class LibContentView extends React.Component {
         let fileTags = res.data.file_tags.map(item => {
           return new FileTag(item);
         });
-        this.setState({fileTags: fileTags});
+        this.setState({ fileTags: fileTags });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -487,7 +487,7 @@ class LibContentView extends React.Component {
     // update location
     let repoInfo = this.state.currentRepoInfo;
     let url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name) + Utils.encodePath(filePath);
-    window.history.pushState({url: url, path: filePath}, filePath, url);
+    window.history.pushState({ url: url, path: filePath }, filePath, url);
   };
 
   showFileMetadata = (filePath) => {
@@ -495,12 +495,12 @@ class LibContentView extends React.Component {
     this.setState({ path: filePath, isViewFile: true, isFileLoading: false, isFileLoadedErr: false, content: '__sf-metadata' });
     const repoInfo = this.state.currentRepoInfo;
     const url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name);
-    window.history.pushState({url: url, path: ''}, '', url);
+    window.history.pushState({ url: url, path: '' }, '', url);
   };
 
   loadDirentList = (path) => {
     let repoID = this.props.repoID;
-    seafileAPI.listDir(repoID, path, {'with_thumbnail': true}).then(res => {
+    seafileAPI.listDir(repoID, path, { 'with_thumbnail': true }).then(res => {
       let direntList = [];
       res.data.dirent_list.forEach(item => {
         let dirent = new Dirent(item);
@@ -539,7 +539,7 @@ class LibContentView extends React.Component {
     }).catch((err) => {
       Utils.getErrorMsg(err, true);
       if (err.response && err.response.status === 403) {
-        this.setState({isDirentListLoading: false});
+        this.setState({ isDirentListLoading: false });
         return;
       }
       this.setState({
@@ -566,11 +566,11 @@ class LibContentView extends React.Component {
 
   onListContainerScroll = () => {
     let itemsShowLength = this.state.itemsShowLength + 100;
-    this.setState({itemsShowLength: itemsShowLength});
+    this.setState({ itemsShowLength: itemsShowLength });
   };
 
   resetShowLength = () => {
-    this.setState({itemsShowLength: 100});
+    this.setState({ itemsShowLength: 100 });
   };
 
   getThumbnails = (repoID, path, direntList) => {
@@ -669,7 +669,7 @@ class LibContentView extends React.Component {
           }
         }
 
-        this.setState({isCopyMoveProgressDialogShow: false});
+        this.setState({ isCopyMoveProgressDialogShow: false });
         let message = gettext('Successfully moved files to another library.');
         if (asyncOperationType === 'copy') {
           message = gettext('Successfully copied files to another library.');
@@ -678,10 +678,10 @@ class LibContentView extends React.Component {
         return;
       }
       // init state: total is 0
-      let asyncOperationProgress = !data.total ? 0 : parseInt((data.done/data.total * 100).toFixed(2));
+      let asyncOperationProgress = !data.total ? 0 : parseInt((data.done / data.total * 100).toFixed(2));
 
       this.getAsyncCopyMoveProgress();
-      this.setState({asyncOperationProgress: asyncOperationProgress});
+      this.setState({ asyncOperationProgress: asyncOperationProgress });
     } catch (error) {
       this.setState({
         asyncOperationProgress: 0,
@@ -697,7 +697,7 @@ class LibContentView extends React.Component {
     this.currentMoveItemName = '';
     this.currentMoveItemPath = '';
     let direntList = this.state.direntList;
-    this.setState({direntList: direntList.slice(0)});
+    this.setState({ direntList: direntList.slice(0) });
   };
 
   onMoveProgressDialogToggle = () => {
@@ -746,7 +746,7 @@ class LibContentView extends React.Component {
         }
 
         // show tip message if move to current repo
-        let message =  Utils.getMoveSuccessMessage(dirNames);
+        let message = Utils.getMoveSuccessMessage(dirNames);
         toaster.success(message);
       }
 
@@ -795,7 +795,7 @@ class LibContentView extends React.Component {
         }
 
         // show tip message if copy to current repo
-        let message =  Utils.getCopySuccessfulMessage(dirNames);
+        let message = Utils.getCopySuccessfulMessage(dirNames);
         toaster.success(message);
       }
     }).catch((error) => {
@@ -867,7 +867,7 @@ class LibContentView extends React.Component {
     let direntPaths = this.getSelectedDirentPaths();
     let dirNames = this.getSelectedDirentNames();
 
-    this.setState({updateDetail: !this.state.updateDetail});
+    this.setState({ updateDetail: !this.state.updateDetail });
     seafileAPI.deleteMutipleDirents(repoID, this.state.path, dirNames).then(res => {
       if (this.state.isTreePanelShown) {
         this.deleteTreeNodes(direntPaths);
@@ -890,7 +890,7 @@ class LibContentView extends React.Component {
           <a className="action-link p-0 ml-1" href="#" onClick={this.restoreDeletedDirents.bind(this, res.data.commit_id, direntPaths)}>{gettext('Undo')}</a>
         </>
       );
-      toaster.success(successTipWithUndo, {duration: 5});
+      toaster.success(successTipWithUndo, { duration: 5 });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       if (errMessage === gettext('Error')) {
@@ -957,14 +957,14 @@ class LibContentView extends React.Component {
       let repoInfo = this.state.currentRepoInfo;
 
       let url = siteRoot + 'library/' + repoInfo.repo_id + '/' + encodeURIComponent(repoInfo.repo_name) + Utils.encodePath(path);
-      window.history.pushState({url: url, path: path}, path, url);
+      window.history.pushState({ url: url, path: path }, path, url);
     }
 
     if (this.state.isTreePanelShown) {
       this.loadSidePanel(this.state.path);
     }
     this.isNeedUpdateHistoryState = false;
-    this.setState({currentMode: mode});
+    this.setState({ currentMode: mode });
     this.showDir(path);
   };
 
@@ -990,7 +990,7 @@ class LibContentView extends React.Component {
       }
       if (index === -1) { // all the data has been loaded already.
         let node = this.state.treeData.getNodeByPath(path);
-        this.setState({currentNode: node});
+        this.setState({ currentNode: node });
       } else {
         this.loadNodeAndParentsByPath(path);
       }
@@ -1027,13 +1027,13 @@ class LibContentView extends React.Component {
   };
 
   onMainNavBarClick = (nodePath) => {
-    //just for dir
+    // just for dir
     this.resetSelected();
     if (this.state.isTreePanelShown) {
       let tree = this.state.treeData.clone();
       let node = tree.getNodeByPath(nodePath);
       tree.expandNode(node);
-      this.setState({treeData: tree, currentNode: node});
+      this.setState({ treeData: tree, currentNode: node });
     }
 
     this.showDir(nodePath);
@@ -1112,7 +1112,7 @@ class LibContentView extends React.Component {
   }
 
   toggleDeleteFolderDialog = () => {
-    this.setState({isDeleteFolderDialogOpen: !this.state.isDeleteFolderDialogOpen});
+    this.setState({ isDeleteFolderDialogOpen: !this.state.isDeleteFolderDialogOpen });
   };
 
   deleteFolder = () => {
@@ -1128,7 +1128,7 @@ class LibContentView extends React.Component {
           <a className="action-link p-0 ml-1" href="#" onClick={this.restoreDeletedDirents.bind(this, res.data.commit_id, [path])}>{gettext('Undo')}</a>
         </>
       );
-      toaster.success(successTipWithUndo, {duration: 5});
+      toaster.success(successTipWithUndo, { duration: 5 });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       if (errMessage === gettext('Error')) {
@@ -1156,7 +1156,7 @@ class LibContentView extends React.Component {
             <a className="action-link p-0 ml-1" href="#" onClick={this.restoreDeletedDirents.bind(this, res.data.commit_id, [path])}>{gettext('Undo')}</a>
           </>
         );
-        toaster.success(successTipWithUndo, {duration: 5});
+        toaster.success(successTipWithUndo, { duration: 5 });
       }).catch((error) => {
         let errMessage = Utils.getErrorMsg(error);
         if (errMessage === gettext('Error')) {
@@ -1178,7 +1178,7 @@ class LibContentView extends React.Component {
   // list operations
   onMoveItem = (destRepo, dirent, moveToDirentPath, nodeParentPath) => {
     let repoID = this.props.repoID;
-    //just for view list state
+    // just for view list state
     let dirName = dirent.name;
     if (!nodeParentPath) {
       nodeParentPath = this.state.path;
@@ -1242,7 +1242,7 @@ class LibContentView extends React.Component {
 
   onCopyItem = (destRepo, dirent, copyToDirentPath, nodeParentPath) => {
     let repoID = this.props.repoID;
-    //just for view list state
+    // just for view list state
     let dirName = dirent.name;
     if (!nodeParentPath) {
       nodeParentPath = this.state.path;
@@ -1299,7 +1299,7 @@ class LibContentView extends React.Component {
   onConvertItem = (dirent, dstType) => {
     let path = Utils.joinPath(this.state.path, dirent.name);
     let repoID = this.props.repoID;
-    toaster.notifyInProgress(gettext('Converting, please wait...'), {'id': 'conversion'});
+    toaster.notifyInProgress(gettext('Converting, please wait...'), { 'id': 'conversion' });
     seafileAPI.convertFile(repoID, path, dstType).then((res) => {
       let newFileName = res.data.obj_name;
       let parentDir = res.data.parent_dir;
@@ -1312,7 +1312,7 @@ class LibContentView extends React.Component {
 
       this.addDirent(newFileName, 'file', res.data.size);
       let message = gettext('Successfully converted the file.');
-      toaster.success(message, {'id': 'conversion'});
+      toaster.success(message, { 'id': 'conversion' });
 
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -1320,7 +1320,7 @@ class LibContentView extends React.Component {
         let name = Utils.getFileName(path);
         errMessage = gettext('Failed to convert {name}.').replace('{name}', name);
       }
-      toaster.danger(errMessage, {'id': 'conversion'});
+      toaster.danger(errMessage, { 'id': 'conversion' });
     });
 
   };
@@ -1349,12 +1349,12 @@ class LibContentView extends React.Component {
     this.resetSelected();
     let repoID = this.props.repoID;
     let direntPath = Utils.joinPath(this.state.path, dirent.name);
-    if (dirent.isDir()) {  // is dir
+    if (dirent.isDir()) { // is dir
       if (this.state.isTreePanelShown) {
         this.loadTreeNodeByPath(direntPath);
       }
       this.showDir(direntPath);
-    } else {  // is file
+    } else { // is file
       if (this.state.isTreePanelShown && Utils.isMarkdownFile(direntPath)) {
         this.showColumnMarkdownFile(direntPath);
       } else {
@@ -1385,7 +1385,7 @@ class LibContentView extends React.Component {
     });
 
     if (selectedDirentList.length) {
-      this.setState({isDirentSelected: true});
+      this.setState({ isDirentSelected: true });
       if (selectedDirentList.length === direntList.length) {
         this.setState({
           isAllDirentSelected: true,
@@ -1443,7 +1443,7 @@ class LibContentView extends React.Component {
       });
 
       if (this.state.isViewFile) {
-        this.setState({fileTags: fileTags});
+        this.setState({ fileTags: fileTags });
       } else {
         this.updateDirent(dirent, 'file_tags', fileTags);
       }
@@ -1465,7 +1465,7 @@ class LibContentView extends React.Component {
         let dirent = direntList[i];
         if (dirent.name === direntObject.name && dirent.type === direntObject.type) {
           let mtime = moment.unix(direntObject.mtime).fromNow();
-          this.updateDirent(dirent, 'mtime', mtime);  // todo file size is need update too, api is not return;
+          this.updateDirent(dirent, 'mtime', mtime); // todo file size is need update too, api is not return;
           break;
         }
       }
@@ -1477,9 +1477,9 @@ class LibContentView extends React.Component {
         this.addNodeToTree(dirent.name, this.state.path, dirent.type);
       }
       if (direntObject.type === 'dir') {
-        this.setState({direntList: [dirent, ...this.state.direntList]});
+        this.setState({ direntList: [dirent, ...this.state.direntList] });
       } else {
-        this.setState({direntList: [...this.state.direntList, dirent]});
+        this.setState({ direntList: [...this.state.direntList, dirent] });
       }
     }
   };
@@ -1508,7 +1508,7 @@ class LibContentView extends React.Component {
         direntList.splice(index, 0, item);
       }
     }
-    this.setState({direntList: direntList});
+    this.setState({ direntList: direntList });
   };
 
   renameDirent = (direntPath, newName) => {
@@ -1522,7 +1522,7 @@ class LibContentView extends React.Component {
       this.setState({ path: newDirentPath });
       let repoInfo = this.state.currentRepoInfo;
       let url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name) + newDirentPath;
-      window.history.replaceState({ url: url, path: newDirentPath}, newDirentPath, url);
+      window.history.replaceState({ url: url, path: newDirentPath }, newDirentPath, url);
     } else if (Utils.isChildPath(direntPath, this.state.path)) {
       // example: direntPath = /A/B/C/D, state.path = /A/B/C
       let oldName = Utils.getFileName(direntPath);
@@ -1540,7 +1540,7 @@ class LibContentView extends React.Component {
 
       let repoInfo = this.state.currentRepoInfo;
       let url = siteRoot + 'library/' + repoID + '/' + encodeURIComponent(repoInfo.repo_name) + newPath;
-      window.history.replaceState({ url: url, path: newPath}, newPath, url);
+      window.history.replaceState({ url: url, path: newPath }, newPath, url);
     }
   };
 
@@ -1556,7 +1556,7 @@ class LibContentView extends React.Component {
         return item.name !== name;
       });
       this.recalculateSelectedDirents([name], direntList);
-      this.setState({direntList: direntList});
+      this.setState({ direntList: direntList });
     } else if (Utils.isAncestorPath(direntPath, this.state.path)) {
       // the deleted item is ancester of the current item
       let parentPath = Utils.getDirName(direntPath);
@@ -1571,7 +1571,7 @@ class LibContentView extends React.Component {
       return direntNames.indexOf(item.name) === -1;
     });
     this.recalculateSelectedDirents(direntNames, direntList);
-    this.setState({direntList: direntList});
+    this.setState({ direntList: direntList });
   };
 
   moveDirent = (direntPath, moveToDirentPath = null) => {
@@ -1584,7 +1584,7 @@ class LibContentView extends React.Component {
       return item.name !== name;
     });
     this.recalculateSelectedDirents([name], direntList);
-    this.setState({direntList: direntList});
+    this.setState({ direntList: direntList });
   };
 
   // only one scence: The moved items are inside current path
@@ -1608,7 +1608,7 @@ class LibContentView extends React.Component {
       }
       return item;
     });
-    this.setState({direntList: newDirentList});
+    this.setState({ direntList: newDirentList });
   };
 
   // tree operations
@@ -1632,7 +1632,7 @@ class LibContentView extends React.Component {
     } else {
       let parentNode = tree.getNodeByPath(node.parentNode.path);
       parentNode.isExpanded = true;
-      this.setState({treeData: tree, currentNode: node}); //tree
+      this.setState({ treeData: tree, currentNode: node }); // tree
     }
   };
 
@@ -1642,13 +1642,13 @@ class LibContentView extends React.Component {
     if (Utils.isMarkdownFile(path)) {
       path = Utils.getDirName(path);
     }
-    seafileAPI.listDir(repoID, path, {with_parents: true}).then(res => {
+    seafileAPI.listDir(repoID, path, { with_parents: true }).then(res => {
       const { dirent_list: direntList, user_perm } = res.data;
       let results = {};
       for (let i = 0; i < direntList.length; i++) {
         let object = direntList[i];
         let parentDir = object.parent_dir;
-        let key = parentDir === '/' ?  '/' : parentDir.slice(0, parentDir.length - 1);
+        let key = parentDir === '/' ? '/' : parentDir.slice(0, parentDir.length - 1);
         if (!results[key]) {
           results[key] = [];
         }
@@ -1666,7 +1666,7 @@ class LibContentView extends React.Component {
         userPerm: user_perm,
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
@@ -1675,7 +1675,7 @@ class LibContentView extends React.Component {
     let repoID = this.props.repoID;
 
     if (!this.state.pathExist) {
-      this.setState({pathExist: true});
+      this.setState({ pathExist: true });
     }
 
     if (node.object.isDir()) {
@@ -1686,7 +1686,7 @@ class LibContentView extends React.Component {
         seafileAPI.listDir(repoID, node.path).then(res => {
           this.addResponseListToNode(res.data.dirent_list, node);
           tree.collapseNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         }).catch(error => {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
@@ -1695,12 +1695,12 @@ class LibContentView extends React.Component {
       if (isLoaded && node.path === this.state.path) {
         if (node.isExpanded) {
           let tree = treeHelper.collapseNode(this.state.treeData, node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         } else {
           let tree = this.state.treeData.clone();
           node = tree.getNodeByPath(node.path);
           tree.expandNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         }
       }
     }
@@ -1709,7 +1709,7 @@ class LibContentView extends React.Component {
       return;
     }
 
-    if (node.object.isDir()) {  // isDir
+    if (node.object.isDir()) { // isDir
       this.showDir(node.path);
     } else {
       if (Utils.isMarkdownFile(node.path)) {
@@ -1750,7 +1750,7 @@ class LibContentView extends React.Component {
 
   onTreeNodeCollapse = (node) => {
     let tree = treeHelper.collapseNode(this.state.treeData, node);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   onTreeNodeExpanded = (node) => {
@@ -1760,47 +1760,47 @@ class LibContentView extends React.Component {
     if (!node.isLoaded) {
       seafileAPI.listDir(repoID, node.path).then(res => {
         this.addResponseListToNode(res.data.dirent_list, node);
-        this.setState({treeData: tree});
+        this.setState({ treeData: tree });
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
     } else {
       tree.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     }
   };
 
   addNodeToTree = (name, parentPath, type) => {
     let node = this.createTreeNode(name, type);
     let tree = treeHelper.addNodeToParentByPath(this.state.treeData, node, parentPath);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   renameTreeNode = (path, newName) => {
     let tree = treeHelper.renameNodeByPath(this.state.treeData, path, newName);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   deleteTreeNode = (path) => {
     let tree = treeHelper.deleteNodeByPath(this.state.treeData, path);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   deleteTreeNodes = (paths) => {
     let tree = treeHelper.deleteNodeListByPaths(this.state.treeData, paths);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   moveTreeNode = (nodePath, moveToPath, moveToRepo, nodeName) => {
     let repoID = this.props.repoID;
     if (repoID !== moveToRepo.repo_id) {
       let tree = treeHelper.deleteNodeByPath(this.state.treeData, nodePath);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
       return;
     }
     let tree = treeHelper.moveNodeByPath(this.state.treeData, nodePath, moveToPath, nodeName);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   copyTreeNode = (nodePath, copyToPath, destRepo, nodeName) => {
@@ -1809,12 +1809,12 @@ class LibContentView extends React.Component {
       return;
     }
     let tree = treeHelper.copyNodeByPath(this.state.treeData, nodePath, copyToPath, nodeName);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   createTreeNode(name, type) {
     let object = this.createDirent(name, type);
-    return new TreeNode({object});
+    return new TreeNode({ object });
   }
 
   createDirent(name, type, size) {
@@ -1835,7 +1835,7 @@ class LibContentView extends React.Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
@@ -1878,14 +1878,14 @@ class LibContentView extends React.Component {
   };
 
   onLibDecryptDialog = () => {
-    this.setState({libNeedDecrypt: false});
+    this.setState({ libNeedDecrypt: false });
     this.loadDirData(this.state.path);
   };
 
   onLibDecryptWhenCopyMove = () => {
     if (this.state.libNeedDecryptWhenCopy) {
       if (this.state.copyMoveSingleItem) {
-        this.onCopyItem(this.state.destRepoWhenCopyMove, this.state.srcDirentWhenCopyMove, this.state.destDirentPathWhenCopyMove,this.state.srcNodeParentPathWhenCopyMove);
+        this.onCopyItem(this.state.destRepoWhenCopyMove, this.state.srcDirentWhenCopyMove, this.state.destDirentPathWhenCopyMove, this.state.srcNodeParentPathWhenCopyMove);
       } else {
         this.onCopyItems(this.state.destRepoWhenCopyMove, this.state.destDirentPathWhenCopyMove);
       }
@@ -1935,7 +1935,7 @@ class LibContentView extends React.Component {
         return new FileTag(item);
       });
 
-      this.setState({fileTags: fileTags});
+      this.setState({ fileTags: fileTags });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -1966,7 +1966,7 @@ class LibContentView extends React.Component {
       }
       return dirent;
     });
-    this.setState({direntList: direntList});
+    this.setState({ direntList: direntList });
     this.updateUsedRepoTags();
   };
 
diff --git a/frontend/src/pages/libraries/index.js b/frontend/src/pages/libraries/index.js
index c30e446dfa..917358d868 100644
--- a/frontend/src/pages/libraries/index.js
+++ b/frontend/src/pages/libraries/index.js
@@ -24,10 +24,10 @@ class Libraries extends Component {
   constructor(props) {
     super(props);
     this.sortOptions = [
-      {value: 'name-asc', text: gettext('By name ascending')},
-      {value: 'name-desc', text: gettext('By name descending')},
-      {value: 'time-asc', text: gettext('By time ascending')},
-      {value: 'time-desc', text: gettext('By time descending')}
+      { value: 'name-asc', text: gettext('By name ascending') },
+      { value: 'name-desc', text: gettext('By name descending') },
+      { value: 'time-asc', text: gettext('By time ascending') },
+      { value: 'time-desc', text: gettext('By time descending') }
     ];
 
     this.state = {
@@ -38,7 +38,7 @@ class Libraries extends Component {
       isSortOptionsDialogOpen: false,
       isGuideForNewDialogOpen: window.app.pageOptions.guideEnabled,
       groupList: [],
-      sharedRepoList:[],
+      sharedRepoList: [],
       publicRepoList: [],
       isCreateRepoDialogOpen: false,
       currentViewMode: localStorage.getItem('sf_repo_list_view_mode') || 'list',
@@ -107,7 +107,7 @@ class Libraries extends Component {
         storage_name: res.data.storage_name
       });
       this.state.repoList.unshift(newRepo);
-      this.setState({repoList: this.state.repoList});
+      this.setState({ repoList: this.state.repoList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -116,7 +116,7 @@ class Libraries extends Component {
 
   onSelectSortOption = (sortOption) => {
     const [sortBy, sortOrder] = sortOption.value.split('-');
-    this.setState({sortBy, sortOrder}, () => {
+    this.setState({ sortBy, sortOrder }, () => {
       localStorage.setItem('sf_repos_sort_by', sortBy);
       localStorage.setItem('sf_repos_sort_order', sortOrder);
       const { allRepoList: repoList, groupList: groups } = this.state;
@@ -145,7 +145,7 @@ class Libraries extends Component {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repoID;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onRenameRepo = (repo, newName) => {
@@ -155,7 +155,7 @@ class Libraries extends Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onMonitorRepo = (repo, monitored) => {
@@ -165,14 +165,14 @@ class Libraries extends Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onDeleteRepo = (repo) => {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repo.repo_id;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   toggleGuideForNewDialog = () => {
@@ -272,7 +272,7 @@ class Libraries extends Component {
                         <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                         {gettext('My Libraries')}
                         <SingleDropdownToolbar
-                          opList={[{'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog}]}
+                          opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
                         />
                       </h4>
                       {(!Utils.isDesktop() && this.state.repoList.length > 0) &&
diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js
index e2da31dd2b..c7b4006f75 100644
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -12,7 +12,7 @@ import { Utils } from '../../utils/utils';
 class Content extends Component {
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props.data;
 
     if (loading) {
       return <span className="loading-icon loading-tip"></span>;
@@ -48,7 +48,7 @@ class Content extends Component {
 
       const isDesktop = Utils.isDesktop();
       return items.length ? (
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? desktopThead : mobileThead}
           <tbody>
             {items.map((item, index) => {
@@ -56,7 +56,7 @@ class Content extends Component {
             })}
           </tbody>
         </table>
-      ): emptyTip;
+      ) : emptyTip;
     }
   }
 }
diff --git a/frontend/src/pages/markdown-editor/detail-list-view/index.js b/frontend/src/pages/markdown-editor/detail-list-view/index.js
index 215ba83412..f29db0249b 100644
--- a/frontend/src/pages/markdown-editor/detail-list-view/index.js
+++ b/frontend/src/pages/markdown-editor/detail-list-view/index.js
@@ -57,7 +57,7 @@ class DetailListView extends React.Component {
   };
 
   onEditFileTagToggle = () => {
-    this.setState({isEditFileTagShow: !this.state.isEditFileTagShow});
+    this.setState({ isEditFileTagShow: !this.state.isEditFileTagShow });
   };
 
   render() {
diff --git a/frontend/src/pages/markdown-editor/editor-api.js b/frontend/src/pages/markdown-editor/editor-api.js
index a01996a839..ae5f51f442 100644
--- a/frontend/src/pages/markdown-editor/editor-api.js
+++ b/frontend/src/pages/markdown-editor/editor-api.js
@@ -14,7 +14,7 @@ function getImageFileNameWithTimestamp() {
 
 class EditorApi {
 
-  constructor () {
+  constructor() {
     this.repoID = repoID;
     this.filePath = filePath;
     this.serviceUrl = serviceUrl;
@@ -33,7 +33,7 @@ class EditorApi {
     );
   }
 
-  unstarItem () {
+  unstarItem() {
     return (
       seafileAPI.unstarItem(this.repoID, this.filePath)
     );
@@ -62,7 +62,7 @@ class EditorApi {
       seafileAPI.getFileServerUploadLink(repoID, '/').then((res) => {
         const uploadLink = res.data + '?ret-json=1';
         const name = getImageFileNameWithTimestamp();
-        const newFile = new File([imageFile], name, {type: imageFile.type});
+        const newFile = new File([imageFile], name, { type: imageFile.type });
         const formData = new FormData();
         formData.append('parent_dir', '/');
         formData.append('relative_path', 'images/auto-upload');
@@ -101,7 +101,7 @@ class EditorApi {
 
   getFiles() {
     const rootPath = '/';
-    return seafileAPI.listDir(repoID, rootPath, { recursive: true} ).then((response) => {
+    return seafileAPI.listDir(repoID, rootPath, { recursive: true } ).then((response) => {
       var files = response.data.dirent_list.map((item) => {
         return {
           name: item.name,
@@ -129,7 +129,7 @@ class EditorApi {
     return seafileAPI.getInternalLink(repoID, filePath);
   }
 
-  createShareLink (repoID, filePath, userPassword, userValidDays, permissions) {
+  createShareLink(repoID, filePath, userPassword, userValidDays, permissions) {
     return seafileAPI.createShareLink(repoID, filePath, userPassword, userValidDays, permissions);
   }
 
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
index a1b4a90542..07d259eef1 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
@@ -40,18 +40,18 @@ class ButtonItem extends React.Component {
 
     const { isFreezed, tooltipOpen } = this.state;
     if (isFreezed && !tooltipOpen) return;
-    this.setState({tooltipOpen: !tooltipOpen, isFreezed: true});
+    this.setState({ tooltipOpen: !tooltipOpen, isFreezed: true });
 
     setTimeout(() => {
       this.setState({ isFreezed: false });
     }, 100);
   };
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     const { disabled, isActive } = nextProps;
     const { disabled: oldDisabled, isActive: oldIsActive } = this.props;
     if (disabled !== oldDisabled) {
-      this.setState({tooltipOpen: false});
+      this.setState({ tooltipOpen: false });
       return true;
     }
     // only render iconButton when the button is active or show show tooltip
@@ -89,7 +89,7 @@ class ButtonItem extends React.Component {
     const { tooltipOpen } = this.state;
     const { id, isActive, disabled, icon, text } = this.props;
     const className = this.getClassName();
-    const delay = {show: 0, hide: 0};
+    const delay = { show: 0, hide: 0 };
     return (
       <button
         type="button"
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js b/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
index 74529cb49b..bb0a3bf3ab 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/collab-users-button.js
@@ -12,7 +12,7 @@ class CollabUsersButton extends React.PureComponent {
   }
 
   dropdownToggle = () => {
-    this.setState({dropdownOpen: !this.state.dropdownOpen});
+    this.setState({ dropdownOpen: !this.state.dropdownOpen });
   };
 
   render() {
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index 475a1027d8..a6e856c297 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -153,9 +153,10 @@ class HeaderToolbar extends React.Component {
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/></button>
+                    <i className='sf3-font sf3-font-spinner'/>
+                  </button>
                   :
-                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save'  disabled={!contentChanged}
+                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save' disabled={!contentChanged}
                     onMouseDown={this.props.onSaveEditorContent} isActive={contentChanged}/>
                 }
               </ButtonGroup>
@@ -215,7 +216,8 @@ class HeaderToolbar extends React.Component {
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/></button>
+                    <i className='sf3-font sf3-font-spinner'/>
+                  </button>
                   :
                   <ButtonItem
                     id={'saveButton'}
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
index 8df41d74ea..61dd1728eb 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
@@ -24,7 +24,7 @@ class MoreMenu extends React.PureComponent {
     super(props);
     this.state = {
       tooltipOpen: false,
-      dropdownOpen:false
+      dropdownOpen: false
     };
   }
 
@@ -52,7 +52,7 @@ class MoreMenu extends React.PureComponent {
       <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
         <DropdownToggle id="moreButton" aria-label={gettext('More operations')}>
           <i className="sf3-font sf3-font-more-vertical"/>
-          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
+          <Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
           </Tooltip>
         </DropdownToggle>
         <DropdownMenu className="drop-list" right={true}>
diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js
index 7761cc2078..e3ac8123ad 100644
--- a/frontend/src/pages/markdown-editor/index.js
+++ b/frontend/src/pages/markdown-editor/index.js
@@ -51,7 +51,7 @@ class MarkdownEditor extends React.Component {
       showShareLinkDialog: false,
       showInsertFileDialog: false,
       collabUsers: userInfo ?
-        [{user: userInfo, is_editing: false}] : [],
+        [{ user: userInfo, is_editing: false }] : [],
       value: null,
       isShowHistory: false,
       readOnly: true,
@@ -92,19 +92,19 @@ class MarkdownEditor extends React.Component {
     }
   };
 
-  emitSwitchEditor = (is_editing=false) => {
+  emitSwitchEditor = (is_editing = false) => {
     if (userInfo && this.state.collabServer) {
       const { repoID, path } = this.state.fileInfo;
       this.socket.emit('presence', {
         request: 'editing',
-        doc_id: CryptoJS.MD5(repoID+path).toString(),
+        doc_id: CryptoJS.MD5(repoID + path).toString(),
         user: userInfo,
         is_editing,
       });
     }
   };
 
-  receiveUpdateData (data) {
+  receiveUpdateData(data) {
     let currentTime = new Date();
     if ((parseFloat(currentTime - this.lastModifyTime) / 1000) <= 5) {
       return;
@@ -116,7 +116,7 @@ class MarkdownEditor extends React.Component {
             {gettext('This file has been updated.')}
             <a href='' >{' '}{gettext('Refresh')}</a>
           </span>,
-          {id: 'repo_updated', duration: 3600});
+          { id: 'repo_updated', duration: 3600 });
       }
     });
   }
@@ -125,7 +125,7 @@ class MarkdownEditor extends React.Component {
   receivePresenceData(data) {
     let collabUsers = [];
     let editingUsers = [];
-    switch(data.response) {
+    switch (data.response) {
       case 'user_join':
         toaster.notify(`user ${data.user.name} joined`, {
           duration: 3
@@ -150,7 +150,7 @@ class MarkdownEditor extends React.Component {
         editingUsers = collabUsers.filter(ele => ele.is_editing === true && ele.myself === undefined);
         if (editingUsers.length > 0) {
           const message = gettext('Another user is editing this file!');
-          toaster.danger(message, {duration: 3});
+          toaster.danger(message, { duration: 3 });
         }
         this.setState({ collabUsers });
         return;
@@ -238,7 +238,7 @@ class MarkdownEditor extends React.Component {
     const { fileInfo } = this.state;
     this.setState({
       loading: false,
-      fileInfo: {...fileInfo, mtime, size, starred, permission, lastModifier, id},
+      fileInfo: { ...fileInfo, mtime, size, starred, permission, lastModifier, id },
       markdownContent,
       value: '',
       readOnly: !hasPermission,
@@ -248,7 +248,7 @@ class MarkdownEditor extends React.Component {
       const { repoID, path } = this.state.fileInfo;
       this.socket.emit('presence', {
         request: 'join_room',
-        doc_id: CryptoJS.MD5(repoID+path).toString(),
+        doc_id: CryptoJS.MD5(repoID + path).toString(),
         user: userInfo
       });
 
@@ -329,22 +329,22 @@ class MarkdownEditor extends React.Component {
   setFileInfoMtime = (fileInfo) => {
     const { fileInfo: oldFileInfo } = this.state;
     const newFileInfo = Object.assign({}, oldFileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name });
-    this.setState({fileInfo: newFileInfo});
+    this.setState({ fileInfo: newFileInfo });
   };
 
   toggleStar = () => {
     const { fileInfo } = this.state;
     const { starred } = fileInfo;
-    const newFileInfo = Object.assign({}, fileInfo, {starred: !starred});
+    const newFileInfo = Object.assign({}, fileInfo, { starred: !starred });
     if (starred) {
       editorApi.unstarItem().then((response) => {
-        this.setState({fileInfo: newFileInfo});
+        this.setState({ fileInfo: newFileInfo });
       });
       return;
     }
 
     editorApi.starItem().then((response) => {
-      this.setState({fileInfo: newFileInfo});
+      this.setState({ fileInfo: newFileInfo });
     });
   };
 
@@ -372,7 +372,7 @@ class MarkdownEditor extends React.Component {
       return;
     }
     let innerURL = serviceUrl + '/lib/' + repoID + '/file' + Utils.encodePath(filePath);
-    eventBus.dispatch(EXTERNAL_EVENTS.INSERT_IMAGE, { title: fileName, url: innerURL, selection});
+    eventBus.dispatch(EXTERNAL_EVENTS.INSERT_IMAGE, { title: fileName, url: innerURL, selection });
   };
 
   addParticipants = () => {
@@ -408,7 +408,7 @@ class MarkdownEditor extends React.Component {
 
       this.lastModifyTime = new Date();
       const message = gettext('Successfully saved');
-      toaster.success(message, {duration: 2,});
+      toaster.success(message, { duration: 2, });
 
       editorApi.getFileInfo().then((res) => {
         this.setFileInfoMtime(res.data);
@@ -418,7 +418,7 @@ class MarkdownEditor extends React.Component {
     }, () => {
       this.setState({ saving: false });
       const message = gettext('Failed to save');
-      toaster.danger(message, {duration: 2});
+      toaster.danger(message, { duration: 2 });
     });
   };
 
@@ -505,4 +505,4 @@ class MarkdownEditor extends React.Component {
   }
 }
 
-export default  MarkdownEditor;
+export default MarkdownEditor;
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index 8e7d59d0aa..8f4b2c4057 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -37,7 +37,7 @@ class MyLibsDeleted extends Component {
     let deletedRepoList = this.state.deletedRepoList.filter(item => {
       return item.repo_id !== repoID;
     });
-    this.setState({deletedRepoList: deletedRepoList});
+    this.setState({ deletedRepoList: deletedRepoList });
   };
 
   render() {
@@ -85,10 +85,10 @@ class DeletedRepoTable extends Component {
       <table>
         <thead>
           <tr>
-            <th style={{width: '4%'}}>{/*img*/}</th>
-            <th style={{width: '52%'}}>{gettext('Name')}</th>
-            <th style={{width: '30%'}}>{gettext('Deleted Time')}</th>
-            <th style={{width: '14%'}}></th>
+            <th style={{ width: '4%' }}>{/* img*/}</th>
+            <th style={{ width: '52%' }}>{gettext('Name')}</th>
+            <th style={{ width: '30%' }}>{gettext('Deleted Time')}</th>
+            <th style={{ width: '14%' }}></th>
           </tr>
         </thead>
         <tbody>
@@ -171,7 +171,8 @@ class DeletedRepoItem extends Component {
         <td>
           <a href="#" onClick={this.restoreDeletedRepo} title={gettext('Restore')}
             role="button" aria-label={gettext('Restore')}
-            className={`sf2-icon-reply action-icon ${this.state.highlight ? '' : 'vh'}`}></a>
+            className={`sf2-icon-reply action-icon ${this.state.highlight ? '' : 'vh'}`}>
+          </a>
         </td>
       </tr>
     );
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index 0724193127..850af0a3b0 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -38,7 +38,7 @@ class MyLibraries extends Component {
   }
 
   componentDidMount() {
-    seafileAPI.listRepos({type: 'mine'}).then((res) => {
+    seafileAPI.listRepos({ type: 'mine' }).then((res) => {
       let repoList = res.data.repos.map((item) => {
         return new Repo(item);
       });
@@ -74,7 +74,7 @@ class MyLibraries extends Component {
         storage_name: res.data.storage_name
       });
       this.state.repoList.unshift(newRepo);
-      this.setState({repoList: this.state.repoList});
+      this.setState({ repoList: this.state.repoList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -95,7 +95,7 @@ class MyLibraries extends Component {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repoID;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onRenameRepo = (repo, newName) => {
@@ -105,7 +105,7 @@ class MyLibraries extends Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onMonitorRepo = (repo, monitored) => {
@@ -115,18 +115,18 @@ class MyLibraries extends Component {
       }
       return item;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   onDeleteRepo = (repo) => {
     let repoList = this.state.repoList.filter(item => {
       return item.repo_id !== repo.repo_id;
     });
-    this.setState({repoList: repoList});
+    this.setState({ repoList: repoList });
   };
 
   toggleCreateRepoDialog = () => {
-    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+    this.setState({ isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen });
   };
 
   toggleDropdownMenu = () => {
@@ -155,7 +155,7 @@ class MyLibraries extends Component {
               <h3 className="sf-heading m-0">
                 {gettext('My Libraries')}
                 <SingleDropdownToolbar
-                  opList={[{'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog}]}
+                  opList={[{ 'text': gettext('New Library'), 'onClick': this.toggleCreateRepoDialog }]}
                 />
               </h3>
               <div>
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index f1ca95528a..5e46aac05f 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -87,7 +87,7 @@ class MylibRepoListItem extends React.Component {
   };
 
   onMenuItemClick = (item) => {
-    switch(item) {
+    switch (item) {
       case 'Star':
       case 'Unstar':
         this.onToggleStarRepo();
@@ -153,7 +153,7 @@ class MylibRepoListItem extends React.Component {
     const repoName = this.props.repo.repo_name;
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully unstarred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -163,7 +163,7 @@ class MylibRepoListItem extends React.Component {
       });
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully starred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -200,57 +200,57 @@ class MylibRepoListItem extends React.Component {
     if (e != undefined) {
       e.preventDefault();
     }
-    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+    this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
 
   onDeleteToggle = (e) => {
     e.preventDefault();
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+    this.setState({ isDeleteDialogShow: !this.state.isDeleteDialogShow });
   };
 
   onRenameToggle = () => {
     this.props.onFreezedItem();
-    this.setState({isRenaming: !this.state.isRenaming});
+    this.setState({ isRenaming: !this.state.isRenaming });
   };
 
   onTransferToggle = () => {
-    this.setState({isTransferDialogShow: !this.state.isTransferDialogShow});
+    this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
   onHistorySettingToggle = () => {
-    this.setState({isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow});
+    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
   };
 
   onChangePasswordToggle = () => {
-    this.setState({isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow});
+    this.setState({ isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow });
   };
 
   onResetPasswordToggle = () => {
-    this.setState({isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow});
+    this.setState({ isResetPasswordDialogShow: !this.state.isResetPasswordDialogShow });
   };
 
   onLabelToggle = () => {
-    this.setState({isLabelRepoStateDialogOpen: !this.state.isLabelRepoStateDialogOpen});
+    this.setState({ isLabelRepoStateDialogOpen: !this.state.isLabelRepoStateDialogOpen });
   };
 
   onFolderPermissionToggle = () => {
-    this.setState({isFolderPermissionDialogShow: !this.state.isFolderPermissionDialogShow});
+    this.setState({ isFolderPermissionDialogShow: !this.state.isFolderPermissionDialogShow });
   };
 
   onAPITokenToggle = () => {
-    this.setState({isAPITokenDialogShow: !this.state.isAPITokenDialogShow});
+    this.setState({ isAPITokenDialogShow: !this.state.isAPITokenDialogShow });
   };
 
   onSeaTableIntegrationToggle = () => {
-    this.setState({isSeaTableIntegrationShow: !this.state.isSeaTableIntegrationShow});
+    this.setState({ isSeaTableIntegrationShow: !this.state.isSeaTableIntegrationShow });
   };
 
   toggleRepoShareAdminDialog = () => {
-    this.setState({isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen});
+    this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
   toggleOldFilesAutoDelDialog = () => {
-    this.setState({isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen});
+    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
   };
 
   onUnfreezedItem = () => {
@@ -275,7 +275,7 @@ class MylibRepoListItem extends React.Component {
 
   onRenameCancel = () => {
     this.props.onUnfreezedItem();
-    this.setState({isRenaming: !this.state.isRenaming});
+    this.setState({ isRenaming: !this.state.isRenaming });
   };
 
   onTransferRepo = (user) => {
@@ -286,9 +286,9 @@ class MylibRepoListItem extends React.Component {
       toaster.success(message);
     }).catch(error => {
       if (error.response) {
-        toaster.danger(error.response.data.error_msg || gettext('Error'), {duration: 3});
+        toaster.danger(error.response.data.error_msg || gettext('Error'), { duration: 3 });
       } else {
-        toaster.danger(gettext('Failed. Please check the network.'), {duration: 3});
+        toaster.danger(gettext('Failed. Please check the network.'), { duration: 3 });
       }
     });
     this.onTransferToggle();
@@ -314,7 +314,7 @@ class MylibRepoListItem extends React.Component {
       }
       toaster.danger(errMessage);
 
-      this.setState({isRepoDeleted: false});
+      this.setState({ isRepoDeleted: false });
     });
   };
 
@@ -334,7 +334,8 @@ class MylibRepoListItem extends React.Component {
             aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
             onClick={this.onToggleStarRepo}
             className={`op-icon m-0 ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
-          ></i>
+          >
+          </i>
         </td>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td>
@@ -434,7 +435,7 @@ class MylibRepoListItem extends React.Component {
     let repoURL = this.repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td onClick={this.visitRepo}><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td onClick={this.visitRepo}>
           {this.state.isRenaming && (
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-view.js b/frontend/src/pages/my-libs/mylib-repo-list-view.js
index fdf9a480c9..c25efa1fb4 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@@ -28,11 +28,11 @@ class MylibRepoListView extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   sortByName = (e) => {
diff --git a/frontend/src/pages/my-libs/mylib-repo-menu.js b/frontend/src/pages/my-libs/mylib-repo-menu.js
index c00e026c34..6ac7e28988 100644
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@@ -47,12 +47,12 @@ class MylibRepoMenu extends React.Component {
   toggleOperationMenu = (e) => {
     let dataset = e.target ? e.target.dataset : null;
     if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
-      this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+      this.setState({ isItemMenuShow: !this.state.isItemMenuShow });
       return;
     }
 
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
+      { isItemMenuShow: !this.state.isItemMenuShow },
       () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
@@ -131,7 +131,7 @@ class MylibRepoMenu extends React.Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Star':
         translateResult = gettext('Star');
         break;
@@ -213,7 +213,7 @@ class MylibRepoMenu extends React.Component {
             data-toggle="dropdown"
           />
           <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
-            {operations.map((item, index)=> {
+            {operations.map((item, index) => {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
               } else if (item == 'Advanced') {
@@ -234,7 +234,7 @@ class MylibRepoMenu extends React.Component {
                       <i className="sf3-font-down sf3-font rotate-270"></i>
                     </DropdownToggle>
                     <DropdownMenu>
-                      {advancedOperations.map((item, index)=> {
+                      {advancedOperations.map((item, index) => {
                         return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateOperations(item)}</DropdownItem>);
                       })}
                     </DropdownMenu>
diff --git a/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js b/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
index 80421b1be4..8a747e7ca7 100644
--- a/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
+++ b/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
@@ -47,7 +47,7 @@ class OCMViaWebdav extends Component {
       let items = this.state.items.filter(item => {
         return item.id != id;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       toaster.success(gettext('Successfully unshared {name}').replace('{name}', name));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/org-admin/departments/department-libraries.js b/frontend/src/pages/org-admin/departments/department-libraries.js
index 6ae6d2e9aa..1f33b10ec5 100644
--- a/frontend/src/pages/org-admin/departments/department-libraries.js
+++ b/frontend/src/pages/org-admin/departments/department-libraries.js
@@ -43,13 +43,13 @@ class OrgDepartmentItem extends React.Component {
 
   onAddNewRepo = (newRepo) => {
     const { repos } = this.state;
-    repos.unshift({...newRepo, name: newRepo.repo_name}); // 'name': to be compatible with the data returned by the 'GET' request
+    repos.unshift({ ...newRepo, name: newRepo.repo_name }); // 'name': to be compatible with the data returned by the 'GET' request
     this.setState({ repos });
   };
 
   onDeleteRepo = (repoID) => {
     const { repos } = this.state;
-    this.setState({repos: repos.filter(item => item.repo_id != repoID)});
+    this.setState({ repos: repos.filter(item => item.repo_id != repoID) });
   };
 
   render() {
diff --git a/frontend/src/pages/org-admin/departments/department-list.js b/frontend/src/pages/org-admin/departments/department-list.js
index d1041fece4..e02578c422 100644
--- a/frontend/src/pages/org-admin/departments/department-list.js
+++ b/frontend/src/pages/org-admin/departments/department-list.js
@@ -35,11 +35,11 @@ class OrgDepartmentsList extends React.Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onDepartmentNameChanged = (dept) => {
@@ -54,7 +54,7 @@ class OrgDepartmentsList extends React.Component {
   };
 
   toggleAddDepartDialog = () => {
-    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog });
   };
 
   onAddNewDepartment = (newDepartment) => {
@@ -123,7 +123,7 @@ class OrgDepartmentsList extends React.Component {
                   </thead>
                   <tbody>
                     {groups.map((group, index) => {
-                      return(
+                      return (
                         <GroupItem
                           key={group.id}
                           group={group}
diff --git a/frontend/src/pages/org-admin/departments/department-members.js b/frontend/src/pages/org-admin/departments/department-members.js
index 91584f5d54..9ac7333887 100644
--- a/frontend/src/pages/org-admin/departments/department-members.js
+++ b/frontend/src/pages/org-admin/departments/department-members.js
@@ -92,11 +92,11 @@ class OrgDepartmentItem extends React.Component {
   };
 
   onFreezedDepart = () => {
-    this.setState({isDepartFreezed: true});
+    this.setState({ isDepartFreezed: true });
   };
 
   onUnfreezedDepart = () => {
-    this.setState({isDepartFreezed: false});
+    this.setState({ isDepartFreezed: false });
   };
 
   onDepartmentNameChanged = (dept) => {
@@ -140,7 +140,7 @@ class OrgDepartmentItem extends React.Component {
   };
 
   toggleAddDepartDialog = () => {
-    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog });
   };
 
   showSetGroupQuotaDialog = (subGroupID) => {
diff --git a/frontend/src/pages/org-admin/departments/department.js b/frontend/src/pages/org-admin/departments/department.js
index df02eb8d2c..5c01b8e38e 100644
--- a/frontend/src/pages/org-admin/departments/department.js
+++ b/frontend/src/pages/org-admin/departments/department.js
@@ -39,9 +39,9 @@ class OrgDepartmentItem extends React.Component {
     };
 
     this.navItems = [
-      {name: 'subDepartments', urlPart: '/', text: gettext('Sub-departments')},
-      {name: 'members', urlPart: '/members/', text: gettext('Members')},
-      {name: 'repos', urlPart: '/libraries/', text: gettext('Libraries')}
+      { name: 'subDepartments', urlPart: '/', text: gettext('Sub-departments') },
+      { name: 'members', urlPart: '/members/', text: gettext('Members') },
+      { name: 'repos', urlPart: '/libraries/', text: gettext('Libraries') }
     ];
   }
 
@@ -79,7 +79,7 @@ class OrgDepartmentItem extends React.Component {
   };
 
   toggleAddDepartDialog = () => {
-    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog});
+    this.setState({ isShowAddDepartDialog: !this.state.isShowAddDepartDialog });
   };
 
   render() {
diff --git a/frontend/src/pages/org-admin/departments/group-item.js b/frontend/src/pages/org-admin/departments/group-item.js
index 3c045ef73b..61ba186d6d 100644
--- a/frontend/src/pages/org-admin/departments/group-item.js
+++ b/frontend/src/pages/org-admin/departments/group-item.js
@@ -45,7 +45,7 @@ class GroupItem extends React.Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Rename':
         translateResult = gettext('Rename');
         break;
@@ -60,7 +60,7 @@ class GroupItem extends React.Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Rename':
         this.toggleRenameDialog();
         break;
@@ -102,7 +102,7 @@ class GroupItem extends React.Component {
   render() {
     const group = this.props.group;
     const { highlight, isOpIconShown, isRenameDialogOpen, isSetGroupQuotaDialogOpen, isDeleteDialogOpen } = this.state;
-    const newHref = siteRoot+ 'org/departmentadmin/groups/' + group.id + '/';
+    const newHref = siteRoot + 'org/departmentadmin/groups/' + group.id + '/';
     return (
       <Fragment>
         <tr className={highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
diff --git a/frontend/src/pages/org-admin/departments/sub-departments.js b/frontend/src/pages/org-admin/departments/sub-departments.js
index d3f300902b..68824f586f 100644
--- a/frontend/src/pages/org-admin/departments/sub-departments.js
+++ b/frontend/src/pages/org-admin/departments/sub-departments.js
@@ -64,11 +64,11 @@ class OrgDepartmentItem extends React.Component {
   };
 
   onFreezedDepart = () => {
-    this.setState({isDepartFreezed: true});
+    this.setState({ isDepartFreezed: true });
   };
 
   onUnfreezedDepart = () => {
-    this.setState({isDepartFreezed: false});
+    this.setState({ isDepartFreezed: false });
   };
 
   onDepartmentNameChanged = (dept) => {
@@ -133,7 +133,7 @@ class OrgDepartmentItem extends React.Component {
                 </thead>
                 <tbody>
                   {groups.map((group, index) => {
-                    return(
+                    return (
                       <React.Fragment key={group.id}>
                         <GroupItem
                           group={group}
diff --git a/frontend/src/pages/org-admin/devices/devices-by-platform.js b/frontend/src/pages/org-admin/devices/devices-by-platform.js
index f201686b24..1e33485c10 100644
--- a/frontend/src/pages/org-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/org-admin/devices/devices-by-platform.js
@@ -46,7 +46,7 @@ class Content extends Component {
                 <th width="19%">{gettext('Device Name')}</th>
                 <th width="19%">{gettext('IP')}</th>
                 <th width="19%">{gettext('Last Access')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -94,11 +94,11 @@ class Item extends Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   handleUnlink = (e) => {
@@ -111,13 +111,13 @@ class Item extends Component {
   };
 
   toggleUnlinkDeviceDialog = () => {
-    this.setState({isUnlinkDeviceDialogOpen: !this.state.isUnlinkDeviceDialogOpen});
+    this.setState({ isUnlinkDeviceDialogOpen: !this.state.isUnlinkDeviceDialogOpen });
   };
 
   unlinkDevice = (deleteFiles) => {
     const { platform, device_id, user } = this.props.item;
     seafileAPI.orgAdminUnlinkDevice(orgID, platform, device_id, user, deleteFiles).then((res) => {
-      this.setState({unlinked: true});
+      this.setState({ unlinked: true });
       let message = gettext('Successfully unlinked the device.');
       toaster.success(message);
     }).catch((error) => {
@@ -176,7 +176,7 @@ class DevicesByPlatform extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/org-admin/devices/devices-errors.js b/frontend/src/pages/org-admin/devices/devices-errors.js
index 20ba732b67..92d1e0a5e3 100644
--- a/frontend/src/pages/org-admin/devices/devices-errors.js
+++ b/frontend/src/pages/org-admin/devices/devices-errors.js
@@ -94,11 +94,11 @@ class Item extends Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   render() {
@@ -136,7 +136,7 @@ class OrgDevicesErrors extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/org-admin/devices/devices-nav.js b/frontend/src/pages/org-admin/devices/devices-nav.js
index 8104b8e316..1712c357a5 100644
--- a/frontend/src/pages/org-admin/devices/devices-nav.js
+++ b/frontend/src/pages/org-admin/devices/devices-nav.js
@@ -12,9 +12,9 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'desktop', urlPart:'desktop-devices', text: gettext('Desktop')},
-      {name: 'mobile', urlPart:'mobile-devices', text: gettext('Mobile')},
-      {name: 'errors', urlPart:'devices-errors', text: gettext('Errors')}
+      { name: 'desktop', urlPart: 'desktop-devices', text: gettext('Desktop') },
+      { name: 'mobile', urlPart: 'mobile-devices', text: gettext('Mobile') },
+      { name: 'errors', urlPart: 'devices-errors', text: gettext('Errors') }
     ];
   }
 
diff --git a/frontend/src/pages/org-admin/index.js b/frontend/src/pages/org-admin/index.js
index 9850085afb..1c068e538d 100644
--- a/frontend/src/pages/org-admin/index.js
+++ b/frontend/src/pages/org-admin/index.js
@@ -73,15 +73,15 @@ class Org extends React.Component {
     if (location.href.indexOf(`${siteRoot}org/departmentadmin`) != -1) {
       currentTab = 'departmentadmin';
     }
-    this.setState({currentTab: currentTab});
+    this.setState({ currentTab: currentTab });
   }
 
   onCloseSidePanel = () => {
-    this.setState({isSidePanelClosed: !this.state.isSidePanelClosed});
+    this.setState({ isSidePanelClosed: !this.state.isSidePanelClosed });
   };
 
   tabItemClick = (param) => {
-    this.setState({currentTab: param});
+    this.setState({ currentTab: param });
   };
 
   render() {
diff --git a/frontend/src/pages/org-admin/input-item.js b/frontend/src/pages/org-admin/input-item.js
index 9478a9ec72..d490281d87 100644
--- a/frontend/src/pages/org-admin/input-item.js
+++ b/frontend/src/pages/org-admin/input-item.js
@@ -23,11 +23,11 @@ class OrgSamlConfigInput extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({value: nextProps.value,});
+    this.setState({ value: nextProps.value, });
   }
 
   toggleBtns = () => {
-    this.setState({isBtnsShown: !this.state.isBtnsShown});
+    this.setState({ isBtnsShown: !this.state.isBtnsShown });
   };
 
   hideBtns = () => {
@@ -35,7 +35,7 @@ class OrgSamlConfigInput extends Component {
       return;
     }
     if (this.props.value != this.state.value) {
-      this.setState({value: this.props.value});
+      this.setState({ value: this.props.value });
     }
     this.toggleBtns();
   };
diff --git a/frontend/src/pages/org-admin/libraries/org-all-repos.js b/frontend/src/pages/org-admin/libraries/org-all-repos.js
index f9739424a1..aec7ad67de 100644
--- a/frontend/src/pages/org-admin/libraries/org-all-repos.js
+++ b/frontend/src/pages/org-admin/libraries/org-all-repos.js
@@ -26,11 +26,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPageList = () => {
@@ -71,7 +71,7 @@ class Content extends Component {
           <table>
             <thead>
               <tr>
-                <th width="5%">{/*icon*/}</th>
+                <th width="5%">{/* icon*/}</th>
                 <th width="25%">{gettext('Name')}</th>
                 <th width="15%">
                   {sortBy != undefined ?
@@ -84,7 +84,7 @@ class Content extends Component {
                 </th>
                 <th width="32%">ID</th>
                 <th width="18%">{gettext('Owner')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -182,7 +182,7 @@ class RepoItem extends React.Component {
   toggleOperationMenu = (e) => {
     e.stopPropagation();
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+      { isItemMenuShow: !this.state.isItemMenuShow }, () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
         } else {
@@ -224,7 +224,7 @@ class RepoItem extends React.Component {
   };
 
   toggleTransfer = () => {
-    this.setState({isTransferDialogShow: !this.state.isTransferDialogShow});
+    this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
   onTransferRepo = (user) => {
@@ -302,7 +302,7 @@ class OrgAllRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage, sortBy } = this.state;
     this.setState({
@@ -385,7 +385,7 @@ class OrgAllRepos extends Component {
 
   transferRepoItem = (repoID, user) => {
     this.setState({
-      repos: this.state.repos.map(item =>{
+      repos: this.state.repos.map(item => {
         if (item.repoID == repoID) {
           item.ownerEmail = user.email;
           item.ownerName = user.value;
diff --git a/frontend/src/pages/org-admin/libraries/org-repo-nav.js b/frontend/src/pages/org-admin/libraries/org-repo-nav.js
index 42ad81c2ab..70494caf95 100644
--- a/frontend/src/pages/org-admin/libraries/org-repo-nav.js
+++ b/frontend/src/pages/org-admin/libraries/org-repo-nav.js
@@ -12,8 +12,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'repoadmin', text: gettext('All')},
-      {name: 'trash', urlPart: 'repoadmin-trash', text: gettext('Trash')}
+      { name: 'all', urlPart: 'repoadmin', text: gettext('All') },
+      { name: 'trash', urlPart: 'repoadmin-trash', text: gettext('Trash') }
     ];
   }
 
diff --git a/frontend/src/pages/org-admin/libraries/org-repo-trash.js b/frontend/src/pages/org-admin/libraries/org-repo-trash.js
index 343fd05816..bf5410361a 100644
--- a/frontend/src/pages/org-admin/libraries/org-repo-trash.js
+++ b/frontend/src/pages/org-admin/libraries/org-repo-trash.js
@@ -27,11 +27,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPageList = () => {
@@ -60,11 +60,11 @@ class Content extends Component {
           <table className="table-hover">
             <thead>
               <tr>
-                <th width="5%">{/*icon*/}</th>
+                <th width="5%">{/* icon*/}</th>
                 <th width="43%">{gettext('Name')}</th>
                 <th width="27%">{gettext('Owner')}</th>
                 <th width="20%">{gettext('Deleted Time')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -178,19 +178,19 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen});
+    this.setState({ isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen });
   };
 
   toggleRestoreRepoDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isRestoreRepoDialogOpen: !this.state.isRestoreRepoDialogOpen});
+    this.setState({ isRestoreRepoDialogOpen: !this.state.isRestoreRepoDialogOpen });
   };
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Restore':
         translateResult = gettext('Restore');
         break;
@@ -205,7 +205,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Restore':
         this.toggleRestoreRepoDialog();
         break;
@@ -217,7 +217,7 @@ class Item extends Component {
     }
   };
 
-  render () {
+  render() {
     const { repo } = this.props;
     const { isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
     const iconUrl = Utils.getLibIconUrl(repo);
@@ -297,7 +297,7 @@ class TrashRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
@@ -309,7 +309,7 @@ class TrashRepos extends Component {
   }
 
   toggleCleanTrashDialog = () => {
-    this.setState({isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen});
+    this.setState({ isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen });
   };
 
   getReposByPage = (page) => {
@@ -356,7 +356,7 @@ class TrashRepos extends Component {
 
   cleanTrash = () => {
     seafileAPI.orgAdminCleanTrashRepo(orgID).then(res => {
-      this.setState({repos: []});
+      this.setState({ repos: [] });
       toaster.success(gettext('Successfully cleared trash.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/org-admin/org-admin-list.js b/frontend/src/pages/org-admin/org-admin-list.js
index ca2f630ec6..606f96d76a 100644
--- a/frontend/src/pages/org-admin/org-admin-list.js
+++ b/frontend/src/pages/org-admin/org-admin-list.js
@@ -28,11 +28,11 @@ class OrgAdminList extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   toggleItemFreezed = (isFreezed) => {
@@ -51,7 +51,7 @@ class OrgAdminList extends React.Component {
               <th width="15%">{gettext('Status')}</th>
               <th width="20%">{gettext('Space Used')} / {gettext('Quota')}</th>
               <th width="25%">{gettext('Created At')} / {gettext('Last Login')}</th>
-              <th width="10%">{/*Operations*/}</th>
+              <th width="10%">{/* Operations*/}</th>
             </tr>
           </thead>
           <tbody>
diff --git a/frontend/src/pages/org-admin/org-group-repos.js b/frontend/src/pages/org-admin/org-group-repos.js
index 0e023ee7db..5705927f9b 100644
--- a/frontend/src/pages/org-admin/org-group-repos.js
+++ b/frontend/src/pages/org-admin/org-group-repos.js
@@ -79,7 +79,7 @@ class Content extends Component {
         <table className="table-hover">
           <thead>
             <tr>
-              <th width="4%">{/*icon*/}</th>
+              <th width="4%">{/* icon*/}</th>
               <th width="35%">{gettext('Name')}</th>
               <th width="20%">{gettext('Size')}</th>
               <th width="26%">{gettext('Shared By')}</th>
@@ -149,7 +149,7 @@ class Item extends Component {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
 
-      this.setState({isRepoDeleted: false});
+      this.setState({ isRepoDeleted: false });
     });
   };
 
diff --git a/frontend/src/pages/org-admin/org-groups-search-groups.js b/frontend/src/pages/org-admin/org-groups-search-groups.js
index 7da4339434..94b2ba78e3 100644
--- a/frontend/src/pages/org-admin/org-groups-search-groups.js
+++ b/frontend/src/pages/org-admin/org-groups-search-groups.js
@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import { Form, FormGroup, Input, Col } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Form, FormGroup, Input, Col } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, orgID, siteRoot } from '../../utils/constants';
@@ -45,7 +44,7 @@ class GroupItem extends React.Component {
   toggleOperationMenu = (e) => {
     e.stopPropagation();
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+      { isItemMenuShow: !this.state.isItemMenuShow }, () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
         } else {
@@ -81,7 +80,7 @@ class GroupItem extends React.Component {
         <td> -- </td>
       );
     } else {
-      return(
+      return (
         <td>
           <a href={userInfoHref} className="font-weight-normal">{group.creatorName}</a>
         </td>
@@ -140,11 +139,11 @@ class OrgGroupsSearchGroupsResult extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -198,7 +197,7 @@ class OrgGroupsSearchGroups extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let params = (new URL(document.location)).searchParams;
     this.setState({
       query: params.get('query') || '',
@@ -278,7 +277,7 @@ class OrgGroupsSearchGroups extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5}}>
+                    <Col sm={{ size: 5 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getItems}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/org-admin/org-groups.js b/frontend/src/pages/org-admin/org-groups.js
index b3d468537c..02ad3f79e5 100644
--- a/frontend/src/pages/org-admin/org-groups.js
+++ b/frontend/src/pages/org-admin/org-groups.js
@@ -46,7 +46,7 @@ class Search extends React.Component {
         <input
           type="text"
           className="form-control search-input h-6 mr-1"
-          style={{width: '15rem'}}
+          style={{ width: '15rem' }}
           placeholder={this.props.placeholder}
           value={this.state.value}
           onChange={this.handleInputChange}
@@ -111,11 +111,11 @@ class OrgGroups extends Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   deleteGroupItem = (group) => {
@@ -236,7 +236,7 @@ class GroupItem extends React.Component {
   toggleOperationMenu = (e) => {
     e.stopPropagation();
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+      { isItemMenuShow: !this.state.isItemMenuShow }, () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
         } else {
@@ -272,7 +272,7 @@ class GroupItem extends React.Component {
         <td> -- </td>
       );
     } else {
-      return(
+      return (
         <td>
           <a href={userInfoHref} className="font-weight-normal">{group.creatorName}</a>
         </td>
diff --git a/frontend/src/pages/org-admin/org-info.js b/frontend/src/pages/org-admin/org-info.js
index 2c197eb388..f6d1450fd8 100644
--- a/frontend/src/pages/org-admin/org-info.js
+++ b/frontend/src/pages/org-admin/org-info.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
-import { mediaUrl, gettext, orgMemberQuotaEnabled} from '../../utils/constants';
+import { mediaUrl, gettext, orgMemberQuotaEnabled } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import MainPanelTopbar from './main-panel-topbar';
 
@@ -92,10 +92,10 @@ class OrgInfo extends Component {
                   <h4 className="info-content-item-heading">{gettext('Space used')}</h4>
                   {storage_quota > 0 ? (
                     <>
-                      <p className="info-content-space-text">{`${(storage_usage/storage_quota * 100).toFixed(2)}%`}</p>
+                      <p className="info-content-space-text">{`${(storage_usage / storage_quota * 100).toFixed(2)}%`}</p>
                       <div className="progress-container">
                         <div className="progress">
-                          <div className="progress-bar" role="progressbar" style={{width: `${storage_usage/storage_quota * 100}%`}} aria-valuenow={storage_usage/storage_quota * 100} aria-valuemin="0" aria-valuemax="100"></div>
+                          <div className="progress-bar" role="progressbar" style={{ width: `${storage_usage / storage_quota * 100}%` }} aria-valuenow={storage_usage / storage_quota * 100} aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
                         <p className="progress-text m-0">{`${Utils.bytesToSize(storage_usage)} / ${Utils.bytesToSize(storage_quota)}`}</p>
                       </div>
diff --git a/frontend/src/pages/org-admin/org-links.js b/frontend/src/pages/org-admin/org-links.js
index 378a7d4eeb..70e1744898 100644
--- a/frontend/src/pages/org-admin/org-links.js
+++ b/frontend/src/pages/org-admin/org-links.js
@@ -35,11 +35,11 @@ class OrgLinks extends React.Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onChangePageNum = (event, num) => {
@@ -76,7 +76,7 @@ class OrgLinks extends React.Component {
   };
 
   toggleLinkDialog = () => {
-    this.setState({isShowLinkDialog: !this.state.isShowLinkDialog});
+    this.setState({ isShowLinkDialog: !this.state.isShowLinkDialog });
   };
 
   componentDidMount() {
@@ -106,7 +106,7 @@ class OrgLinks extends React.Component {
                 </thead>
                 <tbody>
                   {linkList && linkList.map((item, index) => {
-                    return(
+                    return (
                       <React.Fragment key={index}>
                         <RepoItem
                           link={item}
@@ -177,7 +177,7 @@ class RepoItem extends React.Component {
   toggleOperationMenu = (e) => {
     e.stopPropagation();
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+      { isItemMenuShow: !this.state.isItemMenuShow }, () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
         } else {
diff --git a/frontend/src/pages/org-admin/org-logs-file-audit.js b/frontend/src/pages/org-admin/org-logs-file-audit.js
index 81e7461f16..3cfea2e007 100644
--- a/frontend/src/pages/org-admin/org-logs-file-audit.js
+++ b/frontend/src/pages/org-admin/org-logs-file-audit.js
@@ -228,7 +228,8 @@ class FileAuditItem extends React.Component {
             <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
             <DropdownMenu>
               <DropdownItem size='sm' onClick={this.props.filterRepo.bind(this, fileEvent.repo_name)}>
-                {gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.repo_name}</span></DropdownItem>
+                {gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.repo_name}</span>
+              </DropdownItem>
             </DropdownMenu>
           </Dropdown>
         }
diff --git a/frontend/src/pages/org-admin/org-logs-file-update.js b/frontend/src/pages/org-admin/org-logs-file-update.js
index 24d43704ee..c9ba2a8fe4 100644
--- a/frontend/src/pages/org-admin/org-logs-file-update.js
+++ b/frontend/src/pages/org-admin/org-logs-file-update.js
@@ -257,7 +257,8 @@ class FileUpdateItem extends React.Component {
     return (
       <td>{fileEvent.description}
         <a className="font-weight-normal text-muted ml-1" href='#'
-          onClick={(e) => this.props.onDetails(e, fileEvent)}>{gettext('Details')}</a>
+          onClick={(e) => this.props.onDetails(e, fileEvent)}>{gettext('Details')}
+        </a>
       </td>
     );
   };
diff --git a/frontend/src/pages/org-admin/org-logs.js b/frontend/src/pages/org-admin/org-logs.js
index d221cfb51a..81cbfbbe0c 100644
--- a/frontend/src/pages/org-admin/org-logs.js
+++ b/frontend/src/pages/org-admin/org-logs.js
@@ -24,19 +24,19 @@ class OrgLogs extends Component {
               <ul className="nav">
                 <li className="nav-item" onClick={() => this.tabItemClick('logadmin')}>
                   <Link
-                    className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active': ''}`}
+                    className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active' : ''}`}
                     to={siteRoot + 'org/logadmin/'} title={gettext('File Access')}>{gettext('File Access')}
                   </Link>
                 </li>
                 <li className="nav-item" onClick={() => this.tabItemClick('file-update')}>
                   <Link
-                    className={`nav-link ${this.props.currentTab === 'file-update' ? 'active': ''}`}
+                    className={`nav-link ${this.props.currentTab === 'file-update' ? 'active' : ''}`}
                     to={siteRoot + 'org/logadmin/file-update/'} title={gettext('File Update')}>{gettext('File Update')}
                   </Link>
                 </li>
                 <li className="nav-item" onClick={() => this.tabItemClick('perm-audit')}>
                   <Link
-                    className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active': ''}`}
+                    className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active' : ''}`}
                     to={siteRoot + 'org/logadmin/perm-audit/'} title={gettext('Permission')}>{gettext('Permission')}
                   </Link>
                 </li>
diff --git a/frontend/src/pages/org-admin/org-saml-config.js b/frontend/src/pages/org-admin/org-saml-config.js
index cb58279edb..b53b707c79 100644
--- a/frontend/src/pages/org-admin/org-saml-config.js
+++ b/frontend/src/pages/org-admin/org-saml-config.js
@@ -70,9 +70,9 @@ class OrgSAMLConfig extends Component {
   };
 
   verifyDomain = () => {
-    const {domain} = this.state;
+    const { domain } = this.state;
     seafileAPI.orgAdminVerifyDomain(orgID, domain).then((res) => {
-      this.setState({domainVerified: res.data.domain_verified});
+      this.setState({ domainVerified: res.data.domain_verified });
       toaster.success(gettext('Success'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/org-admin/org-user-item.js b/frontend/src/pages/org-admin/org-user-item.js
index b0b226bef8..3bf4a4b68d 100644
--- a/frontend/src/pages/org-admin/org-user-item.js
+++ b/frontend/src/pages/org-admin/org-user-item.js
@@ -92,7 +92,7 @@ class UserItem extends React.Component {
   toggleOperationMenu = (e) => {
     e.stopPropagation();
     this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
+      { isItemMenuShow: !this.state.isItemMenuShow }, () => {
         if (this.state.isItemMenuShow) {
           this.props.onFreezedItem();
         } else {
@@ -113,7 +113,7 @@ class UserItem extends React.Component {
       case -2:
         return '--';
       default: // data > 0
-        return Utils.formatSize({bytes: data});
+        return Utils.formatSize({ bytes: data });
     }
   };
 
@@ -126,15 +126,15 @@ class UserItem extends React.Component {
     }
   };
 
-  toggleConfirmInactiveDialog= () => {
-    this.setState({isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen});
+  toggleConfirmInactiveDialog = () => {
+    this.setState({ isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen });
   };
 
   render() {
     const { highlight, isConfirmInactiveDialogOpen } = this.state;
     let { user, currentTab } = this.props;
     let href = siteRoot + 'org/useradmin/info/' + encodeURIComponent(user.email) + '/';
-    let isOperationMenuShow = (user.email !== username)  && this.state.showMenu;
+    let isOperationMenuShow = (user.email !== username) && this.state.showMenu;
 
     // for 'user status'
     const curStatus = user.is_active ? 'active' : 'inactive';
@@ -166,7 +166,7 @@ class UserItem extends React.Component {
               operationBeforeSelect={user.is_active ? this.toggleConfirmInactiveDialog : undefined}
             />
           </td>
-          <td>{`${Utils.formatSize({bytes: user.quota_usage})} / ${this.getQuotaTotal(user.quota_total)}`}</td>
+          <td>{`${Utils.formatSize({ bytes: user.quota_usage })} / ${this.getQuotaTotal(user.quota_total)}`}</td>
           <td>
             {user.ctime} /
             <br />
diff --git a/frontend/src/pages/org-admin/org-user-repos.js b/frontend/src/pages/org-admin/org-user-repos.js
index 4c72ed59b4..d120810bf4 100644
--- a/frontend/src/pages/org-admin/org-user-repos.js
+++ b/frontend/src/pages/org-admin/org-user-repos.js
@@ -75,7 +75,7 @@ class Content extends Component {
         <table className="table-hover">
           <thead>
             <tr>
-              <th width="4%">{/*icon*/}</th>
+              <th width="4%">{/* icon*/}</th>
               <th width="35%">{gettext('Name')}</th>
               <th width="16%">{gettext('Size')}</th>
               <th width="25%">{gettext('Last Update')}</th>
@@ -145,7 +145,7 @@ class Item extends Component {
       const errorMsg = Utils.getErrorMsg(error);
       toaster.danger(errorMsg);
 
-      this.setState({isRepoDeleted: false});
+      this.setState({ isRepoDeleted: false });
     });
   };
 
diff --git a/frontend/src/pages/org-admin/org-user-shared-repos.js b/frontend/src/pages/org-admin/org-user-shared-repos.js
index 70be17a708..8c9949e294 100644
--- a/frontend/src/pages/org-admin/org-user-shared-repos.js
+++ b/frontend/src/pages/org-admin/org-user-shared-repos.js
@@ -72,7 +72,7 @@ class Content extends Component {
       <table className="table-hover">
         <thead>
           <tr>
-            <th width="4%">{/*icon*/}</th>
+            <th width="4%">{/* icon*/}</th>
             <th width="30%">{gettext('Name')}</th>
             <th width="26%">{gettext('Owner')}</th>
             <th width="15%">{gettext('Size')}</th>
diff --git a/frontend/src/pages/org-admin/org-users-admins.js b/frontend/src/pages/org-admin/org-users-admins.js
index c21176d2f5..c3157ea0ec 100644
--- a/frontend/src/pages/org-admin/org-users-admins.js
+++ b/frontend/src/pages/org-admin/org-users-admins.js
@@ -21,7 +21,7 @@ class OrgUsers extends Component {
   }
 
   toggleAddOrgAdmin = () => {
-    this.setState({isShowAddOrgAdminDialog: !this.state.isShowAddOrgAdminDialog});
+    this.setState({ isShowAddOrgAdminDialog: !this.state.isShowAddOrgAdminDialog });
   };
 
   initOrgAdmin = () => {
@@ -29,7 +29,7 @@ class OrgUsers extends Component {
       let userList = res.data.user_list.map(item => {
         return new OrgUserInfo(item);
       });
-      this.setState({orgAdminUsers: userList});
+      this.setState({ orgAdminUsers: userList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -79,11 +79,11 @@ class OrgUsers extends Component {
     seafileAPI.orgAdminChangeOrgUserStatus(orgID, email, isActive).then(res => {
       let users = this.state.orgAdminUsers.map(item => {
         if (item.email == email) {
-          item['is_active']= res.data['is_active'];
+          item['is_active'] = res.data['is_active'];
         }
         return item;
       });
-      this.setState({orgAdminUsers: users});
+      this.setState({ orgAdminUsers: users });
       toaster.success(gettext('Edit succeeded.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/org-admin/org-users-list.js b/frontend/src/pages/org-admin/org-users-list.js
index f03774fb8d..3d04752049 100644
--- a/frontend/src/pages/org-admin/org-users-list.js
+++ b/frontend/src/pages/org-admin/org-users-list.js
@@ -25,11 +25,11 @@ class OrgUsersList extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   toggleItemFreezed = (isFreezed) => {
@@ -75,7 +75,7 @@ class OrgUsersList extends React.Component {
                 <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByQuotaUsage}>{gettext('Space Used')} {sortIcon}</a> / {gettext('Quota')}
               </th>
               <th width="25%">{gettext('Created At')} / {gettext('Last Login')}</th>
-              <th width="10%">{/*Operations*/}</th>
+              <th width="10%">{/* Operations*/}</th>
             </tr>
           </thead>
           <tbody>
@@ -96,7 +96,7 @@ class OrgUsersList extends React.Component {
           </tbody>
         </table>
         <div className="paginator">
-          {page !=1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+          {page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
           {(page != 1 && pageNext) && <span> | </span>}
           {pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
         </div>
diff --git a/frontend/src/pages/org-admin/org-users-nav.js b/frontend/src/pages/org-admin/org-users-nav.js
index b7669b9607..cef35c9ee6 100644
--- a/frontend/src/pages/org-admin/org-users-nav.js
+++ b/frontend/src/pages/org-admin/org-users-nav.js
@@ -12,8 +12,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'useradmin', text: gettext('All')},
-      {name: 'admins', urlPart: 'useradmin/admins', text: gettext('Admin')}
+      { name: 'all', urlPart: 'useradmin', text: gettext('All') },
+      { name: 'admins', urlPart: 'useradmin/admins', text: gettext('Admin') }
     ];
   }
 
diff --git a/frontend/src/pages/org-admin/org-users-search-users.js b/frontend/src/pages/org-admin/org-users-search-users.js
index 8da3043cbb..81367721ae 100644
--- a/frontend/src/pages/org-admin/org-users-search-users.js
+++ b/frontend/src/pages/org-admin/org-users-search-users.js
@@ -18,11 +18,11 @@ class OrgUsersSearchUsersResult extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -38,7 +38,7 @@ class OrgUsersSearchUsersResult extends React.Component {
                 <a className="d-inline-block table-sort-op" href="#" >{gettext('Space Used')}</a> / {gettext('Quota')}
               </th>
               <th width="25%">{gettext('Created At')} / {gettext('Last Login')}</th>
-              <th width="10%">{/*Operations*/}</th>
+              <th width="10%">{/* Operations*/}</th>
             </tr>
           </thead>
           <tbody>
@@ -82,7 +82,7 @@ class OrgUsersSearchUsers extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let params = (new URL(document.location)).searchParams;
     this.setState({
       query: params.get('query') || '',
@@ -111,7 +111,7 @@ class OrgUsersSearchUsers extends Component {
       let newUserList = this.state.orgUsers.filter(item => {
         return item.email != email;
       });
-      this.setState({orgUsers: newUserList});
+      this.setState({ orgUsers: newUserList });
       let msg = gettext('Deleted user %s');
       msg = msg.replace('%s', username);
       toaster.success(msg);
@@ -125,11 +125,11 @@ class OrgUsersSearchUsers extends Component {
     seafileAPI.sysAdminUpdateUser(email, key, value).then(res => {
       let newUserList = this.state.orgUsers.map(item => {
         if (item.email == email) {
-          item[key]= res.data[key];
+          item[key] = res.data[key];
         }
         return item;
       });
-      this.setState({orgUsers: newUserList});
+      this.setState({ orgUsers: newUserList });
       const msg = (key == 'is_active' && value) ?
         res.data.update_status_tip : gettext('Edit succeeded');
       toaster.success(msg);
@@ -165,11 +165,11 @@ class OrgUsersSearchUsers extends Component {
     seafileAPI.orgAdminChangeOrgUserStatus(orgID, email, isActive).then(res => {
       let users = this.state.orgUsers.map(item => {
         if (item.email == email) {
-          item['is_active']= res.data['is_active'];
+          item['is_active'] = res.data['is_active'];
         }
         return item;
       });
-      this.setState({orgUsers: users});
+      this.setState({ orgUsers: users });
       toaster.success(gettext('Edit succeeded.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -197,7 +197,7 @@ class OrgUsersSearchUsers extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5}}>
+                    <Col sm={{ size: 5 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getItems}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/org-admin/org-users-users.js b/frontend/src/pages/org-admin/org-users-users.js
index c50d809373..f8c6697da4 100644
--- a/frontend/src/pages/org-admin/org-users-users.js
+++ b/frontend/src/pages/org-admin/org-users-users.js
@@ -12,7 +12,7 @@ import InviteUserViaWeiXinDialog from '../../components/dialog/org-admin-invite-
 import toaster from '../../components/toast';
 import { seafileAPI } from '../../utils/seafile-api';
 import OrgUserInfo from '../../models/org-user';
-import { gettext, invitationLink, orgID, siteRoot, orgEnableAdminInviteUser} from '../../utils/constants';
+import { gettext, invitationLink, orgID, siteRoot, orgEnableAdminInviteUser } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 class Search extends React.Component {
@@ -52,7 +52,7 @@ class Search extends React.Component {
         <input
           type="text"
           className="form-control search-input h-6 mr-1"
-          style={{width: '15rem'}}
+          style={{ width: '15rem' }}
           placeholder={this.props.placeholder}
           value={this.state.value}
           onChange={this.handleInputChange}
@@ -121,19 +121,19 @@ class OrgUsers extends Component {
   };
 
   toggleImportOrgUsersDialog = () => {
-    this.setState({isImportOrgUsersDialogOpen: !this.state.isImportOrgUsersDialogOpen});
+    this.setState({ isImportOrgUsersDialogOpen: !this.state.isImportOrgUsersDialogOpen });
   };
 
   toggleAddOrgUser = () => {
-    this.setState({isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog});
+    this.setState({ isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog });
   };
 
   toggleInviteUserDialog = () => {
-    this.setState({isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen});
+    this.setState({ isInviteUserDialogOpen: !this.state.isInviteUserDialogOpen });
   };
 
   toggleInviteUserViaWeiXinDialog = () => {
-    this.setState({isInviteUserViaWeiXinDialogOpen: !this.state.isInviteUserViaWeiXinDialogOpen});
+    this.setState({ isInviteUserViaWeiXinDialogOpen: !this.state.isInviteUserViaWeiXinDialogOpen });
   };
 
   initOrgUsersData = (page) => {
@@ -198,7 +198,7 @@ class OrgUsers extends Component {
   toggleOrgUsersDelete = (email, username) => {
     seafileAPI.orgAdminDeleteOrgUser(orgID, email).then(res => {
       let users = this.state.orgUsers.filter(item => item.email != email);
-      this.setState({orgUsers: users});
+      this.setState({ orgUsers: users });
       let msg = gettext('Deleted user %s');
       msg = msg.replace('%s', username);
       toaster.success(msg);
@@ -235,15 +235,15 @@ class OrgUsers extends Component {
     });
   };
 
-  changeStatus= (email, isActive) => {
+  changeStatus = (email, isActive) => {
     seafileAPI.orgAdminChangeOrgUserStatus(orgID, email, isActive).then(res => {
       let users = this.state.orgUsers.map(item => {
         if (item.email == email) {
-          item['is_active']= res.data['is_active'];
+          item['is_active'] = res.data['is_active'];
         }
         return item;
       });
-      this.setState({orgUsers: users});
+      this.setState({ orgUsers: users });
       toaster.success(gettext('Edit succeeded.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -269,14 +269,17 @@ class OrgUsers extends Component {
       <Fragment>
         <button className="btn btn-secondary operation-item" onClick={this.toggleImportOrgUsersDialog}>{gettext('Import users')}</button>
         <button className={topBtn} title={gettext('Add user')} onClick={this.toggleAddOrgUser}>
-          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Add user')}</button>
+          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Add user')}
+        </button>
         {orgEnableAdminInviteUser &&
         <button className={topBtn} title={gettext('Invite users')} onClick={this.toggleInviteUserDialog}>
-          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Invite users')}</button>
+          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Invite users')}
+        </button>
         }
         {invitationLink &&
         <button className={topBtn} title={'通过微信邀请用户'} onClick={this.toggleInviteUserViaWeiXinDialog}>
-          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{'通过微信邀请用户'}</button>
+          <i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{'通过微信邀请用户'}
+        </button>
         }
         {this.state.isImportOrgUsersDialogOpen &&
         <ModalPortal>
diff --git a/frontend/src/pages/org-admin/section.js b/frontend/src/pages/org-admin/section.js
index db1ebf2226..050a102bd2 100644
--- a/frontend/src/pages/org-admin/section.js
+++ b/frontend/src/pages/org-admin/section.js
@@ -13,7 +13,7 @@ class Section extends Component {
   }
 
   render() {
-    const { headingText, children} = this.props;
+    const { headingText, children } = this.props;
     return (
       <div className="mb-4">
         <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
diff --git a/frontend/src/pages/org-admin/statistic/picker.js b/frontend/src/pages/org-admin/statistic/picker.js
index 4489b6c316..0877701216 100644
--- a/frontend/src/pages/org-admin/statistic/picker.js
+++ b/frontend/src/pages/org-admin/statistic/picker.js
@@ -36,7 +36,7 @@ class Picker extends React.Component {
         onChange={props.onChange}
       >
         {
-          ({value}) => {
+          ({ value }) => {
             return (
               <span>
                 <input
diff --git a/frontend/src/pages/org-admin/statistic/statistic-chart.js b/frontend/src/pages/org-admin/statistic/statistic-chart.js
index 01640cca38..cb47021393 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-chart.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-chart.js
@@ -51,7 +51,7 @@ class StatisticChart extends React.Component {
       },
       tooltips: {
         callbacks: {
-          label: function(tooltipItem, data) {
+          label: function (tooltipItem, data) {
             if (isTitleCallback) {
               return _this.titleCallback(tooltipItem, data);
             }
@@ -69,7 +69,7 @@ class StatisticChart extends React.Component {
           ticks: {
             beginAtZero: true,
             suggestedMax: suggestedMaxNumbers,
-            callback: function(value, index, values) {
+            callback: function (value, index, values) {
               if (isTicksCallback) {
                 return _this.ticksCallback(value, index, values);
               }
@@ -95,7 +95,7 @@ class StatisticChart extends React.Component {
       labels: nextProps.labels,
       datasets: nextProps.filesData
     };
-    this.setState({data: data});
+    this.setState({ data: data });
   }
 
   titleCallback = (tooltipItem, data) => {
diff --git a/frontend/src/pages/org-admin/statistic/statistic-common-tool.js b/frontend/src/pages/org-admin/statistic/statistic-common-tool.js
index a34a632af4..3b087877a0 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-common-tool.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-common-tool.js
@@ -24,7 +24,7 @@ class StatisticCommonTool extends React.Component {
   componentDidMount() {
     let today = moment().format('YYYY-MM-DD 00:00:00');
     let endTime = today;
-    let startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
+    let startTime = moment().subtract(6, 'd').format('YYYY-MM-DD 00:00:00');
     let group_by = 'day';
     this.props.getActiviesFiles(startTime, endTime, group_by);
   }
@@ -37,15 +37,15 @@ class StatisticCommonTool extends React.Component {
     let today = moment().format('YYYY-MM-DD 00:00:00');
     let endTime = today;
     let startTime;
-    switch(statisticTypeName) {
+    switch (statisticTypeName) {
       case 'oneWeek' :
-        startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(6, 'd').format('YYYY-MM-DD 00:00:00');
         break;
       case 'oneMonth' :
-        startTime = moment().subtract(29,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(29, 'd').format('YYYY-MM-DD 00:00:00');
         break;
       case 'oneYear' :
-        startTime = moment().subtract(364,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(364, 'd').format('YYYY-MM-DD 00:00:00');
         break;
     }
     this.setState({
@@ -104,14 +104,14 @@ class StatisticCommonTool extends React.Component {
 
   render() {
     let { statisticType, endValue, startValue } = this.state;
-    return(
+    return (
       <Fragment>
         {this.props.children}
         <div className="system-statistic-time-range">
           <div className="sys-stat-tool">
             <div className={`system-statistic-item border-right-0 rounded-left ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</div>
-            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
-            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
+            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
+            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
           </div>
           <div className="system-statistic-input-container">
             <Picker
diff --git a/frontend/src/pages/org-admin/statistic/statistic-file.js b/frontend/src/pages/org-admin/statistic/statistic-file.js
index c5d550f701..dda6d2ed9f 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-file.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-file.js
@@ -27,11 +27,11 @@ class OrgStatisticFile extends React.Component {
     let { filesData } = this.state;
 
     seafileAPI.orgAdminStatisticFiles(orgID, startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        added = [],
-        deleted = [],
-        visited = [],
-        modified = [];
+      let labels = [];
+      let added = [];
+      let deleted = [];
+      let visited = [];
+      let modified = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -45,22 +45,22 @@ class OrgStatisticFile extends React.Component {
           label: gettext('Added'),
           data: added,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let visitedData = {
           label: gettext('Visited'),
           data: visited,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let modifiedData = {
           label: gettext('Modified'),
           data: modified,
           borderColor: '#72c3fc',
-          backgroundColor: '#72c3fc'};
+          backgroundColor: '#72c3fc' };
         let deletedData = {
           label: gettext('Deleted'),
           data: deleted,
           borderColor: '#f75356',
-          backgroundColor: '#f75356'};
+          backgroundColor: '#f75356' };
         filesData = [visitedData, addedData, modifiedData, deletedData];
       }
       this.setState({
@@ -77,7 +77,7 @@ class OrgStatisticFile extends React.Component {
   render() {
     let { labels, filesData, isLoading } = this.state;
 
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar />
         <div className="cur-view-container">
diff --git a/frontend/src/pages/org-admin/statistic/statistic-nav.js b/frontend/src/pages/org-admin/statistic/statistic-nav.js
index 771aebb8db..e5b9863519 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-nav.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-nav.js
@@ -12,11 +12,11 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'fileStatistic', urlPart: 'statistics-admin/file', text: gettext('File')},
-      {name: 'storageStatistic', urlPart: 'statistics-admin/total-storage', text: gettext('Storage')},
-      {name: 'usersStatistic', urlPart: 'statistics-admin/active-users', text: gettext('Users')},
-      {name: 'trafficStatistic', urlPart: 'statistics-admin/traffic', text: gettext('Traffic')},
-      {name: 'reportsStatistic', urlPart: 'statistics-admin/reports', text: gettext('Reports')},
+      { name: 'fileStatistic', urlPart: 'statistics-admin/file', text: gettext('File') },
+      { name: 'storageStatistic', urlPart: 'statistics-admin/total-storage', text: gettext('Storage') },
+      { name: 'usersStatistic', urlPart: 'statistics-admin/active-users', text: gettext('Users') },
+      { name: 'trafficStatistic', urlPart: 'statistics-admin/traffic', text: gettext('Traffic') },
+      { name: 'reportsStatistic', urlPart: 'statistics-admin/reports', text: gettext('Reports') },
     ];
   }
 
diff --git a/frontend/src/pages/org-admin/statistic/statistic-reports.js b/frontend/src/pages/org-admin/statistic/statistic-reports.js
index 8d5fefb2c0..0b1f963cdc 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-reports.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-reports.js
@@ -42,7 +42,7 @@ class OrgStatisticReports extends React.Component {
         return;
       }
     }
-    switch(type) {
+    switch (type) {
       case 'month':
         url += 'user-traffic/excel/?month=' + month;
         break;
@@ -59,7 +59,7 @@ class OrgStatisticReports extends React.Component {
   render() {
 
     let { errorMessage } = this.state;
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar />
         <div className="cur-view-container">
diff --git a/frontend/src/pages/org-admin/statistic/statistic-storage.js b/frontend/src/pages/org-admin/statistic/statistic-storage.js
index e206caffc4..ad2f7d5fe7 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-storage.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-storage.js
@@ -24,8 +24,8 @@ class OrgStatisticStorage extends React.Component {
   getActiviesFiles = (startTime, endTime, groupBy) => {
     let { filesData } = this.state;
     seafileAPI.orgAdminStatisticStorages(orgID, startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        totalStorage = [];
+      let labels = [];
+      let totalStorage = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -36,7 +36,7 @@ class OrgStatisticStorage extends React.Component {
           label: gettext('Total Storage'),
           data: totalStorage,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         filesData = [total_storage];
       }
       this.setState({
@@ -52,7 +52,7 @@ class OrgStatisticStorage extends React.Component {
 
   render() {
     let { labels, filesData, isLoading } = this.state;
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar />
         <div className="cur-view-container">
@@ -64,7 +64,7 @@ class OrgStatisticStorage extends React.Component {
               <StatisticChart
                 labels={labels}
                 filesData={filesData}
-                suggestedMaxNumbers={10*1000*1000}
+                suggestedMaxNumbers={10 * 1000 * 1000}
                 isTitleCallback={true}
                 isTicksCallback={true}
                 isLegendStatus={false}
diff --git a/frontend/src/pages/org-admin/statistic/statistic-traffic-users.js b/frontend/src/pages/org-admin/statistic/statistic-traffic-users.js
index b1bcd55376..bc6eac196b 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-traffic-users.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-traffic-users.js
@@ -132,7 +132,7 @@ class UsersTraffic extends React.Component {
         {!isLoading &&
           <TrafficTable type={'user'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
             {userTrafficList.length > 0 && userTrafficList.map((item, index) => {
-              return(
+              return (
                 <TrafficTableBody
                   key={index}
                   userTrafficItem={item}
diff --git a/frontend/src/pages/org-admin/statistic/statistic-traffic.js b/frontend/src/pages/org-admin/statistic/statistic-traffic.js
index e854e4ad10..106691a7ac 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-traffic.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-traffic.js
@@ -27,20 +27,20 @@ class OrgStatisticTraffic extends React.Component {
   }
 
   changeTabActive = activeName => {
-    this.setState({tabActive: activeName});
+    this.setState({ tabActive: activeName });
   };
 
   getActiviesFiles = (startTime, endTime, groupBy) => {
     seafileAPI.orgAdminStatisticSystemTraffic(orgID, startTime, endTime, groupBy).then((res) => {
       let labels = [];
-      let total_upload = [],
-        total_download = [],
-        link_upload = [],
-        link_download = [],
-        sync_upload = [],
-        sync_download = [],
-        web_upload = [],
-        web_download = [];
+      let total_upload = [];
+      let total_download = [];
+      let link_upload = [];
+      let link_download = [];
+      let sync_upload = [];
+      let sync_download = [];
+      let web_upload = [];
+      let web_download = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -58,42 +58,42 @@ class OrgStatisticTraffic extends React.Component {
           label: gettext('Upload'),
           data: link_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let linkDownload = {
           label: gettext('Download'),
           data: link_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let syncUpload = {
           label: gettext('Upload'),
           data: sync_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let syncDownload = {
           label: gettext('Download'),
           data: sync_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let webUpload = {
           label: gettext('Upload'),
           data: web_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let webDownload = {
           label: gettext('Download'),
           data: web_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let totalUpload = {
           label: gettext('Upload'),
           data: total_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let totalDownload = {
           label: gettext('Download'),
           data: total_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let linkData = [linkUpload, linkDownload];
         let syncData = [syncUpload, syncDownload];
         let webData = [webUpload, webDownload];
@@ -152,7 +152,7 @@ class OrgStatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={filesData}
                       chartTitle={gettext('Total Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -165,7 +165,7 @@ class OrgStatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={webData}
                       chartTitle={gettext('Web Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -178,7 +178,7 @@ class OrgStatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={linkData}
                       chartTitle={gettext('Share Link Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -191,7 +191,7 @@ class OrgStatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={syncData}
                       chartTitle={gettext('Sync Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
diff --git a/frontend/src/pages/org-admin/statistic/statistic-users.js b/frontend/src/pages/org-admin/statistic/statistic-users.js
index 6c04fd358c..5be52674b4 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-users.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-users.js
@@ -24,8 +24,8 @@ class OrgStatisticUsers extends React.Component {
   getActiviesFiles = (startTime, endTime, groupBy) => {
     let { filesData } = this.state;
     seafileAPI.orgAdminStatisticActiveUsers(orgID, startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        count = [];
+      let labels = [];
+      let count = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -36,7 +36,7 @@ class OrgStatisticUsers extends React.Component {
           label: gettext('Active Users'),
           data: count,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         filesData = [userCount];
       }
       this.setState({
diff --git a/frontend/src/pages/org-admin/statistic/traffic-table-body.js b/frontend/src/pages/org-admin/statistic/traffic-table-body.js
index 75ba551aaa..d801134b2c 100644
--- a/frontend/src/pages/org-admin/statistic/traffic-table-body.js
+++ b/frontend/src/pages/org-admin/statistic/traffic-table-body.js
@@ -12,16 +12,16 @@ class TrafficTableBody extends React.Component {
 
   trafficName = () => {
     let { userTrafficItem, type } = this.props;
-    switch(type) {
+    switch (type) {
       case 'user':
         if (userTrafficItem.name) {
           return (
             <a href={siteRoot + 'org/useradmin/info/' + userTrafficItem.email + '/'}>{userTrafficItem.name}</a>
           );
         }
-        return(<span>{'--'}</span>);
+        return (<span>{'--'}</span>);
       case 'org':
-        return(<span>{userTrafficItem.org_name}</span>);
+        return (<span>{userTrafficItem.org_name}</span>);
     }
   };
 
@@ -35,7 +35,7 @@ class TrafficTableBody extends React.Component {
     let linkUploadSize = Utils.bytesToSize(userTrafficItem.link_file_upload);
     let linkDownloadSize = Utils.bytesToSize(userTrafficItem.link_file_download);
 
-    return(
+    return (
       <tr>
         <td>{this.trafficName()}</td>
         <td>{syncUploadSize}</td>
diff --git a/frontend/src/pages/org-admin/web-settings/input-item.js b/frontend/src/pages/org-admin/web-settings/input-item.js
index d6125f478c..5587a4faf8 100644
--- a/frontend/src/pages/org-admin/web-settings/input-item.js
+++ b/frontend/src/pages/org-admin/web-settings/input-item.js
@@ -8,7 +8,7 @@ const propTypes = {
   inputType: PropTypes.string,
   saveSetting: PropTypes.func.isRequired,
   keyText: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   helpTip: PropTypes.string.isRequired,
   displayName: PropTypes.string.isRequired,
   disabled: PropTypes.bool.isRequired,
@@ -25,7 +25,7 @@ class WebSettingInput extends Component {
   }
 
   toggleBtns = () => {
-    this.setState({isBtnsShown: !this.state.isBtnsShown});
+    this.setState({ isBtnsShown: !this.state.isBtnsShown });
   };
 
   hideBtns = (e) => {
@@ -33,7 +33,7 @@ class WebSettingInput extends Component {
       return;
     }
     if (this.props.value != this.state.value) {
-      this.setState({value: this.props.value});
+      this.setState({ value: this.props.value });
     }
     this.toggleBtns();
   };
diff --git a/frontend/src/pages/org-admin/web-settings/section.js b/frontend/src/pages/org-admin/web-settings/section.js
index db1ebf2226..050a102bd2 100644
--- a/frontend/src/pages/org-admin/web-settings/section.js
+++ b/frontend/src/pages/org-admin/web-settings/section.js
@@ -13,7 +13,7 @@ class Section extends Component {
   }
 
   render() {
-    const { headingText, children} = this.props;
+    const { headingText, children } = this.props;
     return (
       <div className="mb-4">
         <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
diff --git a/frontend/src/pages/org-admin/web-settings/web-settings.js b/frontend/src/pages/org-admin/web-settings/web-settings.js
index 38e550cbc1..e6cd57edc5 100644
--- a/frontend/src/pages/org-admin/web-settings/web-settings.js
+++ b/frontend/src/pages/org-admin/web-settings/web-settings.js
@@ -24,7 +24,7 @@ class OrgWebSettings extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.orgAdminGetOrgInfo().then((res) => {
       this.setState({
         loading: false,
@@ -39,7 +39,7 @@ class OrgWebSettings extends Component {
     });
   }
 
-  updateName= (key, newOrgName) => {
+  updateName = (key, newOrgName) => {
     seafileAPI.orgAdminUpdateName(orgID, newOrgName).then((res) => {
       this.setState({
         config_dict: res.data
diff --git a/frontend/src/pages/sdoc/sdoc-file-history/history-version.js b/frontend/src/pages/sdoc/sdoc-file-history/history-version.js
index ce84b9e250..b55d89a329 100644
--- a/frontend/src/pages/sdoc/sdoc-file-history/history-version.js
+++ b/frontend/src/pages/sdoc/sdoc-file-history/history-version.js
@@ -112,7 +112,7 @@ class HistoryVersion extends React.Component {
         <div className="history-info">
           {this.state.isRenameShow ?
             <Rename name={name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/>
-            :<div className="name">{name}</div>
+            : <div className="name">{name}</div>
           }
           <div className="time">{moment(ctime).format('YYYY-MM-DD HH:mm')}</div>
           <div className="owner">
@@ -155,22 +155,23 @@ class HistoryVersion extends React.Component {
                 </Modal>
               </>
             )
-            : (<Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
-              <DropdownToggle
-                tag='a'
-                className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
-                data-toggle="dropdown"
-                aria-expanded={this.state.isMenuShow}
-                title={gettext('More operations')}
-                aria-label={gettext('More operations')}
-              />
-              <DropdownMenu>
-                {/* {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>} */}
-                <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
-                {(path[0] !== 0 && path[1] !== 0 && path[2] !== 0) && <DropdownItem onClick={this.onItemCopy}>{gettext('Copy')}</DropdownItem>}
-                <DropdownItem onClick={this.toggleRename}>{gettext('Rename')}</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
+            : (
+              <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
+                <DropdownToggle
+                  tag='a'
+                  className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
+                  data-toggle="dropdown"
+                  aria-expanded={this.state.isMenuShow}
+                  title={gettext('More operations')}
+                  aria-label={gettext('More operations')}
+                />
+                <DropdownMenu>
+                  {/* {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>} */}
+                  <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
+                  {(path[0] !== 0 && path[1] !== 0 && path[2] !== 0) && <DropdownItem onClick={this.onItemCopy}>{gettext('Copy')}</DropdownItem>}
+                  <DropdownItem onClick={this.toggleRename}>{gettext('Rename')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
             )}
         </div>
       </li>
diff --git a/frontend/src/pages/search/advanced-search.js b/frontend/src/pages/search/advanced-search.js
index 827432faa9..09fa70a314 100644
--- a/frontend/src/pages/search/advanced-search.js
+++ b/frontend/src/pages/search/advanced-search.js
@@ -63,7 +63,7 @@ class AdvancedSearch extends React.Component {
       const typesLength = fileTypes.length;
       return (
         <div className="search-filters">
-          {search_repo && <span className="mr-4">{gettext('Libraries')}{': '}{search_repo == 'all'? gettext('All') : repo_name}</span>}
+          {search_repo && <span className="mr-4">{gettext('Libraries')}{': '}{search_repo == 'all' ? gettext('All') : repo_name}</span>}
           {typesLength > 0 &&
             <span className="mr-4">{gettext('File Types')}{': '}
               {fileTypes.map((type, index) => {
diff --git a/frontend/src/pages/search/main-panel.js b/frontend/src/pages/search/main-panel.js
index a5b4c0b10f..571d2e1f5a 100644
--- a/frontend/src/pages/search/main-panel.js
+++ b/frontend/src/pages/search/main-panel.js
@@ -77,9 +77,9 @@ class SearchViewPanel extends React.Component {
     }).catch((error) => {
       this.setState({ isLoading: false });
       if (error.response) {
-        toaster.danger(error.response.data.detail || error.response.data.error_msg || gettext('Error'), {duration: 3});
+        toaster.danger(error.response.data.detail || error.response.data.error_msg || gettext('Error'), { duration: 3 });
       } else {
-        toaster.danger(gettext('Please check the network.'), {duration: 3});
+        toaster.danger(gettext('Please check the network.'), { duration: 3 });
       }
     });
   };
diff --git a/frontend/src/pages/search/search-results.js b/frontend/src/pages/search/search-results.js
index 43ffcaf969..a5ed4a4bc4 100644
--- a/frontend/src/pages/search/search-results.js
+++ b/frontend/src/pages/search/search-results.js
@@ -10,17 +10,17 @@ class ResultsItem extends React.Component {
     super(props);
   }
 
-  handlerFileURL= (item) => {
+  handlerFileURL = (item) => {
     return item.is_dir ? siteRoot + 'library/' + item.repo_id + '/' + item.repo_name + item.fullpath :
       siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.fullpath);
   };
 
-  handlerParentDirPath= (item) => {
+  handlerParentDirPath = (item) => {
     let index = item.is_dir ? item.fullpath.length - item.name.length - 1 : item.fullpath.length - item.name.length;
     return item.fullpath.substring(0, index);
   };
 
-  handlerParentDirURL= (item) => {
+  handlerParentDirURL = (item) => {
     return siteRoot + 'library/' + item.repo_id + '/' + item.repo_name + this.handlerParentDirPath(item);
   };
 
@@ -47,7 +47,7 @@ class ResultsItem extends React.Component {
           <div className="item-link ellipsis">
             {Utils.bytesToSize(item.size) + ' ' + moment(item.last_modified * 1000).format('YYYY-MM-DD')}
           </div>
-          <div className="item-text ellipsis" dangerouslySetInnerHTML={{__html: item.content_highlight}}></div>
+          <div className="item-text ellipsis" dangerouslySetInnerHTML={{ __html: item.content_highlight }}></div>
         </div>
       </li>
     );
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 3be00dc83c..6404870297 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -42,11 +42,11 @@ class Content extends Component {
 
       const isDesktop = Utils.isDesktop();
       const table = (
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           <thead>
             {isDesktop ? (
               <tr>
-                <th width="4%">{/*icon*/}</th>
+                <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>
@@ -115,11 +115,11 @@ class Item extends Component {
   };
 
   onMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   unshare = (e) => {
@@ -174,7 +174,7 @@ class Item extends Component {
     }
 
     seafileAPI.updateFolderSharePerm(item.repo_id, postData, options).then((res) => {
-      this.setState({share_permission: permission});
+      this.setState({ share_permission: permission });
       toaster.success(gettext('Successfully modified permission.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -184,7 +184,7 @@ class Item extends Component {
 
   onEditPermission = (event) => {
     event.nativeEvent.stopImmediatePropagation();
-    this.setState({isShowPermEditor: true});
+    this.setState({ isShowPermEditor: true });
   };
 
   render() {
@@ -245,7 +245,7 @@ class Item extends Component {
             />
           )}
         </td>
-        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
 
@@ -279,7 +279,7 @@ class Item extends Component {
             </Dropdown>
           </td>
         </tr>
-        {isPermSelectDialogOpen &&(
+        {isPermSelectDialogOpen && (
           <PermSelect
             repoID={item.repo_id}
             currentPerm={share_permission}
@@ -318,13 +318,13 @@ class ShareAdminFolders extends Component {
 
     switch (`${sortBy}-${sortOrder}`) {
       case 'name-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = Utils.compareTwoWord(a.folder_name, b.folder_name);
           return result;
         };
         break;
       case 'name-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = Utils.compareTwoWord(a.folder_name, b.folder_name);
           return -result;
         };
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index a1205149c4..1394ad773f 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -41,11 +41,11 @@ class Content extends Component {
 
       const isDesktop = Utils.isDesktop();
       const table = (
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           <thead>
             {isDesktop ? (
               <tr>
-                <th width="4%">{/*icon*/}</th>
+                <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>
@@ -125,11 +125,11 @@ class Item extends Component {
   };
 
   onMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   changePerm = (permission) => {
@@ -185,7 +185,7 @@ class Item extends Component {
 
   onEditPermission = (event) => {
     event.nativeEvent.stopImmediatePropagation();
-    this.setState({isShowPermEditor: true});
+    this.setState({ isShowPermEditor: true });
   };
 
   render() {
@@ -259,7 +259,7 @@ class Item extends Component {
             />
           )}
         </td>
-        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '': 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
+        <td><a href="#" role="button" aria-label={gettext('Unshare')} className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unshare')} onClick={this.unshare}></a></td>
       </tr>
     );
 
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index b54a5b397b..b6500db211 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -79,17 +79,17 @@ class Content extends Component {
       // only for some columns
       const columnWidths = isPro ? ['14%', '7%', '14%'] : ['21%', '14%', '20%'];
       const table = (
-        <table className={`${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`${isDesktop ? '' : 'table-thead-hidden'}`}>
           <thead>
             {isDesktop ? (
               <tr>
-                <th width="4%">{/*icon*/}</th>
+                <th width="4%">{/* icon*/}</th>
                 <th width="31%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
                 <th width={columnWidths[0]}>{gettext('Library')}</th>
                 {isPro && <th width="20%">{gettext('Permission')}</th>}
                 <th width={columnWidths[1]}>{gettext('Visits')}</th>
                 <th width={columnWidths[2]}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Expiration')} {sortByTime && sortIcon}</a></th>
-                <th width="10%">{/*Operations*/}</th>
+                <th width="10%">{/* Operations*/}</th>
               </tr>
             ) : (
               <tr>
@@ -247,7 +247,7 @@ class Item extends Component {
 
   render() {
     const item = this.props.item;
-    const { currentPermission, permissionOptions , isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
+    const { currentPermission, permissionOptions, isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
     this.permOptions = permissionOptions.map(item => {
       return {
         value: item,
@@ -257,7 +257,7 @@ class Item extends Component {
     });
     const currentSelectedPermOption = this.permOptions.filter(item => item.isSelected)[0] || {};
 
-    let iconUrl, objUrl;
+    let iconUrl; let objUrl;
     if (item.is_dir) {
       let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
       iconUrl = Utils.getFolderIconUrl(false);
@@ -267,7 +267,7 @@ class Item extends Component {
       objUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
     }
 
-    const deletedTip = item.obj_id === '' ? <span style={{color:'red'}}>{gettext('(deleted)')}</span> : null;
+    const deletedTip = item.obj_id === '' ? <span style={{ color: 'red' }}>{gettext('(deleted)')}</span> : null;
     const desktopItem = (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onFocus={this.handleMouseEnter}>
         <td><img src={iconUrl} width="24" alt="" /></td>
@@ -293,8 +293,8 @@ class Item extends Component {
         <td>{item.view_cnt}</td>
         <td>{this.renderExpiration()}</td>
         <td>
-          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon op-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
-          <a href="#" className={`sf3-font-delete1 sf3-font action-icon op-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon op-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} aria-label={gettext('View')} role="button" onClick={this.viewLink}></a>}
+          <a href="#" className={`sf3-font-delete1 sf3-font action-icon op-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} aria-label={gettext('Remove')} role="button" onClick={this.removeLink}></a>
         </td>
       </tr>
     );
@@ -382,10 +382,10 @@ class ShareAdminShareLinks extends Component {
 
     // for mobile
     this.sortOptions = [
-      {value: 'name-asc', text: gettext('By name ascending')},
-      {value: 'name-desc', text: gettext('By name descending')},
-      {value: 'time-asc', text: gettext('By expiration ascending')},
-      {value: 'time-desc', text: gettext('By expiration descending')}
+      { value: 'name-asc', text: gettext('By name ascending') },
+      { value: 'name-desc', text: gettext('By name descending') },
+      { value: 'time-asc', text: gettext('By expiration ascending') },
+      { value: 'time-desc', text: gettext('By expiration descending') }
     ];
   }
 
@@ -394,24 +394,24 @@ class ShareAdminShareLinks extends Component {
 
     switch (`${sortBy}-${sortOrder}`) {
       case 'name-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = Utils.compareTwoWord(a.obj_name, b.obj_name);
           return result;
         };
         break;
       case 'name-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = Utils.compareTwoWord(a.obj_name, b.obj_name);
           return -result;
         };
         break;
       case 'time-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.expire_date < b.expire_date ? -1 : 1;
         };
         break;
       case 'time-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.expire_date < b.expire_date ? 1 : -1;
         };
         break;
@@ -466,10 +466,10 @@ class ShareAdminShareLinks extends Component {
     if (!this.state.isLoadingMore && this.state.hasMore) {
       const clientHeight = event.target.clientHeight;
       const scrollHeight = event.target.scrollHeight;
-      const scrollTop    = event.target.scrollTop;
+      const scrollTop = event.target.scrollTop;
       const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
       if (isBottom) { // scroll to the bottom
-        this.setState({isLoadingMore: true}, () => {
+        this.setState({ isLoadingMore: true }, () => {
           this.getMore();
         });
       }
@@ -501,7 +501,7 @@ class ShareAdminShareLinks extends Component {
       let items = this.state.items.filter(uploadItem => {
         return uploadItem.token !== item.token;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       let message = gettext('Successfully deleted 1 item.');
       toaster.success(message);
     }).catch((error) => {
@@ -517,13 +517,13 @@ class ShareAdminShareLinks extends Component {
   };
 
   toggleCleanInvalidShareLinksDialog = () => {
-    this.setState({isCleanInvalidShareLinksDialogOpen: !this.state.isCleanInvalidShareLinksDialogOpen});
+    this.setState({ isCleanInvalidShareLinksDialogOpen: !this.state.isCleanInvalidShareLinksDialogOpen });
   };
 
   cleanInvalidShareLinks = () => {
     seafileAPI.cleanInvalidShareLinks().then(res => {
       const newItems = this.state.items.filter(item => item.obj_id !== '').filter(item => !item.is_expired);
-      this.setState({items: newItems});
+      this.setState({ items: newItems });
       toaster.success(gettext('Successfully cleaned invalid share links.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -542,7 +542,7 @@ class ShareAdminShareLinks extends Component {
                   <Link to={`${siteRoot}share-admin-share-links/`} className="nav-link active">
                     {gettext('Share Links')}
                     <SingleDropdownToolbar
-                      opList={[{'text': gettext('Clean invalid share links'), 'onClick': this.toggleCleanInvalidShareLinksDialog}]}
+                      opList={[{ 'text': gettext('Clean invalid share links'), 'onClick': this.toggleCleanInvalidShareLinksDialog }]}
                     />
                   </Link>
                 </li>
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index 4184ecdd2b..1743cdea1d 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -42,16 +42,16 @@ class Content extends Component {
 
     const isDesktop = Utils.isDesktop();
     const table = (
-      <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+      <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
         <thead>
           {isDesktop ? (
             <tr>
-              <th width="4%">{/*icon*/}</th>
+              <th width="4%">{/* icon*/}</th>
               <th width="30%">{gettext('Name')}</th>
               <th width="24%">{gettext('Library')}</th>
               <th width="16%">{gettext('Visits')}</th>
               <th width="16%">{gettext('Expiration')}</th>
-              <th width="10%">{/*Operations*/}</th>
+              <th width="10%">{/* Operations*/}</th>
             </tr>
           ) : (
             <tr>
@@ -105,11 +105,11 @@ class Item extends Component {
   };
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   viewLink = (e) => {
@@ -140,7 +140,7 @@ class Item extends Component {
     const repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}`;
     const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`;
 
-    const deletedTip = item.obj_id === '' ? <span style={{color:'red'}}>{gettext('(deleted)')}</span> : null;
+    const deletedTip = item.obj_id === '' ? <span style={{ color: 'red' }}>{gettext('(deleted)')}</span> : null;
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
         <td><img src={iconUrl} alt="" width="24" /></td>
@@ -240,7 +240,7 @@ class ShareAdminUploadLinks extends Component {
       let items = this.state.items.filter(uploadItem => {
         return uploadItem.token !== item.token;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       const message = gettext('Successfully deleted 1 item.');
       toaster.success(message);
     }).catch((error) => {
@@ -250,13 +250,13 @@ class ShareAdminUploadLinks extends Component {
   };
 
   toggleCleanInvalidUploadLinksDialog = () => {
-    this.setState({isCleanInvalidUploadLinksDialogOpen: !this.state.isCleanInvalidUploadLinksDialogOpen});
+    this.setState({ isCleanInvalidUploadLinksDialogOpen: !this.state.isCleanInvalidUploadLinksDialogOpen });
   };
 
   cleanInvalidUploadLinks = () => {
     seafileAPI.cleanInvalidUploadLinks().then(res => {
       const newItems = this.state.items.filter(item => item.obj_id !== '').filter(item => !item.is_expired);
-      this.setState({items: newItems});
+      this.setState({ items: newItems });
       toaster.success(gettext('Successfully cleaned invalid upload links.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -278,7 +278,7 @@ class ShareAdminUploadLinks extends Component {
                   <Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link active">
                     {gettext('Upload Links')}
                     <SingleDropdownToolbar
-                      opList={[{'text': gettext('Clean invalid upload links'), 'onClick': this.toggleCleanInvalidUploadLinksDialog}]}
+                      opList={[{ 'text': gettext('Clean invalid upload links'), 'onClick': this.toggleCleanInvalidUploadLinksDialog }]}
                     />
                   </Link>
                 </li>
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-content.js b/frontend/src/pages/share-with-ocm/remote-dir-content.js
index fab5498bd8..d5958163f9 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-content.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-content.js
@@ -36,7 +36,7 @@ class DirentItem extends React.Component {
     this.props.downloadDirent(this.props.dirent);
   };
 
-  render () {
+  render() {
     let { isOpIconShown } = this.state;
     let { dirent } = this.props;
     let iconUrl = Utils.getDirentIcon(dirent);
@@ -93,9 +93,9 @@ class DirContent extends React.Component {
         <table className="table-hover">
           <thead>
             <tr>
-              <th width="5%">{/*icon*/}</th>
+              <th width="5%">{/* icon*/}</th>
               <th width="55%">{gettext('Name')}</th>
-              <th width="10%">{/*operation*/}</th>
+              <th width="10%">{/* operation*/}</th>
               <th width="15%">{gettext('Size')}</th>
               <th width="15%">{gettext('Last Update')}</th>
             </tr>
@@ -117,7 +117,7 @@ class DirContent extends React.Component {
   }
 }
 
-DirContent.propTypes =  {
+DirContent.propTypes = {
   loading: PropTypes.bool.isRequired,
   errorMsg: PropTypes.string.isRequired,
   direntList: PropTypes.array.isRequired,
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-path.js b/frontend/src/pages/share-with-ocm/remote-dir-path.js
index 8dfb9d4e19..339244efdf 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-path.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-path.js
@@ -56,7 +56,7 @@ class DirPath extends React.Component {
         <Link to={siteRoot + 'shared-with-ocm/'} className="normal" onClick={(e) => this.props.onTabNavClick('shared-with-ocm')}>{gettext('All')}</Link>
         <span className="path-split">/</span>
         {(currentPath === '/' || currentPath === '') ?
-          <span className="path-repo-name">{repoName}</span>:
+          <span className="path-repo-name">{repoName}</span> :
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}
diff --git a/frontend/src/pages/share-with-ocm/remote-dir-view.js b/frontend/src/pages/share-with-ocm/remote-dir-view.js
index 7fa152efe9..0c6de21862 100644
--- a/frontend/src/pages/share-with-ocm/remote-dir-view.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-view.js
@@ -37,7 +37,7 @@ class DirView extends Component {
     this.fileInput = React.createRef();
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.loadDirentList('/');
   }
 
@@ -68,8 +68,8 @@ class DirView extends Component {
         path: path,
         userPerm: user_perm,
       }, () => {
-        let url =`${siteRoot}remote-library/${providerID}/${repoID}/${repoName}${Utils.encodePath(path)}`;
-        window.history.replaceState({url: url, path: path}, path, url);
+        let url = `${siteRoot}remote-library/${providerID}/${repoID}/${repoName}${Utils.encodePath(path)}`;
+        window.history.replaceState({ url: url, path: path }, path, url);
       });
     }).catch((error) => {
       this.setState({
diff --git a/frontend/src/pages/share-with-ocm/shared-with-ocm.js b/frontend/src/pages/share-with-ocm/shared-with-ocm.js
index c28abb94d8..c75315dba0 100644
--- a/frontend/src/pages/share-with-ocm/shared-with-ocm.js
+++ b/frontend/src/pages/share-with-ocm/shared-with-ocm.js
@@ -95,7 +95,7 @@ class Item extends Component {
     item.icon_url = Utils.getLibIconUrl(item);
     item.icon_title = Utils.getLibIconTitle(item);
 
-    let shareRepoUrl =`${siteRoot}remote-library/${this.props.item.provider_id}/${this.props.item.repo_id}/${Utils.encodePath(this.props.item.repo_name)}/`;
+    let shareRepoUrl = `${siteRoot}remote-library/${this.props.item.provider_id}/${this.props.item.repo_id}/${Utils.encodePath(this.props.item.repo_name)}/`;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
         <td><img src={item.icon_url} title={item.icon_title} alt={item.icon_title} width="24" /></td>
@@ -146,7 +146,7 @@ class SharedWithOCM extends Component {
       let items = this.state.items.filter(item => {
         return item.id != id;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       toaster.success(gettext('Successfully unshared {name}').replace('{name}', repo_name));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index 27870763f9..9f01a1762e 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -105,7 +105,7 @@ class Content extends Component {
         </>
       );
       const content = currentViewMode == 'list' ? (
-        <table className={(isDesktop && !theadHidden)? '' : 'table-thead-hidden'}>
+        <table className={(isDesktop && !theadHidden) ? '' : 'table-thead-hidden'}>
           {isDesktop ? desktopThead : <LibsMobileThead />}
           <tbody>
             {itemsContent}
@@ -177,7 +177,7 @@ class Item extends Component {
 
   share = (e) => {
     e.preventDefault();
-    this.setState({isShowSharedDialog: true});
+    this.setState({ isShowSharedDialog: true });
   };
 
   leaveShare = (e) => {
@@ -197,7 +197,7 @@ class Item extends Component {
     }
 
     request.then((res) => {
-      this.setState({unshared: true});
+      this.setState({ unshared: true });
       let message = gettext('Successfully unshared {name}').replace('{name}', data.repo_name);
       toaster.success(message);
     }).catch(error => {
@@ -210,7 +210,7 @@ class Item extends Component {
   };
 
   toggleShareDialog = () => {
-    this.setState({isShowSharedDialog: false});
+    this.setState({ isShowSharedDialog: false });
   };
 
   onToggleStarRepo = (e) => {
@@ -218,7 +218,7 @@ class Item extends Component {
     const repoName = this.props.data.repo_name;
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.data.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully unstarred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -228,7 +228,7 @@ class Item extends Component {
       });
     } else {
       seafileAPI.starItem(this.props.data.repo_id, '/').then(() => {
-        this.setState({isStarred: !this.state.isStarred});
+        this.setState({ isStarred: !this.state.isStarred });
         const msg = gettext('Successfully starred {library_name_placeholder}.')
           .replace('{library_name_placeholder}', repoName);
         toaster.success(msg);
@@ -293,7 +293,8 @@ class Item extends Component {
                 aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')}
                 onClick={this.onToggleStarRepo}
                 className={`op-icon m-0 ${this.state.isStarred ? 'sf3-font-star' : 'sf3-font-star-empty'} sf3-font`}
-              ></i>
+              >
+              </i>
             </td>
             <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
             <td>
@@ -329,7 +330,7 @@ class Item extends Component {
             <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
             <td title={data.owner_contact_email}>{data.owner_name}</td>
           </tr>
-        ): (
+        ) : (
           <div
             className="library-grid-item px-3 d-flex justify-content-between align-items-center"
             onMouseOver={this.handleMouseOver}
@@ -346,7 +347,8 @@ class Item extends Component {
                   aria-label={gettext('Unstar')}
                   onClick={this.onToggleStarRepo}
                   className='op-icon library-grid-item-icon sf3-font-star sf3-font'
-                ></i>
+                >
+                </i>
               }
               {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} className="op-icon library-grid-item-icon" />}
             </div>
@@ -473,7 +475,7 @@ class SharedLibraries extends Component {
 
   componentDidMount() {
     if (!this.props.repoList) {
-      seafileAPI.listRepos({type:'shared'}).then((res) => {
+      seafileAPI.listRepos({ type: 'shared' }).then((res) => {
         let repoList = res.data.repos.map((item) => {
           return new Repo(item);
         });
@@ -518,7 +520,7 @@ class SharedLibraries extends Component {
       }
       return item;
     });
-    this.setState({items: items});
+    this.setState({ items: items });
   };
 
   renderContent = () => {
diff --git a/frontend/src/pages/shared-with-all/index.js b/frontend/src/pages/shared-with-all/index.js
index b5ec9729e9..f0d77ef009 100644
--- a/frontend/src/pages/shared-with-all/index.js
+++ b/frontend/src/pages/shared-with-all/index.js
@@ -40,7 +40,7 @@ class PublicSharedView extends React.Component {
 
   componentDidMount() {
     if (!this.props.repoList) {
-      seafileAPI.listRepos({type:'public'}).then((res) => {
+      seafileAPI.listRepos({ type: 'public' }).then((res) => {
         let repoList = res.data.repos.map((item) => {
           return new Repo(item);
         });
@@ -63,11 +63,11 @@ class PublicSharedView extends React.Component {
   }
 
   onItemUnshare = (repo) => {
-    seafileAPI.unshareRepo(repo.repo_id, {share_type: 'public'}).then(() => {
+    seafileAPI.unshareRepo(repo.repo_id, { share_type: 'public' }).then(() => {
       let repoList = this.state.repoList.filter(item => {
         return item.repo_id !== repo.repo_id;
       });
-      this.setState({repoList: repoList});
+      this.setState({ repoList: repoList });
       let message = gettext('Successfully unshared {name}').replace('{name}', repo.repo_name);
       toaster.success(message);
     }).catch(error => {
@@ -100,7 +100,7 @@ class PublicSharedView extends React.Component {
 
     let newRepoList = this.state.repoList.map(item => {return item;});
     newRepoList.unshift(repo);
-    this.setState({repoList: newRepoList});
+    this.setState({ repoList: newRepoList });
   };
 
   sortItems = (sortBy, sortOrder) => {
@@ -160,11 +160,11 @@ class PublicSharedView extends React.Component {
   };
 
   onCreateRepoToggle = () => {
-    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+    this.setState({ isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen });
   };
 
   onSelectRepoToggle = () => {
-    this.setState({isSelectRepoDialogOpen: !this.state.isSelectRepoDialogOpen});
+    this.setState({ isSelectRepoDialogOpen: !this.state.isSelectRepoDialogOpen });
   };
 
   onCreateRepo = (repo) => {
@@ -190,7 +190,7 @@ class PublicSharedView extends React.Component {
 
   onRepoSelectedHandler = (selectedRepoList) => {
     selectedRepoList.forEach(repo => {
-      seafileAPI.selectOwnedRepoToPublic(repo.repo_id, {share_type: 'public', permission: repo.sharePermission}).then(() => {
+      seafileAPI.selectOwnedRepoToPublic(repo.repo_id, { share_type: 'public', permission: repo.sharePermission }).then(() => {
         this.addRepoItem(repo);
       }).catch((error) => {
         let errMessage = Utils.getErrorMsg(error);
@@ -227,8 +227,8 @@ class PublicSharedView extends React.Component {
                 {canAddPublicRepo &&
                 <SingleDropdownToolbar
                   opList={[
-                    {'text': gettext('Share existing libraries'), 'onClick': this.onSelectRepoToggle},
-                    {'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle}
+                    { 'text': gettext('Share existing libraries'), 'onClick': this.onSelectRepoToggle },
+                    { 'text': gettext('New Library'), 'onClick': this.onCreateRepoToggle }
                   ]}
                 />
                 }
diff --git a/frontend/src/pages/starred/starred.js b/frontend/src/pages/starred/starred.js
index 55c82a1ffc..d24bb0772f 100644
--- a/frontend/src/pages/starred/starred.js
+++ b/frontend/src/pages/starred/starred.js
@@ -13,7 +13,7 @@ import toaster from '../../components/toast';
 class Content extends Component {
 
   render() {
-    const {loading, errorMsg, items} = this.props.data;
+    const { loading, errorMsg, items } = this.props.data;
 
     if (loading) {
       return <Loading />;
@@ -50,7 +50,7 @@ class Content extends Component {
 
       const isDesktop = Utils.isDesktop();
       return items.length ? (
-        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? desktopThead : mobileThead}
           <TableBody items={items} />
         </table>
@@ -91,7 +91,7 @@ class TableBody extends Component {
     const len = items.length;
     const thumbnailSize = 48;
     const _this = this;
-    let getThumbnail = function(i) {
+    let getThumbnail = function (i) {
       const curItem = items[i];
       seafileAPI.createThumbnail(curItem.repo_id, curItem.path, thumbnailSize).then((res) => {
         curItem.encoded_thumbnail_src = res.data.encoded_thumbnail_src;
@@ -113,7 +113,7 @@ class TableBody extends Component {
 
   render() {
 
-    let listItems = this.state.items.map(function(item, index) {
+    let listItems = this.state.items.map(function (item, index) {
 
       if (item.path === '/') {
         item.item_icon_url = Utils.getDefaultLibIconUrl(false);
@@ -181,7 +181,7 @@ class Item extends Component {
 
     const data = this.props.data;
     seafileAPI.unstarItem(data.repo_id, data.path).then((res) => {
-      this.setState({unstarred: true});
+      this.setState({ unstarred: true });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -221,7 +221,7 @@ class Item extends Component {
         <Fragment>
           {data.deleted ?
             <td>
-              {data.obj_name}{' '}<span style={{color:'red'}}>{gettext('deleted')}</span>
+              {data.obj_name}{' '}<span style={{ color: 'red' }}>{gettext('deleted')}</span>
             </td> :
             <td>
               { data.is_dir ?
@@ -232,7 +232,7 @@ class Item extends Component {
           }
         </Fragment>
         <td>{data.repo_name}</td>
-        <td dangerouslySetInnerHTML={{__html:data.mtime_relative}}></td>
+        <td dangerouslySetInnerHTML={{ __html: data.mtime_relative }}></td>
         <td>
           <a href="#" role="button" className={opClasses} title={gettext('Unstar')} aria-label={gettext('Unstar')} onClick={this.unstar}></a>
         </td>
@@ -255,7 +255,7 @@ class Item extends Component {
           }
           <br />
           <span className="item-meta-info">{data.repo_name}</span>
-          <span className="item-meta-info" dangerouslySetInnerHTML={{__html:data.mtime_relative}}></span>
+          <span className="item-meta-info" dangerouslySetInnerHTML={{ __html: data.mtime_relative }}></span>
         </td>
         <td>
           <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
diff --git a/frontend/src/pages/sys-admin/abuse-reports.js b/frontend/src/pages/sys-admin/abuse-reports.js
index 8a070d63c9..4e0b10e54b 100644
--- a/frontend/src/pages/sys-admin/abuse-reports.js
+++ b/frontend/src/pages/sys-admin/abuse-reports.js
@@ -42,9 +42,9 @@ class AbuseReports extends Component {
 
   handleError = (e) => {
     if (e.response) {
-      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), {duration: 3});
+      toaster.danger(e.response.data.error_msg || e.response.data.detail || gettext('Error'), { duration: 3 });
     } else {
-      toaster.danger(gettext('Please check the network.'), {duration: 3});
+      toaster.danger(gettext('Please check the network.'), { duration: 3 });
     }
   };
 
@@ -65,9 +65,13 @@ class AbuseReports extends Component {
           <td>{item.abuse_type}</td>
           <td>{item.description}</td>
           <td>{moment(item.time).format('YYYY-MM-DD')}</td>
-          <td><p onClick={this.updateAbuseReport.bind(this, handled, abuseReportId)}
-            className="op-target ellipsis ellipsis-op-target cursor-pointer"
-          >{gettext(item.handled.toString())}</p></td>
+          <td>
+            <p
+              onClick={this.updateAbuseReport.bind(this, handled, abuseReportId)}
+              className="op-target ellipsis ellipsis-op-target cursor-pointer"
+            >{gettext(item.handled.toString())}
+            </p>
+          </td>
         </tr>
       );
     });
diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index fdcfbaf443..285d3aa507 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -125,7 +125,7 @@ class AdminLoginLogs extends Component {
     this.initPage = 1;
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/admin-logs/logs-nav.js b/frontend/src/pages/sys-admin/admin-logs/logs-nav.js
index c1d3487b82..4ea8d66c17 100644
--- a/frontend/src/pages/sys-admin/admin-logs/logs-nav.js
+++ b/frontend/src/pages/sys-admin/admin-logs/logs-nav.js
@@ -12,8 +12,8 @@ class LogsNav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'adminOperationLogs', urlPart:'admin-logs/operation', text: gettext('Admin Operation Logs')},
-      {name: 'adminLoginLogs', urlPart:'admin-logs/login', text: gettext('Admin Login Logs')},
+      { name: 'adminOperationLogs', urlPart: 'admin-logs/operation', text: gettext('Admin Operation Logs') },
+      { name: 'adminLoginLogs', urlPart: 'admin-logs/login', text: gettext('Admin Login Logs') },
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index f3ae46f052..79e5af1da3 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -149,7 +149,7 @@ class Item extends Component {
       case 'repo_transfer':
         detailText = gettext('Transferred library {library_name} from {user_from} to {user_to}')
           .replace('{user_from}', '<span class="font-weight-bold">' + detail.from + '</span>')
-          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to+ '</span>');
+          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to + '</span>');
         if (isPro && enableSysAdminViewRepo) {
           detailText = detailText.replace('{library_name}', '<a href="' + repoPageUrl + '">' + detail.name + '</a>');
         } else {
@@ -159,14 +159,14 @@ class Item extends Component {
 
       case 'group_create':
         detailText = gettext('Created group {group_name}')
-          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name+ '</a>');
+          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name + '</a>');
         return detailText;
 
       case 'group_transfer':
         detailText = gettext('Transferred group {group_name} from {user_from} to {user_to}')
           .replace('{user_from}', '<span class="font-weight-bold">' + detail.from + '</span>')
-          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to+ '</span>')
-          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name+ '</a>');
+          .replace('{user_to}', '<span class="font-weight-bold">' + detail.to + '</span>')
+          .replace('{group_name}', '<a href="' + groupPageUrl + '">' + detail.name + '</a>');
         return detailText;
 
       case 'group_delete':
@@ -176,12 +176,12 @@ class Item extends Component {
 
       case 'user_add':
         detailText = gettext('Added user {user}')
-          .replace('{user}', '<a href="' + userPageUrl + '">' + detail.email+ '</a>');
+          .replace('{user}', '<a href="' + userPageUrl + '">' + detail.email + '</a>');
         return detailText;
 
       case 'user_delete':
         detailText = gettext('Deleted user {user}')
-          .replace('{user}', '<span class="font-weight-bold">' + detail.email+ '</span>');
+          .replace('{user}', '<span class="font-weight-bold">' + detail.email + '</span>');
         return detailText;
 
       default: return '';
@@ -195,7 +195,7 @@ class Item extends Component {
         <td><UserLink email={item.email} name={item.name} /></td>
         <td>{this.getOperationText(item.operation)}</td>
         <td>
-          <span dangerouslySetInnerHTML={{__html: this.getOperationDetail(item)}}></span>
+          <span dangerouslySetInnerHTML={{ __html: this.getOperationDetail(item) }}></span>
         </td>
         <td>{moment(item.datetime).fromNow()}</td>
       </tr>
@@ -222,7 +222,7 @@ class AdminOperationLogs extends Component {
     this.initPage = 1;
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/departments/department-list.js b/frontend/src/pages/sys-admin/departments/department-list.js
index 75704d5ba7..5bb82c106b 100644
--- a/frontend/src/pages/sys-admin/departments/department-list.js
+++ b/frontend/src/pages/sys-admin/departments/department-list.js
@@ -27,11 +27,11 @@ class DepartmentList extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   listDepartments = () => {
@@ -124,7 +124,7 @@ class DepartmentList extends React.Component {
                   </thead>
                   <tbody>
                     {groups.map((group, index) => {
-                      return(
+                      return (
                         <Fragment key={group.id}>
                           <GroupItem
                             group={group}
diff --git a/frontend/src/pages/sys-admin/departments/department-members.js b/frontend/src/pages/sys-admin/departments/department-members.js
index 380c0db985..335e66d9e9 100644
--- a/frontend/src/pages/sys-admin/departments/department-members.js
+++ b/frontend/src/pages/sys-admin/departments/department-members.js
@@ -60,7 +60,7 @@ class DepartmentMembers extends React.Component {
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
-      this.setState({membersErrorMsg: errMessage});
+      this.setState({ membersErrorMsg: errMessage });
     });
   };
 
diff --git a/frontend/src/pages/sys-admin/departments/department.js b/frontend/src/pages/sys-admin/departments/department.js
index d9093ad040..01b68757b3 100644
--- a/frontend/src/pages/sys-admin/departments/department.js
+++ b/frontend/src/pages/sys-admin/departments/department.js
@@ -40,9 +40,9 @@ class Department extends React.Component {
     };
 
     this.navItems = [
-      {name: 'subDepartments', urlPart: '/', text: gettext('Sub-departments')},
-      {name: 'members', urlPart: '/members/', text: gettext('Members')},
-      {name: 'repos', urlPart: '/libraries/', text: gettext('Libraries')}
+      { name: 'subDepartments', urlPart: '/', text: gettext('Sub-departments') },
+      { name: 'members', urlPart: '/members/', text: gettext('Members') },
+      { name: 'repos', urlPart: '/libraries/', text: gettext('Libraries') }
     ];
   }
 
@@ -88,7 +88,7 @@ class Department extends React.Component {
   };
 
   toggleAddDepartmentDialog = () => {
-    this.setState({ isShowAddDepartmentDialog: !this.state.isShowAddDepartmentDialog});
+    this.setState({ isShowAddDepartmentDialog: !this.state.isShowAddDepartmentDialog });
   };
 
   render() {
diff --git a/frontend/src/pages/sys-admin/departments/group-item.js b/frontend/src/pages/sys-admin/departments/group-item.js
index aa72fc807a..179c71f0bf 100644
--- a/frontend/src/pages/sys-admin/departments/group-item.js
+++ b/frontend/src/pages/sys-admin/departments/group-item.js
@@ -61,7 +61,7 @@ class GroupItem extends React.Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Rename':
         translateResult = gettext('Rename');
         break;
@@ -76,7 +76,7 @@ class GroupItem extends React.Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Rename':
         this.toggleRenameDialog();
         break;
@@ -109,7 +109,7 @@ class GroupItem extends React.Component {
   render() {
     const { group } = this.props;
     const { highlight, isOpIconShown, isRenameDialogOpen, isDeleteDialogOpen, isSetQuotaDialogOpen } = this.state;
-    const newHref = siteRoot+ 'sys/departments/' + group.id + '/';
+    const newHref = siteRoot + 'sys/departments/' + group.id + '/';
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
diff --git a/frontend/src/pages/sys-admin/departments/sub-departments.js b/frontend/src/pages/sys-admin/departments/sub-departments.js
index 42a81c58fa..b007857c36 100644
--- a/frontend/src/pages/sys-admin/departments/sub-departments.js
+++ b/frontend/src/pages/sys-admin/departments/sub-departments.js
@@ -38,7 +38,7 @@ class SubDepartments extends React.Component {
 
   listSubDepartments = (groupID) => {
     seafileAPI.sysAdminGetDepartmentInfo(groupID, true).then(res => {
-      this.setState({groups: res.data.groups});
+      this.setState({ groups: res.data.groups });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -57,11 +57,11 @@ class SubDepartments extends React.Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   onAddNewDepartment = (newDepartment) => {
@@ -114,7 +114,7 @@ class SubDepartments extends React.Component {
               </thead>
               <tbody>
                 {groups.map((group, index) => {
-                  return(
+                  return (
                     <GroupItem
                       key={group.id}
                       isItemFreezed={this.state.isItemFreezed}
diff --git a/frontend/src/pages/sys-admin/devices/devices-by-platform.js b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
index e368595f47..d9a572b8ba 100644
--- a/frontend/src/pages/sys-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
@@ -46,7 +46,7 @@ class Content extends Component {
                 <th width="19%">{gettext('Device Name')}</th>
                 <th width="19%">{gettext('IP')}</th>
                 <th width="19%">{gettext('Last Access')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -97,11 +97,11 @@ class Item extends Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   handleUnlink = (e) => {
@@ -114,13 +114,13 @@ class Item extends Component {
   };
 
   toggleUnlinkDeviceDialog = () => {
-    this.setState({isUnlinkDeviceDialogOpen: !this.state.isUnlinkDeviceDialogOpen});
+    this.setState({ isUnlinkDeviceDialogOpen: !this.state.isUnlinkDeviceDialogOpen });
   };
 
   unlinkDevice = (deleteFiles) => {
     const { platform, device_id, user } = this.props.item;
     seafileAPI.sysAdminUnlinkDevice(platform, device_id, user, deleteFiles).then((res) => {
-      this.setState({unlinked: true});
+      this.setState({ unlinked: true });
       let message = gettext('Successfully unlinked the device.');
       toaster.success(message);
     }).catch((error) => {
@@ -179,7 +179,7 @@ class DevicesByPlatform extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/devices/devices-errors.js b/frontend/src/pages/sys-admin/devices/devices-errors.js
index 0bedb77a16..547557028a 100644
--- a/frontend/src/pages/sys-admin/devices/devices-errors.js
+++ b/frontend/src/pages/sys-admin/devices/devices-errors.js
@@ -98,11 +98,11 @@ class Item extends Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   render() {
@@ -140,7 +140,7 @@ class DeviceErrors extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/devices/devices-nav.js b/frontend/src/pages/sys-admin/devices/devices-nav.js
index 4488b60361..c79324d844 100644
--- a/frontend/src/pages/sys-admin/devices/devices-nav.js
+++ b/frontend/src/pages/sys-admin/devices/devices-nav.js
@@ -12,11 +12,11 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'desktop', urlPart:'desktop-devices', text: gettext('Desktop')},
-      {name: 'mobile', urlPart:'mobile-devices', text: gettext('Mobile')}
+      { name: 'desktop', urlPart: 'desktop-devices', text: gettext('Desktop') },
+      { name: 'mobile', urlPart: 'mobile-devices', text: gettext('Mobile') }
     ];
     if (isPro) {
-      this.navItems.push({name: 'errors', urlPart:'device-errors', text: gettext('Errors')});
+      this.navItems.push({ name: 'errors', urlPart: 'device-errors', text: gettext('Errors') });
     }
   }
 
diff --git a/frontend/src/pages/sys-admin/dingtalk-departments.js b/frontend/src/pages/sys-admin/dingtalk-departments.js
index e04064825f..e71f702cb8 100644
--- a/frontend/src/pages/sys-admin/dingtalk-departments.js
+++ b/frontend/src/pages/sys-admin/dingtalk-departments.js
@@ -99,7 +99,7 @@ class DingtalkDepartments extends Component {
         canCheckUserIds: canCheckUserIds,
       });
     }).catch((error) => {
-      this.setState({isMembersListLoading: false});
+      this.setState({ isMembersListLoading: false });
       this.handleError(error);
     });
   };
@@ -173,7 +173,7 @@ class DingtalkDepartments extends Component {
       userList.push(newUsersTempObj[i]);
     }
     if (userList.length === 0) {
-      toaster.danger('未选择成员', {duration: 3});
+      toaster.danger('未选择成员', { duration: 3 });
       return;
     }
     seafileAPI.adminAddDingtalkUsersBatch(userList).then((res) => {
@@ -185,9 +185,9 @@ class DingtalkDepartments extends Component {
         this.handleSubmitSuccess(res.data.success);
       }
       if (res.data.failed) {
-        const fails= res.data.failed;
+        const fails = res.data.failed;
         for (let i = 0; i < fails.length; i++) {
-          toaster.danger(fails[i].name + ' ' + fails[i].error_msg, {duration: 3});
+          toaster.danger(fails[i].name + ' ' + fails[i].error_msg, { duration: 3 });
         }
       }
     }).catch((error) => {
@@ -200,7 +200,7 @@ class DingtalkDepartments extends Component {
     let { membersTempObj, membersList, canCheckUserIds } = this.state;
     for (let i = 0; i < success.length; i++) {
       let { userid, name, email } = success[i];
-      toaster.success(name + ' 成功导入', {duration: 1});
+      toaster.success(name + ' 成功导入', { duration: 1 });
       // refresh all temp
       if (canCheckUserIds.indexOf(userid) !== -1) {
         canCheckUserIds.splice(canCheckUserIds.indexOf(userid), 1);
@@ -276,7 +276,7 @@ class DingtalkDepartments extends Component {
     for (let i = 0, len = fails.length; i < len; i++) {
       let fail = fails[i];
       let failName = fail.type === 'department' ? fail.department_name : fail.api_user_name;
-      toaster.danger(failName + ' ' + fail.msg, { duration: 3} );
+      toaster.danger(failName + ' ' + fail.msg, { duration: 3 } );
     }
   };
 
diff --git a/frontend/src/pages/sys-admin/dingtalk/dingtalk-department-members-list.js b/frontend/src/pages/sys-admin/dingtalk/dingtalk-department-members-list.js
index 6124be3472..6465b776a1 100644
--- a/frontend/src/pages/sys-admin/dingtalk/dingtalk-department-members-list.js
+++ b/frontend/src/pages/sys-admin/dingtalk/dingtalk-department-members-list.js
@@ -35,7 +35,8 @@ class DingtalkDepartmentMembersList extends Component {
           <td>
             {!member.email &&
               <input type="checkbox" className="vam" onChange={() => this.props.onUserChecked(member)}
-                checked={(member.userid in newUsersTempObj) ? 'checked' : ''}></input>}
+                checked={(member.userid in newUsersTempObj) ? 'checked' : ''}>
+              </input>}
           </td>
           <td><img className="avatar" src={avatar} alt=""></img></td>
           <td>{member.name}</td>
@@ -56,7 +57,8 @@ class DingtalkDepartmentMembersList extends Component {
                 <th width="5%">
                   {canCheckUserIds.length > 0 &&
                     <input type="checkbox" className="vam" checked={this.props.isCheckedAll}
-                      onChange={() => this.props.onAllUsersChecked()}></input>}
+                      onChange={() => this.props.onAllUsersChecked()}>
+                    </input>}
                 </th>
                 <th width="10%"></th>
                 <th width="20%">{'名称'}</th>
diff --git a/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js b/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
index 0673c0d386..32b4bd087c 100644
--- a/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
+++ b/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
@@ -127,7 +127,8 @@ class DingtalkDepartmentsTreeNode extends Component {
                 <DropdownItem
                   onClick={this.importDepartmentDialogToggle.bind(this, department)}
                   id={department.id}
-                >{'导入部门'}</DropdownItem>
+                >{'导入部门'}
+                </DropdownItem>
               </DropdownMenu>
             </Dropdown>
             }
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index 5ab15f9e0b..12141a00ec 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -56,7 +56,7 @@ class Content extends Component {
                 <th width="5%">{/* icon */}</th>
                 <th width="55%">{gettext('Name')}</th>
                 <th width="30%">{gettext('Role')}</th>
-                <th width="10%">{/*Operations*/}</th>
+                <th width="10%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -117,19 +117,19 @@ class Item extends Component {
 
   handleMouseEnter = () => {
     if (this.props.isItemFreezed) return;
-    this.setState({highlighted: true});
+    this.setState({ highlighted: true });
   };
 
   handleMouseLeave = () => {
     if (this.props.isItemFreezed) return;
-    this.setState({highlighted: false});
+    this.setState({ highlighted: false });
   };
 
   toggleDeleteDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   removeMember = () => {
@@ -217,7 +217,7 @@ class GroupMembers extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
 
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
@@ -255,7 +255,7 @@ class GroupMembers extends Component {
   };
 
   toggleAddMemgerDialog = () => {
-    this.setState({isAddMemberDialogOpen: !this.state.isAddMemberDialogOpen});
+    this.setState({ isAddMemberDialogOpen: !this.state.isAddMemberDialogOpen });
   };
 
   addMembers = (emails) => {
@@ -275,7 +275,7 @@ class GroupMembers extends Component {
         const msg = gettext('Failed to add {email_placeholder}: {error_msg_placeholder}')
           .replace('{email_placeholder}', item.email)
           .replace('{error_msg_placeholder}', item.error_msg);
-        toaster.danger(msg, {duration: 3});
+        toaster.danger(msg, { duration: 3 });
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/groups/group-nav.js b/frontend/src/pages/sys-admin/groups/group-nav.js
index f36e4a33c0..fa65bcd206 100644
--- a/frontend/src/pages/sys-admin/groups/group-nav.js
+++ b/frontend/src/pages/sys-admin/groups/group-nav.js
@@ -14,8 +14,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'repos', urlPart: 'groups/' + this.props.groupID + '/libraries', text: gettext('Libraries')},
-      {name: 'members', urlPart: 'groups/' + this.props.groupID + '/members', text: gettext('Members')}
+      { name: 'repos', urlPart: 'groups/' + this.props.groupID + '/libraries', text: gettext('Libraries') },
+      { name: 'members', urlPart: 'groups/' + this.props.groupID + '/members', text: gettext('Members') }
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/groups/group-repos.js b/frontend/src/pages/sys-admin/groups/group-repos.js
index 130ac4a596..969a427e3c 100644
--- a/frontend/src/pages/sys-admin/groups/group-repos.js
+++ b/frontend/src/pages/sys-admin/groups/group-repos.js
@@ -40,7 +40,7 @@ class Content extends Component {
                 <th width="30%">{gettext('Name')}</th>
                 <th width="30%">{gettext('Size')}</th>
                 <th width="25%">{gettext('Shared By')}</th>
-                <th width="10%">{/*Operations*/}</th>
+                <th width="10%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -82,18 +82,18 @@ class Item extends Component {
   }
 
   handleMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   toggleUnshareRepoDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isUnshareRepoDialogOpen: !this.state.isUnshareRepoDialogOpen});
+    this.setState({ isUnshareRepoDialogOpen: !this.state.isUnshareRepoDialogOpen });
   };
 
   unshareRepo = () => {
@@ -171,7 +171,7 @@ class GroupRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminListGroupRepos(this.props.groupID).then((res) => {
       this.setState({
         loading: false,
diff --git a/frontend/src/pages/sys-admin/groups/groups-content.js b/frontend/src/pages/sys-admin/groups/groups-content.js
index 9fa3251c4c..aea759fc24 100644
--- a/frontend/src/pages/sys-admin/groups/groups-content.js
+++ b/frontend/src/pages/sys-admin/groups/groups-content.js
@@ -22,11 +22,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -143,7 +143,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Delete':
         this.toggleDeleteDialog();
         break;
@@ -159,14 +159,14 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   toggleTransferDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
+    this.setState({ isTransferDialogOpen: !this.state.isTransferDialogOpen });
   };
 
   deleteGroup = () => {
@@ -179,7 +179,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
         break;
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index 320af3bd9c..b874b24b3e 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -24,7 +24,7 @@ class Groups extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
@@ -36,7 +36,7 @@ class Groups extends Component {
   }
 
   toggleCreateGroupDialog = () => {
-    this.setState({isCreateGroupDialogOpen: !this.state.isCreateGroupDialogOpen});
+    this.setState({ isCreateGroupDialogOpen: !this.state.isCreateGroupDialogOpen });
   };
 
   getGroupListByPage = (page) => {
diff --git a/frontend/src/pages/sys-admin/groups/search-groups.js b/frontend/src/pages/sys-admin/groups/search-groups.js
index c20cc149d7..2389782cc0 100644
--- a/frontend/src/pages/sys-admin/groups/search-groups.js
+++ b/frontend/src/pages/sys-admin/groups/search-groups.js
@@ -21,7 +21,7 @@ class SearchGroups extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let params = (new URL(document.location)).searchParams;
     this.setState({
       name: params.get('name') || ''
@@ -121,7 +121,7 @@ class SearchGroups extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5, offset: 1}}>
+                    <Col sm={{ size: 5, offset: 1 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getGroups}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index 26037a8396..963ee69074 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -160,7 +160,7 @@ class SysAdmin extends React.Component {
     const tmpTab = this.getCurrentTabForPageList(pageList);
     currentTab = tmpTab ? tmpTab : currentTab;
 
-    this.setState({currentTab: currentTab});
+    this.setState({ currentTab: currentTab });
   }
 
   UNSAFE_componentWillMount() {
@@ -172,7 +172,7 @@ class SysAdmin extends React.Component {
   }
 
   getCurrentTabForPageList = (pageList) => {
-    let urlPartList, tab;
+    let urlPartList; let tab;
     const urlBase = `${siteRoot}sys/`;
     for (let i = 0, len = pageList.length; i < len; i++) {
       urlPartList = pageList[i].urlPartList;
@@ -186,11 +186,11 @@ class SysAdmin extends React.Component {
   };
 
   onCloseSidePanel = () => {
-    this.setState({isSidePanelClosed: !this.state.isSidePanelClosed});
+    this.setState({ isSidePanelClosed: !this.state.isSidePanelClosed });
   };
 
   tabItemClick = (param) => {
-    this.setState({currentTab: param});
+    this.setState({ currentTab: param });
     if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
       this.setState({ isSidePanelClosed: true });
     }
diff --git a/frontend/src/pages/sys-admin/info.js b/frontend/src/pages/sys-admin/info.js
index 8c04581b32..a4a7545ff2 100644
--- a/frontend/src/pages/sys-admin/info.js
+++ b/frontend/src/pages/sys-admin/info.js
@@ -21,7 +21,7 @@ class Info extends Component {
     this.fileInput = React.createRef();
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetSysInfo().then((res) => {
       this.setState({
         loading: false,
@@ -44,7 +44,7 @@ class Info extends Component {
     const file = this.fileInput.current.files[0];
     seafileAPI.sysAdminUploadLicense(file).then((res) => {
       let info = this.state.sysInfo;
-      Object.assign(info, res.data, {with_license: true});
+      Object.assign(info, res.data, { with_license: true });
       this.setState({
         sysInfo: info
       });
diff --git a/frontend/src/pages/sys-admin/institutions/institution-admins.js b/frontend/src/pages/sys-admin/institutions/institution-admins.js
index 32bb18c637..2b638ca496 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-admins.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-admins.js
@@ -23,11 +23,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -130,7 +130,7 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen});
+    this.setState({ isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen });
   };
 
   revokeAdmin = () => {
@@ -147,7 +147,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Revoke Admin':
         translateResult = gettext('Revoke Admin');
         break;
@@ -223,7 +223,7 @@ class InstitutionAdmins extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
       this.setState({
         institutionName: res.data.name
@@ -249,7 +249,7 @@ class InstitutionAdmins extends Component {
       let userList = this.state.userList.filter(user => {
         return user.email != email;
       });
-      this.setState({userList: userList});
+      this.setState({ userList: userList });
       toaster.success(gettext('Successfully revoked the admin permission of {placeholder}.').replace('{placeholder}', name));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -262,7 +262,7 @@ class InstitutionAdmins extends Component {
       let newUserList = this.state.userList.filter(user => {
         return user.email != email;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       toaster.success('success');
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/institutions/institution-info.js b/frontend/src/pages/sys-admin/institutions/institution-info.js
index 6d60533dd9..0e5c747f18 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-info.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-info.js
@@ -19,7 +19,7 @@ class Content extends Component {
   }
 
   toggleSetQuotaDialog = () => {
-    this.setState({isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen});
+    this.setState({ isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen });
   };
 
   showEditIcon = (action) => {
@@ -96,7 +96,7 @@ class InstitutionInfo extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
       this.setState({
         loading: false,
@@ -115,7 +115,7 @@ class InstitutionInfo extends Component {
       const newInstitutionInfo = Object.assign(this.state.institutionInfo, {
         quota_total: res.data.quota_total,
       });
-      this.setState({institutionInfo: newInstitutionInfo});
+      this.setState({ institutionInfo: newInstitutionInfo });
       toaster.success(gettext('Successfully set quota.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/institutions/institution-nav.js b/frontend/src/pages/sys-admin/institutions/institution-nav.js
index 00e4061f5a..c43f1cdb2b 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-nav.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-nav.js
@@ -14,9 +14,9 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'info', urlPart: 'info', text: gettext('Info')},
-      {name: 'members', urlPart: 'members', text: gettext('Members')},
-      {name: 'admins', urlPart: 'admins', text: gettext('Admins')},
+      { name: 'info', urlPart: 'info', text: gettext('Info') },
+      { name: 'members', urlPart: 'members', text: gettext('Members') },
+      { name: 'admins', urlPart: 'admins', text: gettext('Admins') },
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index 43175c981e..fddcb8738a 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -26,11 +26,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -150,7 +150,7 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isSetAdminDialogOpen: !this.state.isSetAdminDialogOpen});
+    this.setState({ isSetAdminDialogOpen: !this.state.isSetAdminDialogOpen });
   };
 
   setAdmin = () => {
@@ -179,7 +179,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
         break;
@@ -263,7 +263,7 @@ class InstitutionUsers extends Component {
     this.initPage = 1;
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetInstitution(this.props.institutionID).then((res) => {
       this.setState({
         institutionName: res.data.name
@@ -305,7 +305,7 @@ class InstitutionUsers extends Component {
         }
         return user;
       });
-      this.setState({userList: userList});
+      this.setState({ userList: userList });
       toaster.success(gettext('Success'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -314,7 +314,7 @@ class InstitutionUsers extends Component {
   };
 
   toggleAddUserDialog = () => {
-    this.setState({isAddUserDialogOpen: !this.state.isAddUserDialogOpen});
+    this.setState({ isAddUserDialogOpen: !this.state.isAddUserDialogOpen });
   };
 
   resetPerPage = (newPerPage) => {
@@ -330,7 +330,7 @@ class InstitutionUsers extends Component {
       let failedArray = res.data.failed;
       if (successArray.length) {
         let newUserList = this.state.userList.concat(successArray);
-        this.setState({userList: newUserList});
+        this.setState({ userList: newUserList });
       }
       failedArray.forEach((item) => {
         toaster.danger(item.error_msg);
@@ -346,7 +346,7 @@ class InstitutionUsers extends Component {
       let newUserList = this.state.userList.filter(user => {
         return user.email != email;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       toaster.success('success');
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/institutions/institutions.js b/frontend/src/pages/sys-admin/institutions/institutions.js
index 765abe29b3..ecce116ba4 100644
--- a/frontend/src/pages/sys-admin/institutions/institutions.js
+++ b/frontend/src/pages/sys-admin/institutions/institutions.js
@@ -101,18 +101,18 @@ class Item extends Component {
   }
 
   handleMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   toggleDeleteDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   deleteInstitution = () => {
@@ -170,7 +170,7 @@ class Institutions extends Component {
     this.initPage = 1;
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
@@ -205,14 +205,14 @@ class Institutions extends Component {
   };
 
   toggleAddInstitutionDialog = () => {
-    this.setState({isAddInstitutionDialogOpen: !this.state.isAddInstitutionDialogOpen});
+    this.setState({ isAddInstitutionDialogOpen: !this.state.isAddInstitutionDialogOpen });
   };
 
   addInstitution = (name) => {
     seafileAPI.sysAdminAddInstitution(name).then(res => {
       let institutionList = this.state.institutionList;
       institutionList.push(res.data);
-      this.setState({institutionList: institutionList});
+      this.setState({ institutionList: institutionList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -224,7 +224,7 @@ class Institutions extends Component {
       let institutionList = this.state.institutionList.filter(inst => {
         return inst.id != institutionID;
       });
-      this.setState({institutionList: institutionList});
+      this.setState({ institutionList: institutionList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index 9a14a70272..c506d90dcd 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -23,11 +23,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -160,7 +160,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Delete':
         this.deleteItem();
         break;
@@ -262,7 +262,7 @@ class Invitations extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
@@ -296,7 +296,7 @@ class Invitations extends Component {
       let items = this.state.items.filter(item => {
         return item.token != token;
       });
-      this.setState({items: items});
+      this.setState({ items: items });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/links/links-nav.js b/frontend/src/pages/sys-admin/links/links-nav.js
index ab50795e83..50d99e9134 100644
--- a/frontend/src/pages/sys-admin/links/links-nav.js
+++ b/frontend/src/pages/sys-admin/links/links-nav.js
@@ -12,8 +12,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'shareLinks', urlPart:'share-links', text: gettext('Share Links')},
-      {name: 'uploadLinks', urlPart:'upload-links', text: gettext('Upload Links')},
+      { name: 'shareLinks', urlPart: 'share-links', text: gettext('Share Links') },
+      { name: 'uploadLinks', urlPart: 'upload-links', text: gettext('Upload Links') },
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index c1813d4e58..7168f8e26d 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -71,7 +71,7 @@ class Content extends Component {
                   <a className="d-inline-block table-sort-op" href="#" onClick={this.sortByCount}>{gettext('Count')} {sortBy == 'view_cnt' ? sortIcon : initialSortIcon}</a>
                 </th>
                 <th width="11%">{gettext('Expiration')}</th>
-                <th width="10%">{/*Operations*/}</th>
+                <th width="10%">{/* Operations*/}</th>
               </tr>
             </thead>
             {items &&
@@ -196,7 +196,7 @@ class ShareLinks extends Component {
     this.initPage = 1;
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage, sortBy, sortOrder } = this.state;
     this.setState({
@@ -249,7 +249,7 @@ class ShareLinks extends Component {
       let newShareLinkList = this.state.shareLinkList.filter(item =>
         item.token != linkToken
       );
-      this.setState({shareLinkList: newShareLinkList});
+      this.setState({ shareLinkList: newShareLinkList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index 8764831e31..6f64eba02d 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -50,7 +50,7 @@ class Content extends Component {
                 <th width="15%">{gettext('Created At')}</th>
                 <th width="10%">{gettext('Count')}</th>
                 <th width="11%">{gettext('Expiration')}</th>
-                <th width="10%">{/*Operations*/}</th>
+                <th width="10%">{/* Operations*/}</th>
               </tr>
             </thead>
             {items &&
@@ -207,7 +207,7 @@ class UploadLinks extends Component {
       let newUploadLinkList = this.state.uploadLinkList.filter(item =>
         item.token != linkToken
       );
-      this.setState({uploadLinkList: newUploadLinkList});
+      this.setState({ uploadLinkList: newUploadLinkList });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index dc67f6a66a..3629791793 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -252,10 +252,10 @@ class FileAccessLogs extends Component {
   }
 
   toggleExportExcelDialog = () => {
-    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+    this.setState({ isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen });
   };
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
@@ -308,7 +308,7 @@ class FileAccessLogs extends Component {
       userFilteredBy: email
     }, () => {
       this.getLogsByPage(this.initPage);
-      this.updateURL({'email': email});
+      this.updateURL({ 'email': email });
     });
   };
 
@@ -317,7 +317,7 @@ class FileAccessLogs extends Component {
       repoFilteredBy: repoID
     }, () => {
       this.getLogsByPage(this.initPage);
-      this.updateURL({'repo_id': repoID});
+      this.updateURL({ 'repo_id': repoID });
     });
   };
 
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-toggle-filter.js b/frontend/src/pages/sys-admin/logs-page/file-access-toggle-filter.js
index 9d2eec9cf9..eebe05f2ba 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-toggle-filter.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-toggle-filter.js
@@ -12,7 +12,7 @@ class ToggleFilter extends React.Component {
         onClick={this.props.toggleFilter}
       >
         <span className="text-primary">{filterBy}</span>
-        <span className="ml-2 close" style={{fontSize: '1.2rem'}}>x</span>
+        <span className="ml-2 close" style={{ fontSize: '1.2rem' }}>x</span>
       </Button>
     );
   }
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index 9acefd2fbc..618efeb28f 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -176,10 +176,10 @@ class FileUpdateLogs extends Component {
   }
 
   toggleExportExcelDialog = () => {
-    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+    this.setState({ isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen });
   };
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index 4113dda999..63073c6bac 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -142,10 +142,10 @@ class LoginLogs extends Component {
   }
 
   toggleExportExcelDialog = () => {
-    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+    this.setState({ isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen });
   };
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/logs-page/logs-nav.js b/frontend/src/pages/sys-admin/logs-page/logs-nav.js
index 8d6f0187d7..c85a25c411 100644
--- a/frontend/src/pages/sys-admin/logs-page/logs-nav.js
+++ b/frontend/src/pages/sys-admin/logs-page/logs-nav.js
@@ -12,10 +12,10 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'loginLogs', urlPart:'logs/login', text: gettext('Login')},
-      {name: 'fileAccessLogs', urlPart:'logs/file-access', text: gettext('File Access')},
-      {name: 'fileUpdateLogs', urlPart:'logs/file-update', text: gettext('File Update')},
-      {name: 'sharePermissionLogs', urlPart:'logs/share-permission', text: gettext('Permission')},
+      { name: 'loginLogs', urlPart: 'logs/login', text: gettext('Login') },
+      { name: 'fileAccessLogs', urlPart: 'logs/file-access', text: gettext('File Access') },
+      { name: 'fileUpdateLogs', urlPart: 'logs/file-update', text: gettext('File Update') },
+      { name: 'sharePermissionLogs', urlPart: 'logs/share-permission', text: gettext('Permission') },
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index 42a28e2fec..a719552951 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -123,7 +123,7 @@ class Item extends Component {
   };
 
   getShareTo = (item) => {
-    switch(item.share_type) {
+    switch (item.share_type) {
       case 'user':
         return <UserLink email={item.to_user_email} name={item.to_user_name} />;
       case 'group':
@@ -174,10 +174,10 @@ class SharePermissionLogs extends Component {
   }
 
   toggleExportExcelDialog = () => {
-    this.setState({isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen});
+    this.setState({ isExportExcelDialogOpen: !this.state.isExportExcelDialogOpen });
   };
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/main-panel-topbar.js b/frontend/src/pages/sys-admin/main-panel-topbar.js
index ee4e09a99a..fe400b88e5 100644
--- a/frontend/src/pages/sys-admin/main-panel-topbar.js
+++ b/frontend/src/pages/sys-admin/main-panel-topbar.js
@@ -19,7 +19,8 @@ class MainPanelTopbar extends Component {
             className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"
             title={gettext('Side Nav Menu')}
             onClick={this.props.toggleSidePanel}
-          ></span>
+          >
+          </span>
           <div className="operation">
             {this.props.children}
           </div>
diff --git a/frontend/src/pages/sys-admin/notifications/notifications.js b/frontend/src/pages/sys-admin/notifications/notifications.js
index 55c0278d1d..c590b841d4 100644
--- a/frontend/src/pages/sys-admin/notifications/notifications.js
+++ b/frontend/src/pages/sys-admin/notifications/notifications.js
@@ -22,11 +22,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -46,7 +46,7 @@ class Content extends Component {
           <thead>
             <tr>
               <th width="95%">{gettext('Notification Detail')}</th>
-              <th width="5%">{/*Operations*/}</th>
+              <th width="5%">{/* Operations*/}</th>
             </tr>
           </thead>
           <tbody>
@@ -127,7 +127,7 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   deleteNotification = () => {
@@ -140,7 +140,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Set to current':
         this.setToCurrent();
         break;
@@ -236,7 +236,7 @@ class Notifications extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminListAllSysNotifications().then((res) => {
       this.setState({
         loading: false,
@@ -251,14 +251,14 @@ class Notifications extends Component {
   }
 
   toggleAddNotificationDialog = () => {
-    this.setState({isAddNotificationDialogOpen: !this.state.isAddNotificationDialogOpen});
+    this.setState({ isAddNotificationDialogOpen: !this.state.isAddNotificationDialogOpen });
   };
 
   addNotification = (msg) => {
     seafileAPI.sysAdminAddSysNotification(msg).then(res => {
       let notificationList = this.state.notificationList;
       notificationList.unshift(res.data.notification);
-      this.setState({notificationList: notificationList});
+      this.setState({ notificationList: notificationList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -270,7 +270,7 @@ class Notifications extends Component {
       let notificationList = this.state.notificationList.filter(item => {
         return item.id != id;
       });
-      this.setState({notificationList: notificationList});
+      this.setState({ notificationList: notificationList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -288,7 +288,7 @@ class Notifications extends Component {
         }
         return item;
       });
-      this.setState({notificationList: notificationList});
+      this.setState({ notificationList: notificationList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/pages/sys-admin/orgs/org-groups.js b/frontend/src/pages/sys-admin/orgs/org-groups.js
index fc536710ef..dd75cf11f9 100644
--- a/frontend/src/pages/sys-admin/orgs/org-groups.js
+++ b/frontend/src/pages/sys-admin/orgs/org-groups.js
@@ -80,18 +80,18 @@ class Item extends Component {
   }
 
   handleMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   toggleDeleteDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   deleteGroup = () => {
@@ -155,7 +155,7 @@ class OrgGroups extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetOrg(this.props.orgID).then((res) => {
       this.setState({
         orgName: res.data.org_name
@@ -179,7 +179,7 @@ class OrgGroups extends Component {
       let newGroupList = this.state.groupList.filter(item => {
         return item.group_id != groupID;
       });
-      this.setState({groupList: newGroupList});
+      this.setState({ groupList: newGroupList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -218,5 +218,4 @@ OrgGroups.propTypes = {
 };
 
 
-
 export default OrgGroups;
diff --git a/frontend/src/pages/sys-admin/orgs/org-info.js b/frontend/src/pages/sys-admin/orgs/org-info.js
index 6da64feda6..5334461e75 100644
--- a/frontend/src/pages/sys-admin/orgs/org-info.js
+++ b/frontend/src/pages/sys-admin/orgs/org-info.js
@@ -24,15 +24,15 @@ class Content extends Component {
   }
 
   toggleSetQuotaDialog = () => {
-    this.setState({isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen});
+    this.setState({ isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen });
   };
 
   toggleSetNameDialog = () => {
-    this.setState({isSetNameDialogOpen: !this.state.isSetNameDialogOpen});
+    this.setState({ isSetNameDialogOpen: !this.state.isSetNameDialogOpen });
   };
 
   toggleSetMaxUserNumberDialog = () => {
-    this.setState({isSetMaxUserNumberDialogOpen: !this.state.isSetMaxUserNumberDialogOpen});
+    this.setState({ isSetMaxUserNumberDialogOpen: !this.state.isSetMaxUserNumberDialogOpen });
   };
 
   showEditIcon = (action) => {
@@ -165,7 +165,7 @@ class OrgInfo extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetOrg(this.props.orgID).then((res) => {
       this.setState({
         loading: false,
@@ -180,12 +180,12 @@ class OrgInfo extends Component {
   }
 
   updateQuota = (quota) => {
-    const data = {quota: quota};
+    const data = { quota: quota };
     seafileAPI.sysAdminUpdateOrg(this.props.orgID, data).then(res => {
       const newOrgInfo = Object.assign(this.state.orgInfo, {
         quota: res.data.quota
       });
-      this.setState({orgInfo: newOrgInfo});
+      this.setState({ orgInfo: newOrgInfo });
       toaster.success(gettext('Successfully set quota.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -194,12 +194,12 @@ class OrgInfo extends Component {
   };
 
   updateName = (orgName) => {
-    const data = {orgName: orgName};
+    const data = { orgName: orgName };
     seafileAPI.sysAdminUpdateOrg(this.props.orgID, data).then(res => {
       const newOrgInfo = Object.assign(this.state.orgInfo, {
         org_name: res.data.org_name
       });
-      this.setState({orgInfo: newOrgInfo});
+      this.setState({ orgInfo: newOrgInfo });
       toaster.success(gettext('Successfully set name.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -208,12 +208,12 @@ class OrgInfo extends Component {
   };
 
   updateMaxUserNumber = (newValue) => {
-    const data = {maxUserNumber: newValue};
+    const data = { maxUserNumber: newValue };
     seafileAPI.sysAdminUpdateOrg(this.props.orgID, data).then(res => {
       const newOrgInfo = Object.assign(this.state.orgInfo, {
         max_user_number: res.data.max_user_number
       });
-      this.setState({orgInfo: newOrgInfo});
+      this.setState({ orgInfo: newOrgInfo });
       toaster.success(gettext('Successfully set max number of members.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/orgs/org-nav.js b/frontend/src/pages/sys-admin/orgs/org-nav.js
index 377ec07fcf..9423abed6e 100644
--- a/frontend/src/pages/sys-admin/orgs/org-nav.js
+++ b/frontend/src/pages/sys-admin/orgs/org-nav.js
@@ -14,12 +14,12 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'info', urlPart: 'info', text: gettext('Info')},
-      {name: 'users', urlPart: 'users', text: gettext('Members')},
-      {name: 'groups', urlPart: 'groups', text: gettext('Groups')},
-      {name: 'repos', urlPart: 'libraries', text: gettext('Libraries')},
-      //{name: 'traffic', urlPart: 'traffic', text: gettext('traffic')},
-      //{name: 'settings', urlPart: 'settings', text: gettext('Settings')}
+      { name: 'info', urlPart: 'info', text: gettext('Info') },
+      { name: 'users', urlPart: 'users', text: gettext('Members') },
+      { name: 'groups', urlPart: 'groups', text: gettext('Groups') },
+      { name: 'repos', urlPart: 'libraries', text: gettext('Libraries') },
+      // {name: 'traffic', urlPart: 'traffic', text: gettext('traffic')},
+      // {name: 'settings', urlPart: 'settings', text: gettext('Settings')}
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/orgs/org-repos.js b/frontend/src/pages/sys-admin/orgs/org-repos.js
index 593ab5fda5..7118f53a52 100644
--- a/frontend/src/pages/sys-admin/orgs/org-repos.js
+++ b/frontend/src/pages/sys-admin/orgs/org-repos.js
@@ -71,18 +71,18 @@ class Item extends Component {
   }
 
   handleMouseEnter = () => {
-    this.setState({isOpIconShown: true});
+    this.setState({ isOpIconShown: true });
   };
 
   handleMouseLeave = () => {
-    this.setState({isOpIconShown: false});
+    this.setState({ isOpIconShown: false });
   };
 
   toggleDeleteDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   deleteRepo = () => {
@@ -148,7 +148,7 @@ class OrgRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetOrg(this.props.orgID).then((res) => {
       this.setState({
         orgName: res.data.org_name
@@ -172,7 +172,7 @@ class OrgRepos extends Component {
       let newRepoList = this.state.repoList.filter(item => {
         return item.repo_id != repoID;
       });
-      this.setState({repoList: newRepoList});
+      this.setState({ repoList: newRepoList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/orgs/org-users.js b/frontend/src/pages/sys-admin/orgs/org-users.js
index b4965de6b9..2d39a215ee 100644
--- a/frontend/src/pages/sys-admin/orgs/org-users.js
+++ b/frontend/src/pages/sys-admin/orgs/org-users.js
@@ -30,11 +30,11 @@ class Content extends Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -132,7 +132,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Delete':
         this.toggleDeleteDialog();
         break;
@@ -148,21 +148,21 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   toggleResetPasswordDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isResetPasswordDialogOpen: !this.state.isResetPasswordDialogOpen});
+    this.setState({ isResetPasswordDialogOpen: !this.state.isResetPasswordDialogOpen });
   };
 
-  toggleConfirmInactiveDialog= () => {
-    this.setState({isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen});
+  toggleConfirmInactiveDialog = () => {
+    this.setState({ isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen });
   };
 
-  updateStatus= (statusOption) => {
+  updateStatus = (statusOption) => {
     this.props.updateStatus(this.props.item.email, statusOption.value);
   };
 
@@ -170,7 +170,7 @@ class Item extends Component {
     this.props.updateStatus(this.props.item.email, 'inactive');
   };
 
-  updateMembership= (membershipOption) => {
+  updateMembership = (membershipOption) => {
     this.props.updateMembership(this.props.item.email, membershipOption.value);
   };
 
@@ -190,7 +190,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Delete':
         translateResult = gettext('Delete');
         break;
@@ -241,7 +241,7 @@ class Item extends Component {
     const currentSelectedStatusOption = this.statusOptions.filter(item => item.isSelected)[0];
 
     // for 'user membership'
-    const curMembership = item.is_org_staff? 'Admin' : 'Member';
+    const curMembership = item.is_org_staff ? 'Admin' : 'Member';
     this.membershipOptions = ['Admin', 'Member'].map(item => {
       return {
         value: item,
@@ -346,7 +346,7 @@ class OrgUsers extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetOrg(this.props.orgID).then((res) => {
       this.setState({
         orgName: res.data.org_name
@@ -366,7 +366,7 @@ class OrgUsers extends Component {
   }
 
   toggleAddUserDialog = () => {
-    this.setState({isAddUserDialogOpen: !this.state.isAddUserDialogOpen});
+    this.setState({ isAddUserDialogOpen: !this.state.isAddUserDialogOpen });
   };
 
   addUser = (newUserInfo) => {
@@ -374,7 +374,7 @@ class OrgUsers extends Component {
     seafileAPI.sysAdminAddOrgUser(this.props.orgID, email, name, password).then(res => {
       let userList = this.state.userList;
       userList.unshift(res.data);
-      this.setState({userList: userList});
+      this.setState({ userList: userList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -386,7 +386,7 @@ class OrgUsers extends Component {
       let newUserList = this.state.userList.filter(item => {
         return item.email != email;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -403,7 +403,7 @@ class OrgUsers extends Component {
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -419,7 +419,7 @@ class OrgUsers extends Component {
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
diff --git a/frontend/src/pages/sys-admin/orgs/orgs-content.js b/frontend/src/pages/sys-admin/orgs/orgs-content.js
index 79688df8b1..d7cafc4d4f 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs-content.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs-content.js
@@ -117,19 +117,19 @@ class Item extends Component {
 
   handleMouseEnter = () => {
     if (this.props.isItemFreezed) return;
-    this.setState({highlighted: true});
+    this.setState({ highlighted: true });
   };
 
   handleMouseLeave = () => {
     if (this.props.isItemFreezed) return;
-    this.setState({highlighted: false});
+    this.setState({ highlighted: false });
   };
 
   toggleDeleteDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen}, () => {
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen }, () => {
       if (this.state.isDeleteDialogOpen) {
         seafileAPI.sysAdminGetOrg(this.props.item.org_id).then((res) => {
           let orgName = '<span class="op-target">' + Utils.HTMLescape(res.data.org_name) + '</span>';
@@ -140,7 +140,7 @@ class Item extends Component {
             gettext('{userCount} user(s) and {repoCount} libraries of this organization will also be deleted.')
               .replace('{userCount}', userCount)
               .replace('{repoCount}', repoCount);
-          this.setState({deleteDialogMsg: deleteDialogMsg});
+          this.setState({ deleteDialogMsg: deleteDialogMsg });
         }).catch(error => {
           let errorMsg = Utils.getErrorMsg(error);
           toaster.danger(errorMsg);
diff --git a/frontend/src/pages/sys-admin/orgs/orgs.js b/frontend/src/pages/sys-admin/orgs/orgs.js
index b7dca0f9f0..574e63e4bf 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs.js
@@ -63,7 +63,7 @@ class Orgs extends Component {
   };
 
   toggleAddOrgDialog = () => {
-    this.setState({isAddOrgDialogOpen: !this.state.isAddOrgDialogOpen});
+    this.setState({ isAddOrgDialogOpen: !this.state.isAddOrgDialogOpen });
   };
 
   updateRole = (orgID, role) => {
@@ -76,7 +76,7 @@ class Orgs extends Component {
         }
         return org;
       });
-      this.setState({orgList: newOrgList});
+      this.setState({ orgList: newOrgList });
       toaster.success(gettext('Edit succeeded'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -89,7 +89,7 @@ class Orgs extends Component {
     seafileAPI.sysAdminAddOrg(orgName, ownerEmail, password).then(res => {
       let orgList = this.state.orgList;
       orgList.unshift(res.data);
-      this.setState({orgList: orgList});
+      this.setState({ orgList: orgList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -101,7 +101,7 @@ class Orgs extends Component {
       let orgList = this.state.orgList.filter(org => {
         return org.org_id != orgID;
       });
-      this.setState({orgList: orgList});
+      this.setState({ orgList: orgList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/orgs/search-orgs.js b/frontend/src/pages/sys-admin/orgs/search-orgs.js
index 0dec30f647..31512b5c68 100644
--- a/frontend/src/pages/sys-admin/orgs/search-orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/search-orgs.js
@@ -21,7 +21,7 @@ class SearchOrgs extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let params = (new URL(document.location)).searchParams;
     this.setState({
       query: params.get('query') || ''
@@ -52,7 +52,7 @@ class SearchOrgs extends Component {
         }
         return org;
       });
-      this.setState({orgList: newOrgList});
+      this.setState({ orgList: newOrgList });
       toaster.success(gettext('Edit succeeded'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -65,7 +65,7 @@ class SearchOrgs extends Component {
       let orgList = this.state.orgList.filter(org => {
         return org.org_id != orgID;
       });
-      this.setState({orgList: orgList});
+      this.setState({ orgList: orgList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -117,7 +117,7 @@ class SearchOrgs extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5, offset: 1}}>
+                    <Col sm={{ size: 5, offset: 1 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getItems}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/sys-admin/repos/all-repos.js b/frontend/src/pages/sys-admin/repos/all-repos.js
index 74d667591f..118ffc82d3 100644
--- a/frontend/src/pages/sys-admin/repos/all-repos.js
+++ b/frontend/src/pages/sys-admin/repos/all-repos.js
@@ -26,7 +26,7 @@ class AllRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage, sortBy } = this.state;
     this.setState({
@@ -39,7 +39,7 @@ class AllRepos extends Component {
   }
 
   toggleCreateRepoDialog = () => {
-    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+    this.setState({ isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen });
   };
 
   getReposByPage = (page) => {
@@ -128,10 +128,10 @@ class AllRepos extends Component {
   };
 
   getValueLength(str) {
-    let code, len = 0;
+    let code; let len = 0;
     for (let i = 0, length = str.length; i < length; i++) {
       code = str.charCodeAt(i);
-      if (code === 10) { //solve enter problem
+      if (code === 10) { // solve enter problem
         len += 2;
       } else if (code < 0x007f) {
         len += 1;
diff --git a/frontend/src/pages/sys-admin/repos/dir-content.js b/frontend/src/pages/sys-admin/repos/dir-content.js
index fed0f31772..8e71f183cd 100644
--- a/frontend/src/pages/sys-admin/repos/dir-content.js
+++ b/frontend/src/pages/sys-admin/repos/dir-content.js
@@ -41,7 +41,7 @@ class DirentItem extends React.Component {
     this.props.downloadDirent(this.props.dirent);
   };
 
-  render () {
+  render() {
     let { isOpIconShown } = this.state;
     let { dirent, fromSystemRepo } = this.props;
     let iconUrl = Utils.getDirentIcon(dirent);
@@ -98,9 +98,9 @@ class DirContent extends React.Component {
         <table className="table-hover">
           <thead>
             <tr>
-              <th width="5%">{/*icon*/}</th>
+              <th width="5%">{/* icon*/}</th>
               <th width="55%">{gettext('Name')}</th>
-              <th width="10%">{/*operation*/}</th>
+              <th width="10%">{/* operation*/}</th>
               <th width="15%">{gettext('Size')}</th>
               <th width="15%">{gettext('Last Update')}</th>
             </tr>
diff --git a/frontend/src/pages/sys-admin/repos/dir-path-bar.js b/frontend/src/pages/sys-admin/repos/dir-path-bar.js
index 493849e549..990cd47187 100644
--- a/frontend/src/pages/sys-admin/repos/dir-path-bar.js
+++ b/frontend/src/pages/sys-admin/repos/dir-path-bar.js
@@ -58,7 +58,7 @@ class DirPath extends React.Component {
         }
         <span className="path-split">/</span>
         {(currentPath === '/' || currentPath === '') ?
-          <span className="path-repo-name">{repoName}</span>:
+          <span className="path-repo-name">{repoName}</span> :
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}
diff --git a/frontend/src/pages/sys-admin/repos/dir-view.js b/frontend/src/pages/sys-admin/repos/dir-view.js
index 295d6298a9..130edec8a0 100644
--- a/frontend/src/pages/sys-admin/repos/dir-view.js
+++ b/frontend/src/pages/sys-admin/repos/dir-view.js
@@ -28,7 +28,7 @@ class DirView extends Component {
     this.fileInput = React.createRef();
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.loadDirentList('/');
   }
 
@@ -37,7 +37,7 @@ class DirView extends Component {
   };
 
   toggleNewFolderDialog = () => {
-    this.setState({isNewFolderDialogOpen: !this.state.isNewFolderDialogOpen});
+    this.setState({ isNewFolderDialogOpen: !this.state.isNewFolderDialogOpen });
   };
 
   createNewFolder = (path) => {
@@ -80,7 +80,7 @@ class DirView extends Component {
         path: path,
       }, () => {
         let url = siteRoot + 'sys/libraries/' + repoID + '/' + encodeURIComponent(this.state.repoName) + Utils.encodePath(path);
-        window.history.replaceState({url: url, path: path}, path, url);
+        window.history.replaceState({ url: url, path: path }, path, url);
       });
     }).catch((error) => {
       this.setState({
diff --git a/frontend/src/pages/sys-admin/repos/repos-nav.js b/frontend/src/pages/sys-admin/repos/repos-nav.js
index 88972cb158..905bc92f95 100644
--- a/frontend/src/pages/sys-admin/repos/repos-nav.js
+++ b/frontend/src/pages/sys-admin/repos/repos-nav.js
@@ -12,9 +12,9 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'all-libraries', text: gettext('All')},
-      {name: 'system', urlPart: 'system-library', text: gettext('System')},
-      {name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash')}
+      { name: 'all', urlPart: 'all-libraries', text: gettext('All') },
+      { name: 'system', urlPart: 'system-library', text: gettext('System') },
+      { name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash') }
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/repos/repos.js b/frontend/src/pages/sys-admin/repos/repos.js
index 0e99d2803a..4e0ba3e48e 100644
--- a/frontend/src/pages/sys-admin/repos/repos.js
+++ b/frontend/src/pages/sys-admin/repos/repos.js
@@ -28,11 +28,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPageList = () => {
@@ -73,7 +73,7 @@ class Content extends Component {
           <table>
             <thead>
               <tr>
-                <th width="5%">{/*icon*/}</th>
+                <th width="5%">{/* icon*/}</th>
                 <th width="25%">{gettext('Name')}</th>
                 <th width="15%">
                   {sortBy != undefined ?
@@ -86,7 +86,7 @@ class Content extends Component {
                 </th>
                 <th width="32%">ID</th>
                 <th width="18%">{gettext('Owner')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -165,7 +165,7 @@ class Item extends Component {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
 
-      this.setState({isRepoDeleted: false});
+      this.setState({ isRepoDeleted: false });
     });
   };
 
@@ -208,7 +208,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Share':
         this.toggleShareDialog();
         break;
@@ -227,19 +227,19 @@ class Item extends Component {
   };
 
   toggleShareDialog = () => {
-    this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
+    this.setState({ isShareDialogOpen: !this.state.isShareDialogOpen });
   };
 
   toggleDeleteDialog = () => {
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   toggleTransferDialog = () => {
-    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
+    this.setState({ isTransferDialogOpen: !this.state.isTransferDialogOpen });
   };
 
   toggleHistorySettingDialog = () => {
-    this.setState({isHistorySettingDialogOpen: !this.state.isHistorySettingDialogOpen});
+    this.setState({ isHistorySettingDialogOpen: !this.state.isHistorySettingDialogOpen });
   };
 
   renderRepoName = () => {
@@ -257,7 +257,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Share':
         translateResult = gettext('Share');
         break;
@@ -293,7 +293,7 @@ class Item extends Component {
     return operations;
   };
 
-  render () {
+  render() {
     const { repo } = this.props;
     const {
       isOpIconShown,
diff --git a/frontend/src/pages/sys-admin/repos/search-repos.js b/frontend/src/pages/sys-admin/repos/search-repos.js
index 4fb88282eb..f77bdfc547 100644
--- a/frontend/src/pages/sys-admin/repos/search-repos.js
+++ b/frontend/src/pages/sys-admin/repos/search-repos.js
@@ -113,10 +113,10 @@ class SearchRepos extends Component {
   };
 
   getValueLength(str) {
-    let code, len = 0;
+    let code; let len = 0;
     for (let i = 0, length = str.length; i < length; i++) {
       code = str.charCodeAt(i);
-      if (code === 10) { //solve enter problem
+      if (code === 10) { // solve enter problem
         len += 2;
       } else if (code < 0x007f) {
         len += 1;
@@ -151,7 +151,7 @@ class SearchRepos extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5, offset: 1}}>
+                    <Col sm={{ size: 5, offset: 1 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.searchRepos}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/sys-admin/repos/system-repo.js b/frontend/src/pages/sys-admin/repos/system-repo.js
index ea164dcebf..08754a481e 100644
--- a/frontend/src/pages/sys-admin/repos/system-repo.js
+++ b/frontend/src/pages/sys-admin/repos/system-repo.js
@@ -78,7 +78,7 @@ class SystemRepo extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetSystemRepoInfo().then((res) => {
       let items = [];
       items.push(res.data);
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index 0bd3a88b4d..37ecb913fd 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -29,11 +29,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPageList = () => {
@@ -62,11 +62,11 @@ class Content extends Component {
           <table className="table-hover">
             <thead>
               <tr>
-                <th width="5%">{/*icon*/}</th>
+                <th width="5%">{/* icon*/}</th>
                 <th width="43%">{gettext('Name')}</th>
                 <th width="27%">{gettext('Owner')}</th>
                 <th width="20%">{gettext('Deleted Time')}</th>
-                <th width="5%">{/*Operations*/}</th>
+                <th width="5%">{/* Operations*/}</th>
               </tr>
             </thead>
             <tbody>
@@ -180,19 +180,19 @@ class Item extends Component {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen});
+    this.setState({ isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen });
   };
 
   toggleRestoreRepoDialog = (e) => {
     if (e) {
       e.preventDefault();
     }
-    this.setState({isRestoreRepoDialogOpen: !this.state.isRestoreRepoDialogOpen});
+    this.setState({ isRestoreRepoDialogOpen: !this.state.isRestoreRepoDialogOpen });
   };
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Restore':
         translateResult = gettext('Restore');
         break;
@@ -207,7 +207,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Restore':
         this.toggleRestoreRepoDialog();
         break;
@@ -219,7 +219,7 @@ class Item extends Component {
     }
   };
 
-  render () {
+  render() {
     const { repo } = this.props;
     const { isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
     const iconUrl = Utils.getLibIconUrl(repo);
@@ -299,7 +299,7 @@ class TrashRepos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage = 1, perPage } = this.state;
     this.setState({
@@ -311,7 +311,7 @@ class TrashRepos extends Component {
   }
 
   toggleCleanTrashDialog = () => {
-    this.setState({isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen});
+    this.setState({ isCleanTrashDialogOpen: !this.state.isCleanTrashDialogOpen });
   };
 
   getReposByPage = (page) => {
@@ -358,7 +358,7 @@ class TrashRepos extends Component {
 
   cleanTrash = () => {
     seafileAPI.sysAdminCleanTrashRepos().then(res => {
-      this.setState({repos: []});
+      this.setState({ repos: [] });
       toaster.success(gettext('Successfully cleared trash.'));
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/search.js b/frontend/src/pages/sys-admin/search.js
index 6c1bee3666..5a5251bbb6 100644
--- a/frontend/src/pages/sys-admin/search.js
+++ b/frontend/src/pages/sys-admin/search.js
@@ -43,7 +43,7 @@ class Search extends React.Component {
         <input
           type="text"
           className="form-control search-input h-6 mr-1"
-          style={{width: '17rem'}}
+          style={{ width: '17rem' }}
           placeholder={this.props.placeholder}
           value={this.state.value}
           onChange={this.handleInputChange}
diff --git a/frontend/src/pages/sys-admin/statistic/picker.js b/frontend/src/pages/sys-admin/statistic/picker.js
index 4489b6c316..0877701216 100644
--- a/frontend/src/pages/sys-admin/statistic/picker.js
+++ b/frontend/src/pages/sys-admin/statistic/picker.js
@@ -36,7 +36,7 @@ class Picker extends React.Component {
         onChange={props.onChange}
       >
         {
-          ({value}) => {
+          ({ value }) => {
             return (
               <span>
                 <input
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-chart.js b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
index 01640cca38..cb47021393 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-chart.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
@@ -51,7 +51,7 @@ class StatisticChart extends React.Component {
       },
       tooltips: {
         callbacks: {
-          label: function(tooltipItem, data) {
+          label: function (tooltipItem, data) {
             if (isTitleCallback) {
               return _this.titleCallback(tooltipItem, data);
             }
@@ -69,7 +69,7 @@ class StatisticChart extends React.Component {
           ticks: {
             beginAtZero: true,
             suggestedMax: suggestedMaxNumbers,
-            callback: function(value, index, values) {
+            callback: function (value, index, values) {
               if (isTicksCallback) {
                 return _this.ticksCallback(value, index, values);
               }
@@ -95,7 +95,7 @@ class StatisticChart extends React.Component {
       labels: nextProps.labels,
       datasets: nextProps.filesData
     };
-    this.setState({data: data});
+    this.setState({ data: data });
   }
 
   titleCallback = (tooltipItem, data) => {
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js b/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
index a34a632af4..3b087877a0 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-common-tool.js
@@ -24,7 +24,7 @@ class StatisticCommonTool extends React.Component {
   componentDidMount() {
     let today = moment().format('YYYY-MM-DD 00:00:00');
     let endTime = today;
-    let startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
+    let startTime = moment().subtract(6, 'd').format('YYYY-MM-DD 00:00:00');
     let group_by = 'day';
     this.props.getActiviesFiles(startTime, endTime, group_by);
   }
@@ -37,15 +37,15 @@ class StatisticCommonTool extends React.Component {
     let today = moment().format('YYYY-MM-DD 00:00:00');
     let endTime = today;
     let startTime;
-    switch(statisticTypeName) {
+    switch (statisticTypeName) {
       case 'oneWeek' :
-        startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(6, 'd').format('YYYY-MM-DD 00:00:00');
         break;
       case 'oneMonth' :
-        startTime = moment().subtract(29,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(29, 'd').format('YYYY-MM-DD 00:00:00');
         break;
       case 'oneYear' :
-        startTime = moment().subtract(364,'d').format('YYYY-MM-DD 00:00:00');
+        startTime = moment().subtract(364, 'd').format('YYYY-MM-DD 00:00:00');
         break;
     }
     this.setState({
@@ -104,14 +104,14 @@ class StatisticCommonTool extends React.Component {
 
   render() {
     let { statisticType, endValue, startValue } = this.state;
-    return(
+    return (
       <Fragment>
         {this.props.children}
         <div className="system-statistic-time-range">
           <div className="sys-stat-tool">
             <div className={`system-statistic-item border-right-0 rounded-left ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</div>
-            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
-            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
+            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
+            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
           </div>
           <div className="system-statistic-input-container">
             <Picker
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-file.js b/frontend/src/pages/sys-admin/statistic/statistic-file.js
index 9d6e827038..6f2568205b 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-file.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-file.js
@@ -26,11 +26,11 @@ class StatisticFile extends React.Component {
   getActiviesFiles = (startTime, endTime, groupBy) => {
     let { filesData } = this.state;
     seafileAPI.sysAdminStatisticFiles(startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        added = [],
-        deleted = [],
-        visited = [],
-        modified = [];
+      let labels = [];
+      let added = [];
+      let deleted = [];
+      let visited = [];
+      let modified = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -44,22 +44,22 @@ class StatisticFile extends React.Component {
           label: gettext('Added'),
           data: added,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let visitedData = {
           label: gettext('Visited'),
           data: visited,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let modifiedData = {
           label: gettext('Modified'),
           data: modified,
           borderColor: '#72c3fc',
-          backgroundColor: '#72c3fc'};
+          backgroundColor: '#72c3fc' };
         let deletedData = {
           label: gettext('Deleted'),
           data: deleted,
           borderColor: '#f75356',
-          backgroundColor: '#f75356'};
+          backgroundColor: '#f75356' };
         filesData = [visitedData, addedData, modifiedData, deletedData];
       }
       this.setState({
@@ -76,7 +76,7 @@ class StatisticFile extends React.Component {
   render() {
     let { labels, filesData, isLoading } = this.state;
 
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-nav.js b/frontend/src/pages/sys-admin/statistic/statistic-nav.js
index 3282c50bd2..51f04e352e 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-nav.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-nav.js
@@ -12,11 +12,11 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'fileStatistic', urlPart: 'statistics/file', text: gettext('File')},
-      {name: 'storageStatistic', urlPart: 'statistics/storage', text: gettext('Storage')},
-      {name: 'usersStatistic', urlPart: 'statistics/user', text: gettext('Users')},
-      {name: 'trafficStatistic', urlPart: 'statistics/traffic', text: gettext('Traffic')},
-      {name: 'reportsStatistic', urlPart: 'statistics/reports', text: gettext('Reports')},
+      { name: 'fileStatistic', urlPart: 'statistics/file', text: gettext('File') },
+      { name: 'storageStatistic', urlPart: 'statistics/storage', text: gettext('Storage') },
+      { name: 'usersStatistic', urlPart: 'statistics/user', text: gettext('Users') },
+      { name: 'trafficStatistic', urlPart: 'statistics/traffic', text: gettext('Traffic') },
+      { name: 'reportsStatistic', urlPart: 'statistics/reports', text: gettext('Reports') },
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-reports.js b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
index d3060510bb..13b980f33c 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-reports.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-reports.js
@@ -42,7 +42,7 @@ class StatisticReports extends React.Component {
         return;
       }
     }
-    switch(type) {
+    switch (type) {
       case 'month':
         url += 'system-user-traffic/excel/?month=' + month;
         break;
@@ -59,7 +59,7 @@ class StatisticReports extends React.Component {
   render() {
 
     let { errorMessage } = this.state;
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-storage.js b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
index 4039e2dee7..2c3c31a988 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-storage.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-storage.js
@@ -24,8 +24,8 @@ class StatisticStorage extends React.Component {
   getActiviesFiles = (startTime, endTime, groupBy) => {
     let { filesData } = this.state;
     seafileAPI.sysAdminStatisticStorages(startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        totalStorage = [];
+      let labels = [];
+      let totalStorage = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -36,7 +36,7 @@ class StatisticStorage extends React.Component {
           label: gettext('Total Storage'),
           data: totalStorage,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         filesData = [total_storage];
       }
       this.setState({
@@ -52,7 +52,7 @@ class StatisticStorage extends React.Component {
 
   render() {
     let { labels, filesData, isLoading } = this.state;
-    return(
+    return (
       <Fragment>
         <MainPanelTopbar {...this.props} />
         <div className="cur-view-container">
@@ -64,7 +64,7 @@ class StatisticStorage extends React.Component {
               <StatisticChart
                 labels={labels}
                 filesData={filesData}
-                suggestedMaxNumbers={10*1000*1000}
+                suggestedMaxNumbers={10 * 1000 * 1000}
                 isTitleCallback={true}
                 isTicksCallback={true}
                 isLegendStatus={false}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
index 32ecac7ec4..3910890451 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic-orgs.js
@@ -75,7 +75,7 @@ class OrgsTraffic extends React.Component {
   getTrafficList = (month, page) => {
     const { perPage, sortBy, sortOrder } = this.state;
     const orderBy = sortOrder == 'asc' ? sortBy : `${sortBy}_${sortOrder}`;
-    this.setState({isLoading: true, errorMessage: ''});
+    this.setState({ isLoading: true, errorMessage: '' });
     seafileAPI.sysAdminListOrgTraffic(month, page, perPage, orderBy).then(res => {
       let orgTrafficList = res.data.org_monthly_traffic_list.slice(0);
       this.setState({
@@ -129,7 +129,7 @@ class OrgsTraffic extends React.Component {
         {!isLoading &&
           <TrafficTable type={'org'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
             {orgTrafficList.length > 0 && orgTrafficList.map((item, index) => {
-              return(
+              return (
                 <TrafficTableBody
                   key={index}
                   userTrafficItem={item}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
index da61671712..4e75a6ef65 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic-users.js
@@ -132,7 +132,7 @@ class UsersTraffic extends React.Component {
         {!isLoading &&
           <TrafficTable type={'user'} sortItems={this.sortItems} sortBy={sortBy} sortOrder={sortOrder}>
             {userTrafficList.length > 0 && userTrafficList.map((item, index) => {
-              return(
+              return (
                 <TrafficTableBody
                   key={index}
                   userTrafficItem={item}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
index 335c7d6082..5dd047d091 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-traffic.js
@@ -28,20 +28,20 @@ class StatisticTraffic extends React.Component {
   }
 
   changeTabActive = activeName => {
-    this.setState({tabActive: activeName});
+    this.setState({ tabActive: activeName });
   };
 
   getActiviesFiles = (startTime, endTime, groupBy) => {
     seafileAPI.sysAdminStatisticTraffic(startTime, endTime, groupBy).then((res) => {
       let labels = [];
-      let total_upload = [],
-        total_download = [],
-        link_upload = [],
-        link_download = [],
-        sync_upload = [],
-        sync_download = [],
-        web_upload = [],
-        web_download = [];
+      let total_upload = [];
+      let total_download = [];
+      let link_upload = [];
+      let link_download = [];
+      let sync_upload = [];
+      let sync_download = [];
+      let web_upload = [];
+      let web_download = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -59,42 +59,42 @@ class StatisticTraffic extends React.Component {
           label: gettext('Upload'),
           data: link_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let linkDownload = {
           label: gettext('Download'),
           data: link_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let syncUpload = {
           label: gettext('Upload'),
           data: sync_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let syncDownload = {
           label: gettext('Download'),
           data: sync_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let webUpload = {
           label: gettext('Upload'),
           data: web_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let webDownload = {
           label: gettext('Download'),
           data: web_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let totalUpload = {
           label: gettext('Upload'),
           data: total_upload,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         let totalDownload = {
           label: gettext('Download'),
           data: total_download,
           borderColor: '#57cd6b',
-          backgroundColor: '#57cd6b'};
+          backgroundColor: '#57cd6b' };
         let linkData = [linkUpload, linkDownload];
         let syncData = [syncUpload, syncDownload];
         let webData = [webUpload, webDownload];
@@ -155,7 +155,7 @@ class StatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={filesData}
                       chartTitle={gettext('Total Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -168,7 +168,7 @@ class StatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={webData}
                       chartTitle={gettext('Web Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -181,7 +181,7 @@ class StatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={linkData}
                       chartTitle={gettext('Share Link Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
@@ -194,7 +194,7 @@ class StatisticTraffic extends React.Component {
                       labels={labels}
                       filesData={syncData}
                       chartTitle={gettext('Sync Traffic')}
-                      suggestedMaxNumbers={10*1000*1000}
+                      suggestedMaxNumbers={10 * 1000 * 1000}
                       isTitleCallback={true}
                       isTicksCallback={true}
                       isLegendStatus={true}
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-users.js b/frontend/src/pages/sys-admin/statistic/statistic-users.js
index 702a948a56..3664f3b373 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-users.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-users.js
@@ -24,8 +24,8 @@ class StatisticUsers extends React.Component {
   getActiviesFiles = (startTime, endTime, groupBy) => {
     let { filesData } = this.state;
     seafileAPI.sysAdminStatisticActiveUsers(startTime, endTime, groupBy).then((res) => {
-      let labels = [],
-        count = [];
+      let labels = [];
+      let count = [];
       let data = res.data;
       if (Array.isArray(data)) {
         data.forEach(item => {
@@ -36,7 +36,7 @@ class StatisticUsers extends React.Component {
           label: gettext('Active Users'),
           data: count,
           borderColor: '#fd913a',
-          backgroundColor: '#fd913a'};
+          backgroundColor: '#fd913a' };
         filesData = [userCount];
       }
       this.setState({
diff --git a/frontend/src/pages/sys-admin/statistic/traffic-table-body.js b/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
index 8ef7421c21..76a5915bcf 100644
--- a/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-table-body.js
@@ -12,16 +12,16 @@ class TrafficTableBody extends React.Component {
 
   trafficName = () => {
     let { userTrafficItem, type } = this.props;
-    switch(type) {
+    switch (type) {
       case 'user':
         if (userTrafficItem.name) {
           return (
             <a href={siteRoot + 'sys/users/' + userTrafficItem.email + '/'}>{userTrafficItem.name}</a>
           );
         }
-        return(<span>{'--'}</span>);
+        return (<span>{'--'}</span>);
       case 'org':
-        return(<span>{userTrafficItem.org_name}</span>);
+        return (<span>{userTrafficItem.org_name}</span>);
     }
   };
 
@@ -35,7 +35,7 @@ class TrafficTableBody extends React.Component {
     let linkUploadSize = Utils.bytesToSize(userTrafficItem.link_file_upload);
     let linkDownloadSize = Utils.bytesToSize(userTrafficItem.link_file_download);
 
-    return(
+    return (
       <tr>
         <td>{this.trafficName()}</td>
         <td>{syncUploadSize}</td>
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/content.js b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
index 6704019d1f..54efe66067 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/content.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
@@ -23,11 +23,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/item.js b/frontend/src/pages/sys-admin/terms-and-conditions/item.js
index e7114b9fef..de252488d4 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/item.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/item.js
@@ -28,7 +28,7 @@ class Item extends Component {
     let mdFile = this.props.item.text;
     processor.process(mdFile).then((result) => {
       let innerHtml = String(result);
-      this.setState({itemContent: innerHtml});
+      this.setState({ itemContent: innerHtml });
     });
   }
 
@@ -37,7 +37,7 @@ class Item extends Component {
       let mdFile = nextProps.item.text;
       processor.process(mdFile).then((result) => {
         let innerHtml = String(result);
-        this.setState({itemContent: innerHtml});
+        this.setState({ itemContent: innerHtml });
       });
     }
   }
@@ -61,19 +61,19 @@ class Item extends Component {
   };
 
   toggleUpdateDialog = (e) => {
-    this.setState({isUpdateDialogOpen: !this.state.isUpdateDialogOpen});
+    this.setState({ isUpdateDialogOpen: !this.state.isUpdateDialogOpen });
   };
 
   toggleDeleteDialog = (e) => {
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   toggleTermsContentDialog = (e) => {
-    this.setState({isTermsPerviewDialogOpen: !this.state.isTermsPerviewDialogOpen});
+    this.setState({ isTermsPerviewDialogOpen: !this.state.isTermsPerviewDialogOpen });
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Update':
         this.toggleUpdateDialog();
         break;
@@ -103,7 +103,7 @@ class Item extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'Update':
         translateResult = gettext('Update');
         break;
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
index 3924aa2b56..23d7ea6fb7 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/terms-and-conditions.js
@@ -22,10 +22,10 @@ class TermsAndConditions extends Component {
   }
 
   toggleAddTermDialog = () => {
-    this.setState({isAddTermDialogOpen: !this.state.isAddTermDialogOpen});
+    this.setState({ isAddTermDialogOpen: !this.state.isAddTermDialogOpen });
   };
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminListTermsAndConditions().then((res) => {
       this.setState({
         termList: res.data.term_and_condition_list,
@@ -58,7 +58,7 @@ class TermsAndConditions extends Component {
           return item;
         }
       });
-      this.setState({termList: termList});
+      this.setState({ termList: termList });
       toaster.success(gettext('Update succeeded.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -69,7 +69,7 @@ class TermsAndConditions extends Component {
   deleteTerm = (termID) => {
     seafileAPI.sysAdminDeleteTermAndCondition(termID).then(res => {
       let termList = this.state.termList.filter(item => item.id != termID);
-      this.setState({termList: termList});
+      this.setState({ termList: termList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index 106d4e8175..2782786f8a 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -120,7 +120,7 @@ class Users extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let urlParams = (new URL(window.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
diff --git a/frontend/src/pages/sys-admin/users/search-users.js b/frontend/src/pages/sys-admin/users/search-users.js
index 23223059f7..35adaeae58 100644
--- a/frontend/src/pages/sys-admin/users/search-users.js
+++ b/frontend/src/pages/sys-admin/users/search-users.js
@@ -35,7 +35,7 @@ class SearchUsers extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     let params = (new URL(document.location)).searchParams;
     const { currentPage, perPage } = this.state;
     this.setState({
@@ -46,11 +46,11 @@ class SearchUsers extends Component {
   }
 
   toggleBatchSetQuotaDialog = () => {
-    this.setState({isBatchSetQuotaDialogOpen: !this.state.isBatchSetQuotaDialogOpen});
+    this.setState({ isBatchSetQuotaDialogOpen: !this.state.isBatchSetQuotaDialogOpen });
   };
 
   toggleBatchDeleteUserDialog = () => {
-    this.setState({isBatchDeleteUserDialogOpen: !this.state.isBatchDeleteUserDialogOpen});
+    this.setState({ isBatchDeleteUserDialogOpen: !this.state.isBatchDeleteUserDialogOpen });
   };
 
   onUserSelected = (item) => {
@@ -139,7 +139,7 @@ class SearchUsers extends Component {
       let newUserList = this.state.userList.filter(item => {
         return item.email != email;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       let msg = gettext('Deleted user %s');
       msg = msg.replace('%s', username);
       toaster.success(msg);
@@ -162,7 +162,7 @@ class SearchUsers extends Component {
         });
         return item;
       });
-      this.setState({userList: userList});
+      this.setState({ userList: userList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -177,7 +177,7 @@ class SearchUsers extends Component {
       if (res.data.success.length) {
         let oldUserList = this.state.userList;
         let newUserList = oldUserList.filter(oldUser => {
-          return !res.data.success.some(deletedUser =>{
+          return !res.data.success.some(deletedUser => {
             return deletedUser.email == oldUser.email;
           });
         });
@@ -206,11 +206,11 @@ class SearchUsers extends Component {
     seafileAPI.sysAdminUpdateUser(email, key, value).then(res => {
       let newUserList = this.state.userList.map(item => {
         if (item.email == email) {
-          item[key]= res.data[key];
+          item[key] = res.data[key];
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       const msg = (key == 'is_active' && value) ?
         res.data.update_status_tip : gettext('Edit succeeded');
       toaster.success(msg);
@@ -228,7 +228,7 @@ class SearchUsers extends Component {
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       toaster.success(gettext('Edit succeeded'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -314,7 +314,7 @@ class SearchUsers extends Component {
                     </Col>
                   </FormGroup>
                   <FormGroup row>
-                    <Col sm={{size: 5}}>
+                    <Col sm={{ size: 5 }}>
                       <button className="btn btn-outline-primary" disabled={!isSubmitBtnActive} onClick={this.getItems}>{gettext('Submit')}</button>
                     </Col>
                   </FormGroup>
diff --git a/frontend/src/pages/sys-admin/users/user-groups.js b/frontend/src/pages/sys-admin/users/user-groups.js
index d48ba654d9..c5c6a3cf47 100644
--- a/frontend/src/pages/sys-admin/users/user-groups.js
+++ b/frontend/src/pages/sys-admin/users/user-groups.js
@@ -20,11 +20,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -114,7 +114,7 @@ class Item extends Component {
   getRoleText = () => {
     let roleText;
     const { item } = this.props;
-    switch(item.role) {
+    switch (item.role) {
       case 'Owner':
         roleText = gettext('Owner');
         break;
@@ -165,7 +165,7 @@ class Groups extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const email = decodeURIComponent(this.props.email);
     seafileAPI.sysAdminGetUser(email).then((res) => {
       this.setState({
diff --git a/frontend/src/pages/sys-admin/users/user-info.js b/frontend/src/pages/sys-admin/users/user-info.js
index 19d2e65cc9..efa4d0f733 100644
--- a/frontend/src/pages/sys-admin/users/user-info.js
+++ b/frontend/src/pages/sys-admin/users/user-info.js
@@ -29,15 +29,15 @@ class Content extends Component {
   }
 
   toggleSetQuotaDialog = () => {
-    this.setState({isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen});
+    this.setState({ isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen });
   };
 
   toggleSetUserUploadRateLimitDialog = () => {
-    this.setState({isSetUserUploadRateLimitDialogOpen: !this.state.isSetUserUploadRateLimitDialogOpen});
+    this.setState({ isSetUserUploadRateLimitDialogOpen: !this.state.isSetUserUploadRateLimitDialogOpen });
   };
 
   toggleSetUserDownloadRateLimitDialog = () => {
-    this.setState({isSetUserDownloadRateLimitDialogOpen: !this.state.isSetUserDownloadRateLimitDialogOpen});
+    this.setState({ isSetUserDownloadRateLimitDialogOpen: !this.state.isSetUserDownloadRateLimitDialogOpen });
   };
 
   updateQuota = (value) => {
@@ -113,7 +113,7 @@ class Content extends Component {
           <dl className="m-0">
             <dt className="info-item-heading">{gettext('Avatar')}</dt>
             <dd className="info-item-content">
-              <img src={user.avatar_url} alt={user.name} width="80" className="rounded"  />
+              <img src={user.avatar_url} alt={user.name} width="80" className="rounded" />
             </dd>
 
             <dt className="info-item-heading">{gettext('Email')}</dt>
@@ -146,7 +146,7 @@ class Content extends Component {
 
             <dt className="info-item-heading">{gettext('Reference ID')}</dt>
             <dd className="info-item-content">
-              {user.reference_id|| '--'}
+              {user.reference_id || '--'}
               {this.showEditIcon(this.toggleSetUserReferenceIDDialog)}
             </dd>
 
@@ -249,7 +249,7 @@ class User extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     // avatar size: 160
     const email = decodeURIComponent(this.props.email);
     seafileAPI.sysAdminGetUser(email, 160).then((res) => {
@@ -269,7 +269,7 @@ class User extends Component {
     const email = this.state.userInfo.email;
     seafileAPI.sysAdminUpdateUser(email, key, value).then(res => {
       let userInfo = this.state.userInfo;
-      userInfo[key]= res.data[key];
+      userInfo[key] = res.data[key];
       this.setState({
         userInfo: userInfo
       });
diff --git a/frontend/src/pages/sys-admin/users/user-links.js b/frontend/src/pages/sys-admin/users/user-links.js
index 89f4abcd34..7e381a334c 100644
--- a/frontend/src/pages/sys-admin/users/user-links.js
+++ b/frontend/src/pages/sys-admin/users/user-links.js
@@ -21,11 +21,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -119,7 +119,7 @@ class Item extends Component {
   };
 
   toggleLinkDialog = () => {
-    this.setState({isLinkDialogOpen: !this.state.isLinkDialogOpen});
+    this.setState({ isLinkDialogOpen: !this.state.isLinkDialogOpen });
   };
 
   deleteItem = () => {
@@ -141,7 +141,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'View':
         this.toggleLinkDialog();
         break;
@@ -154,7 +154,7 @@ class Item extends Component {
   getRoleText = () => {
     let roleText;
     const { item } = this.props;
-    switch(item.role) {
+    switch (item.role) {
       case 'Owner':
         roleText = gettext('Owner');
         break;
@@ -248,7 +248,7 @@ class Links extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const email = decodeURIComponent(this.props.email);
     seafileAPI.sysAdminGetUser(email).then((res) => {
       this.setState({
@@ -291,7 +291,7 @@ class Links extends Component {
     const token = item.token;
     if (type == 'download') {
       seafileAPI.sysAdminDeleteShareLink(token).then(res => {
-        let items = this.state.shareLinkItems.filter(item=> {
+        let items = this.state.shareLinkItems.filter(item => {
           return item.token != token;
         });
         this.setState({
@@ -304,7 +304,7 @@ class Links extends Component {
       });
     } else {
       seafileAPI.sysAdminDeleteUploadLink(token).then(res => {
-        let items = this.state.uploadLinkItems.filter(item=> {
+        let items = this.state.uploadLinkItems.filter(item => {
           return item.token != token;
         });
         this.setState({
diff --git a/frontend/src/pages/sys-admin/users/user-nav.js b/frontend/src/pages/sys-admin/users/user-nav.js
index e5f292c485..d44e344c55 100644
--- a/frontend/src/pages/sys-admin/users/user-nav.js
+++ b/frontend/src/pages/sys-admin/users/user-nav.js
@@ -14,11 +14,11 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'info', urlPart: '', text: gettext('Info')},
-      {name: 'owned-repos', urlPart: 'owned-libraries', text: gettext('Owned Libraries')},
-      {name: 'shared-repos', urlPart: 'shared-libraries', text: gettext('Shared Libraries')},
-      {name: 'links', urlPart: 'shared-links', text: gettext('Shared Links')},
-      {name: 'groups', urlPart: 'groups', text: gettext('Groups')}
+      { name: 'info', urlPart: '', text: gettext('Info') },
+      { name: 'owned-repos', urlPart: 'owned-libraries', text: gettext('Owned Libraries') },
+      { name: 'shared-repos', urlPart: 'shared-libraries', text: gettext('Shared Libraries') },
+      { name: 'links', urlPart: 'shared-links', text: gettext('Shared Links') },
+      { name: 'groups', urlPart: 'groups', text: gettext('Groups') }
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/users/user-repos.js b/frontend/src/pages/sys-admin/users/user-repos.js
index 846a6cbadb..28fbc1a8d3 100644
--- a/frontend/src/pages/sys-admin/users/user-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-repos.js
@@ -26,11 +26,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   render() {
@@ -125,7 +125,7 @@ class Item extends Component {
   };
 
   toggleDeleteDialog = () => {
-    this.setState({isDeleteDialogOpen: !this.state.isDeleteDialogOpen});
+    this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
   deleteRepo = () => {
@@ -133,7 +133,7 @@ class Item extends Component {
   };
 
   toggleTransferDialog = () => {
-    this.setState({isTransferDialogOpen: !this.state.isTransferDialogOpen});
+    this.setState({ isTransferDialogOpen: !this.state.isTransferDialogOpen });
   };
 
   transferRepo = (owner) => {
@@ -171,7 +171,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Delete':
         this.toggleDeleteDialog();
         break;
@@ -253,7 +253,7 @@ class Repos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const email = decodeURIComponent(this.props.email);
     seafileAPI.sysAdminGetUser(email).then((res) => {
       this.setState({
@@ -278,7 +278,7 @@ class Repos extends Component {
       let newRepoList = this.state.repoList.filter(item => {
         return item.id != repoID;
       });
-      this.setState({repoList: newRepoList});
+      this.setState({ repoList: newRepoList });
       toaster.success(gettext('Successfully deleted 1 item.'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -291,7 +291,7 @@ class Repos extends Component {
       let newRepoList = this.state.repoList.filter(item => {
         return item.id != repoID;
       });
-      this.setState({repoList: newRepoList});
+      this.setState({ repoList: newRepoList });
       let message = gettext('Successfully transferred the library.');
       toaster.success(message);
     }).catch(error => {
diff --git a/frontend/src/pages/sys-admin/users/user-shared-repos.js b/frontend/src/pages/sys-admin/users/user-shared-repos.js
index a407fcbd71..53c7e1f8ba 100644
--- a/frontend/src/pages/sys-admin/users/user-shared-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-shared-repos.js
@@ -124,7 +124,7 @@ class Repos extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const email = decodeURIComponent(this.props.email);
     seafileAPI.sysAdminGetUser(email).then((res) => {
       this.setState({
diff --git a/frontend/src/pages/sys-admin/users/users-content.js b/frontend/src/pages/sys-admin/users/users-content.js
index 70ab383ec5..1972c2a433 100644
--- a/frontend/src/pages/sys-admin/users/users-content.js
+++ b/frontend/src/pages/sys-admin/users/users-content.js
@@ -32,11 +32,11 @@ class Content extends Component {
   };
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -91,28 +91,28 @@ class Content extends Component {
       const colCreatedText = `${gettext('Created At')} / ${gettext('Last Login')} / ${gettext('Last Access')}`;
       if (isPro) {
         columns.push(
-          {width: '20%', text: colNameText},
-          {width: '15%', text: gettext('Status')},
-          {width: '15%', text: gettext('Role')}
+          { width: '20%', text: colNameText },
+          { width: '15%', text: gettext('Status') },
+          { width: '15%', text: gettext('Role') }
         );
       } else {
         columns.push(
-          {width: '30%', text: colNameText},
-          {width: '20%', text: gettext('Status')}
+          { width: '30%', text: colNameText },
+          { width: '20%', text: gettext('Status') }
         );
       }
       if (multiInstitution && !isAdmin) {
         columns.push(
-          {width: '14%', text: colSpaceText},
-          {width: '14%', text: gettext('Institution')},
-          {width: '14%', text: colCreatedText},
-          {width: '5%', text: ''}
+          { width: '14%', text: colSpaceText },
+          { width: '14%', text: gettext('Institution') },
+          { width: '14%', text: colCreatedText },
+          { width: '5%', text: '' }
         );
       } else {
         columns.push(
-          {width: '20%', text: colSpaceText},
-          {width: '22%', text: colCreatedText},
-          {width: '5%', text: ''}
+          { width: '20%', text: colSpaceText },
+          { width: '22%', text: colCreatedText },
+          { width: '5%', text: '' }
         );
       }
 
@@ -256,30 +256,30 @@ class Item extends Component {
   };
 
   toggleSetQuotaDialog = () => {
-    this.setState({isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen});
+    this.setState({ isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen });
   };
 
   toggleDeleteUserDialog = () => {
-    this.setState({isDeleteUserDialogOpen: !this.state.isDeleteUserDialogOpen});
+    this.setState({ isDeleteUserDialogOpen: !this.state.isDeleteUserDialogOpen });
   };
 
   toggleResetUserPasswordDialog = () => {
-    this.setState({isResetUserPasswordDialogOpen: !this.state.isResetUserPasswordDialogOpen});
+    this.setState({ isResetUserPasswordDialogOpen: !this.state.isResetUserPasswordDialogOpen });
   };
 
   toggleRevokeAdminDialog = () => {
-    this.setState({isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen});
+    this.setState({ isRevokeAdminDialogOpen: !this.state.isRevokeAdminDialogOpen });
   };
 
-  toggleConfirmInactiveDialog= () => {
-    this.setState({isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen});
+  toggleConfirmInactiveDialog = () => {
+    this.setState({ isConfirmInactiveDialogOpen: !this.state.isConfirmInactiveDialogOpen });
   };
 
   onUserSelected = () => {
     this.props.onUserSelected(this.props.item);
   };
 
-  updateStatus= (roleOption) => {
+  updateStatus = (roleOption) => {
     const isActive = roleOption.value == 'active';
     if (isActive) {
       toaster.notify(gettext('It may take some time, please wait.'));
@@ -396,7 +396,7 @@ class Item extends Component {
   };
 
   onMenuItemClick = (operation) => {
-    switch(operation) {
+    switch (operation) {
       case 'Delete':
         this.toggleDeleteUserDialog();
         break;
diff --git a/frontend/src/pages/sys-admin/users/users-nav.js b/frontend/src/pages/sys-admin/users/users-nav.js
index 5f888d0ff9..130925a5b6 100644
--- a/frontend/src/pages/sys-admin/users/users-nav.js
+++ b/frontend/src/pages/sys-admin/users/users-nav.js
@@ -12,17 +12,17 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'database', urlPart: 'users', text: gettext('Database')}
+      { name: 'database', urlPart: 'users', text: gettext('Database') }
     ];
     if (haveLDAP) {
       this.navItems.push(
-        {name: 'ldap', urlPart: 'users/ldap', text: gettext('LDAP')},
-        {name: 'ldap-imported', urlPart: 'users/ldap-imported', text: gettext('LDAP(imported)')}
+        { name: 'ldap', urlPart: 'users/ldap', text: gettext('LDAP') },
+        { name: 'ldap-imported', urlPart: 'users/ldap-imported', text: gettext('LDAP(imported)') }
       );
     }
     if (isDefaultAdmin) {
       this.navItems.push(
-        {name: 'admin', urlPart: 'users/admins', text: gettext('Admin')}
+        { name: 'admin', urlPart: 'users/admins', text: gettext('Admin') }
       );
     }
   }
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index ee811379fc..f09208d18a 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -50,7 +50,7 @@ class Users extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     if (this.props.isAdmin) { // 'Admin' page
       this.getUserList(); // no pagination
     } else {
@@ -74,19 +74,19 @@ class Users extends Component {
   }
 
   toggleImportUserDialog = () => {
-    this.setState({isImportUserDialogOpen: !this.state.isImportUserDialogOpen});
+    this.setState({ isImportUserDialogOpen: !this.state.isImportUserDialogOpen });
   };
 
   toggleAddUserDialog = () => {
-    this.setState({isAddUserDialogOpen: !this.state.isAddUserDialogOpen});
+    this.setState({ isAddUserDialogOpen: !this.state.isAddUserDialogOpen });
   };
 
   toggleBatchSetQuotaDialog = () => {
-    this.setState({isBatchSetQuotaDialogOpen: !this.state.isBatchSetQuotaDialogOpen});
+    this.setState({ isBatchSetQuotaDialogOpen: !this.state.isBatchSetQuotaDialogOpen });
   };
 
   toggleBatchDeleteUserDialog = () => {
-    this.setState({isBatchDeleteUserDialogOpen: !this.state.isBatchDeleteUserDialogOpen});
+    this.setState({ isBatchDeleteUserDialogOpen: !this.state.isBatchDeleteUserDialogOpen });
   };
 
   onUserSelected = (item) => {
@@ -211,7 +211,7 @@ class Users extends Component {
       role: role,
       currentPage: 1
     }, () => {
-      const { currentPage,perPage, is_active, role } = this.state;
+      const { currentPage, perPage, is_active, role } = this.state;
       this.updateURL(currentPage, perPage);
       this.getUsersListByPage(currentPage, is_active, role);
     });
@@ -240,7 +240,7 @@ class Users extends Component {
       let newUserList = this.state.userList.filter(item => {
         return item.email != email;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       let msg = gettext('Deleted user %s');
       msg = msg.replace('%s', username);
       toaster.success(msg);
@@ -263,7 +263,7 @@ class Users extends Component {
         });
         return item;
       });
-      this.setState({userList: userList});
+      this.setState({ userList: userList });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
@@ -278,7 +278,7 @@ class Users extends Component {
       if (res.data.success.length) {
         let oldUserList = this.state.userList;
         let newUserList = oldUserList.filter(oldUser => {
-          return !res.data.success.some(deletedUser =>{
+          return !res.data.success.some(deletedUser => {
             return deletedUser.email == oldUser.email;
           });
         });
@@ -355,11 +355,11 @@ class Users extends Component {
     seafileAPI.sysAdminUpdateUser(email, key, value).then(res => {
       let newUserList = this.state.userList.map(item => {
         if (item.email == email) {
-          item[key]= res.data[key];
+          item[key] = res.data[key];
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       const msg = (key == 'is_active' && value) ?
         res.data.update_status_tip : gettext('Edit succeeded');
       toaster.success(msg);
@@ -377,7 +377,7 @@ class Users extends Component {
         }
         return item;
       });
-      this.setState({userList: newUserList});
+      this.setState({ userList: newUserList });
       toaster.success(gettext('Edit succeeded'));
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -433,7 +433,7 @@ class Users extends Component {
   };
 
   toggleBatchAddAdminDialog = () => {
-    this.setState({isBatchAddAdminDialogOpen: !this.state.isBatchAddAdminDialogOpen});
+    this.setState({ isBatchAddAdminDialogOpen: !this.state.isBatchAddAdminDialogOpen });
   };
 
   addAdminInBatch = (emails) => {
diff --git a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
index 5fa163d402..748879a8cf 100644
--- a/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/all-virus-files.js
@@ -60,7 +60,7 @@ class VirusFileItem extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'delete':
         translateResult = gettext('Delete');
         break;
@@ -76,8 +76,8 @@ class VirusFileItem extends Component {
 
   render() {
     const virusFile = this.props.virusFile;
-    let fileStatus = '',
-      fileOpList = [];
+    let fileStatus = '';
+    let fileOpList = [];
     if (virusFile.has_deleted) {
       fileStatus = <span className="text-green">{gettext('Deleted')}</span>;
     } else if (virusFile.has_ignored) {
@@ -135,11 +135,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -261,7 +261,7 @@ class AllVirusFiles extends Component {
 
   handleFile = (virusID, op) => {
     let request;
-    switch(op) {
+    switch (op) {
       case 'delete':
         request = seafileAPI.deleteVirusFile(virusID);
         break;
diff --git a/frontend/src/pages/sys-admin/virus-scan/nav.js b/frontend/src/pages/sys-admin/virus-scan/nav.js
index ed48abc38a..f0c2034cd8 100644
--- a/frontend/src/pages/sys-admin/virus-scan/nav.js
+++ b/frontend/src/pages/sys-admin/virus-scan/nav.js
@@ -12,8 +12,8 @@ class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.navItems = [
-      {name: 'all', urlPart: 'all', text: gettext('All')},
-      {name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled')}
+      { name: 'all', urlPart: 'all', text: gettext('All') },
+      { name: 'unhandled', urlPart: 'unhandled', text: gettext('Unhandled') }
     ];
   }
 
diff --git a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
index 8918ffe349..b1a2c23e6d 100644
--- a/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
+++ b/frontend/src/pages/sys-admin/virus-scan/unhandled-virus-files.js
@@ -64,7 +64,7 @@ class VirusFileItem extends Component {
 
   translateOperations = (item) => {
     let translateResult = '';
-    switch(item) {
+    switch (item) {
       case 'delete':
         translateResult = gettext('Delete');
         break;
@@ -84,8 +84,8 @@ class VirusFileItem extends Component {
 
   render() {
     const virusFile = this.props.virusFile;
-    let fileStatus = '',
-      fileOpList = [];
+    let fileStatus = '';
+    let fileOpList = [];
     if (virusFile.has_deleted) {
       fileStatus = <span className="text-green">{gettext('Deleted')}</span>;
     } else if (virusFile.has_ignored) {
@@ -149,11 +149,11 @@ class Content extends Component {
   }
 
   onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
+    this.setState({ isItemFreezed: true });
   };
 
   onUnfreezedItem = () => {
-    this.setState({isItemFreezed: false});
+    this.setState({ isItemFreezed: false });
   };
 
   getPreviousPage = () => {
@@ -289,7 +289,7 @@ class UnhandledVirusFiles extends Component {
 
   handleFile = (virusID, op) => {
     let request;
-    switch(op) {
+    switch (op) {
       case 'delete':
         request = seafileAPI.deleteVirusFile(virusID);
         break;
diff --git a/frontend/src/pages/sys-admin/web-settings/input-item.js b/frontend/src/pages/sys-admin/web-settings/input-item.js
index 024a074885..257f8c37c7 100644
--- a/frontend/src/pages/sys-admin/web-settings/input-item.js
+++ b/frontend/src/pages/sys-admin/web-settings/input-item.js
@@ -8,7 +8,7 @@ const propTypes = {
   inputType: PropTypes.string,
   saveSetting: PropTypes.func.isRequired,
   keyText: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   helpTip: PropTypes.string.isRequired,
   displayName: PropTypes.string.isRequired
 };
@@ -24,11 +24,11 @@ class WebSettingInput extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({value: nextProps.value});
+    this.setState({ value: nextProps.value });
   }
 
   toggleBtns = () => {
-    this.setState({isBtnsShown: !this.state.isBtnsShown});
+    this.setState({ isBtnsShown: !this.state.isBtnsShown });
   };
 
   hideBtns = (e) => {
@@ -36,7 +36,7 @@ class WebSettingInput extends Component {
       return;
     }
     if (this.props.value != this.state.value) {
-      this.setState({value: this.props.value});
+      this.setState({ value: this.props.value });
     }
     this.toggleBtns();
   };
diff --git a/frontend/src/pages/sys-admin/web-settings/section.js b/frontend/src/pages/sys-admin/web-settings/section.js
index db1ebf2226..050a102bd2 100644
--- a/frontend/src/pages/sys-admin/web-settings/section.js
+++ b/frontend/src/pages/sys-admin/web-settings/section.js
@@ -13,7 +13,7 @@ class Section extends Component {
   }
 
   render() {
-    const { headingText, children} = this.props;
+    const { headingText, children } = this.props;
     return (
       <div className="mb-4">
         <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
diff --git a/frontend/src/pages/sys-admin/web-settings/web-settings.js b/frontend/src/pages/sys-admin/web-settings/web-settings.js
index 4fd6694d38..85915365bc 100644
--- a/frontend/src/pages/sys-admin/web-settings/web-settings.js
+++ b/frontend/src/pages/sys-admin/web-settings/web-settings.js
@@ -26,7 +26,7 @@ class WebSettings extends Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     seafileAPI.sysAdminGetSysSettingInfo().then((res) => {
       this.setState({
         loading: false,
@@ -351,7 +351,8 @@ class WebSettings extends Component {
                   />
                 </Section>
 
-                {isPro && <Section headingText={gettext('Terms')}>
+                {isPro &&
+                <Section headingText={gettext('Terms')}>
                   <CheckboxItem
                     saveSetting={this.saveSetting}
                     displayName='ENABLE_TERMS_AND_CONDITIONS'
@@ -359,7 +360,8 @@ class WebSettings extends Component {
                     value={config_dict['ENABLE_TERMS_AND_CONDITIONS']}
                     helpTip={gettext('Enable system admin to add Terms and Conditions, and all users will have to accept the terms.')}
                   />
-                </Section>}
+                </Section>
+                }
               </Fragment>
               }
             </div>
diff --git a/frontend/src/pages/sys-admin/work-weixin-departments.js b/frontend/src/pages/sys-admin/work-weixin-departments.js
index 855e06957b..e1509f2d0e 100644
--- a/frontend/src/pages/sys-admin/work-weixin-departments.js
+++ b/frontend/src/pages/sys-admin/work-weixin-departments.js
@@ -87,7 +87,7 @@ class WorkWeixinDepartments extends Component {
     this.setState({
       isMembersListLoading: true,
     });
-    seafileAPI.adminListWorkWeixinDepartmentMembers(department_id, {fetch_child: true}).then((res) => {
+    seafileAPI.adminListWorkWeixinDepartmentMembers(department_id, { fetch_child: true }).then((res) => {
       let membersTempObj = this.state.membersTempObj;
       membersTempObj[department_id] = res.data.userlist;
       let canCheckUserIds = this.getCanCheckUserIds(res.data.userlist);
@@ -98,7 +98,7 @@ class WorkWeixinDepartments extends Component {
         canCheckUserIds: canCheckUserIds,
       });
     }).catch((error) => {
-      this.setState({isMembersListLoading: false});
+      this.setState({ isMembersListLoading: false });
       this.handleError(error);
     });
   };
@@ -173,7 +173,7 @@ class WorkWeixinDepartments extends Component {
       userList.push(newUsersTempObj[i]);
     }
     if (userList.length === 0) {
-      toaster.danger('未选择成员', {duration: 3});
+      toaster.danger('未选择成员', { duration: 3 });
       return;
     }
     seafileAPI.adminAddWorkWeixinUsersBatch(userList).then((res) => {
@@ -185,9 +185,9 @@ class WorkWeixinDepartments extends Component {
         this.handleSubmitSuccess(res.data.success);
       }
       if (res.data.failed) {
-        const fails= res.data.failed;
+        const fails = res.data.failed;
         for (let i = 0; i < fails.length; i++) {
-          toaster.danger(fails[i].name + ' ' + fails[i].error_msg, {duration: 3});
+          toaster.danger(fails[i].name + ' ' + fails[i].error_msg, { duration: 3 });
         }
       }
     }).catch((error) => {
@@ -200,7 +200,7 @@ class WorkWeixinDepartments extends Component {
     let { membersTempObj, membersList, canCheckUserIds } = this.state;
     for (let i = 0; i < success.length; i++) {
       let { userid, name, email } = success[i];
-      toaster.success(name + ' 成功导入', {duration: 1});
+      toaster.success(name + ' 成功导入', { duration: 1 });
       // refresh all temp
       if (canCheckUserIds.indexOf(userid) !== -1) {
         canCheckUserIds.splice(canCheckUserIds.indexOf(userid), 1);
@@ -276,7 +276,7 @@ class WorkWeixinDepartments extends Component {
     for (let i = 0, len = fails.length; i < len; i++) {
       let fail = fails[i];
       let failName = fail.type === 'department' ? fail.department_name : fail.api_user_name;
-      toaster.danger(failName + ' ' + fail.msg, { duration: 3} );
+      toaster.danger(failName + ' ' + fail.msg, { duration: 3 } );
     }
   };
 
diff --git a/frontend/src/pages/sys-admin/work-weixin/work-weixin-department-members-list.js b/frontend/src/pages/sys-admin/work-weixin/work-weixin-department-members-list.js
index bdbb436790..d05ccc3666 100644
--- a/frontend/src/pages/sys-admin/work-weixin/work-weixin-department-members-list.js
+++ b/frontend/src/pages/sys-admin/work-weixin/work-weixin-department-members-list.js
@@ -35,7 +35,8 @@ class WorkWeixinDepartmentMembersList extends Component {
           <td>
             {!member.email &&
               <input type="checkbox" className="vam" onChange={() => this.props.onUserChecked(member)}
-                checked={(member.userid in newUsersTempObj) ? 'checked' : ''}></input>}
+                checked={(member.userid in newUsersTempObj) ? 'checked' : ''}>
+              </input>}
           </td>
           <td><img className="avatar" src={avatar} alt=""></img></td>
           <td>{member.name}</td>
@@ -56,7 +57,8 @@ class WorkWeixinDepartmentMembersList extends Component {
                 <th width="5%">
                   {canCheckUserIds.length > 0 &&
                     <input type="checkbox" className="vam" checked={this.props.isCheckedAll}
-                      onChange={() => this.props.onAllUsersChecked()}></input>}
+                      onChange={() => this.props.onAllUsersChecked()}>
+                    </input>}
                 </th>
                 <th width="10%"></th>
                 <th width="20%">{'名称'}</th>
diff --git a/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js b/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
index 85d1244b90..528df4e47d 100644
--- a/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
+++ b/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
@@ -127,7 +127,8 @@ class WorkWeixinDepartmentsTreeNode extends Component {
                 <DropdownItem
                   onClick={this.importDepartmentDialogToggle.bind(this, department)}
                   id={department.id}
-                >{'导入部门'}</DropdownItem>
+                >{'导入部门'}
+                </DropdownItem>
               </DropdownMenu>
             </Dropdown>
             }
diff --git a/frontend/src/pages/upload-link/file-uploader.js b/frontend/src/pages/upload-link/file-uploader.js
index a44928e08c..6b9e74a098 100644
--- a/frontend/src/pages/upload-link/file-uploader.js
+++ b/frontend/src/pages/upload-link/file-uploader.js
@@ -4,10 +4,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Resumablejs from '@seafile/resumablejs';
 import MD5 from 'MD5';
-import { resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
+import { gettext, resumableUploadFileBlockSize, maxUploadFileSize, maxNumberOfFilesForFileupload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import { gettext } from '../../utils/constants';
 import UploadProgressDialog from './upload-progress-dialog';
 import toaster from '../../components/toast';
 
@@ -145,7 +144,7 @@ class FileUploader extends React.Component {
   maxFileSizeErrorCallback = (file) => {
     let { forbidUploadFileList } = this.state;
     forbidUploadFileList.push(file);
-    this.setState({forbidUploadFileList: forbidUploadFileList});
+    this.setState({ forbidUploadFileList: forbidUploadFileList });
   };
 
   onChunkingComplete = (resumableFile) => {
@@ -156,12 +155,12 @@ class FileUploader extends React.Component {
 
     resumableFile.formData = {};
     if (isFile) { // upload file
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
       };
     } else { // upload folder
       let relative_path = relativePath.slice(0, relativePath.lastIndexOf('/') + 1);
-      resumableFile.formData  = {
+      resumableFile.formData = {
         parent_dir: path,
         relative_path: relative_path
       };
@@ -303,7 +302,7 @@ class FileUploader extends React.Component {
 
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
-    this.setState({totalProgress: progress});
+    this.setState({ totalProgress: progress });
     Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
   };
 
@@ -336,7 +335,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-      this.setState({uploadFileList: uploadFileList});
+      this.setState({ uploadFileList: uploadFileList });
 
       return;
     }
@@ -358,7 +357,7 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-      this.setState({uploadFileList: uploadFileList});
+      this.setState({ uploadFileList: uploadFileList });
 
       return;
     }
@@ -380,7 +379,7 @@ class FileUploader extends React.Component {
       }
       return item;
     });
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   onFileError = (resumableFile, message) => {
@@ -390,7 +389,7 @@ class FileUploader extends React.Component {
     } else {
       // eg: '{"error": "Internal error" \n }'
       let errorMessage = message.replace(/\n/g, '');
-      errorMessage  = JSON.parse(errorMessage);
+      errorMessage = JSON.parse(errorMessage);
       error = errorMessage.error;
       if (error === 'File locked by others.') {
         error = gettext('File is locked by others.');
@@ -408,7 +407,7 @@ class FileUploader extends React.Component {
       return item;
     });
 
-    this.loaded = 0;  // reset loaded data;
+    this.loaded = 0; // reset loaded data;
     this.setState({
       retryFileList: this.state.retryFileList,
       uploadFileList: uploadFileList
@@ -435,7 +434,7 @@ class FileUploader extends React.Component {
       msg = gettext('Failed to upload {file_name}.')
         .replace('{file_name}', file.fileName);
     }
-    toaster.danger(msg, {'id': 'file-error-msg'});
+    toaster.danger(msg, { 'id': 'file-error-msg' });
     this.error = true;
 
     // reset upload link loaded
@@ -470,7 +469,7 @@ class FileUploader extends React.Component {
   };
 
   generateUniqueIdentifier = (file) => {
-    let relativePath = file.webkitRelativePath||file.relativePath||file.fileName||file.name;
+    let relativePath = file.webkitRelativePath || file.relativePath || file.fileName || file.name;
     return MD5(relativePath + new Date()) + relativePath;
   };
 
@@ -498,7 +497,7 @@ class FileUploader extends React.Component {
     this.resumable.files = [];
     // reset upload link loaded
     this.isUploadLinkLoaded = false;
-    this.setState({isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: []});
+    this.setState({ isUploadProgressDialogShow: false, uploadFileList: [], forbidUploadFileList: [] });
     Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
   };
 
@@ -519,7 +518,7 @@ class FileUploader extends React.Component {
       this.loaded = 0;
     }
 
-    this.setState({uploadFileList: uploadFileList});
+    this.setState({ uploadFileList: uploadFileList });
   };
 
   onCancelAllUploading = () => {
@@ -614,7 +613,7 @@ class FileUploader extends React.Component {
   };
 
   cancelFileUpload = () => {
-    this.resumable.files.pop(); //delete latest file；
+    this.resumable.files.pop(); // delete latest file；
   };
 
   render() {
diff --git a/frontend/src/pages/upload-link/index.js b/frontend/src/pages/upload-link/index.js
index b9cf75af11..5381e9b1f6 100644
--- a/frontend/src/pages/upload-link/index.js
+++ b/frontend/src/pages/upload-link/index.js
@@ -38,9 +38,10 @@ class SharedUploadLink extends React.Component {
         </div>
         <div className="o-auto">
           <div className="py-4 px-6 mx-auto rounded" id="upload-link-panel">
-            <h3 className="h5 d-flex text-nowrap" dangerouslySetInnerHTML={{__html: gettext('Upload files to {folder_name_placeholder}')
-              .replace('{folder_name_placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirName)}</span>`)}}></h3>
-            <p className="small shared-by" dangerouslySetInnerHTML={{__html: `${gettext('shared by:')} ${sharedBy.avatar} ${sharedBy.name}`}}></p>
+            <h3 className="h5 d-flex text-nowrap" dangerouslySetInnerHTML={{ __html: gettext('Upload files to {folder_name_placeholder}')
+              .replace('{folder_name_placeholder}', `<span class="op-target text-truncate mx-1">${Utils.HTMLescape(dirName)}</span>`) }}>
+            </h3>
+            <p className="small shared-by" dangerouslySetInnerHTML={{ __html: `${gettext('shared by:')} ${sharedBy.avatar} ${sharedBy.name}` }}></p>
             {noQuota ? (
               <div className="py-6 text-center">
                 <span className="sf3-font sf3-font-tips warning-icon"></span>
diff --git a/frontend/src/pages/upload-link/upload-list-item.js b/frontend/src/pages/upload-link/upload-list-item.js
index 1d712651a9..fda9919772 100644
--- a/frontend/src/pages/upload-link/upload-list-item.js
+++ b/frontend/src/pages/upload-link/upload-list-item.js
@@ -39,7 +39,7 @@ class UploadListItem extends React.Component {
       }
     }
 
-    this.setState({uploadState: uploadState});
+    this.setState({ uploadState: uploadState });
   }
 
   onUploadCancel = (e) => {
@@ -89,7 +89,7 @@ class UploadListItem extends React.Component {
                   {resumableFile.isUploading() && (
                     <div className="progress-container">
                       <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>
                       {(resumableFile.remainingTime === -1) && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
                       {(resumableFile.remainingTime > 0) && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
@@ -99,7 +99,7 @@ class UploadListItem extends React.Component {
                   {!resumableFile.isUploading() && (
                     <div className="progress-container d-flex align-items-center">
                       <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>
                     </div>
                   )}
@@ -109,7 +109,7 @@ class UploadListItem extends React.Component {
                 <>
                   <div className="progress-container d-flex align-items-center">
                     <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>
                   </div>
                   {this.state.uploadState === UPLOAD_UPLOADING && (
@@ -134,7 +134,7 @@ class UploadListItem extends React.Component {
           {this.state.uploadState === UPLOAD_ERROR && (
             <div className="d-flex align-items-center">
               <span className="upload-failure-icon sf3-font sf3-font-info mr-2"></span>
-              <span className="upload-failure-msg" dangerouslySetInnerHTML={{__html: error}}></span>
+              <span className="upload-failure-msg" dangerouslySetInnerHTML={{ __html: error }}></span>
             </div>
           )}
         </td>
diff --git a/frontend/src/pages/upload-link/upload-progress-dialog.js b/frontend/src/pages/upload-link/upload-progress-dialog.js
index 94b7665cbe..adf21df7ca 100644
--- a/frontend/src/pages/upload-link/upload-progress-dialog.js
+++ b/frontend/src/pages/upload-link/upload-progress-dialog.js
@@ -16,7 +16,7 @@ const propTypes = {
   onUploadRetry: PropTypes.func.isRequired,
   onFileUpload: PropTypes.func.isRequired,
   onFolderUpload: PropTypes.func.isRequired,
-  isUploading : PropTypes.bool.isRequired
+  isUploading: PropTypes.bool.isRequired
 };
 
 class UploadProgressDialog extends React.Component {
@@ -95,7 +95,7 @@ class UploadProgressDialog extends React.Component {
             </div>
             {isUploading && (
               <div className="progress">
-                <div className="progress-bar" role="progressbar" style={{width: `${totalProgress}%`}} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
+                <div className="progress-bar" role="progressbar" style={{ width: `${totalProgress}%` }} aria-valuenow={totalProgress} aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             )}
           </div>
diff --git a/frontend/src/pages/wiki/index-md-viewer/index.js b/frontend/src/pages/wiki/index-md-viewer/index.js
index 9ba56a2881..f682fc32a3 100644
--- a/frontend/src/pages/wiki/index-md-viewer/index.js
+++ b/frontend/src/pages/wiki/index-md-viewer/index.js
@@ -6,7 +6,7 @@ import { Utils } from '../../../utils/utils';
 import { generateNavItems } from '../utils/generate-navs';
 import NavItem from './nav-item';
 
-import'./style.css';
+import './style.css';
 
 const viewerPropTypes = {
   indexContent: PropTypes.string.isRequired,
@@ -51,7 +51,7 @@ class IndexMdViewer extends React.Component {
       // change image url
       if (item.type == 'image' && isPublicWiki) {
         url = item.data.src;
-        const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
+        const re = new RegExp(serviceURL + '/lib/' + repoID + '/file.*raw=1');
         // different repo
         if (!re.test(url)) {
           return;
diff --git a/frontend/src/pages/wiki/index-md-viewer/nav-item.js b/frontend/src/pages/wiki/index-md-viewer/nav-item.js
index 52c0478a57..3b69eaadbf 100644
--- a/frontend/src/pages/wiki/index-md-viewer/nav-item.js
+++ b/frontend/src/pages/wiki/index-md-viewer/nav-item.js
@@ -27,7 +27,7 @@ class NavItem extends React.Component {
     const { node } = this.props;
     const { expanded } = this.state;
     if (node.children && node.children.length > 0 && !expanded) {
-      this.setState({expanded: !expanded});
+      this.setState({ expanded: !expanded });
       return;
     }
     this.props.onLinkClick(node);
@@ -37,7 +37,7 @@ class NavItem extends React.Component {
     const { node } = this.props;
     const { expanded } = this.state;
     if (node.children && node.children.length > 0) {
-      this.setState({expanded: !expanded});
+      this.setState({ expanded: !expanded });
       return;
     }
   };
@@ -70,7 +70,7 @@ class NavItem extends React.Component {
       return (
         <div className="pl-4 position-relative">
           <span className="switch-btn" onClick={this.toggleExpanded}>
-            <i className={`sf3-font sf3-font-down ${expanded ? '': 'rotate-270 d-inline-block'}`}></i>
+            <i className={`sf3-font sf3-font-down ${expanded ? '' : 'rotate-270 d-inline-block'}`}></i>
           </span>
           {this.renderLink(node)}
           {expanded && node.children.map((child, index) => {
diff --git a/frontend/src/pages/wiki/index.js b/frontend/src/pages/wiki/index.js
index e6e0677a04..0afdb83c4f 100644
--- a/frontend/src/pages/wiki/index.js
+++ b/frontend/src/pages/wiki/index.js
@@ -84,7 +84,7 @@ class Wiki extends Component {
 
     if (isDir === 'False') {
       // this.showFile(initialPath);
-      this.setState({path: initialPath});
+      this.setState({ path: initialPath });
       return;
     }
 
@@ -102,9 +102,9 @@ class Wiki extends Component {
     }
 
     if (isDir === 'None') {
-      this.setState({pathExist: false});
+      this.setState({ pathExist: false });
       let fileUrl = siteRoot + 'published/' + slug + Utils.encodePath(initialPath);
-      window.history.pushState({url: fileUrl, path: initialPath}, initialPath, fileUrl);
+      window.history.pushState({ url: fileUrl, path: initialPath }, initialPath, fileUrl);
     }
   };
 
@@ -122,7 +122,7 @@ class Wiki extends Component {
         });
       });
     }).catch((error) => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
@@ -132,7 +132,7 @@ class Wiki extends Component {
 
     // update location url
     let fileUrl = siteRoot + 'published/' + slug + Utils.encodePath(dirPath);
-    window.history.pushState({url: fileUrl, path: dirPath}, dirPath, fileUrl);
+    window.history.pushState({ url: fileUrl, path: dirPath }, dirPath, fileUrl);
   };
 
   showFile = (filePath) => {
@@ -157,14 +157,14 @@ class Wiki extends Component {
     const hash = window.location.hash;
     let fileUrl = siteRoot + 'published/' + slug + Utils.encodePath(filePath) + hash;
     if (filePath === '/home.md') {
-      window.history.replaceState({url: fileUrl, path: filePath}, filePath, fileUrl);
+      window.history.replaceState({ url: fileUrl, path: filePath }, filePath, fileUrl);
     } else {
-      window.history.pushState({url: fileUrl, path: filePath}, filePath, fileUrl);
+      window.history.pushState({ url: fileUrl, path: filePath }, filePath, fileUrl);
     }
   };
 
   loadDirentList = (dirPath) => {
-    this.setState({isDataLoading: true});
+    this.setState({ isDataLoading: true });
     seafileAPI.listWikiDir(wikiId, dirPath).then(res => {
       let direntList = res.data.dirent_list.map(item => {
         let dirent = new Dirent(item);
@@ -187,7 +187,7 @@ class Wiki extends Component {
         isDataLoading: false,
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
@@ -207,7 +207,7 @@ class Wiki extends Component {
     } else {
       let parentNode = tree.getNodeByPath(node.parentNode.path);
       parentNode.isExpanded = true;
-      this.setState({treeData: tree, currentNode: node}); //tree
+      this.setState({ treeData: tree, currentNode: node }); // tree
     }
   };
 
@@ -240,12 +240,12 @@ class Wiki extends Component {
         treeData: tree
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
   removePythonWrapper = () => {
-    if (this.pythonWrapper)  {
+    if (this.pythonWrapper) {
       document.body.removeChild(this.pythonWrapper);
       this.pythonWrapper = null;
     }
@@ -323,7 +323,7 @@ class Wiki extends Component {
       let tree = this.state.treeData.clone();
       let node = tree.getNodeByPath(item.path);
       treeHelper.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     } else {
       this.loadNodeAndParentsByPath(path);
     }
@@ -343,27 +343,27 @@ class Wiki extends Component {
   };
 
   onMenuClick = () => {
-    this.setState({closeSideBar: !this.state.closeSideBar});
+    this.setState({ closeSideBar: !this.state.closeSideBar });
   };
 
   onMainNavBarClick = (nodePath) => {
     let tree = this.state.treeData.clone();
     let node = tree.getNodeByPath(nodePath);
     tree.expandNode(node);
-    this.setState({treeData: tree, currentNode: node});
+    this.setState({ treeData: tree, currentNode: node });
     this.showDir(node.path);
   };
 
   onDirentClick = (dirent) => {
     let direntPath = Utils.joinPath(this.state.path, dirent.name);
-    if (dirent.isDir()) {  // is dir
+    if (dirent.isDir()) { // is dir
       this.loadTreeNodeByPath(direntPath);
       this.showDir(direntPath);
-    } else {  // is file
+    } else { // is file
       if (Utils.isMarkdownFile(direntPath)) {
         this.showFile(direntPath);
       } else {
-        const w=window.open('about:blank');
+        const w = window.open('about:blank');
         const url = siteRoot + 'd/' + sharedToken + '/files/?p=' + Utils.encodePath(direntPath);
         w.location.href = url;
       }
@@ -371,12 +371,12 @@ class Wiki extends Component {
   };
 
   onCloseSide = () => {
-    this.setState({closeSideBar: !this.state.closeSideBar});
+    this.setState({ closeSideBar: !this.state.closeSideBar });
   };
 
   onNodeClick = (node) => {
     if (!this.state.pathExist) {
-      this.setState({pathExist: true});
+      this.setState({ pathExist: true });
     }
 
     if (node.object.isDir()) {
@@ -386,18 +386,18 @@ class Wiki extends Component {
         seafileAPI.listWikiDir(wikiId, node.path).then(res => {
           this.addResponseListToNode(res.data.dirent_list, node);
           tree.collapseNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         });
       }
       if (node.path === this.state.path) {
         if (node.isExpanded) {
           let tree = treeHelper.collapseNode(this.state.treeData, node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         } else {
           let tree = this.state.treeData.clone();
           node = tree.getNodeByPath(node.path);
           tree.expandNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         }
       }
     }
@@ -406,7 +406,7 @@ class Wiki extends Component {
       return;
     }
 
-    if (node.object.isDir()) {  // isDir
+    if (node.object.isDir()) { // isDir
       this.showDir(node.path);
     } else {
       if (Utils.isMarkdownFile(node.path) || Utils.isSdocFile(node.path)) {
@@ -424,7 +424,7 @@ class Wiki extends Component {
 
   onNodeCollapse = (node) => {
     let tree = treeHelper.collapseNode(this.state.treeData, node);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   onNodeExpanded = (node) => {
@@ -433,11 +433,11 @@ class Wiki extends Component {
     if (!node.isLoaded) {
       seafileAPI.listWikiDir(wikiId, node.path).then(res => {
         this.addResponseListToNode(res.data.dirent_list, node);
-        this.setState({treeData: tree});
+        this.setState({ treeData: tree });
       });
     } else {
       tree.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     }
   };
 
@@ -457,7 +457,7 @@ class Wiki extends Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
@@ -471,7 +471,7 @@ class Wiki extends Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
diff --git a/frontend/src/pages/wiki/side-panel.js b/frontend/src/pages/wiki/side-panel.js
index 3388a0c90c..3763a4cf6e 100644
--- a/frontend/src/pages/wiki/side-panel.js
+++ b/frontend/src/pages/wiki/side-panel.js
@@ -30,7 +30,7 @@ class SidePanel extends Component {
   renderIndexView = () => {
     return (
       <div className="wiki-pages-container">
-        <div style={{marginTop: '2px'}}></div>
+        <div style={{ marginTop: '2px' }}></div>
         <IndexMdViewer
           indexContent={this.props.indexContent}
           onLinkClick={this.props.onLinkClick}
@@ -58,7 +58,7 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
+      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}>
         <div className="side-panel-top panel-top">
           <Logo onCloseSidePanel={this.props.onCloseSide} />
         </div>
diff --git a/frontend/src/pages/wiki/utils/generate-navs.js b/frontend/src/pages/wiki/utils/generate-navs.js
index b58dd0470f..db721686d6 100644
--- a/frontend/src/pages/wiki/utils/generate-navs.js
+++ b/frontend/src/pages/wiki/utils/generate-navs.js
@@ -87,5 +87,3 @@ export const generateNavItems = (slateNodes) => {
   return treeRoot;
 };
 
-
-
diff --git a/frontend/src/pages/wiki2/common/nav-item-icon.js b/frontend/src/pages/wiki2/common/nav-item-icon.js
index f80f0fa3aa..68acbdb7c0 100644
--- a/frontend/src/pages/wiki2/common/nav-item-icon.js
+++ b/frontend/src/pages/wiki2/common/nav-item-icon.js
@@ -7,7 +7,7 @@ import '../css/nav-item-icon.css';
 
 function NavItemIcon({ symbol, className, disable, onClick }) {
   return (
-    <div onClick={onClick} className={classNames('nav-item-icon', {'nav-item-icon-disable': disable})}>
+    <div onClick={onClick} className={classNames('nav-item-icon', { 'nav-item-icon-disable': disable })}>
       <Icon symbol={symbol} className={className} />
     </div>
   );
diff --git a/frontend/src/pages/wiki2/side-panel.js b/frontend/src/pages/wiki2/side-panel.js
index 6d9abe3e94..2c3c926019 100644
--- a/frontend/src/pages/wiki2/side-panel.js
+++ b/frontend/src/pages/wiki2/side-panel.js
@@ -50,7 +50,7 @@ class SidePanel extends Component {
     }
   };
 
-  addPageInside = async ({ parentPageId, page_id, name, icon, path, docUuid, successCallback, errorCallback}) => {
+  addPageInside = async ({ parentPageId, page_id, name, icon, path, docUuid, successCallback, errorCallback }) => {
     const newPage = new Page({ id: page_id, name, icon, path, docUuid });
     this.addPage(newPage, parentPageId, successCallback, errorCallback);
   };
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
index 77a88acf3e..4f593bbddb 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
@@ -51,7 +51,7 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
     <>
       <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
-        <div className={classNames('wiki-page-cover__controller', {show: isShowCoverController})}>
+        <div className={classNames('wiki-page-cover__controller', { show: isShowCoverController })}>
           <div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
         </div>
       </div>
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-icon.js b/frontend/src/pages/wiki2/wiki-right-header/page-icon.js
index fe512a014e..2edfcd1062 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-icon.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-icon.js
@@ -22,7 +22,7 @@ const PageIcon = ({ currentPageConfig, onUpdatePage }) => {
 
   return (
     <>
-      <div className={classNames('wiki-page-icon-wrapper', {'no-page-cover': currentPageConfig.cover_img_url})}>
+      <div className={classNames('wiki-page-icon-wrapper', { 'no-page-cover': currentPageConfig.cover_img_url })}>
         <div className='wiki-page-icon-container' id='wiki-page-icon-container'>
           <span>{currentPageConfig.icon}</span>
         </div>
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title.js b/frontend/src/pages/wiki2/wiki-right-header/page-title.js
index 83e8988126..ce530f6ef7 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-title.js
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-title.js
@@ -102,7 +102,7 @@ const PageTitle = ({ currentPageConfig, onUpdatePage }) => {
       {currentPageConfig.icon && (
         <PageIcon currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
       )}
-      <div className={classnames('wiki-page-controller', {'show': isShowController})}>
+      <div className={classnames('wiki-page-controller', { 'show': isShowController })}>
         {!currentPageConfig.icon && (
           <div className='wiki-page-controller-item' onClick={handleAddIcon}>
             <i className='sf3-font sf3-font-icon'></i>
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index ad838d348c..3617f1a882 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -110,7 +110,7 @@ class Wikis extends Component {
         let wikis = this.state.wikis.filter(item => {
           return item.name !== wiki.name;
         });
-        this.setState({wikis: wikis});
+        this.setState({ wikis: wikis });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
@@ -122,7 +122,7 @@ class Wikis extends Component {
         let wikis = this.state.wikis.filter(item => {
           return item.name !== wiki.name;
         });
-        this.setState({wikis: wikis});
+        this.setState({ wikis: wikis });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
@@ -141,7 +141,7 @@ class Wikis extends Component {
           }
           return item;
         });
-        this.setState({wikis: wikis});
+        this.setState({ wikis: wikis });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
@@ -156,7 +156,7 @@ class Wikis extends Component {
           }
           return item;
         });
-        this.setState({wikis: wikis});
+        this.setState({ wikis: wikis });
       }).catch((error) => {
         if (error.response) {
           let errorMsg = error.response.data.error_msg;
diff --git a/frontend/src/repo-folder-trash.js b/frontend/src/repo-folder-trash.js
index 317246bc6a..4cf9c22786 100644
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -74,7 +74,7 @@ class RepoFolderTrash extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
@@ -167,7 +167,7 @@ class RepoFolderTrash extends React.Component {
           if (index > 0 && index != pathList.length - 1) {
             return (
               <React.Fragment key={index}>
-                <a className="text-truncate" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
+                <a className="text-truncate" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index + 1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
                 <span className="mx-1">/</span>
               </React.Fragment>
             );
@@ -198,7 +198,7 @@ class RepoFolderTrash extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2 dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></h2>
+                <h2 dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role={gettext('Back')}>
                   <span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span>
                 </a>
@@ -236,12 +236,12 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
     this.theadData = [
-      {width: '5%', text: ''},
-      {width: '20%', text: gettext('Name')},
-      {width: '40%', text: gettext('Original path')},
-      {width: '12%', text: gettext('Delete Time')},
-      {width: '13%', text: gettext('Size')},
-      {width: '10%', text: ''}
+      { width: '5%', text: '' },
+      { width: '20%', text: gettext('Name') },
+      { width: '40%', text: gettext('Original path') },
+      { width: '12%', text: gettext('Delete Time') },
+      { width: '13%', text: gettext('Size') },
+      { width: '10%', text: '' }
     ];
   }
 
@@ -307,11 +307,11 @@ class Item extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   restoreItem = (e) => {
@@ -361,7 +361,7 @@ class Item extends React.Component {
         <td title={moment(item.deleted_time).format('LLLL')}>{moment(item.deleted_time).format('YYYY-MM-DD')}</td>
         <td></td>
         <td>
-          <a href="#" className={isIconShown ? '': 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
+          <a href="#" className={isIconShown ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
         </td>
       </tr>
     ) : (
@@ -372,7 +372,7 @@ class Item extends React.Component {
         <td title={moment(item.deleted_time).format('LLLL')}>{moment(item.deleted_time).format('YYYY-MM-DD')}</td>
         <td>{Utils.bytesToSize(item.size)}</td>
         <td>
-          <a href="#" className={isIconShown ? '': 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
+          <a href="#" className={isIconShown ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
         </td>
       </tr>
     );
@@ -394,11 +394,11 @@ class FolderItem extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   renderFolder = (e) => {
diff --git a/frontend/src/repo-history.js b/frontend/src/repo-history.js
index fdcce70006..3897399820 100644
--- a/frontend/src/repo-history.js
+++ b/frontend/src/repo-history.js
@@ -79,7 +79,7 @@ class RepoHistory extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
@@ -108,7 +108,7 @@ class RepoHistory extends React.Component {
           <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
             <div className="row">
               <div className="col-md-10 offset-md-1">
-                <h2 dangerouslySetInnerHTML={{__html: title}} className="d-flex text-nowrap"></h2>
+                <h2 dangerouslySetInnerHTML={{ __html: title }} className="d-flex text-nowrap"></h2>
                 <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role="button" aria-label={gettext('Back')}>
                   <span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span>
                 </a>
@@ -137,18 +137,18 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
     this.theadData = showLabel ? [
-      {width: '43%', text: gettext('Description')},
-      {width: '12%', text: gettext('Time')},
-      {width: '9%', text: gettext('Modifier')},
-      {width: '12%', text: `${gettext('Device')} / ${gettext('Version')}`},
-      {width: '12%', text: gettext('Labels')},
-      {width: '12%', text: ''}
+      { width: '43%', text: gettext('Description') },
+      { width: '12%', text: gettext('Time') },
+      { width: '9%', text: gettext('Modifier') },
+      { width: '12%', text: `${gettext('Device')} / ${gettext('Version')}` },
+      { width: '12%', text: gettext('Labels') },
+      { width: '12%', text: '' }
     ] : [
-      {width: '43%', text: gettext('Description')},
-      {width: '15%', text: gettext('Time')},
-      {width: '15%', text: gettext('Modifier')},
-      {width: '15%', text: `${gettext('Device')} / ${gettext('Version')}`},
-      {width: '12%', text: ''}
+      { width: '43%', text: gettext('Description') },
+      { width: '15%', text: gettext('Time') },
+      { width: '15%', text: gettext('Modifier') },
+      { width: '15%', text: `${gettext('Device')} / ${gettext('Version')}` },
+      { width: '12%', text: '' }
     ];
   }
 
@@ -229,11 +229,11 @@ class Item extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   showCommitDetails = (e) => {
@@ -303,15 +303,15 @@ class Item extends React.Component {
               return <span key={index} className="commit-label">{item}</span>;
             })}
             {userPerm == 'rw' &&
-            <a href="#" role="button" className={`attr-action-icon sf3-font sf3-font-rename ${isIconShown ? '': 'invisible'}`} title={gettext('Edit')} aria-label={gettext('Edit')} onClick={this.editLabel}></a>
+            <a href="#" role="button" className={`attr-action-icon sf3-font sf3-font-rename ${isIconShown ? '' : 'invisible'}`} title={gettext('Edit')} aria-label={gettext('Edit')} onClick={this.editLabel}></a>
             }
           </td>
           }
           <td>
             {userPerm == 'rw' && (
               item.isFirstCommit ?
-                <span className={isIconShown ? '': 'invisible'}>{gettext('Current Version')}</span> :
-                <a href={`${siteRoot}repo/${repoID}/snapshot/?commit_id=${item.commit_id}`} className={isIconShown ? '': 'invisible'}>{gettext('View Snapshot')}</a>
+                <span className={isIconShown ? '' : 'invisible'}>{gettext('Current Version')}</span> :
+                <a href={`${siteRoot}repo/${repoID}/snapshot/?commit_id=${item.commit_id}`} className={isIconShown ? '' : 'invisible'}>{gettext('View Snapshot')}</a>
             )}
           </td>
         </tr>
diff --git a/frontend/src/repo-snapshot.js b/frontend/src/repo-snapshot.js
index beed988a01..70a4c40e6b 100644
--- a/frontend/src/repo-snapshot.js
+++ b/frontend/src/repo-snapshot.js
@@ -48,7 +48,7 @@ class RepoSnapshot extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
@@ -102,7 +102,7 @@ class RepoSnapshot extends React.Component {
           if (index > 0 && index != pathList.length - 1) {
             return (
               <React.Fragment key={index}>
-                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))} className="text-truncate" title={pathList[index]}>{pathList[index]}</a>
+                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index + 1).join('/'))} className="text-truncate" title={pathList[index]}>{pathList[index]}</a>
                 <span className="mx-1">/</span>
               </React.Fragment>
             );
@@ -144,7 +144,7 @@ class RepoSnapshot extends React.Component {
             <div className="row">
               <div className="col-md-10 offset-md-1">
                 <h2>
-                  <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
+                  <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
                   <span className="heading-commit-time ml-1">({commitTime})</span>
                 </h2>
                 <a href="#" className="go-back" title={gettext('Back')} role="button" aria-label={gettext('Back')} onClick={this.goBack}>
@@ -160,7 +160,7 @@ class RepoSnapshot extends React.Component {
                           <a href={`${siteRoot}profile/${encodeURIComponent(authorName)}/`}>{authorNickName}</a>
                         </React.Fragment>
                       ) : <span>{gettext('Unknown')}</span>}
-                      <p className="m-0 ml-2" dangerouslySetInnerHTML={{__html: commitRelativeTime}}></p>
+                      <p className="m-0 ml-2" dangerouslySetInnerHTML={{ __html: commitRelativeTime }}></p>
                     </div>
                   </div>
                 )}
@@ -196,10 +196,10 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
     this.theadData = [
-      {width: '5%', text: ''},
-      {width: '55%', text: gettext('Name')},
-      {width: '20%', text: gettext('Size')},
-      {width: '20%', text: ''}
+      { width: '5%', text: '' },
+      { width: '55%', text: gettext('Name') },
+      { width: '20%', text: gettext('Size') },
+      { width: '20%', text: '' }
     ];
   }
 
@@ -254,11 +254,11 @@ class FolderItem extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   restoreItem = (e) => {
@@ -267,7 +267,7 @@ class FolderItem extends React.Component {
     const item = this.props.item;
     const path = Utils.joinPath(this.props.folderPath, item.name);
     const request = item.type == 'dir' ?
-      seafileAPI.revertFolder(repoID, path, commitID):
+      seafileAPI.revertFolder(repoID, path, commitID) :
       seafileAPI.revertFile(repoID, path, commitID);
     request.then((res) => {
       toaster.success(gettext('Successfully restored 1 item.'));
@@ -296,7 +296,7 @@ class FolderItem extends React.Component {
         <td><a href="#" onClick={this.renderFolder}>{item.name}</a></td>
         <td></td>
         <td>
-          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '': 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
+          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
         </td>
       </tr>
     ) : (
@@ -305,8 +305,8 @@ class FolderItem extends React.Component {
         <td><a href={`${siteRoot}repo/${repoID}/snapshot/files/?obj_id=${item.obj_id}&commit_id=${commitID}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} target="_blank" rel="noreferrer">{item.name}</a></td>
         <td>{Utils.bytesToSize(item.size)}</td>
         <td>
-          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '': 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
-          <a href={`${siteRoot}repo/${repoID}/${item.obj_id}/download/?file_name=${encodeURIComponent(item.name)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} className={`action-icon sf2-icon-download ${isIconShown ? '': 'invisible'}`} title={gettext('Download')}></a>
+          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
+          <a href={`${siteRoot}repo/${repoID}/${item.obj_id}/download/?file_name=${encodeURIComponent(item.name)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} className={`action-icon sf2-icon-download ${isIconShown ? '' : 'invisible'}`} title={gettext('Download')}></a>
         </td>
       </tr>
     );
diff --git a/frontend/src/settings.js b/frontend/src/settings.js
index 3334af1c85..88c17dc451 100644
--- a/frontend/src/settings.js
+++ b/frontend/src/settings.js
@@ -48,17 +48,17 @@ class Settings extends React.Component {
   constructor(props) {
     super(props);
     this.sideNavItems = [
-      {show: true, href: '#user-basic-info', text: gettext('Profile')},
-      {show: canUpdatePassword, href: '#update-user-passwd', text: gettext('Password')},
-      {show: enableGetAuthToken, href: '#get-auth-token', text: gettext('Web API Auth Token')},
-      {show: enableWebdavSecret, href: '#update-webdav-passwd', text: gettext('WebDav Password')},
-      {show: enableAddressBook, href: '#list-in-address-book', text: gettext('Global Address Book')},
-      {show: true, href: '#lang-setting', text: gettext('Language')},
-      {show: isPro, href: '#email-notice', text: gettext('Email Notification')},
-      {show: twoFactorAuthEnabled, href: '#two-factor-auth', text: gettext('Two-Factor Authentication')},
-      {show: (enableWechatWork || enableDingtalk || enableADFS || (enableMultiADFS || isOrgContext)), href: '#social-auth', text: gettext('Social Login')},
-      {show: true, href: '#linked-devices', text: gettext('Linked Devices')},
-      {show: enableDeleteAccount, href: '#del-account', text: gettext('Delete Account')},
+      { show: true, href: '#user-basic-info', text: gettext('Profile') },
+      { show: canUpdatePassword, href: '#update-user-passwd', text: gettext('Password') },
+      { show: enableGetAuthToken, href: '#get-auth-token', text: gettext('Web API Auth Token') },
+      { show: enableWebdavSecret, href: '#update-webdav-passwd', text: gettext('WebDav Password') },
+      { show: enableAddressBook, href: '#list-in-address-book', text: gettext('Global Address Book') },
+      { show: true, href: '#lang-setting', text: gettext('Language') },
+      { show: isPro, href: '#email-notice', text: gettext('Email Notification') },
+      { show: twoFactorAuthEnabled, href: '#two-factor-auth', text: gettext('Two-Factor Authentication') },
+      { show: (enableWechatWork || enableDingtalk || enableADFS || (enableMultiADFS || isOrgContext)), href: '#social-auth', text: gettext('Social Login') },
+      { show: true, href: '#linked-devices', text: gettext('Linked Devices') },
+      { show: enableDeleteAccount, href: '#del-account', text: gettext('Delete Account') },
     ];
 
     this.state = {
@@ -97,7 +97,7 @@ class Settings extends React.Component {
     });
     if (scrolled.length) {
       this.setState({
-        curItemID: scrolled[scrolled.length -1].href.substr(1)
+        curItemID: scrolled[scrolled.length - 1].href.substr(1)
       });
     }
   };
diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
index 09e33b623d..41db7c0dad 100644
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@@ -121,7 +121,7 @@ class SharedDirView extends React.Component {
 
     const len = items.length;
     const _this = this;
-    let getThumbnail = function(i) {
+    let getThumbnail = function (i) {
       const curItem = items[i];
       seafileAPI.getShareLinkThumbnail(token, curItem.file_path, thumbnailSize).then((res) => {
         curItem.encoded_thumbnail_src = res.data.encoded_thumbnail_src;
@@ -231,10 +231,10 @@ class SharedDirView extends React.Component {
         return;
       }
       // init state: total is 0
-      let asyncOperationProgress = !data.total ? 0 : parseInt((data.done/data.total * 100).toFixed(2));
+      let asyncOperationProgress = !data.total ? 0 : parseInt((data.done / data.total * 100).toFixed(2));
 
       this.getAsyncCopyMoveProgress();
-      this.setState({asyncOperationProgress: asyncOperationProgress});
+      this.setState({ asyncOperationProgress: asyncOperationProgress });
     } catch (error) {
       this.setState({
         asyncOperationProgress: 0,
@@ -282,7 +282,7 @@ class SharedDirView extends React.Component {
       });
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
     });
   };
 
@@ -407,7 +407,7 @@ class SharedDirView extends React.Component {
     // put the new file as the first file
     let items = Array.from(this.state.items);
     items.splice(folderItems.length, 0, newItem);
-    this.setState({items: items});
+    this.setState({ items: items });
     seafileAPI.shareLinksUploadDone(token, Utils.joinPath(dirPath, name));
   };
 
@@ -420,9 +420,9 @@ class SharedDirView extends React.Component {
           usedRepoTags.push(usedRepoTag);
         }
       });
-      this.setState({usedRepoTags: usedRepoTags});
+      this.setState({ usedRepoTags: usedRepoTags });
       if (usedRepoTags.length != 0 && relativePath == '/') {
-        this.setState({isRepoInfoBarShow: true});
+        this.setState({ isRepoInfoBarShow: true });
       }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -456,20 +456,23 @@ class SharedDirView extends React.Component {
                       className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`}
                       title={gettext('List')}
                       aria-label={gettext('List')}
-                    ></a>
+                    >
+                    </a>
                     <a
                       href={`?p=${encodeURIComponent(relativePath)}&mode=grid`}
                       className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`}
                       title={gettext('Grid')}
                       aria-label={gettext('Grid')}
-                    ></a>
+                    >
+                    </a>
                   </div>
                   }
                   {canUpload && (
                     <Button disabled={noQuota}
                       title={noQuota ? gettext('The owner of this library has run out of space.') : ''}
                       onClick={this.onUploadFile} className="ml-2 shared-dir-op-btn shared-dir-upload-btn"
-                    >{gettext('Upload')}</Button>
+                    >{gettext('Upload')}
+                    </Button>
                   )}
                   {showDownloadIcon &&
                   <Fragment>
@@ -709,15 +712,15 @@ class Item extends React.Component {
   }
 
   toggleOpMenu = () => {
-    this.setState({isOpMenuOpen: !this.state.isOpMenuOpen});
+    this.setState({ isOpMenuOpen: !this.state.isOpMenuOpen });
   };
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   zipDownloadFolder = (e) => {
@@ -828,7 +831,7 @@ class Item extends React.Component {
                   {item.file_tags.map((fileTag, index) => {
                     let length = item.file_tags.length;
                     return (
-                      <span className="file-tag" key={fileTag.file_tag_id} style={{zIndex:length - index, backgroundColor:fileTag.tag_color}}></span>
+                      <span className="file-tag" key={fileTag.file_tag_id} style={{ zIndex: length - index, backgroundColor: fileTag.tag_color }}></span>
                     );
                   })}
                 </div>
@@ -908,11 +911,11 @@ class GridItem extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   zipDownloadFolder = (e) => {
diff --git a/frontend/src/shared-file-view-document.js b/frontend/src/shared-file-view-document.js
index 90c8a6ac4a..04979b0ba7 100644
--- a/frontend/src/shared-file-view-document.js
+++ b/frontend/src/shared-file-view-document.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 import { seafileAPI } from './utils/seafile-api';
-import { gettext, mediaUrl} from './utils/constants';
+import { gettext, mediaUrl } from './utils/constants';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import Loading from './components/loading';
diff --git a/frontend/src/shared-file-view-markdown.js b/frontend/src/shared-file-view-markdown.js
index 57c276407f..9b2f73d6ca 100644
--- a/frontend/src/shared-file-view-markdown.js
+++ b/frontend/src/shared-file-view-markdown.js
@@ -43,7 +43,7 @@ class FileContent extends React.Component {
     if (innerNode.type == 'image') {
       let imageUrl = innerNode.data.src;
 
-      const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
+      const re = new RegExp(serviceURL + '/lib/' + repoID + '/file.*raw=1');
 
       // different repo
       if (!re.test(imageUrl)) {
diff --git a/frontend/src/shared-file-view-sdoc.js b/frontend/src/shared-file-view-sdoc.js
index 6c3bcd20b5..616cd7407a 100644
--- a/frontend/src/shared-file-view-sdoc.js
+++ b/frontend/src/shared-file-view-sdoc.js
@@ -16,7 +16,7 @@ const {
 } = window.shared.pageOptions;
 
 // share permission of this sdoc
-const sharePermission = {'can_edit': canEdit, 'can_download': canDownload, 'can_upload': false};
+const sharePermission = { 'can_edit': canEdit, 'can_download': canDownload, 'can_upload': false };
 const sharePermissionStr = Utils.getShareLinkPermissionStr(sharePermission);
 const sharePermissionText = Utils.getShareLinkPermissionObject(sharePermissionStr).text;
 
@@ -39,7 +39,7 @@ window.seafile = {
   assetsUrl,
 };
 
-(function() {
+(function () {
   const fileIcon = Utils.getFileIconUrl(docName, 192);
   document.getElementById('favicon').href = fileIcon;
 })();
diff --git a/frontend/src/tc-accept.js b/frontend/src/tc-accept.js
index 89cf87af70..83e7461a8a 100644
--- a/frontend/src/tc-accept.js
+++ b/frontend/src/tc-accept.js
@@ -30,14 +30,14 @@ class TCAccept extends React.Component {
         </div>
         <div className="o-auto">
           <div className="py-4 px-4 my-6 mx-auto content">
-            <h2 dangerouslySetInnerHTML={{__html: termsName}}></h2>
+            <h2 dangerouslySetInnerHTML={{ __html: termsName }}></h2>
             <div className="article">
               <TermsPreviewWidget content={termsText} />
             </div>
             <form action={formAction} method="post">
               <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-              <div dangerouslySetInnerHTML={{__html: formTerms}}></div>
-              <div dangerouslySetInnerHTML={{__html: formReturnTo}}></div>
+              <div dangerouslySetInnerHTML={{ __html: formTerms }}></div>
+              <div dangerouslySetInnerHTML={{ __html: formReturnTo }}></div>
               <Button type="submit">{gettext('Accept')}</Button>
               <a href={logoutURL} className="btn btn-secondary ml-2">{gettext('Cancel')}</a>
             </form>
diff --git a/frontend/src/tc-view.js b/frontend/src/tc-view.js
index 887150e505..a7f75d4778 100644
--- a/frontend/src/tc-view.js
+++ b/frontend/src/tc-view.js
@@ -22,7 +22,7 @@ class TCView extends React.Component {
         </div>
         <div className="o-auto">
           <div className="py-4 px-4 my-6 mx-auto content">
-            <h2 dangerouslySetInnerHTML={{__html: termsName}}></h2>
+            <h2 dangerouslySetInnerHTML={{ __html: termsName }}></h2>
             <div className="article">
               <TermsPreviewWidget content={termsText} />
             </div>
diff --git a/frontend/src/user-notifications.js b/frontend/src/user-notifications.js
index 3dda488d8a..7fc2959cc4 100644
--- a/frontend/src/user-notifications.js
+++ b/frontend/src/user-notifications.js
@@ -88,11 +88,11 @@ class UserNotificationsDialog extends React.Component {
   };
 
   toggleDropDownMenu = () => {
-    this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+    this.setState({ isItemMenuShow: !this.state.isItemMenuShow });
   };
 
   onHandleScroll = () => {
-    if (!this.state.hasNextPage || this.state.isLoading ||!this.tableRef) {
+    if (!this.state.hasNextPage || this.state.isLoading || !this.tableRef) {
       return;
     }
     if (this.notificationTableRef.offsetHeight + this.notificationTableRef.scrollTop + 1 >= this.tableRef.offsetHeight) {
@@ -126,13 +126,13 @@ class UserNotificationsDialog extends React.Component {
     else {
       const isDesktop = Utils.isDesktop();
       const theadData = isDesktop ? [
-        {width: '7%', text: ''},
-        {width: '73%', text: gettext('Message')},
-        {width: '20%', text: gettext('Time')}
+        { width: '7%', text: '' },
+        { width: '73%', text: gettext('Message') },
+        { width: '20%', text: gettext('Time') }
       ] : [
-        {width: '15%', text: ''},
-        {width: '52%', text: gettext('Message')},
-        {width: '33%', text: gettext('Time')}
+        { width: '15%', text: '' },
+        { width: '52%', text: gettext('Message') },
+        { width: '33%', text: gettext('Time') }
       ];
       content = (
         <table className="table-hover" ref={ref => this.tableRef = ref}>
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 4b14d91279..7502a9823d 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -1,6 +1,6 @@
 export const defaultContentForSDoc = {
   version: 0,
-  children: [{id: 'aaaa', type: 'paragraph', children: [{ text: '' }]}]
+  children: [{ id: 'aaaa', type: 'paragraph', children: [{ text: '' }] }]
 };
 
 export const dirPath = '/';
@@ -11,7 +11,7 @@ export const internalFilePath = '/_Internal/seatable-integration.json';
 export const siteRoot = window.app.config.siteRoot;
 export const loginUrl = window.app.config.loginUrl;
 export const avatarInfo = window.app.config.avatarInfo;
-export const logoPath =  window.app.config.logoPath;
+export const logoPath = window.app.config.logoPath;
 export const mediaUrl = window.app.config.mediaUrl;
 export const siteTitle = window.app.config.siteTitle;
 export const siteName = window.app.config.siteName;
@@ -30,7 +30,7 @@ export const faviconPath = window.app.config.faviconPath;
 export const loginBGPath = window.app.config.loginBGPath;
 export const enableRepoAutoDel = window.app.config.enableRepoAutoDel;
 
-//pageOptions
+// pageOptions
 export const trashReposExpireDays = window.app.pageOptions.trashReposExpireDays;
 export const seafileCollabServer = window.app.pageOptions.seafileCollabServer;
 export const name = window.app.pageOptions.name;
@@ -116,7 +116,7 @@ export const initialPath = window.wiki ? window.wiki.config.initial_path : '';
 export const permission = window.wiki ? window.wiki.config.permission === 'True' : '';
 export const isDir = window.wiki ? window.wiki.config.isDir : '';
 export const serviceUrl = window.wiki ? window.wiki.config.serviceUrl : '';
-export const isPublicWiki = window.wiki ? window.wiki.config.isPublicWiki === 'True': '';
+export const isPublicWiki = window.wiki ? window.wiki.config.isPublicWiki === 'True' : '';
 export const sharedToken = window.wiki ? window.wiki.config.sharedToken : '';
 export const sharedType = window.wiki ? window.wiki.config.sharedType : '';
 export const hasIndex = window.wiki ? window.wiki.config.hasIndex : '';
diff --git a/frontend/src/utils/date-format-utils.js b/frontend/src/utils/date-format-utils.js
index f758667cd8..ec821736ce 100644
--- a/frontend/src/utils/date-format-utils.js
+++ b/frontend/src/utils/date-format-utils.js
@@ -9,7 +9,7 @@ const csCZ = require('@seafile/seafile-calendar/lib/locale/cs_CZ');
 const ruRU = require('@seafile/seafile-calendar/lib/locale/ru_RU');
 
 function translateCalendar() {
-  const locale = window.app.config ?  window.app.config.lang : 'en';
+  const locale = window.app.config ? window.app.config.lang : 'en';
   let language;
   switch (locale) {
     case 'zh-cn':
diff --git a/frontend/src/utils/editor-utilities.js b/frontend/src/utils/editor-utilities.js
index d176c8add6..7755139651 100644
--- a/frontend/src/utils/editor-utilities.js
+++ b/frontend/src/utils/editor-utilities.js
@@ -4,7 +4,7 @@ import { seafileAPI } from './seafile-api';
 class EditorUtilities {
 
   listRepoDir() {
-    return seafileAPI.listDir(repoID, '/',{recursive: true}).then(items => {
+    return seafileAPI.listDir(repoID, '/', { recursive: true }).then(items => {
       const files = items.data.dirent_list.map(item => {
         return {
           name: item.name,
@@ -49,8 +49,8 @@ class EditorUtilities {
     return seafileAPI.getSource();
   }
 
-  searchFiles(queryData,cancelToken) {
-    return seafileAPI.searchFiles(queryData,cancelToken);
+  searchFiles(queryData, cancelToken) {
+    return seafileAPI.searchFiles(queryData, cancelToken);
   }
 
   getAccountInfo() {
diff --git a/frontend/src/utils/extra-attributes.js b/frontend/src/utils/extra-attributes.js
index af1de17f4b..44fc77798d 100644
--- a/frontend/src/utils/extra-attributes.js
+++ b/frontend/src/utils/extra-attributes.js
@@ -32,7 +32,7 @@ export const getDateDisplayString = (value, format) => {
   const date = moment(validValue);
 
   if (!date.isValid()) return value;
-  switch(format) {
+  switch (format) {
     case 'D/M/YYYY':
     case 'DD/MM/YYYY': {
       const formatValue = date.format('YYYY-MM-DD');
@@ -192,7 +192,7 @@ const _toThousands = (num, isCurrency, formatData) => {
   }
   decimalValue = decimalValue.replace(/./, decimalString);
   // format integer value
-  let result = [], counter = 0;
+  let result = []; let counter = 0;
   integer = Math.abs(integer).toString();
   for (var i = integer.length - 1; i >= 0; i--) {
     counter++;
@@ -249,7 +249,7 @@ export const getNumberDisplayString = (value, formatData) => {
   }
   if (isNaN(value) || value === Infinity || value === -Infinity) return value + '';
   const { format = DEFAULT_NUMBER_FORMAT } = formatData || {};
-  switch(format) {
+  switch (format) {
     case 'number': {
       return _toThousands(value, false, formatData);
     }
@@ -285,9 +285,9 @@ export const replaceNumberNotAllowInput = (value, format = DEFAULT_NUMBER_FORMAT
     return '';
   }
   value = value.replace(/。/g, '.');
-  switch(format) {
+  switch (format) {
     case 'number': {
-      return value.replace(/[^.-\d,]/g,'');
+      return value.replace(/[^.-\d,]/g, '');
     }
     case 'percent': {
       return value.replace(/[^.-\d,%]/g, '');
@@ -311,7 +311,7 @@ export const replaceNumberNotAllowInput = (value, format = DEFAULT_NUMBER_FORMAT
   }
 };
 
-export const getFloatNumber = (data, format) =>  {
+export const getFloatNumber = (data, format) => {
   if (!data && data !== 0) {
     return null;
   }
diff --git a/frontend/src/utils/markdown-utils.js b/frontend/src/utils/markdown-utils.js
index 8141550b84..9d5808a09f 100644
--- a/frontend/src/utils/markdown-utils.js
+++ b/frontend/src/utils/markdown-utils.js
@@ -1,8 +1,8 @@
-const hrefReg = /\[.+\]\(\S+\)|<img src=(\S+).+\/>|!\[\]\(\S+\)|<\S+>/g,
-  imageReg1 = /^<img src="(\S+)" .+\/>/,
-  imageReg2 = /^!\[\]\((\S+)\)/,
-  linkReg1 = /^\[.+\]\(\S+\)/,
-  linkReg2 = /^<\S+>$/;
+const hrefReg = /\[.+\]\(\S+\)|<img src=(\S+).+\/>|!\[\]\(\S+\)|<\S+>/g;
+const imageReg1 = /^<img src="(\S+)" .+\/>/;
+const imageReg2 = /^!\[\]\((\S+)\)/;
+const linkReg1 = /^\[.+\]\(\S+\)/;
+const linkReg2 = /^<\S+>$/;
 
 const getLinks = (hrefs) => {
   const hrefObj = {
diff --git a/frontend/src/utils/search-api.js b/frontend/src/utils/search-api.js
index bc3ad66eb6..c502d1066b 100644
--- a/frontend/src/utils/search-api.js
+++ b/frontend/src/utils/search-api.js
@@ -37,7 +37,7 @@ class SearchAPI {
   _sendPostRequest(url, form) {
     if (form.getHeaders) {
       return this.req.post(url, form, {
-        headers:form.getHeaders()
+        headers: form.getHeaders()
       });
     } else {
       return this.req.post(url, form);
@@ -46,7 +46,7 @@ class SearchAPI {
 
   searchItems(query_str, query_type, cancelToken) {
     let url = this.server + '/api2/items-search/?query_str=' + query_str + '&query_type=' + query_type;
-    return this.req.get(url, {cancelToken: cancelToken});
+    return this.req.get(url, { cancelToken: cancelToken });
   }
 
 }
diff --git a/frontend/src/utils/subscription-api.js b/frontend/src/utils/subscription-api.js
index 9a45cd7a65..8bf926fbd7 100644
--- a/frontend/src/utils/subscription-api.js
+++ b/frontend/src/utils/subscription-api.js
@@ -8,7 +8,7 @@ class SubscriptionAPI {
     this.server = server;
     this.username = username;
     this.password = password;
-    this.token = token;  //none
+    this.token = token; // none
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
diff --git a/frontend/src/utils/system-admin-api.js b/frontend/src/utils/system-admin-api.js
index 1bf4c9b7d5..81ea6ac1d5 100644
--- a/frontend/src/utils/system-admin-api.js
+++ b/frontend/src/utils/system-admin-api.js
@@ -8,7 +8,7 @@ class SystemAdminAPI {
     this.server = server;
     this.username = username;
     this.password = password;
-    this.token = token;  //none
+    this.token = token; // none
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
@@ -37,7 +37,7 @@ class SystemAdminAPI {
   _sendPostRequest(url, form) {
     if (form.getHeaders) {
       return this.req.post(url, form, {
-        headers:form.getHeaders()
+        headers: form.getHeaders()
       });
     } else {
       return this.req.post(url, form);
@@ -63,7 +63,7 @@ class SystemAdminAPI {
       params.order_by = sortBy;
       params.direction = sortOrder;
     }
-    return this.req.get(url, {params: params});
+    return this.req.get(url, { params: params });
   }
 
   sysAdminExportLogsExcel(start, end, logType) {
diff --git a/frontend/src/utils/text-translation.js b/frontend/src/utils/text-translation.js
index bafb062770..60b49c5751 100644
--- a/frontend/src/utils/text-translation.js
+++ b/frontend/src/utils/text-translation.js
@@ -3,37 +3,37 @@ import { gettext } from './constants';
 // item --> '' : {key : '', value : gettext('')};
 const TextTranslation = {
   // app-menu
-  'NEW_FOLDER' : {key : 'New Folder', value : gettext('New Folder')},
-  'NEW_FILE' : {key : 'New File', value : gettext('New File')},
-  'NEW_MARKDOWN_FILE' : {key : 'New Markdown File', value : gettext('New Markdown File')},
-  'NEW_EXCEL_FILE' : {key : 'New Excel File', value : gettext('New Excel File')},
-  'NEW_POWERPOINT_FILE' : {key : 'New PowerPoint File', value : gettext('New PowerPoint File')},
-  'NEW_WORD_FILE' : {key : 'New Word File', value : gettext('New Word File')},
-  'NEW_SEADOC_FILE' : {key : 'New SeaDoc File', value : gettext('New SeaDoc File') + ' (beta)'},
+  'NEW_FOLDER': { key: 'New Folder', value: gettext('New Folder') },
+  'NEW_FILE': { key: 'New File', value: gettext('New File') },
+  'NEW_MARKDOWN_FILE': { key: 'New Markdown File', value: gettext('New Markdown File') },
+  'NEW_EXCEL_FILE': { key: 'New Excel File', value: gettext('New Excel File') },
+  'NEW_POWERPOINT_FILE': { key: 'New PowerPoint File', value: gettext('New PowerPoint File') },
+  'NEW_WORD_FILE': { key: 'New Word File', value: gettext('New Word File') },
+  'NEW_SEADOC_FILE': { key: 'New SeaDoc File', value: gettext('New SeaDoc File') + ' (beta)' },
 
-  'SHARE' : {key : 'Share', value : gettext('Share')},
-  'DOWNLOAD' : {key : 'Download', value : gettext('Download')},
-  'DELETE' : {key : 'Delete', value : gettext('Delete')},
-  'RENAME' : {key : 'Rename', value : gettext('Rename')},
-  'MOVE' : {key : 'Move', value : gettext('Move')},
-  'COPY' : {key : 'Copy', value : gettext('Copy')},
-  'PERMISSION' : {key : 'Permission', value : gettext('Permission')},
-  'DETAILS' : {key : 'Details', value : gettext('Details')},
-  'OPEN_VIA_CLIENT' : {key : 'Open via Client', value : gettext('Open via Client')},
-  'LOCK' : {key : 'Lock', value : gettext('Lock')},
-  'UNLOCK' : {key : 'Unlock', value : gettext('Unlock')},
-  'FREEZE_DOCUMENT' : {key : 'Freeze Document', value : gettext('Freeze Document')},
-  'UNFREEZE_DOCUMENT' : {key : 'Unfreeze Document', value : gettext('Unfreeze Document')},
-  'CONVERT_TO_MARKDOWN' : {key : 'Convert to Markdown', value : gettext('Convert to Markdown')},
-  'CONVERT_TO_SDOC' : {key : 'Convert to sdoc', value : gettext('Convert to sdoc')},
-  'CONVERT_TO_DOCX' : {key : 'Convert to docx', value : gettext('Convert to docx')},
-  'EXPORT_DOCX' : {key : 'Export docx', value : gettext('Export as docx')},
-  'HISTORY' : {key : 'History', value : gettext('History')},
-  'ACCESS_LOG' : {key : 'Access Log', value : gettext('Access Log')},
-  'PROPERTIES' : {key : 'Properties', value : gettext('Properties')},
-  'TAGS': {key: 'Tags', value: gettext('Tags')},
-  'TRASH': {key: 'Trash', value: gettext('Trash')},
-  'ONLYOFFICE_CONVERT': {key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE')},
+  'SHARE': { key: 'Share', value: gettext('Share') },
+  'DOWNLOAD': { key: 'Download', value: gettext('Download') },
+  'DELETE': { key: 'Delete', value: gettext('Delete') },
+  'RENAME': { key: 'Rename', value: gettext('Rename') },
+  'MOVE': { key: 'Move', value: gettext('Move') },
+  'COPY': { key: 'Copy', value: gettext('Copy') },
+  'PERMISSION': { key: 'Permission', value: gettext('Permission') },
+  'DETAILS': { key: 'Details', value: gettext('Details') },
+  'OPEN_VIA_CLIENT': { key: 'Open via Client', value: gettext('Open via Client') },
+  'LOCK': { key: 'Lock', value: gettext('Lock') },
+  'UNLOCK': { key: 'Unlock', value: gettext('Unlock') },
+  'FREEZE_DOCUMENT': { key: 'Freeze Document', value: gettext('Freeze Document') },
+  'UNFREEZE_DOCUMENT': { key: 'Unfreeze Document', value: gettext('Unfreeze Document') },
+  'CONVERT_TO_MARKDOWN': { key: 'Convert to Markdown', value: gettext('Convert to Markdown') },
+  'CONVERT_TO_SDOC': { key: 'Convert to sdoc', value: gettext('Convert to sdoc') },
+  'CONVERT_TO_DOCX': { key: 'Convert to docx', value: gettext('Convert to docx') },
+  'EXPORT_DOCX': { key: 'Export docx', value: gettext('Export as docx') },
+  'HISTORY': { key: 'History', value: gettext('History') },
+  'ACCESS_LOG': { key: 'Access Log', value: gettext('Access Log') },
+  'PROPERTIES': { key: 'Properties', value: gettext('Properties') },
+  'TAGS': { key: 'Tags', value: gettext('Tags') },
+  'TRASH': { key: 'Trash', value: gettext('Trash') },
+  'ONLYOFFICE_CONVERT': { key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE') },
 };
 
 export default TextTranslation;
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index c3626e929b..c4a899819b 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -8,16 +8,16 @@ import { PRIVATE_FILE_TYPE } from '../constants';
 
 export const Utils = {
 
-  keyCodes:  {
+  keyCodes: {
     enter: 13,
-    esc:   27,
+    esc: 27,
     space: 32,
-    tab:   9,
-    up:    38,
-    down:  40
+    tab: 9,
+    up: 38,
+    down: 40
   },
 
-  bytesToSize: function(bytes) {
+  bytesToSize: function (bytes) {
     if (typeof(bytes) == 'undefined') return ' ';
 
     if (bytes < 0) return '--';
@@ -30,7 +30,7 @@ export const Utils = {
     return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i];
   },
 
-  isHiDPI: function() {
+  isHiDPI: function () {
     var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
     if (pixelRatio > 1) {
       return true;
@@ -39,11 +39,11 @@ export const Utils = {
     }
   },
 
-  isDesktop: function() {
+  isDesktop: function () {
     return window.innerWidth >= 768;
   },
 
-  isWeChat: function() {
+  isWeChat: function () {
     let ua = window.navigator.userAgent.toLowerCase();
     let isWeChat = ua.match(/MicroMessenger/i) == 'micromessenger';
     let isEnterpriseWeChat = ua.match(/MicroMessenger/i) == 'micromessenger' && ua.match(/wxwork/i) == 'wxwork';
@@ -57,23 +57,23 @@ export const Utils = {
     'txt': 'txt.png',
 
     // pdf file
-    'pdf' : 'pdf.png',
+    'pdf': 'pdf.png',
 
     // document file
-    'doc' : 'word.png',
-    'docx' : 'word.png',
-    'odt' : 'word.png',
-    'fodt' : 'word.png',
+    'doc': 'word.png',
+    'docx': 'word.png',
+    'odt': 'word.png',
+    'fodt': 'word.png',
 
-    'ppt' : 'ppt.png',
-    'pptx' : 'ppt.png',
-    'odp' : 'ppt.png',
-    'fodp' : 'ppt.png',
+    'ppt': 'ppt.png',
+    'pptx': 'ppt.png',
+    'odp': 'ppt.png',
+    'fodp': 'ppt.png',
 
-    'xls' : 'excel.png',
-    'xlsx' : 'excel.png',
-    'ods' : 'excel.png',
-    'fods' : 'excel.png',
+    'xls': 'excel.png',
+    'xlsx': 'excel.png',
+    'ods': 'excel.png',
+    'fods': 'excel.png',
 
     // video
     'mp4': 'video.png',
@@ -85,33 +85,33 @@ export const Utils = {
     'rmvb': 'video.png',
 
     // music file
-    'mp3' : 'music.png',
-    'oga' : 'music.png',
-    'ogg' : 'music.png',
-    'wav' : 'music.png',
-    'flac' : 'music.png',
-    'opus' : 'music.png',
-    'aac' : 'music.png',
-    'ac3' : 'music.png',
-    'wma' : 'music.png',
+    'mp3': 'music.png',
+    'oga': 'music.png',
+    'ogg': 'music.png',
+    'wav': 'music.png',
+    'flac': 'music.png',
+    'opus': 'music.png',
+    'aac': 'music.png',
+    'ac3': 'music.png',
+    'wma': 'music.png',
 
     // image file
-    'jpg' : 'pic.png',
-    'jpeg' : 'pic.png',
-    'png' : 'pic.png',
-    'svg' : 'pic.png',
-    'gif' : 'pic.png',
-    'bmp' : 'pic.png',
-    'ico' : 'pic.png',
+    'jpg': 'pic.png',
+    'jpeg': 'pic.png',
+    'png': 'pic.png',
+    'svg': 'pic.png',
+    'gif': 'pic.png',
+    'bmp': 'pic.png',
+    'ico': 'pic.png',
 
     // default
-    'default' : 'file.png',
+    'default': 'file.png',
     'sdoc': 'sdoc.png',
     'sdoc_notification': 'sdoc_notification.ico'
   },
 
   // check if a file is an image
-  imageCheck: function(filename) {
+  imageCheck: function (filename) {
     // no file ext
     if (filename.lastIndexOf('.') == -1) {
       return false;
@@ -125,7 +125,7 @@ export const Utils = {
     }
   },
 
-  pdfCheck: function(filename) {
+  pdfCheck: function (filename) {
     if (filename.lastIndexOf('.') == -1) {
       return false;
     }
@@ -138,7 +138,7 @@ export const Utils = {
     }
   },
 
-  getShareLinkPermissionList: function(itemType, permission, path, canEdit) {
+  getShareLinkPermissionList: function (itemType, permission, path, canEdit) {
     // itemType: library, dir, file
     // permission: rw, r, admin, cloud-edit, preview, custom-*
 
@@ -174,7 +174,7 @@ export const Utils = {
     return permissionOptions;
   },
 
-  getShareLinkPermissionStr: function(permissions) {
+  getShareLinkPermissionStr: function (permissions) {
     const { can_edit, can_download, can_upload } = permissions;
     switch (`${can_edit} ${can_download} ${can_upload}`) {
       case 'false true false':
@@ -190,7 +190,7 @@ export const Utils = {
     }
   },
 
-  isEditableOfficeFile: function(filename) {
+  isEditableOfficeFile: function (filename) {
     // no file ext
     if (filename.lastIndexOf('.') == -1) {
       return false;
@@ -205,7 +205,7 @@ export const Utils = {
   },
 
   // check if a file is a video
-  videoCheck: function(filename) {
+  videoCheck: function (filename) {
     // no file ext
     if (filename.lastIndexOf('.') == -1) {
       return false;
@@ -219,13 +219,13 @@ export const Utils = {
     }
   },
 
-  checkDuplicatedNameInList: function(list, targetName) {
+  checkDuplicatedNameInList: function (list, targetName) {
     return list.some(object => {
       return object.name === targetName;
     });
   },
 
-  encodePath: function(path) {
+  encodePath: function (path) {
     // IE8 does not support 'map()'
     /*
        return path.split('/').map(function(e) {
@@ -243,14 +243,14 @@ export const Utils = {
     return path_arr_.join('/');
   },
 
-  HTMLescape: function(html) {
+  HTMLescape: function (html) {
     return document.createElement('div')
       .appendChild(document.createTextNode(html))
       .parentNode
       .innerHTML;
   },
 
-  generateDialogTitle: function(title, operationTarget) {
+  generateDialogTitle: function (title, operationTarget) {
     /*
      * @param title: gettext('...{placeholder}...')
      */
@@ -262,19 +262,19 @@ export const Utils = {
     return title.replace('{placeholder}', operationTarget);
   },
 
-  getFileName: function(filePath) {
+  getFileName: function (filePath) {
     let lastIndex = filePath.lastIndexOf('/');
-    return filePath.slice(lastIndex+1);
+    return filePath.slice(lastIndex + 1);
   },
 
   /**
    * input: '/abc/bc/cb'
    * output: ['/abc', '/abc/bc', '/abc/bc/cb'];
    */
-  getPaths: function(path) {
+  getPaths: function (path) {
     let paths = path.split('/').slice(1);
     let result = [];
-    while(paths.length) {
+    while (paths.length) {
       result.push('/' + paths.join('/'));
       paths.pop();
     }
@@ -291,7 +291,7 @@ export const Utils = {
    *      abc
    *      bc
    */
-  getFolderName: function(path) {
+  getFolderName: function (path) {
     if (path === '/') {
       return path;
     }
@@ -303,7 +303,7 @@ export const Utils = {
     return dirname of a path.
     if path is '/', return '/'.
   */
-  getDirName: function(path) {
+  getDirName: function (path) {
     let dir = path.slice(0, path.lastIndexOf('/'));
     if (dir === '') {
       return '/';
@@ -312,20 +312,20 @@ export const Utils = {
     }
   },
 
-  isChildPath: function(child, parent) {
+  isChildPath: function (child, parent) {
     let p = this.getDirName(child);
     return p === parent;
   },
 
-  isAncestorPath: function(ancestor, path) {
+  isAncestorPath: function (ancestor, path) {
     return path.indexOf(ancestor) > -1;
   },
 
-  renameAncestorPath: function(path, ancestor, newAncestor) {
+  renameAncestorPath: function (path, ancestor, newAncestor) {
     return path.replace(ancestor, newAncestor);
   },
 
-  joinPath: function(pathA, pathB) {
+  joinPath: function (pathA, pathB) {
     if (pathA[pathA.length - 1] === '/') {
       return pathA + pathB;
     } else {
@@ -333,28 +333,28 @@ export const Utils = {
     }
   },
 
-  isSupportUploadFolder: function() {
-    return navigator.userAgent.indexOf('Firefox')!=-1 ||
+  isSupportUploadFolder: function () {
+    return navigator.userAgent.indexOf('Firefox') != -1 ||
       navigator.userAgent.indexOf('Chrome') > -1 ||
       navigator.userAgent.indexOf('Safari') > -1;
   },
 
-  isIEBrower: function() { // is ie <= ie11 not include Edge
+  isIEBrower: function () { // is ie <= ie11 not include Edge
     var userAgent = navigator.userAgent;
     var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
     var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
     return isIE || isIE11;
   },
 
-  getDefaultLibIconUrl: function(isBig) {
+  getDefaultLibIconUrl: function (isBig) {
     let size = Utils.isHiDPI() ? 48 : 24;
     size = isBig ? 256 : size;
     let icon_name = 'lib.png';
     return mediaUrl + 'img/lib/' + size + '/' + icon_name;
   },
 
-  getLibIconUrl: function(repo, isBig) {
-    let permission = repo.permission || repo.share_permission; //Compatible with regular repo and repo shared
+  getLibIconUrl: function (repo, isBig) {
+    let permission = repo.permission || repo.share_permission; // Compatible with regular repo and repo shared
     let size = Utils.isHiDPI() ? 48 : 24;
     size = isBig ? 256 : size;
 
@@ -406,7 +406,7 @@ export const Utils = {
     }
   },
 
-  getFolderIconUrl: function(readonly = false, size, sharedOut) {
+  getFolderIconUrl: function (readonly = false, size, sharedOut) {
     if (!size) {
       size = Utils.isHiDPI() ? 48 : 24;
     }
@@ -414,7 +414,7 @@ export const Utils = {
     return `${mediaUrl}img/folder${readonly ? '-read-only' : ''}${sharedOut ? '-shared-out' : ''}-${size}.png`;
   },
 
-  getFileIconUrl: function(filename, size) {
+  getFileIconUrl: function (filename, size) {
     if (!size) {
       size = Utils.isHiDPI() ? 48 : 24;
     }
@@ -433,15 +433,15 @@ export const Utils = {
     }
   },
 
-  getLibIconTitle: function(repo) {
+  getLibIconTitle: function (repo) {
     var title;
-    let permission = repo.permission || repo.share_permission; //Compatible with regular repo and repo shared
+    let permission = repo.permission || repo.share_permission; // Compatible with regular repo and repo shared
     if (repo.encrypted) {
       title = gettext('Encrypted library');
     } else if (repo.is_admin) { // shared with 'admin' permission
       title = gettext('Admin access');
     } else {
-      switch(permission) {
+      switch (permission) {
         case 'rw':
           title = gettext('Read-Write library');
           break;
@@ -459,9 +459,9 @@ export const Utils = {
     return title;
   },
 
-  getFolderIconTitle: function(options) {
+  getFolderIconTitle: function (options) {
     var title;
-    switch(options.permission) {
+    switch (options.permission) {
       case 'rw':
         title = gettext('Read-Write folder');
         break;
@@ -478,7 +478,7 @@ export const Utils = {
     return title;
   },
 
-  getFolderOperationList: function(isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
+  getFolderOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
 
     let list = [];
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT } = TextTranslation;
@@ -524,7 +524,7 @@ export const Utils = {
     }
 
     if (permission == 'rw') {
-      if (folderPermEnabled  && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin)) {
+      if (folderPermEnabled && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin)) {
         list.push('Divider', PERMISSION);
       }
       list.push('Divider', OPEN_VIA_CLIENT);
@@ -542,7 +542,7 @@ export const Utils = {
     return list;
   },
 
-  getFileOperationList: function(isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
+  getFileOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
     let list = [];
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, UNFREEZE_DOCUMENT, FREEZE_DOCUMENT,
       HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC } = TextTranslation;
@@ -681,15 +681,15 @@ export const Utils = {
     return withoutDot ? parts.pop() : '.' + parts.pop();
   },
 
-  getDirentOperationList: function(isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
+  getDirentOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
     return dirent.type == 'dir' ?
       Utils.getFolderOperationList(isRepoOwner, currentRepoInfo, dirent, isContextmenu) :
       Utils.getFileOperationList(isRepoOwner, currentRepoInfo, dirent, isContextmenu);
   },
 
-  sharePerms: function(permission) {
+  sharePerms: function (permission) {
     var title;
-    switch(permission) {
+    switch (permission) {
       case 'rw':
         title = gettext('Read-Write');
         break;
@@ -712,9 +712,9 @@ export const Utils = {
     return title;
   },
 
-  sharePermsExplanation: function(permission) {
+  sharePermsExplanation: function (permission) {
     var title;
-    switch(permission) {
+    switch (permission) {
       case 'rw':
         title = gettext('User can read, write, upload, download and sync files.');
         break;
@@ -737,7 +737,7 @@ export const Utils = {
     return title;
   },
 
-  getShareLinkPermissionObject: function(permission) {
+  getShareLinkPermissionObject: function (permission) {
     switch (permission) {
       case 'preview_download':
         return {
@@ -795,7 +795,7 @@ export const Utils = {
     };
   },
 
-  formatSize: function(options) {
+  formatSize: function (options) {
     /*
      * param: {bytes, precision}
      */
@@ -827,7 +827,7 @@ export const Utils = {
     }
   },
 
-  formatBitRate: function(bits) {
+  formatBitRate: function (bits) {
     var Bs;
     if (typeof bits !== 'number') {
       return '';
@@ -845,7 +845,7 @@ export const Utils = {
     return Bs.toFixed(2) + ' B/s';
   },
 
-  isMarkdownFile: function(filePath) {
+  isMarkdownFile: function (filePath) {
     let index = filePath.lastIndexOf('.');
     if (index === -1) {
       return false;
@@ -859,7 +859,7 @@ export const Utils = {
     }
   },
 
-  isSdocFile: function(filePath) {
+  isSdocFile: function (filePath) {
     let index = filePath.lastIndexOf('.');
     if (index === -1) {
       return false;
@@ -873,27 +873,27 @@ export const Utils = {
     }
   },
 
-  isFileMetadata: function(type) {
+  isFileMetadata: function (type) {
     return type === PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES;
   },
 
-  isInternalFileLink: function(url, repoID) {
+  isInternalFileLink: function (url, repoID) {
     var re = new RegExp(serviceURL + '/lib/' + repoID + '/file.*');
     return re.test(url);
   },
 
-  isInternalMarkdownLink: function(url, repoID) {
+  isInternalMarkdownLink: function (url, repoID) {
     // eslint-disable-next-line
     var re = new RegExp(serviceURL + '/lib/' + repoID + '.*\.md$');
     return re.test(url);
   },
 
-  isInternalDirLink: function(url, repoID) {
+  isInternalDirLink: function (url, repoID) {
     var re = new RegExp(serviceURL + '/library/' + repoID + '.*');
     return re.test(url);
   },
 
-  getPathFromInternalMarkdownLink: function(url, repoID) {
+  getPathFromInternalMarkdownLink: function (url, repoID) {
     // eslint-disable-next-line
     var re = new RegExp(serviceURL + '/lib/' + repoID + '/file' + '(.*\.md)');
     var array = re.exec(url);
@@ -901,7 +901,7 @@ export const Utils = {
     return path;
   },
 
-  getPathFromInternalDirLink: function(url, repoID) {
+  getPathFromInternalDirLink: function (url, repoID) {
     var re = new RegExp(serviceURL + '/library/' + repoID + '(/.*)');
     var array = re.exec(url);
     var path = decodeURIComponent(array[1]);
@@ -910,20 +910,20 @@ export const Utils = {
     return path;
   },
 
-  isWikiInternalMarkdownLink: function(url, slug) {
+  isWikiInternalMarkdownLink: function (url, slug) {
     slug = encodeURIComponent(slug);
     // eslint-disable-next-line
     var re = new RegExp(serviceURL + '/published/' + slug + '.*\.md$');
     return re.test(url);
   },
 
-  isWikiInternalDirLink: function(url, slug) {
+  isWikiInternalDirLink: function (url, slug) {
     slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/published/' + slug + '.*');
     return re.test(url);
   },
 
-  getPathFromWikiInternalMarkdownLink: function(url, slug) {
+  getPathFromWikiInternalMarkdownLink: function (url, slug) {
     slug = encodeURIComponent(slug);
     // eslint-disable-next-line
     var re = new RegExp(serviceURL + '/published/' + slug + '(.*\.md)');
@@ -931,28 +931,28 @@ export const Utils = {
     var path = array[1];
     try {
       path = decodeURIComponent(path);
-    } catch(err) {
+    } catch (err) {
       path = path.replace(/%/g, '%25');
       path = decodeURIComponent(path);
     }
     return path;
   },
 
-  getPathFromWikiInternalDirLink: function(url, slug) {
+  getPathFromWikiInternalDirLink: function (url, slug) {
     slug = encodeURIComponent(slug);
     var re = new RegExp(serviceURL + '/published/' + slug + '(/.*)');
     var array = re.exec(url);
     var path = array[1];
     try {
       path = decodeURIComponent(path);
-    } catch(err) {
+    } catch (err) {
       path = path.replace(/%/g, '%25');
       path = decodeURIComponent(path);
     }
     return path;
   },
 
-  compareTwoWord: function(wordA, wordB) {
+  compareTwoWord: function (wordA, wordB) {
     // compare wordA and wordB at lower case
     // if wordA >= wordB, return 1
     // if wordA < wordB, return -1
@@ -962,14 +962,14 @@ export const Utils = {
 
   // compare two strings which may have digits in them
   // and compare those digits as number instead of string
-  compareStrWithNumbersIn: function(a, b) {
+  compareStrWithNumbersIn: function (a, b) {
     var reParts = /\d+|\D+/g;
     var reDigit = /\d/;
     var aParts = a.match(reParts);
     var bParts = b.match(reParts);
     var isDigitPart;
     var len = Math.min(aParts.length, bParts.length);
-    var aPart, bPart;
+    var aPart; var bPart;
 
     if (aParts && bParts &&
       (isDigitPart = reDigit.test(aParts[0])) == reDigit.test(bParts[0])) {
@@ -996,13 +996,13 @@ export const Utils = {
     return (a >= b) - (a <= b);
   },
 
-  sortRepos: function(repos, sortBy, sortOrder) {
+  sortRepos: function (repos, sortBy, sortOrder) {
     const _this = this;
     let comparator;
 
     switch (`${sortBy}-${sortOrder}`) {
       case 'name-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (!a.repo_name) {
             return 1;
           }
@@ -1014,7 +1014,7 @@ export const Utils = {
         };
         break;
       case 'name-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (!a.repo_name) {
             return -1;
           }
@@ -1026,17 +1026,17 @@ export const Utils = {
         };
         break;
       case 'time-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.last_modified < b.last_modified ? -1 : 1;
         };
         break;
       case 'time-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.last_modified < b.last_modified ? 1 : -1;
         };
         break;
       case 'size-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.size === b.size) {
             let result = _this.compareTwoWord(a.repo_name, b.repo_name);
             return result;
@@ -1045,7 +1045,7 @@ export const Utils = {
         };
         break;
       case 'size-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.size === b.size) {
             let result = _this.compareTwoWord(a.repo_name, b.repo_name);
             return -result;
@@ -1060,35 +1060,35 @@ export const Utils = {
     return repos;
   },
 
-  sortDirents: function(items, sortBy, sortOrder) {
+  sortDirents: function (items, sortBy, sortOrder) {
     const _this = this;
     let comparator;
 
     switch (`${sortBy}-${sortOrder}`) {
       case 'name-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = _this.compareTwoWord(a.name, b.name);
           return result;
         };
         break;
       case 'name-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           var result = _this.compareTwoWord(a.name, b.name);
           return -result;
         };
         break;
       case 'time-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.mtime < b.mtime ? -1 : 1;
         };
         break;
       case 'time-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.mtime < b.mtime ? 1 : -1;
         };
         break;
       case 'size-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.type == 'dir' && b.type == 'dir') {
             return 0;
           }
@@ -1096,7 +1096,7 @@ export const Utils = {
         };
         break;
       case 'size-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.type == 'dir' && b.type == 'dir') {
             return 0;
           }
@@ -1118,13 +1118,13 @@ export const Utils = {
   },
 
   // sort dirents in shared folder
-  sortDirentsInSharedDir: function(items, sortBy, sortOrder) {
+  sortDirentsInSharedDir: function (items, sortBy, sortOrder) {
     const _this = this;
     let comparator;
 
     switch (`${sortBy}-${sortOrder}`) {
       case 'name-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           let result;
           if (a.is_dir) {
             result = _this.compareTwoWord(a.folder_name, b.folder_name);
@@ -1135,7 +1135,7 @@ export const Utils = {
         };
         break;
       case 'name-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           let result;
           if (a.is_dir) {
             result = _this.compareTwoWord(a.folder_name, b.folder_name);
@@ -1146,17 +1146,17 @@ export const Utils = {
         };
         break;
       case 'time-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.last_modified < b.last_modified ? -1 : 1;
         };
         break;
       case 'time-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           return a.last_modified < b.last_modified ? 1 : -1;
         };
         break;
       case 'size-asc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.is_dir) {
             return 0;
           } else {
@@ -1165,7 +1165,7 @@ export const Utils = {
         };
         break;
       case 'size-desc':
-        comparator = function(a, b) {
+        comparator = function (a, b) {
           if (a.is_dir) {
             return 0;
           } else {
@@ -1190,14 +1190,14 @@ export const Utils = {
   /*
    * only used in the 'catch' part of a seafileAPI request
    */
-  getErrorMsg: function(error, showPermissionDeniedTip) {
+  getErrorMsg: function (error, showPermissionDeniedTip) {
     let errorMsg = '';
     if (error.response) {
       if (error.response.status == 403) {
         if (showPermissionDeniedTip) {
           toaster.danger(
             <PermissionDeniedTip />,
-            {id: 'permission_denied', duration: 3600}
+            { id: 'permission_denied', duration: 3600 }
           );
         }
         errorMsg = gettext('Permission denied');
@@ -1213,7 +1213,7 @@ export const Utils = {
     return errorMsg;
   },
 
-  changeMarkdownNodes: function(nodes, fn) {
+  changeMarkdownNodes: function (nodes, fn) {
     nodes.forEach((item) => {
       fn(item);
       if (item.children && item.children.length > 0) {
@@ -1223,9 +1223,9 @@ export const Utils = {
     return nodes;
   },
 
-  chooseLanguage: function(suffix) {
+  chooseLanguage: function (suffix) {
     let mode;
-    switch(suffix) {
+    switch (suffix) {
       case 'py':
         mode = 'python';
         break;
@@ -1291,13 +1291,13 @@ export const Utils = {
     '#CED4DA': '#A8ADB2',
   },
 
-  getDarkColor: function(color) {
+  getDarkColor: function (color) {
     let darkColor;
     darkColor = this.DARK_COLOR_MAP[color];
     return darkColor;
   },
 
-  getCopySuccessfulMessage: function(dirNames) {
+  getCopySuccessfulMessage: function (dirNames) {
     let message;
     let dirNamesLength = dirNames.length;
     if (dirNamesLength === 1) {
@@ -1312,7 +1312,7 @@ export const Utils = {
     return message;
   },
 
-  getMoveSuccessMessage: function(dirNames) {
+  getMoveSuccessMessage: function (dirNames) {
     let message;
     let dirNamesLength = dirNames.length;
     if (dirNamesLength === 1) {
@@ -1327,7 +1327,7 @@ export const Utils = {
     return message;
   },
 
-  getCopyFailedMessage: function(dirNames) {
+  getCopyFailedMessage: function (dirNames) {
     let message;
     let dirNamesLength = dirNames.length;
 
@@ -1341,7 +1341,7 @@ export const Utils = {
     return message;
   },
 
-  getMoveFailedMessage: function(dirNames) {
+  getMoveFailedMessage: function (dirNames) {
     let message;
     let dirNamesLength = dirNames.length;
     if (dirNamesLength > 1) {
@@ -1354,7 +1354,7 @@ export const Utils = {
     return message;
   },
 
-  handleSearchedItemClick: function(searchedItem) {
+  handleSearchedItemClick: function (searchedItem) {
     if (searchedItem.is_dir === true) {
       let url = siteRoot + 'library/' + searchedItem.repo_id + '/' + searchedItem.repo_name + searchedItem.path;
       let newWindow = window.open('about:blank');
@@ -1366,21 +1366,21 @@ export const Utils = {
     }
   },
 
-  generatePassword: function(length, hasNum=1, hasChar=1, hasSymbol=1) {
+  generatePassword: function (length, hasNum = 1, hasChar = 1, hasSymbol = 1) {
 
     var password = '';
 
     // 65~90：A~Z
-    password += String.fromCharCode(Math.floor((Math.random() * (90-65)) + 65));
+    password += String.fromCharCode(Math.floor((Math.random() * (90 - 65)) + 65));
 
     // 97~122：a~z
-    password += String.fromCharCode(Math.floor((Math.random() * (122-97)) + 97));
+    password += String.fromCharCode(Math.floor((Math.random() * (122 - 97)) + 97));
 
     // 48~57：0~9
-    password += String.fromCharCode(Math.floor((Math.random() * (57-48)) + 48));
+    password += String.fromCharCode(Math.floor((Math.random() * (57 - 48)) + 48));
 
     // 33~47：!~/
-    password += String.fromCharCode(Math.floor((Math.random() * (47-33)) + 33));
+    password += String.fromCharCode(Math.floor((Math.random() * (47 - 33)) + 33));
 
     // 33~47：!~/
     // 48~57：0~9
@@ -1390,14 +1390,14 @@ export const Utils = {
     // 97~122：a~z
     // 123~127：{~
     for (var i = 0; i < length - 4; i++) {
-      var num = Math.floor((Math.random() * (127-33)) + 33);
+      var num = Math.floor((Math.random() * (127 - 33)) + 33);
       password += String.fromCharCode(num);
     }
 
     return password;
   },
 
-  pathNormalize: function(originalPath) {
+  pathNormalize: function (originalPath) {
     let oldPath = originalPath.split('/');
     let newPath = [];
     for (let i = 0; i < oldPath.length; i++) {
@@ -1412,7 +1412,7 @@ export const Utils = {
     return newPath.join('/');
   },
 
-  getEventData: function(event, data) {
+  getEventData: function (event, data) {
     if (event.target.dataset) {
       return event.target.dataset[data];
     }
@@ -1431,7 +1431,7 @@ export const Utils = {
    * @param {*} userDirPermission
    * @param {*} dirent
    */
-  isHasPermissionToShare: function(repoInfo, userDirPermission, dirent) {
+  isHasPermissionToShare: function (repoInfo, userDirPermission, dirent) {
 
     const { isCustomPermission, customPermission } = Utils.getUserPermission(userDirPermission);
     if (isCustomPermission) {
@@ -1476,14 +1476,14 @@ export const Utils = {
     return false;
   },
 
-  registerGlobalVariable: function(namespace, key, value) {
+  registerGlobalVariable: function (namespace, key, value) {
     if (!window[namespace]) {
       window[namespace] = {};
     }
     window[namespace][key] = value;
   },
 
-  formatTime: function(seconds) {
+  formatTime: function (seconds) {
     var ss = parseInt(seconds);
     var mm = 0;
     var hh = 0;
@@ -1514,7 +1514,7 @@ export const Utils = {
     return curPage * perPage < totalCount;
   },
 
-  getStrengthLevel: function(pwd) {
+  getStrengthLevel: function (pwd) {
     const _this = this;
     var num = 0;
 
@@ -1530,7 +1530,7 @@ export const Utils = {
     }
   },
 
-  getCharMode: function(n) {
+  getCharMode: function (n) {
     if (n >= 48 && n <= 57) // nums
       return 1;
     if (n >= 65 && n <= 90) // uppers
@@ -1541,18 +1541,18 @@ export const Utils = {
       return 8;
   },
 
-  calculateBitwise: function(num) {
+  calculateBitwise: function (num) {
     var level = 0;
     for (var i = 0; i < 4; i++) {
       // bitwise AND
-      if (num&1) level++;
+      if (num & 1) level++;
       // Right logical shift
-      num>>>=1;
+      num >>>= 1;
     }
     return level;
   },
 
-  getSharedPermission: function(item) {
+  getSharedPermission: function (item) {
     let permission = item.permission;
     if (item.is_admin) {
       permission = 'admin';
@@ -1563,7 +1563,7 @@ export const Utils = {
     return permission;
   },
 
-  getUserPermission: function(userPerm) {
+  getUserPermission: function (userPerm) {
     const { custom_permission } = window;
     const common_permissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
     // visit the shared repo(virtual repo) by custom permission
@@ -1583,33 +1583,33 @@ export const Utils = {
   },
 
   // for a11y
-  onKeyDown: function(e) {
+  onKeyDown: function (e) {
     if (e.key == 'Enter' || e.key == 'Space') {
       e.target.click();
     }
   },
 
-  updateTabTitle: function(content) {
+  updateTabTitle: function (content) {
     const title = document.getElementsByTagName('title')[0];
     title.innerText = content;
   },
 
-  generateHistoryURL: function(siteRoot, repoID, path) {
+  generateHistoryURL: function (siteRoot, repoID, path) {
     if (!siteRoot || !repoID || !path) return '';
     return siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + this.encodePath(path);
   },
 
-  generateRevisionURL: function(siteRoot, repoID, path) {
+  generateRevisionURL: function (siteRoot, repoID, path) {
     if (!siteRoot || !repoID || !path) return '';
     return siteRoot + 'repo/sdoc_revision/' + repoID + '/?p=' + this.encodePath(path);
   },
 
-  generateRevisionsURL: function(siteRoot, repoID, path) {
+  generateRevisionsURL: function (siteRoot, repoID, path) {
     if (!siteRoot || !repoID || !path) return '';
     return siteRoot + 'repo/sdoc_revisions/' + repoID + '/?p=' + this.encodePath(path);
   },
 
-  isFunction: function(functionToCheck) {
+  isFunction: function (functionToCheck) {
     const getType = {};
     return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
   },
diff --git a/frontend/src/utils/wiki-api.js b/frontend/src/utils/wiki-api.js
index b2210c996f..a8ceccaf34 100644
--- a/frontend/src/utils/wiki-api.js
+++ b/frontend/src/utils/wiki-api.js
@@ -9,7 +9,7 @@ class WikiAPI {
     this.server = server;
     this.username = username;
     this.password = password;
-    this.token = token;  //none
+    this.token = token; // none
     if (this.token && this.server) {
       this.req = axios.create({
         baseURL: this.server,
@@ -38,7 +38,7 @@ class WikiAPI {
   _sendPostRequest(url, form) {
     if (form.getHeaders) {
       return this.req.post(url, form, {
-        headers:form.getHeaders()
+        headers: form.getHeaders()
       });
     } else {
       return this.req.post(url, form);
@@ -81,7 +81,7 @@ class WikiAPI {
     return this.req.get(url, {
       params: options,
       paramsSerializer: {
-        serialize: function(params) {
+        serialize: function (params) {
           let list = [];
           for (let key in params) {
             if (Array.isArray(params[key])) {
@@ -131,7 +131,7 @@ class WikiAPI {
     return this.req.get(url, {
       params: options,
       paramsSerializer: {
-        serialize: function(params) {
+        serialize: function (params) {
           let list = [];
           for (let key in params) {
             if (Array.isArray(params[key])) {
diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index 2f4ceeb2ad..c62c5f096e 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -49,7 +49,7 @@ class ViewFileText extends React.Component {
       isSaving: false,
       participants: [],
     };
-    this.onSave=this.onSave.bind(this);
+    this.onSave = this.onSave.bind(this);
     this.isParticipant = false;
   }
 
@@ -61,7 +61,7 @@ class ViewFileText extends React.Component {
     });
   };
 
-  onSave () {
+  onSave() {
     if (!this.isParticipant) {
       this.addParticipant();
     }