WIP: GC-703 update with HackMD

lib/routes/page.js

@@ -24,15 +24,27 @@ module.exports = function(crowi, app) {
 
   const pageEvent = crowi.event('page');
   pageEvent.on('create', function(page, user, socketClientId) {
+    page = serializeToObj(page);
     crowi.getIo().sockets.emit('page:create', {page, user, socketClientId});
   });
   pageEvent.on('update', function(page, user, socketClientId) {
+    page = serializeToObj(page);
     crowi.getIo().sockets.emit('page:update', {page, user, socketClientId});
   });
   pageEvent.on('delete', function(page, user, socketClientId) {
+    page = serializeToObj(page);
     crowi.getIo().sockets.emit('page:delete', {page, user, socketClientId});
   });
 
+
+  function serializeToObj(page) {
+    const returnObj = page.toObject();
+    if (page.revisionHackmdSynced != null && page.revisionHackmdSynced._id != null) {
+      returnObj.revisionHackmdSynced = page.revisionHackmdSynced._id;
+    }
+    return returnObj;
+  }
+
   function getPathFromRequest(req) {
     const path = '/' + (req.params[0] || '');
     return path.replace(/\.md$/, '');
@@ -801,7 +813,7 @@ module.exports = function(crowi, app) {
         return res.json(ApiResponse.error(err));
       });
 
-    const result = { page: createdPage.toObject() };
+    const result = { page: serializeToObj(createdPage) };
     result.page.lastUpdateUser = User.filterToPublicFields(createdPage.lastUpdateUser);
     result.page.creator = User.filterToPublicFields(createdPage.creator);
     res.json(ApiResponse.success(result));
@@ -874,7 +886,7 @@ module.exports = function(crowi, app) {
         res.json(ApiResponse.error(err));
       });
 
-    const result = { page: updatedPage.toObject() };
+    const result = { page: serializeToObj(updatedPage) };
     result.page.lastUpdateUser = User.filterToPublicFields(updatedPage.lastUpdateUser);
     res.json(ApiResponse.success(result));
 
