add page transition

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -13,15 +13,27 @@ const ThreeStrandedButton = (props) => {
 
   return (
     <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button type="button" className="btn btn-outline-primary view-button" onClick={() => { threeStrandedButtonClickedHandler('view') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary view-button"
+        onClick={() => { threeStrandedButtonClickedHandler('view') }}
+      >
         <i className="icon-control-play icon-fw" />
         { t('view') }
       </button>
-      <button type="button" className="btn btn-outline-primary edit-button" onClick={() => { threeStrandedButtonClickedHandler('edit') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary edit-button"
+        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+      >
         <i className="icon-note icon-fw" />
         { t('Edit') }
       </button>
-      <button type="button" className="btn btn-outline-primary hackmd-button" onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}>
+      <button
+        type="button"
+        className="btn btn-outline-primary hackmd-button"
+        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+      >
         <i className="fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
       </button>

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
-import PageContainer from '../../services/PageContainer';
 import NavigationContainer from '../../services/NavigationContainer';
 import Editor from '../PageEditor';
 import Page from '../Page';
@@ -10,28 +10,34 @@ import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
-  const { navigationContainer, pageContainer } = props;
-  const { page } = pageContainer;
+  const { navigationContainer } = props;
   const { editorMode } = navigationContainer.state;
 
+
   return (
     <>
-      {editorMode === 'view' && <Page />}
-      {editorMode === 'edit' && (
-        <>
-          <Editor />
-          <EditorNavbarBottom />
-        </>
-      )}
-      {editorMode === 'hackmd' && <PageEditorByHackmd />}
+      <TabContent activeTab={editorMode}>
+        <TabPane tabId="view">
+          <Page />
+        </TabPane>
+        <TabPane tabId="edit">
+          <>
+            <Editor />
+            <EditorNavbarBottom />
+          </>
+          )
+        </TabPane>
+        <TabPane tabId="hackmd">
+          <PageEditorByHackmd />
+        </TabPane>
+      </TabContent>
     </>
   );
 };
 
 DisplaySwitcher.propTypes = {
   navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
-  pageContainer: propTypes.instanceOf(PageContainer).isRequired,
 };
 
 
-export default withUnstatedContainers(DisplaySwitcher, [PageContainer, NavigationContainer]);
+export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer]);

src/client/js/services/NavigationContainer.js

@@ -35,10 +35,6 @@ export default class NavigationContainer extends Container {
       isPageCreateModalShown: false,
     };
 
-    const editPage = document.querySelector('#edit');
-    if (editPage) {
-      return 'hoge';
-    }
 
     this.openPageCreateModal = this.openPageCreateModal.bind(this);
     this.closePageCreateModal = this.closePageCreateModal.bind(this);