Revert "feat: sdoc metadata (#6682)" (#6684)

This reverts commit 9bda201094.

frontend/src/pages/sdoc/sdoc-editor/index.js

@@ -1,106 +1,94 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Fragment } from 'react';
 import { SimpleEditor } from '@seafile/sdoc-editor';
 import ExternalOperations from './external-operations';
 import { seafileAPI } from '../../../utils/seafile-api';
 import Dirent from '../../../models/dirent';
 import { Utils } from '../../../utils/utils';
-import { useCollaborators } from '../../../metadata';
-import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details';
 
-const SdocEditor = () => {
-  const [isStarred, setStarted] = useState(window.app.pageOptions.isStarred);
-  const [isDraft] = useState(window.app.pageOptions.isSdocDraft);
-  const [direntList, setDirentList] = useState([]);
-  const [currentDirent, setCurrentDirent] = useState(null);
-  const { collaborators } = useCollaborators();
-  const plugins = useMemo(() => {
-    const { repoID, docPath, docPerm } = window.seafile;
-    return [
-      {
-        name: 'sdoc-info',
-        icon: 'sdoc-info',
-        resizable_width: true,
-        display_type: 'right-panel',
-        component: ({ onClose, width }) => {
-          return (<EmbeddedFileDetails repoID={repoID} onClose={onClose} path={docPath} dirent={currentDirent} repoInfo={{ permission: docPerm }} width={width} />);
-        },
-      }
-    ];
-  }, [currentDirent]);
+export default class SdocEditor extends React.Component {
 
-  const dirPath = useMemo(() => {
-    const { docPath } = window.seafile;
-    const index = docPath.lastIndexOf('/');
-    if (index) {
-      return docPath.slice(0, index);
-    }
-    return '/';
-  }, []);
+  constructor(props) {
+    super(props);
+    const { isStarred, isSdocDraft } = window.app.pageOptions;
+    this.state = {
+      isStarred: isStarred,
+      isDraft: isSdocDraft,
+      direntList: []
+    };
+  }
 
-  const onSetFavicon = useCallback((suffix) => {
+  componentDidMount() {
+    this.onSetFavicon();
+    this.getDirentList();
+  }
+
+  toggleStar = (isStarred) => {
+    this.setState({ isStarred: isStarred });
+  };
+
+  onSetFavicon = (suffix) => {
     let { docName } = window.seafile;
     if (suffix) {
       docName = docName + suffix;
     }
     const fileIcon = Utils.getFileIconUrl(docName);
     document.getElementById('favicon').href = fileIcon;
-  }, []);
-
-  const toggleStar = (isStarred) => {
-    setStarted(isStarred);
   };
 
-  const onNewNotification = useCallback(() => {
-    onSetFavicon('_notification');
-  }, [onSetFavicon]);
+  onNewNotification = () => {
+    this.onSetFavicon('_notification');
+  };
 
-  const onClearNotification = useCallback(() => {
-    onSetFavicon();
-  }, [onSetFavicon]);
+  onClearNotification = () => {
+    this.onSetFavicon();
+  };
 
-  const getDirentList = () => {
-    const { repoID, docPath } = window.seafile;
-    seafileAPI.listDir(repoID, dirPath, { 'with_thumbnail': true }).then(res => {
+  getDirPath = () => {
+    const { docPath } = window.seafile;
+    const index = docPath.lastIndexOf('/');
+    if (index) {
+      return docPath.slice(0, index);
+    }
+    return '/';
+  };
+
+  getDirentList = () => {
+    const { repoID } = window.seafile;
+    const path = this.getDirPath();
+    seafileAPI.listDir(repoID, path, { 'with_thumbnail': true }).then(res => {
       let direntList = [];
       res.data.dirent_list.forEach(item => {
-        const dirent = new Dirent(item);
-        if (Utils.joinPath(item.parent_dir, item.name) === docPath) {
-          setCurrentDirent(dirent);
-        }
+        let dirent = new Dirent(item);
         direntList.push(dirent);
       });
-      setDirentList(direntList);
+      this.setState({
+        direntList: direntList
+      });
     }).catch((err) => {
       Utils.getErrorMsg(err, true);
     });
   };
 
-  useEffect(() => {
-    onSetFavicon();
-    getDirentList();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const { repoID, docPath, docName, docPerm } = window.seafile;
-  return (
-    <>
-      <SimpleEditor isStarred={isStarred} isDraft={isDraft} plugins={plugins} collaborators={collaborators} showComment={true} />
-      <ExternalOperations
-        repoID={repoID}
-        docPath={docPath}
-        docName={docName}
-        docPerm={docPerm}
-        isStarred={isStarred}
-        direntList={direntList}
-        dirPath={dirPath}
-        toggleStar={toggleStar}
-        onNewNotification={onNewNotification}
-        onClearNotification={onClearNotification}
-      />
-    </>
-  );
-
-};
-
-export default SdocEditor;
-
+  render() {
+    const { repoID, docPath, docName, docPerm } = window.seafile;
+    const { isStarred, isDraft, direntList } = this.state;
+    const dirPath = this.getDirPath();
+    return (
+      <Fragment>
+        <SimpleEditor isStarred={isStarred} isDraft={isDraft} />
+        <ExternalOperations
+          repoID={repoID}
+          docPath={docPath}
+          docName={docName}
+          docPerm={docPerm}
+          isStarred={isStarred}
+          direntList={direntList}
+          dirPath={dirPath}
+          toggleStar={this.toggleStar}
+          onNewNotification={this.onNewNotification}
+          onClearNotification={this.onClearNotification}
+        />
+      </Fragment>
+    );
+  }
+}