fix warnings and rename unsafe lifecycle function (#5814)

frontend/src/app.js

@@ -72,7 +72,7 @@ class App extends Component {
     }
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!Utils.isDesktop()) {
       this.setState({
         isSidePanelClosed: true

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});
     }

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});
     }

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});
     }

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);
   }
 

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);
   }
 

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});
   }
 

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({

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);

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);
     }

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});

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,

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);

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;
 

frontend/src/components/index-viewer.js

@@ -42,15 +42,15 @@ class IndexContentViewer extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getRootNode();
   }
 
   componentDidMount() {
     this.bindClickEvent();
   }
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this.removeClickEvent();
   }
 

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';
 

frontend/src/components/select-editor/select-editor.js

@@ -75,7 +75,7 @@ class SelectEditor extends React.Component {
     });
   };
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this.setOptions();
   }
 

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 (

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;
 

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);
   }

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,

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;
     }

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;

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);
     }

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});
     }

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});

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];

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
     };

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,});
   }
 

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 {

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);

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;

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;

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;

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

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});
   }
 

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);
     }

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);
     }

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);
     }

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);
     }