@@ -920,7 +932,7 @@ module.exports = function(crowi, app) {
 
     pageFinder.then(function(pageData) {
       const result = {};
-      result.page = pageData;
+      result.page = pageData;   // TODO consider to use serializeToObj method -- 2018.08.06 Yuki Takei
 
       return res.json(ApiResponse.success(result));
     }).catch(function(err) {
@@ -1084,7 +1096,7 @@ module.exports = function(crowi, app) {
       .then(function(data) {
         debug('Page deleted', data.path);
         const result = {};
-        result.page = data;
+        result.page = data;   // TODO consider to use serializeToObj method -- 2018.08.06 Yuki Takei
 
         res.json(ApiResponse.success(result));
         return data;
@@ -1124,7 +1136,7 @@ module.exports = function(crowi, app) {
       }
     }).then(function(data) {
       const result = {};
-      result.page = data;
+      result.page = data;   // TODO consider to use serializeToObj method -- 2018.08.06 Yuki Takei
 
       return res.json(ApiResponse.success(result));
     }).catch(function(err) {
@@ -1183,7 +1195,7 @@ module.exports = function(crowi, app) {
       })
       .then(function() {
         const result = {};
-        result.page = page;
+        result.page = page;   // TODO consider to use serializeToObj method -- 2018.08.06 Yuki Takei
 
         return res.json(ApiResponse.success(result));
       })
@@ -1240,7 +1252,7 @@ module.exports = function(crowi, app) {
     }).then(function(data) {
       debug('Redirect Page deleted', data.path);
       const result = {};
-      result.page = data;
+      result.page = data;   // TODO consider to use serializeToObj method -- 2018.08.06 Yuki Takei
 
       return res.json(ApiResponse.success(result));
     }).catch(function(err) {

resource/js/app.js

@@ -176,29 +176,31 @@ const saveWithShortcutSuccessHandler = function(page) {
 
   pageId = page._id;
   pageRevisionId = page.revision._id;
-  pageRevisionIdHackmdSynced = (page.revisionHackmdSynced != null) ? page.revisionHackmdSynced._id : null;
+  pageRevisionIdHackmdSynced = page.revisionHackmdSynced;
 
   // set page id to SavePageControls
   componentInstances.savePageControls.setPageId(pageId);
 
-  // re-render Page component
+  // Page component
   if (componentInstances.page != null) {
     componentInstances.page.setMarkdown(page.revision.body);
   }
-  // re-render PageEditor component
+  // PageEditor component
   if (componentInstances.pageEditor != null) {
     const updateEditorValue = (editorMode !== 'builtin');
     componentInstances.pageEditor.setMarkdown(page.revision.body, updateEditorValue);
   }
-  // set revision id to PageEditorByHackmd
+  // PageEditorByHackmd component
   if (componentInstances.pageEditorByHackmd != null) {
-    componentInstances.pageEditorByHackmd.setRevisionId(pageRevisionId);
+    // clear state of PageEditorByHackmd
+    componentInstances.pageEditorByHackmd.clearStatus(pageRevisionId, pageRevisionIdHackmdSynced);
 
     const updateEditorValue = (editorMode !== 'hackmd');
     componentInstances.pageEditorByHackmd.setMarkdown(page.revision.body, updateEditorValue);
   }
-  // clear state of PageStatusAlert
+  // PageStatusAlert component
   const pageStatusAlert = componentInstances.pageStatusAlert;
+  // clear state of PageStatusAlert
   if (componentInstances.pageStatusAlert != null) {
     pageStatusAlert.clearStatus(pageRevisionId, pageRevisionIdHackmdSynced);
   }
@@ -446,7 +448,7 @@ function updatePageStatusAlert(page, user) {
   const pageStatusAlert = componentInstances.pageStatusAlert;
   if (pageStatusAlert != null) {
     const revisionId = page.revision._id;
-    const revisionIdHackmdSynced = (page.revisionHackmdSynced != null) ? page.revisionHackmdSynced._id : null;
+    const revisionIdHackmdSynced = page.revisionHackmdSynced;
     pageStatusAlert.setRevisionId(revisionId, revisionIdHackmdSynced);
     pageStatusAlert.setLastUpdateUsername(user.name);
   }
@@ -477,9 +479,7 @@ socket.on('page:update', function(data) {
     const pageEditorByHackmd = componentInstances.pageEditorByHackmd;
     if (pageEditorByHackmd != null) {
       const page = data.page;
-      const revisionId = page.revision._id;
-      const revisionIdHackmdSynced = (page.revisionHackmdSynced != null) ? page.revisionHackmdSynced._id : null;
-      pageEditorByHackmd.setRevisionId(revisionId, revisionIdHackmdSynced);
+      pageEditorByHackmd.setRevisionId(page.revision._id, page.revisionHackmdSynced);
       pageEditorByHackmd.setHasDraftOnHackmd(data.page.hasDraftOnHackmd);
     }
   }
@@ -497,6 +497,7 @@ socket.on('page:delete', function(data) {
   }
 });
 socket.on('page:editingWithHackmd', function(data) {
+  console.log(data);
   // skip if triggered myself
   if (data.socketClientId != null && data.socketClientId === socketClientId) {
     return;

resource/js/components/PageEditorByHackmd.jsx

@@ -58,6 +58,19 @@ export default class PageEditorByHackmd extends React.PureComponent {
     }
   }
 
+  /**
+   * clear status (invoked when page is updated by myself)
+   */
+  clearStatus(updatedRevisionId, updatedRevisionIdHackmdSynced) {
+    this.setState({
+      initialRevisionId: updatedRevisionId,
+      revisionId: updatedRevisionId,
+      revisionIdHackmdSynced: updatedRevisionIdHackmdSynced,
+      hasDraftOnHackmd: false,
+      isDraftUpdatingInRealtime: false,
+    });
+  }
+
   /**
    * update revisionId of state
    * @param {string} revisionId

resource/js/components/PageStatusAlert.jsx

@@ -31,7 +31,7 @@ class PageStatusAlert extends React.Component {
   }
 
   /**
-   * clear status (invoked when page is updated)
+   * clear status (invoked when page is updated by myself)
    */
   clearStatus(updatedRevisionId, updatedRevisionIdHackmdSynced) {
     this.setState({