reactify admin/export

src/client/js/app.jsx

@@ -37,6 +37,7 @@ import CustomCssEditor from './components/Admin/CustomCssEditor';
 import CustomScriptEditor from './components/Admin/CustomScriptEditor';
 import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
+import ExportPage from './components/Admin/Export/ExportPage';
 import GroupDeleteModal from './components/GroupDeleteModal/GroupDeleteModal';
 
 import AppContainer from './services/AppContainer';
@@ -185,6 +186,20 @@ if (adminGrantSelectorElem != null) {
   );
 }
 
+const adminExportPageElem = document.getElementById('admin-export-page');
+if (adminExportPageElem != null) {
+  ReactDOM.render(
+    <Provider inject={[]}>
+      <I18nextProvider i18n={i18n}>
+        <ExportPage
+          crowi={appContainer}
+        />
+      </I18nextProvider>
+    </Provider>,
+    adminExportPageElem,
+  );
+}
+
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
   ReactDOM.render(

src/client/js/components/Admin/Export/ExportAsZip.jsx

@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+// import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class ExportPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.createZipFile = this.createZipFile.bind(this);
+    this.deleteZipFile = this.deleteZipFile.bind(this);
+  }
+
+  async createZipFile() {
+    // TODO use appContainer.apiv3.post
+    await this.props.appContainer.apiPost('/v3/export/pages', {});
+    // TODO toastSuccess, toastError
+  }
+
+  async deleteZipFile() {
+    // TODO use appContainer.apiv3.delete
+    // TODO toastSuccess, toastError
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        <h2>Export Data as Zip</h2>
+        <button onClick={this.createZipFile}>Generate</button>
+        <a href="/_api/v3/export/pages">
+          <button>Download</button>
+        </a>
+        <button onClick={this.deleteZipFile}>Clear</button>
+      </Fragment>
+    );
+  }
+
+}
+
+ExportPage.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  isAclEnabled: PropTypes.bool,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ExportPageWrapper = (props) => {
+  return createSubscribedElement(ExportPage, props, [AppContainer]);
+};
+
+export default withTranslation()(ExportPageWrapper);

src/client/js/components/Admin/Export/ExportPage.jsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+
+import ExportAsZip from './ExportAsZip';
+
+class ExportPage extends React.Component {
+
+  render() {
+    return (
+      <Fragment>
+        <ExportAsZip />
+      </Fragment>
+    );
+  }
+
+}
+
+export default ExportPage;

src/server/views/admin/export.html

@@ -18,12 +18,9 @@
       {% include './widget/menu.html' with {current: 'export'} %}
     </div>
     <div
-      id=""
+      id="admin-export-page"
       class="col-md-9"
     >
-    <!-- <a href='/_api/v3/export/pages/download'>
-      <button>download</button>
-    </a> -->
     </div>
   </div>
 </div>