success to show buttons

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

@@ -16,7 +16,7 @@ import RevisionPathControls from '../Page/RevisionPathControls';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
-import ThreeStrandedButton from './ThreeStrandedButton';
+import { TwoStrandedButton, Hoge } from './ThreeStrandedButton';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
@@ -133,11 +133,18 @@ const GrowiSubNavigation = (props) => {
           </div>
           <div className={`${isEditorMode ? 'ml-2' : 'mt-2'}`}>
             {pageContainer.isAbleToShowThreeStrandedButton && (
-              <ThreeStrandedButton
-                onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
-                isBtnDisabled={isGuestUser}
-                editorMode={editorMode}
-              />
+              <>
+                <TwoStrandedButton
+                  onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+                  isBtnDisabled={isGuestUser}
+                  editorMode={editorMode}
+                />
+                <Hoge
+                  onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+                  isBtnDisabled={isGuestUser}
+                  editorMode={editorMode}
+                />
+              </>
             )}
           </div>
         </div>

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

@@ -70,4 +70,76 @@ ThreeStrandedButton.defaultProps = {
   isBtnDisabled: false,
 };
 
-export default withTranslation()(ThreeStrandedButton);
+// export const Huga = withTranslation()(ThreeStrandedButton);
+
+
+export const TwoStrandedButton = withTranslation()((props) => {
+// const TwoStrandedButton = (props) => {
+  const { t, isBtnDisabled, editorMode } = props;
+
+
+  function threeStrandedButtonClickedHandler(viewType) {
+    if (isBtnDisabled) {
+      return;
+    }
+    if (props.onThreeStrandedButtonClicked != null) {
+      props.onThreeStrandedButtonClicked(viewType);
+    }
+  }
+
+  return (
+    <>
+      <div
+        className="btn-group grw-three-stranded-button"
+        role="group"
+        aria-label="three-stranded-button"
+        id="grw-three-stranded-button"
+      >
+        <button
+          type="button"
+          className={`btn btn-outline-primary view-button ${editorMode === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('view') }}
+        >
+          <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
+          { t('view') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary edit-button ${editorMode === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+        >
+          <i className="icon-note icon-fw grw-three-stranded-button-icon" />
+          { t('Edit') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary hackmd-button ${editorMode === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+        >
+          <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />
+          { t('hackmd.hack_md') }
+        </button>
+      </div>
+      {isBtnDisabled && (
+        <UncontrolledTooltip placement="top" target="grw-three-stranded-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+      )}
+    </>
+  );
+
+});
+
+TwoStrandedButton.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  onThreeStrandedButtonClicked: PropTypes.func,
+  isBtnDisabled: PropTypes.bool,
+  editorMode: PropTypes.string,
+};
+
+TwoStrandedButton.defaultProps = {
+  isBtnDisabled: false,
+};
+
+export const Hoge = withTranslation()(ThreeStrandedButton);
+// export default withTranslation()(ThreeStrandedButton);