[view shared dir] rewrote it with react (#3211)

frontend/src/components/dialog/share-link-zip-download-dialog.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap'; 
+import { gettext, fileServerRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../loading';
+
+const propTypes = {
+  token: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+let interval;
+
+class ShareLinkZipDownloadDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMsg: '',
+      zipProgress: null
+    };
+  }
+
+  componentDidMount() {
+    const { token, path } = this.props;
+    seafileAPI.getShareLinkZipTask(token, path).then((res) => {
+      const zipToken = res.data['zip_token'];
+      this.setState({
+        isLoading: false,
+        errorMsg: '',
+        zipToken: zipToken 
+      }); 
+      this.queryZipProgress();
+      interval = setInterval(this.queryZipProgress, 1000);
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        isLoading: false,
+        errorMsg: errorMsg
+      }); 
+    });
+  }
+
+  queryZipProgress = () => {
+    const zipToken = this.state.zipToken;
+    seafileAPI.queryZipProgress(zipToken).then((res) => {
+      const data = res.data;
+      this.setState({
+        zipProgress: data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(2) + '%'
+      });
+      if (data['total'] == data['zipped']) {
+        clearInterval(interval);
+        this.props.toggleDialog();
+        location.href = `${fileServerRoot}zip/${zipToken}`;
+      }
+    }).catch((error) => {
+      clearInterval(interval);
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        isLoading: false,
+        errorMsg: errorMsg
+      }); 
+    });
+  }
+
+  cancelZipTask = () => {
+    const zipToken = this.state.zipToken;
+    seafileAPI.cancelZipTask(zipToken).then((res) => {
+    // do nothing
+    }).catch((error) => {
+    // do nothing
+    });
+  }
+
+  toggleDialog = () => {
+    const zipProgress = this.state.zipProgress;
+    if (zipProgress && zipProgress != '100%') {
+      clearInterval(interval);
+      this.cancelZipTask();
+    }
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.toggleDialog}>
+        <ModalHeader toggle={this.toggleDialog}>{gettext('Download')}</ModalHeader>
+        <ModalBody>
+          <Content data={this.state} />
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  render() {
+    const {isLoading, errorMsg, zipProgress} = this.props.data;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-4 text-center">{errorMsg}</p>;
+    }
+
+    return <p className="mt-4 text-center">{`${gettext('Packaging...')} ${zipProgress}`}</p>;
+  }
+}
+
+ShareLinkZipDownloadDialog.propTypes = propTypes;
+
+export default ShareLinkZipDownloadDialog;