add unstatedContainer

src/client/js/components/Page/ViewEditHackmd.jsx

@@ -1,18 +1,28 @@
 import React from 'react';
+import propTypes from 'prop-types';
 import PageEditor from '../PageEditor';
 import Page from '../Page';
 import PageEditorByHackmd from '../PageEditorByHackmd';
+import { withUnstatedContainers } from '../UnstatedUtils';
+import NavigationContainer from '../../services/NavigationContainer';
 
 
-function ViewEditHackmd() {
+const ViewEditHackmd = (props) => {
+  const { navigationContainer } = props;
 
   return (
     <div>
-      <Page />
-      <PageEditor />
-      <PageEditorByHackmd />
+      {navigationContainer.state.editorMode === 'view' && 'view'}
+      {navigationContainer.state.editorMode === 'edit' && 'edit'}
+      {navigationContainer.state.editorMode === 'hackmd' && 'hackmd'}
     </div>
   );
-}
 
-export default ViewEditHackmd;
+};
+
+ViewEditHackmd.propTypes = {
+  navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+
+export default withUnstatedContainers(ViewEditHackmd, [NavigationContainer]);

src/server/views/widget/page_content.html

@@ -39,12 +39,10 @@
 
   {% include 'page_alerts.html' %}
 
-
-  <div class="tab-content" id="view-edit-hackmd">
-    {% if page %}
-      <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
-      {% include '../_form.html' %}
-  </div>
-
-  <div id="grw-page-status-alert-container"></div>
+<div class="tab-content" id="view-edit-hackmd">
+  {% if page %}
+  <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
+  {% include '../_form.html' %}
+</div>
+<div id="grw-page-status-alert-container"></div>
 </div>