diff --git a/frontend/src/app.js b/frontend/src/app.js
index 3a2cbc2e88e..23018008f91 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -72,7 +72,7 @@ class App extends Component {
     }
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!Utils.isDesktop()) {
       this.setState({
         isSidePanelClosed: true
diff --git a/frontend/src/components/common/search-input.js b/frontend/src/components/common/search-input.js
index 5e7b4f7bade..428089010f5 100644
--- a/frontend/src/components/common/search-input.js
+++ b/frontend/src/components/common/search-input.js
@@ -38,7 +38,7 @@ class SearchInput extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({searchValue: nextProps.value});
     }
diff --git a/frontend/src/components/dialog/delete-repo-dialog.js b/frontend/src/components/dialog/delete-repo-dialog.js
index 7a2fcccaed1..454db568a7f 100644
--- a/frontend/src/components/dialog/delete-repo-dialog.js
+++ b/frontend/src/components/dialog/delete-repo-dialog.js
@@ -23,7 +23,7 @@ class DeleteRepoDialog extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!nextProps.isRepoDeleted) {
       this.setState({isRequestSended: false});
     }
diff --git a/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js b/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js
index 612c1999d4d..6aad4b1bc50 100644
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/search-input.js
@@ -22,7 +22,7 @@ class SearchInput extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({searchValue: nextProps.value});
     }
diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
index 0421dfb89f4..ec3de1b9c11 100644
--- a/frontend/src/components/dialog/rename-dialog.js
+++ b/frontend/src/components/dialog/rename-dialog.js
@@ -23,7 +23,7 @@ class Rename extends React.Component {
     this.newInput = React.createRef();
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.setState({newName: this.props.currentNode.object.name});
   }
 
@@ -32,7 +32,7 @@ class Rename extends React.Component {
     this.changeState(currentNode);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.changeState(nextProps.currentNode);
   }
 
diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
index 865994b90b2..f52b813d090 100644
--- a/frontend/src/components/dialog/rename-dirent.js
+++ b/frontend/src/components/dialog/rename-dirent.js
@@ -23,7 +23,7 @@ class Rename extends React.Component {
     this.newInput = React.createRef();
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.setState({newName: this.props.dirent.name});
   }
 
