replace string value with enum

packages/app/src/components/Navbar/PageEditorModeManager.jsx

@@ -72,7 +72,7 @@ function PageEditorModeManager(props) {
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            targetMode="view"
+            targetMode={EditorMode.View}
             icon={<i className="icon-control-play" />}
             label={t('view')}
           />
@@ -82,7 +82,7 @@ function PageEditorModeManager(props) {
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            targetMode="edit"
+            targetMode={EditorMode.Editor}
             icon={<i className="icon-note" />}
             label={t('Edit')}
           />
@@ -92,7 +92,7 @@ function PageEditorModeManager(props) {
             editorMode={editorMode}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            targetMode="hackmd"
+            targetMode={EditorMode.HackMD}
             icon={<i className="fa fa-file-text-o" />}
             label={t('hackmd.hack_md')}
             id="grw-page-editor-mode-manager-hackmd-button"

packages/app/src/components/Page/DisplaySwitcher.jsx

@@ -29,7 +29,7 @@ const DisplaySwitcher = (props) => {
   return (
     <>
       <TabContent activeTab={editorMode}>
-        <TabPane tabId="view">
+        <TabPane tabId={EditorMode.View}>
           <div className="d-flex flex-column flex-lg-row-reverse">
 
             <div className="grw-side-contents-container">
@@ -54,12 +54,12 @@ const DisplaySwitcher = (props) => {
 
           </div>
         </TabPane>
-        <TabPane tabId="edit">
+        <TabPane tabId={EditorMode.Editor}>
           <div id="page-editor">
             <Editor />
           </div>
         </TabPane>
-        <TabPane tabId="hackmd">
+        <TabPane tabId={EditorMode.HackMD}>
           <div id="page-editor-with-hackmd">
             <PageEditorByHackmd />
           </div>

packages/app/src/stores/ui.tsx

@@ -89,10 +89,9 @@ const postChangeEditorModeMiddleware: Middleware = (useSWRNext) => {
     return {
       ...swrNext,
       mutate: (data, shouldRevalidate) => {
-        const newEditorMode = data as unknown as EditorMode;
-
         return swrNext.mutate(data, shouldRevalidate)
           .then((value) => {
+            const newEditorMode = value as unknown as EditorMode;
             switch (newEditorMode) {
               case EditorMode.View:
                 $('body').removeClass('on-edit');