Merge pull request #2808 from weseek/reactify-pageForm-in-page_content.html

Reactify page form in page content.html

src/client/js/app.jsx

@@ -8,7 +8,7 @@ import loggerFactory from '@alias/logger';
 import ErrorBoundary from './components/ErrorBoudary';
 import SearchPage from './components/SearchPage';
 import TagsList from './components/TagsList';
-import PageEditor from './components/PageEditor';
+import DisplaySwitcher from './components/Page/DisplaySwitcher';
 import EditorNavbarBottom from './components/PageEditor/EditorNavbarBottom';
 import { defaultEditorOptions, defaultPreviewOptions } from './components/PageEditor/OptionsSelector';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
@@ -110,7 +110,7 @@ if (pageContainer.state.path != null) {
 // additional definitions if user is logged in
 if (appContainer.currentUser != null) {
   Object.assign(componentMappings, {
-    'page-editor': <PageEditor />,
+    'display-switcher': <DisplaySwitcher />,
     'page-editor-navbar-bottom-container': <EditorNavbarBottom />,
   });
   if (pageContainer.state.pageId != null) {

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

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

src/server/views/widget/page_content.html

@@ -39,36 +39,9 @@
 
   {% include 'page_alerts.html' %}
 
-  <div class="tab-content">
-
-    {% if page %}
-      <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
-
-      {# formatted text #}
-      <div class="tab-pane active" id="revision-body">
-        <div id="page" class="mt-4"></div>
-      </div>
-    {% endif %}
-
-    {% if !isTrashPage() %}
-      {# edit form #}
-      <div class="tab-pane" id="edit">
-        <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
-      </div>
-      <div class="tab-pane" id="hackmd">
-        <div id="page-editor-with-hackmd"></div>
-      </div>
-      {% include '../_form.html' %}
-    {% endif %}
-
-    {# raw revision history #}
-    {% if not page %}
-    {% else %}
-    <div class="tab-pane revision-history" id="revision-history">
-    </div>
-    {% endif %}
-
-  </div>
-
-  <div id="grw-page-status-alert-container"></div>
+<div class="tab-content" id="display-switcher">
+  <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>