WIP: re-impl PageStatusAlert

resource/js/app.js

@@ -176,6 +176,7 @@ const saveWithShortcutSuccessHandler = function(page) {
 
   pageId = page._id;
   pageRevisionId = page.revision._id;
+  pageRevisionIdHackmdSynced = (page.revisionHackmdSynced != null) ? page.revisionHackmdSynced._id : null;
 
   // set page id to SavePageControls
   componentInstances.savePageControls.setPageId(pageId);
@@ -199,7 +200,7 @@ const saveWithShortcutSuccessHandler = function(page) {
   // clear state of PageStatusAlert
   const pageStatusAlert = componentInstances.pageStatusAlert;
   if (componentInstances.pageStatusAlert != null) {
-    pageStatusAlert.clearStatus(pageRevisionId);
+    pageStatusAlert.clearStatus(pageRevisionId, pageRevisionIdHackmdSynced);
   }
 };
 
@@ -393,7 +394,7 @@ if (pageStatusAlertElem) {
               pageStatusAlert = elem.getWrappedInstance();
             }
           }}
-          revisionId={pageRevisionId} hasDraftOnHackmd={hasDraftOnHackmd} />
+          revisionId={pageRevisionId} revisionIdHackmdSynced={pageRevisionIdHackmdSynced} hasDraftOnHackmd={hasDraftOnHackmd} />
     </I18nextProvider>,
     pageStatusAlertElem
   );