@@ -32,7 +32,7 @@ class Rename extends React.Component {
     this.changeState(dirent);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.changeState(nextProps.dirent);
   }
 
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 b04327f10d8..fc35ae27c4d 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -54,7 +54,7 @@ class DirColumnNav extends React.Component {
     this.isNodeMenuShow = true;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({opNode: nextProps.currentNode});
   }
 
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 716e196abef..44cf0191d6d 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -135,7 +135,7 @@ class DirColumnView extends React.Component {
     return '';
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     let rate = this.getCookie('navRate');
     if (rate) {
       this.setState({
diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index a79deecf503..58b3c4a12ce 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -36,7 +36,7 @@ class DirentDetail extends React.Component {
     this.loadDirentInfo(dirent, path, repoID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let { dirent, path, repoID } = nextProps;
     if (this.props.dirent !== nextProps.dirent) {
       this.loadDirentInfo(dirent, path, repoID);
diff --git a/frontend/src/components/dirent-detail/lib-details.js b/frontend/src/components/dirent-detail/lib-details.js
index 74d182502fb..35c4c1a624e 100644
--- a/frontend/src/components/dirent-detail/lib-details.js
+++ b/frontend/src/components/dirent-detail/lib-details.js
@@ -26,7 +26,7 @@ class LibDetail extends React.Component {
     this.getFileCounts(repo);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.currentRepo.repo_id !== this.props.currentRepo.repo_id) {
       this.getFileCounts(nextProps.currentRepo);
     }
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 0f4b074bf66..f56123512e8 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -42,7 +42,7 @@ class DirentGridItem extends React.Component {
 
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({isGridSelected: false}, () => {
       if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) {
         this.setState({isGridSelected: true});
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 6e517028f3a..fdc12e326e4 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -95,7 +95,7 @@ class DirentListItem extends React.Component {
     this.tagListTitleID = `tag-list-title-${uuidv4()}`;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.isItemFreezed !== this.props.isItemFreezed && !nextProps.isItemFreezed) {
       this.setState({
         highlight: false,
diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
index 2caa7822497..be61b1bee8c 100644
--- a/frontend/src/components/dropdown-menu/item-dropdown-menu.js
+++ b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
@@ -40,7 +40,7 @@ class ItemDropdownMenu extends React.Component {
     this.setState({menuList: menuList});
   }
 
-  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);
diff --git a/frontend/src/components/file-uploader/upload-list-item.js b/frontend/src/components/file-uploader/upload-list-item.js
index ebb048f4d9b..efe3fb5f4ad 100644
--- a/frontend/src/components/file-uploader/upload-list-item.js
+++ b/frontend/src/components/file-uploader/upload-list-item.js
@@ -23,7 +23,7 @@ class UploadListItem extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let { resumableFile } = nextProps;
     let uploadState = UPLOAD_UPLOADING;
 
diff --git a/frontend/src/components/index-viewer.js b/frontend/src/components/index-viewer.js
index f6de388cdec..e1435cec43d 100644
--- a/frontend/src/components/index-viewer.js
+++ b/frontend/src/components/index-viewer.js
@@ -42,7 +42,7 @@ class IndexContentViewer extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getRootNode();
   }
 
@@ -50,7 +50,7 @@ class IndexContentViewer extends React.Component {
     this.bindClickEvent();
   }
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this.removeClickEvent();
   }
 
diff --git a/frontend/src/components/seafile-codemirror/index.js b/frontend/src/components/seafile-codemirror/index.js
index f54118aeffd..c0b6d1a796d 100644
--- a/frontend/src/components/seafile-codemirror/index.js
+++ b/frontend/src/components/seafile-codemirror/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CodeMirror from '@uiw/react-codemirror';
-import { EditorView } from "@codemirror/view"
+import { EditorView } from '@codemirror/view';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { Utils } from '../../utils/utils';
 
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index 738d9903ddc..ddd1f6ad167 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -75,7 +75,7 @@ class SelectEditor extends React.Component {
     });
   };
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this.setOptions();
   }
 
diff --git a/frontend/src/components/share-link-panel/link-item.js b/frontend/src/components/share-link-panel/link-item.js
index 87293296afb..d72b6ce9619 100644
--- a/frontend/src/components/share-link-panel/link-item.js
+++ b/frontend/src/components/share-link-panel/link-item.js
@@ -9,7 +9,6 @@ import CommonOperationConfirmationDialog from '../../components/dialog/common-op
 
 const propTypes = {
   item: PropTypes.object.isRequired,
-  permissionOptions: PropTypes.array,
   showLinkDetails : PropTypes.func.isRequired,
   toggleSelectLink: PropTypes.func.isRequired,
   deleteLink: PropTypes.func.isRequired
@@ -80,7 +79,7 @@ class LinkItem extends React.Component {
 
   render() {
     const { isItemOpVisible } = this.state;
-    const { item, permissionOptions } = this.props;
+    const { item } = this.props;
     const { isSelected = false, permissions, link, expire_date } = item;
     const currentPermission = Utils.getShareLinkPermissionStr(permissions);
     return (
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 ebb048f4d9b..efe3fb5f4ad 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
@@ -23,7 +23,7 @@ class UploadListItem extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let { resumableFile } = nextProps;
     let uploadState = UPLOAD_UPLOADING;
 
diff --git a/frontend/src/components/terms-preview-widget.js b/frontend/src/components/terms-preview-widget.js
index 019139d21b3..b6b65c0ffe0 100644
--- a/frontend/src/components/terms-preview-widget.js
+++ b/frontend/src/components/terms-preview-widget.js
@@ -30,7 +30,7 @@ class TermsPreviewWidget extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let mdFile = nextProps.content;
     this.formatterLongTextValue(mdFile);
   }
diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js
index c76b7111d14..057c967bc6c 100644
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -44,7 +44,7 @@ class TreeNodeView extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!nextProps.isItemFreezed) {
       this.setState({
         isShowOperationMenu: false,
diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/wiki-markdown-viewer.js
index 58ecfa298f8..40bb21290ea 100644
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/frontend/src/components/wiki-markdown-viewer.js
@@ -43,7 +43,7 @@ class WikiMarkdownViewer extends React.Component {
     this.getTitlesInfo();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.markdownContent === nextProps.markdownContent) {
       return;
     }
diff --git a/frontend/src/components/wiki-outline.js b/frontend/src/components/wiki-outline.js
index 225566d7972..a102083a411 100644
--- a/frontend/src/components/wiki-outline.js
+++ b/frontend/src/components/wiki-outline.js
@@ -50,7 +50,7 @@ class WikiOutline extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let _this = this;
     let activeId = nextProps.activeId;
     let navItems = nextProps.navItems;
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 6f773d430fc..a2ffdb1000d 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -75,7 +75,7 @@ class GroupView extends React.Component {
     this.loadGroup(groupID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.groupID !== this.props.groupID) {
       this.loadGroup(nextProps.groupID);
     }
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 ae5e0bf067c..8af6b45cba2 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -101,7 +101,7 @@ class LibContentContainer extends React.Component {
     this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.path !== this.props.path || nextProps.updateDetail !== this.props.updateDetail) {
       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 f69e63400eb..dd368be2cfa 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -119,7 +119,7 @@ class LibContentView extends React.Component {
     });
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const hash = window.location.hash;
     if (hash.slice(0, 1) === '#') {
       this.setState({hash: hash});
diff --git a/frontend/src/pages/markdown-editor/seafile-editor/index.js b/frontend/src/pages/markdown-editor/seafile-editor/index.js
index 4642db492f1..4fa077e5d89 100644
--- a/frontend/src/pages/markdown-editor/seafile-editor/index.js
+++ b/frontend/src/pages/markdown-editor/seafile-editor/index.js
@@ -57,7 +57,7 @@ class SeafileEditor extends React.Component {
     window.seafileEditor = this;
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.editorMode === 'rich') {
       const document = this.state.richValue;
       const firstNode = document[0];
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 d137f34caad..127845fcce4 100644
--- a/frontend/src/pages/org-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/org-admin/devices/devices-by-platform.js
@@ -170,7 +170,7 @@ class DevicesByPlatform extends Component {
     this.state = {
       loading: true,
       errorMsg: '',
-      devicesData: {},
+      devicesData: [],
       pageInfo: {},
       perPage: 25
     };
diff --git a/frontend/src/pages/org-admin/input-item.js b/frontend/src/pages/org-admin/input-item.js
index c7654882650..c46c25af7fa 100644
--- a/frontend/src/pages/org-admin/input-item.js
+++ b/frontend/src/pages/org-admin/input-item.js
@@ -20,7 +20,7 @@ class OrgSamlConfigInput extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({value: nextProps.value,});
   }
 
diff --git a/frontend/src/pages/org-admin/main-panel-topbar.js b/frontend/src/pages/org-admin/main-panel-topbar.js
index b27c021758c..dc65f5099ee 100644
--- a/frontend/src/pages/org-admin/main-panel-topbar.js
+++ b/frontend/src/pages/org-admin/main-panel-topbar.js
@@ -4,7 +4,7 @@ import Account from '../../components/common/account';
 
 const propTypes = {
   children: PropTypes.object,
-  search: PropTypes.string,
+  search: PropTypes.any,
 };
 
 class MainPanelTopbar extends Component {
diff --git a/frontend/src/pages/org-admin/org-department-item.js b/frontend/src/pages/org-admin/org-department-item.js
index 70782f6f01c..87a2a61a19e 100644
--- a/frontend/src/pages/org-admin/org-department-item.js
+++ b/frontend/src/pages/org-admin/org-department-item.js
@@ -54,7 +54,7 @@ class OrgDepartmentItem extends React.Component {
     this.listOrgMembers(groupID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.groupID !== nextProps.groupID) {
       this.listOrgGroupRepo(nextProps.groupID);
       this.listOrgMembers(nextProps.groupID);
diff --git a/frontend/src/pages/org-admin/org-group-info.js b/frontend/src/pages/org-admin/org-group-info.js
index 059bbf2e3f6..f9841c2fb5c 100644
--- a/frontend/src/pages/org-admin/org-group-info.js
+++ b/frontend/src/pages/org-admin/org-group-info.js
@@ -87,7 +87,7 @@ Content.propTypes = {
 };
 
 OrgGroupInfo.propTypes = {
-  groupID: PropTypes.object.isRequired,
+  groupID: PropTypes.string,
 };
 
 export default OrgGroupInfo;
diff --git a/frontend/src/pages/org-admin/org-group-members.js b/frontend/src/pages/org-admin/org-group-members.js
index b27fd1ebe30..8d766d477b7 100644
--- a/frontend/src/pages/org-admin/org-group-members.js
+++ b/frontend/src/pages/org-admin/org-group-members.js
@@ -139,7 +139,7 @@ Item.propTypes = {
 };
 
 OrgGroupMembers.propTypes = {
-  groupID: PropTypes.object.isRequired,
+  groupID: PropTypes.string,
 };
 
 export default OrgGroupMembers;
diff --git a/frontend/src/pages/org-admin/org-group-repos.js b/frontend/src/pages/org-admin/org-group-repos.js
index 7eaa973bcd0..a52bf1ffbec 100644
--- a/frontend/src/pages/org-admin/org-group-repos.js
+++ b/frontend/src/pages/org-admin/org-group-repos.js
@@ -192,7 +192,7 @@ Item.propTypes = {
 };
 
 OrgGroupRepos.propTypes = {
-  groupID: PropTypes.object.isRequired,
+  groupID: PropTypes.string,
 };
 
 export default OrgGroupRepos;
diff --git a/frontend/src/pages/org-admin/statistic/statistic-chart.js b/frontend/src/pages/org-admin/statistic/statistic-chart.js
index d4bb1c887d2..01640cca38b 100644
--- a/frontend/src/pages/org-admin/statistic/statistic-chart.js
+++ b/frontend/src/pages/org-admin/statistic/statistic-chart.js
@@ -90,7 +90,7 @@ class StatisticChart extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let data = {
       labels: nextProps.labels,
       datasets: nextProps.filesData
diff --git a/frontend/src/pages/repo-wiki-mode/side-panel.js b/frontend/src/pages/repo-wiki-mode/side-panel.js
index a2cf15a1fb2..48f501333d5 100644
--- a/frontend/src/pages/repo-wiki-mode/side-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/side-panel.js
@@ -44,7 +44,7 @@ class SidePanel extends Component {
     this.isNodeMenuShow = true;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({opNode: nextProps.currentNode});
   }
 
diff --git a/frontend/src/pages/sys-admin/departments/department-libraries.js b/frontend/src/pages/sys-admin/departments/department-libraries.js
index a13a801814f..618210ace9e 100644
--- a/frontend/src/pages/sys-admin/departments/department-libraries.js
+++ b/frontend/src/pages/sys-admin/departments/department-libraries.js
@@ -33,7 +33,7 @@ class DepartmentDetail extends React.Component {
     this.listGroupRepo(groupID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.groupID !== nextProps.groupID) {
       this.listGroupRepo(nextProps.groupID);
     }
diff --git a/frontend/src/pages/sys-admin/departments/department-members.js b/frontend/src/pages/sys-admin/departments/department-members.js
index 0bb5fbe5afa..380c0db985e 100644
--- a/frontend/src/pages/sys-admin/departments/department-members.js
+++ b/frontend/src/pages/sys-admin/departments/department-members.js
@@ -46,7 +46,7 @@ class DepartmentMembers extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.groupID !== nextProps.groupID) {
       this.listMembers(nextProps.groupID, this.state.currentPage, this.state.perPage);
     }
diff --git a/frontend/src/pages/sys-admin/departments/department.js b/frontend/src/pages/sys-admin/departments/department.js
index 30da3a28e28..d9093ad040c 100644
--- a/frontend/src/pages/sys-admin/departments/department.js
+++ b/frontend/src/pages/sys-admin/departments/department.js
@@ -51,7 +51,7 @@ class Department extends React.Component {
     this.getDepartmentInfo(groupID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.groupID !== nextProps.groupID) {
       this.getDepartmentInfo(nextProps.groupID);
     }
diff --git a/frontend/src/pages/sys-admin/departments/sub-departments.js b/frontend/src/pages/sys-admin/departments/sub-departments.js
index 2c8b2bb0dd2..42a81c58fac 100644
--- a/frontend/src/pages/sys-admin/departments/sub-departments.js
+++ b/frontend/src/pages/sys-admin/departments/sub-departments.js
@@ -30,7 +30,7 @@ class SubDepartments extends React.Component {
     this.listSubDepartments(this.props.groupID);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.groupID !== nextProps.groupID) {
       this.listSubDepartments(nextProps.groupID);
     }
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 194b3f2cec3..88188e5d9f2 100644
--- a/frontend/src/pages/sys-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
@@ -173,7 +173,7 @@ class DevicesByPlatform extends Component {
     this.state = {
       loading: true,
       errorMsg: '',
-      devicesData: {},
+      devicesData: [],
       pageInfo: {},
       perPage: 25
     };
diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index 0b3963221db..9b039e1ddff 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -161,7 +161,7 @@ class SysAdmin extends React.Component {
     this.setState({currentTab: currentTab});
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!Utils.isDesktop()) {
       this.setState({
         isSidePanelClosed: true
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-item-menu.js b/frontend/src/pages/sys-admin/logs-page/file-access-item-menu.js
index 90062dcf550..d32094d905d 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-item-menu.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-item-menu.js
@@ -46,7 +46,7 @@ class FilterMenu extends React.Component {
 
 FilterMenu.propTypes = {
   toggleFreezeItem: PropTypes.func.isRequired,
-  filterItems: PropTypes.array.isRequired,
+  filterItems: PropTypes.func.isRequired,
   filterBy: PropTypes.string.isRequired,
 };
 
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 e2ba93c3298..dc67f6a66a4 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
@@ -125,20 +125,20 @@ class Content extends Component {
 }
 
 Content.propTypes = {
-  loading: PropTypes.bool.isRequired,
-  errorMsg: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+  errorMsg: PropTypes.string,
+  items: PropTypes.array,
   getLogsByPage: PropTypes.func,
   resetPerPage: PropTypes.func,
   currentPage: PropTypes.number,
   perPage: PropTypes.number,
   pageInfo: PropTypes.object,
   hasNextPage: PropTypes.bool,
-  toggleFreezeItem: PropTypes.func.isRequired,
-  userFilteredBy: PropTypes.string.isRequired,
-  repoFilteredBy: PropTypes.string.isRequired,
-  filterByUser: PropTypes.func.isRequired,
-  filterByRepo: PropTypes.func.isRequired,
+  toggleFreezeItem: PropTypes.func,
+  userFilteredBy: PropTypes.string,
+  repoFilteredBy: PropTypes.string,
+  filterByUser: PropTypes.func,
+  filterByRepo: PropTypes.func,
 };
 
 
@@ -226,13 +226,13 @@ class Item extends Component {
 
 
 Item.propTypes = {
-  item: PropTypes.object.isRequired,
-  isFreezed: PropTypes.bool.isRequired,
-  toggleFreezeItem: PropTypes.func.isRequired,
-  userFilteredBy: PropTypes.string.isRequired,
-  repoFilteredBy: PropTypes.string.isRequired,
-  filterByUser: PropTypes.func.isRequired,
-  filterByRepo: PropTypes.func.isRequired,
+  item: PropTypes.object,
+  isFreezed: PropTypes.bool,
+  toggleFreezeItem: PropTypes.func,
+  userFilteredBy: PropTypes.string,
+  repoFilteredBy: PropTypes.string,
+  filterByUser: PropTypes.func,
+  filterByRepo: PropTypes.func,
 };
 
 class FileAccessLogs extends Component {
diff --git a/frontend/src/pages/sys-admin/repos/system-repo.js b/frontend/src/pages/sys-admin/repos/system-repo.js
index 55afee21b96..ea164dcebfd 100644
--- a/frontend/src/pages/sys-admin/repos/system-repo.js
+++ b/frontend/src/pages/sys-admin/repos/system-repo.js
@@ -42,7 +42,6 @@ class Content extends Component {
 
 Content.propTypes = {
   resetPerPage: PropTypes.func,
-  getListByPage: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
   errorMsg: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired,
diff --git a/frontend/src/pages/sys-admin/statistic/statistic-chart.js b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
index d4bb1c887d2..01640cca38b 100644
--- a/frontend/src/pages/sys-admin/statistic/statistic-chart.js
+++ b/frontend/src/pages/sys-admin/statistic/statistic-chart.js
@@ -90,7 +90,7 @@ class StatisticChart extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let data = {
       labels: nextProps.labels,
       datasets: nextProps.filesData
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 b0db7d29e10..e7114b9fef6 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/item.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/item.js
@@ -32,7 +32,7 @@ class Item extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.item.text !== this.props.item.text) {
       let mdFile = nextProps.item.text;
       processor.process(mdFile).then((result) => {
diff --git a/frontend/src/pages/upload-link/upload-list-item.js b/frontend/src/pages/upload-link/upload-list-item.js
index 6519f7207db..eba59fea85a 100644
--- a/frontend/src/pages/upload-link/upload-list-item.js
+++ b/frontend/src/pages/upload-link/upload-list-item.js
@@ -23,7 +23,7 @@ class UploadListItem extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let { resumableFile } = nextProps;
     let uploadState = UPLOAD_UPLOADING;
 
diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
index 2b6c1668284..8324919f1a7 100644
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@@ -683,18 +683,18 @@ class Content extends React.Component {
 }
 
 Content.propTypes = {
-  isDesktop: PropTypes.bool.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  isAllItemsSelected: PropTypes.bool.isRequired,
-  errorMsg: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
-  sortItems: PropTypes.func.isRequired,
-  sortBy: PropTypes.string.isRequired,
-  sortOrder: PropTypes.string.isRequired,
-  toggleAllSelected: PropTypes.func.isRequired,
-  toggleItemSelected: PropTypes.func.isRequired,
-  zipDownloadFolder: PropTypes.func.isRequired,
-  showImagePopup: PropTypes.func.isRequired,
+  isDesktop: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isAllItemsSelected: PropTypes.bool,
+  errorMsg: PropTypes.string,
+  items: PropTypes.array,
+  sortItems: PropTypes.func,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  toggleAllSelected: PropTypes.func,
+  toggleItemSelected: PropTypes.func,
+  zipDownloadFolder: PropTypes.func,
+  showImagePopup: PropTypes.func,
 };
 
 class Item extends React.Component {
@@ -884,15 +884,15 @@ class Item extends React.Component {
 }
 
 Item.propTypes = {
-  isDesktop: PropTypes.bool.isRequired,
-  item: PropTypes.object.isRequired,
-  sortItems: PropTypes.func.isRequired,
-  sortBy: PropTypes.string.isRequired,
-  sortOrder: PropTypes.string.isRequired,
-  toggleAllSelected: PropTypes.func.isRequired,
-  toggleItemSelected: PropTypes.func.isRequired,
-  zipDownloadFolder: PropTypes.func.isRequired,
-  showImagePopup: PropTypes.func.isRequired,
+  isDesktop: PropTypes.bool,
+  item: PropTypes.object,
+  sortItems: PropTypes.func,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  toggleAllSelected: PropTypes.func,
+  toggleItemSelected: PropTypes.func,
+  zipDownloadFolder: PropTypes.func,
+  showImagePopup: PropTypes.func,
 };
 
 class GridItem extends React.Component {
@@ -968,9 +968,9 @@ class GridItem extends React.Component {
 }
 
 GridItem.propTypes = {
-  item: PropTypes.object.isRequired,
-  zipDownloadFolder: PropTypes.func.isRequired,
-  showImagePopup: PropTypes.func.isRequired,
+  item: PropTypes.object,
+  zipDownloadFolder: PropTypes.func,
+  showImagePopup: PropTypes.func,
 };
 
 ReactDom.render(<SharedDirView />, document.getElementById('wrapper'));
diff --git a/frontend/src/wiki.js b/frontend/src/wiki.js
index b61a3238444..4dbfb5ea053 100644
--- a/frontend/src/wiki.js
+++ b/frontend/src/wiki.js
@@ -48,7 +48,7 @@ class Wiki extends Component {
     this.pythonWrapper = null;
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!Utils.isDesktop()) {
       this.setState({ closeSideBar: true });
     }