[file view] code improvement (#3180)

* added component 'file-view.js'

frontend/src/view-file-image.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import watermark from 'watermark-dom';
-import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
-import { gettext, siteRoot, siteName } from './utils/constants';
-import FileInfo from './components/file-view/file-info';
-import FileToolbar from './components/file-view/file-toolbar';
+import { gettext, siteRoot } from './utils/constants';
+import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
-import CommentPanel from './components/file-view/comment-panel';
 
-import './css/file-view.css';
 import './css/image-file-view.css';
 
-const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, err, enableWatermark, userNickName,
-  // the following are only for image file view
+const {
+  repoID, filePath, err,
   fileName, previousImage, nextImage, rawPath
 } = window.app.pageOptions;
 
@@ -27,16 +21,14 @@ if (nextImage) {
 }
 
 class ViewFileImage extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isStarred: isStarred,
-      isLocked: isLocked,
-      lockedByMe: lockedByMe,
-      isCommentPanelOpen: false
-    };
+  render() {
+    return (
+      <FileView content={<FileContent />} />
+    );
   }
+}
+
+class FileContent extends React.Component {
 
   componentDidMount() {
     document.addEventListener('keydown', (e) => {
@@ -49,75 +41,6 @@ class ViewFileImage extends React.Component {
     });
   }
 
-  toggleCommentPanel = () => {
-    this.setState({
-      isCommentPanelOpen: !this.state.isCommentPanelOpen
-    });
-  }
-
-  toggleStar = () => {
-    if (this.state.isStarred) {
-      seafileAPI.unStarItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: false
-        });
-      });
-    } else {
-      seafileAPI.starItem(repoID, filePath).then((res) => {
-        this.setState({
-          isStarred: true
-        });
-      });
-    }
-  }
-
-  toggleLockFile = () => {
-    if (this.state.isLocked) {
-      seafileAPI.unlockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: false, 
-          lockedByMe: false 
-        });
-      });
-    } else {
-      seafileAPI.lockfile(repoID, filePath).then((res) => {
-        this.setState({
-          isLocked: true,
-          lockedByMe: true
-        });
-      });
-    }    
-  }
-
-  render() {
-    return (
-      <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-          />
-          <FileToolbar 
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            toggleLockFile={this.toggleLockFile}
-            toggleCommentPanel={this.toggleCommentPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex">
-          <FileContent />
-          {this.state.isCommentPanelOpen &&
-            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
-          }
-        </div>
-      </div>
-    );
-  }
-}
-
-class FileContent extends React.Component {
-
   render() {
     if (err) {
       return <FileViewTip />;
@@ -136,13 +59,6 @@ class FileContent extends React.Component {
   }
 }
 
-if (enableWatermark) {
-  watermark.init({
-    watermark_txt: `${siteName} ${userNickName}`,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render (
   <ViewFileImage />,
   document.getElementById('wrapper')