@@ -436,7 +437,9 @@ if (customHeaderEditorElem != null) {
 function updatePageStatusAlert(page, user) {
   const pageStatusAlert = componentInstances.pageStatusAlert;
   if (pageStatusAlert != null) {
-    pageStatusAlert.setLatestRevisionId(page._id.toString());
+    const revisionId = page.revision._id;
+    const revisionIdHackmdSynced = (page.revisionHackmdSynced != null) ? page.revisionHackmdSynced._id : null;
+    pageStatusAlert.setRevisionId(revisionId, revisionIdHackmdSynced);
     pageStatusAlert.setLastUpdateUsername(user.name);
   }
 }
@@ -465,8 +468,8 @@ socket.on('page:update', function(data) {
     // update PageEditorByHackmd
     const pageEditorByHackmd = componentInstances.pageEditorByHackmd;
     if (pageEditorByHackmd != null) {
-      // pageEditorByHackmd.setRevisionId(data.page.hasDraftOnHackmd);
-      // pageEditorByHackmd.setRevisionIdHackmdSynced(data.page.hasDraftOnHackmd);
+      pageEditorByHackmd.setRevisionId(data.page.revision._id);
+      pageEditorByHackmd.setRevisionIdHackmdSynced(data.page.revisionHackmdSynced._id);
       pageEditorByHackmd.setHasDraftOnHackmd(data.page.hasDraftOnHackmd);
     }
   }

resource/js/components/PageEditorByHackmd.jsx

@@ -18,6 +18,7 @@ export default class PageEditorByHackmd extends React.PureComponent {
       isInitialized: false,
       isInitializing: false,
       revisionId: this.props.revisionId,
+      revisionIdHackmdSynced: this.props.revisionIdHackmdSynced,
       pageIdOnHackmd: this.props.pageIdOnHackmd,
       hasDraftOnHackmd: this.props.hasDraftOnHackmd,
     };
@@ -64,6 +65,14 @@ export default class PageEditorByHackmd extends React.PureComponent {
     this.setState({revisionId});
   }
 
+  /**
+   * update revisionIdHackmdSynced of state
+   * @param {string} revisionIdHackmdSynced
+   */
+  setRevisionIdHackmdSynced(revisionIdHackmdSynced) {
+    this.setState({revisionIdHackmdSynced});
+  }
+
   /**
    * update hasDraftOnHackmd of state
    * @param {bool} hasDraftOnHackmd
@@ -171,8 +180,8 @@ export default class PageEditorByHackmd extends React.PureComponent {
     const hackmdUri = this.getHackmdUri();
 
     const isPageExistsOnHackmd = (this.state.pageIdOnHackmd != null);
-    const isRevisionMatch = (this.state.revisionId === this.props.revisionIdHackmdSynced);
-    const isResume = isPageExistsOnHackmd && isRevisionMatch && this.state.hasDraftOnHackmd;
+    const isResume = isPageExistsOnHackmd && this.state.hasDraftOnHackmd;
+    const isRevisionMatch = (this.state.revisionId === this.state.revisionIdHackmdSynced);
 
     if (this.state.isInitialized) {
       return (

resource/js/components/PageStatusAlert.jsx

@@ -17,8 +17,9 @@ class PageStatusAlert extends React.Component {
     super(props);
 
     this.state = {
+      initialRevisionId: this.props.revisionId,
       revisionId: this.props.revisionId,
-      latestRevisionId: this.props.revisionId,
+      revisionIdHackmdSynced: this.props.revisionIdHackmdSynced,
       lastUpdateUsername: undefined,
       hasDraftOnHackmd: this.props.hasDraftOnHackmd,
       isDraftUpdatingInRealtime: false,
@@ -32,21 +33,22 @@ class PageStatusAlert extends React.Component {
   /**
    * clear status (invoked when page is updated)
    */
-  clearStatus(updatedRevisionId) {
+  clearStatus(updatedRevisionId, updatedRevisionIdHackmdSynced) {
     this.setState({
+      initialRevisionId: updatedRevisionId,
       revisionId: updatedRevisionId,
-      latestRevisionId: updatedRevisionId,
+      revisionIdHackmdSynced: updatedRevisionIdHackmdSynced,
       hasDraftOnHackmd: false,
       isDraftUpdatingInRealtime: false,
     });
   }
 
-  setLatestRevisionId(revisionId) {
-    this.setState({latestRevisionId: revisionId});
+  setRevisionId(revisionId, revisionIdHackmdSynced) {
+    this.setState({ revisionId, revisionIdHackmdSynced });
   }
 
   setLastUpdateUsername(lastUpdateUsername) {
-    this.setState({lastUpdateUsername});
+    this.setState({ lastUpdateUsername });
   }
 
   setHasDraftOnHackmd(hasDraftOnHackmd) {
@@ -108,14 +110,20 @@ class PageStatusAlert extends React.Component {
   render() {
     let content = <React.Fragment></React.Fragment>;
 
-    if (this.state.isDraftUpdatingInRealtime) {
-      content = this.renderSomeoneEditingAlert();
-    }
-    else if (this.state.hasDraftOnHackmd) {
-      content = this.renderDraftExistsAlert();
+    const isHackmdDocumentLatest = this.state.revisionId === this.state.revisionIdHackmdSynced;
+
+    if (!isHackmdDocumentLatest) {
+      if (this.state.initialRevisionId !== this.state.revisionId) {
+        content = this.renderUpdatedAlert();
+      }
     }
-    else if (this.state.revisionId !== this.state.latestRevisionId) {
-      content = this.renderUpdatedAlert();
+    else {
+      if (this.state.isDraftUpdatingInRealtime) {
+        content = this.renderSomeoneEditingAlert();
+      }
+      else if (this.state.hasDraftOnHackmd) {
+        content = this.renderDraftExistsAlert();
+      }
     }
 
     return content;
@@ -127,7 +135,7 @@ PageStatusAlert.propTypes = {
   crowi: PropTypes.object.isRequired,
   hasDraftOnHackmd: PropTypes.bool.isRequired,
   revisionId: PropTypes.string,
-  latestRevisionId: PropTypes.string,
+  revisionIdHackmdSynced: PropTypes.string,
 };
 
 PageStatusAlert.defaultProps = {

resource/styles/scss/_on-edit.scss

@@ -290,11 +290,6 @@ body.on-edit {
         right: 0;
       }
     }
-
-    // hide #page-status-alert
-    #page-status-alert {
-      display: none;
-    }
   }
 
 }