[shared file view] code improvement (#3185)

* added component shared-file-view.js & shared-file-view-tip.js
* modified 'text file view'

frontend/src/shared-file-view-pdf.js

@@ -1,140 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Account from './components/common/account';
-import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
-import { Button } from 'reactstrap';
-import { Utils } from './utils/utils';
-import SaveSharedFileDialog from './components/dialog/save-shared-file-dialog';
+import SharedFileView from './components/shared-file-view/shared-file-view';
+import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import PDFViewer from './components/pdf-viewer';
-import toaster from './components/toast';
-import watermark from 'watermark-dom';
 
-import './css/shared-file-view.css';
 import './css/pdf-file-view.css';
 
-let loginUser = window.app.pageOptions.name;
-const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, rawPath, sharedBy, siteName, enableWatermark, download, err } = window.shared.pageOptions;
-
-class SharedFileViewImage extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showSaveSharedFileDialog: false
-    };
-  }
-
-  handleSaveSharedFileDialog = () => {
-    this.setState({
-      showSaveSharedFileDialog: true
-    });
-  }
-
-  toggleCancel = () => {
-    this.setState({
-      showSaveSharedFileDialog: false
-    });
-  }
-
-  handleSaveSharedFile = () => {
-    toaster.success(gettext('Successfully saved'), {
-      duration: 3
-    });
-  }
-
-  componentDidMount() {
-    if (trafficOverLimit == 'True') {
-      toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
-        duration: 3
-      });
-    }
-  }
-
-  getContent() {
-    if (err) {
-      let errorMsg;
-      if (err == 'File preview unsupported') {
-        errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
-      } else {
-        errorMsg = <p className="error">{err}</p>;
-      }
-      return (
-        <div className="shared-file-view-body">
-          <div className="file-view-tip">
-            {errorMsg}
-          </div>
-        </div>
-      );
-    } else {
-      return (
-        <div className="shared-file-view-body pdf-file-view">
-          <PDFViewer />
-        </div>
-      );
-    }
-  }
+const { err } = window.shared.pageOptions;
 
+class SharedFileViewPDF extends React.Component {
   render() {
+    return <SharedFileView content={<FileContent />} />;
+  }
+}
+
+class FileContent extends React.Component {
+  render() {
+    if (err) {
+      return <SharedFileViewTip />;
+    }
+
     return (
-      <div className="shared-file-view-md">
-        <div className="shared-file-view-md-header d-flex">
-          <React.Fragment>
-            <a href={siteRoot}>
-              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
-            </a>
-          </React.Fragment>
-          { loginUser && <Account /> }
-        </div>
-        <div className="shared-file-view-md-main">
-          <div className="shared-file-view-head">
-            <div className="float-left">
-              <h2 className="ellipsis" title={fileName}>{fileName}</h2>
-              <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
-            </div>
-            {download &&
-              <div className="float-right">
-                {(loginUser && loginUser !== sharedBy) &&
-                  <Button color="secondary" id="save" className="shared-file-op-btn"
-                    onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
-                  </Button>
-                }{' '}
-                {(trafficOverLimit === 'False') &&
-                  <Button color="success" className="shared-file-op-btn">
-                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
-                  </Button>
-                }
-              </div>
-            }
-          </div>
-          {this.getContent()}
-        </div>
-        {this.state.showSaveSharedFileDialog &&
-          <SaveSharedFileDialog
-            repoID={repoID}
-            sharedToken={sharedToken}
-            toggleCancel={this.toggleCancel}
-            handleSaveSharedFile={this.handleSaveSharedFile}
-          />
-        }
+      <div className="shared-file-view-body pdf-file-view">
+        <PDFViewer />
       </div>
     );
   }
 }
 
-if (enableWatermark) {
-  let watermark_txt;
-  if (loginUser) {
-    watermark_txt = siteName + '  ' + loginUser;
-  } else {
-    watermark_txt = gettext('Anonymous User');
-  }
-  watermark.init({
-    watermark_txt: watermark_txt,
-    watermark_alpha: 0.075
-  });
-}
-
 ReactDOM.render(
-  <SharedFileViewImage />,
+  <SharedFileViewPDF />,
   document.getElementById('wrapper')
 );