set 'page edited' event for socket.io

resource/js/app.js

@@ -193,6 +193,11 @@ const saveWithShortcutSuccessHandler = function(page) {
     const updateEditorValue = (editorMode !== 'hackmd');
     componentInstances.pageEditorByHackmd.setMarkdown(page.revision.body, updateEditorValue);
   }
+  // set revision id to PageStatusAlert
+  const pageStatusAlert = componentInstances.pageStatusAlert;
+  if (componentInstances.pageStatusAlert != null) {
+    pageStatusAlert.initRevisionId(pageRevisionId);
+  }
 };
 
 const errorHandler = function(error) {
@@ -382,7 +387,7 @@ if (pageStatusAlertElem) {
               pageStatusAlert = elem.getWrappedInstance();
             }
           }}
-          pageRevisionId={pageRevisionId} />
+          revisionId={pageRevisionId} />
     </I18nextProvider>,
     pageStatusAlertElem
   );
@@ -425,10 +430,9 @@ if (customHeaderEditorElem != null) {
 const socket = io();
 socket.on('page edited', function(data) {
   if (data.page.path == pagePath) {
-    console.log(data);
     const pageStatusAlert = componentInstances.pageStatusAlert;
     if (pageStatusAlert != null) {
-      pageStatusAlert.setPageRevisionId(data.page._id.toString());
+      pageStatusAlert.setLatestRevisionId(data.page._id.toString());
       pageStatusAlert.setLastUpdateUsername(data.user.name);
     }
   }

resource/js/components/PageStatusAlert.jsx

@@ -17,13 +17,21 @@ class PageStatusAlert extends React.Component {
     super(props);
 
     this.state = {
-      pageRevisionId: this.props.pageRevisionId,
+      revisionId: this.props.revisionId,
+      latestRevisionId: this.props.revisionId,
       lastUpdateUsername: undefined,
     };
   }
 
-  setPageRevisionId(pageRevisionId) {
-    this.setState({pageRevisionId});
+  initRevisionId(revisionId) {
+    this.setState({
+      revisionId,
+      latestRevisionId: revisionId,
+    });
+  }
+
+  setLatestRevisionId(revisionId) {
+    this.setState({latestRevisionId: revisionId});
   }
 
   setLastUpdateUsername(lastUpdateUsername) {
@@ -35,10 +43,15 @@ class PageStatusAlert extends React.Component {
     const label1 = t('edited this page');
     const label2 = t('Load latest');
 
+    const isShown = this.state.revisionId !== this.state.latestRevisionId;
+    const style = {
+      display: isShown ? 'block' : 'none'
+    };
+
     return (
-      <div className="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
-        <i className="icon-fw icon-bulb"></i><span>{this.state.lastUpdateUsername}</span>
-        {label1}
+      <div className="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2" style={style}>
+        <i className="icon-fw icon-bulb"></i>
+        <span>{this.state.lastUpdateUsername}</span> {label1}&nbsp;
         <a href="javascript:location.reload();">
           <i className="fa fa-angle-double-right"></i> {label2}
         </a>
@@ -50,7 +63,8 @@ class PageStatusAlert extends React.Component {
 PageStatusAlert.propTypes = {
   t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
-  pageRevisionId: PropTypes.string,
+  revisionId: PropTypes.string,
+  latestRevisionId: PropTypes.string,
 };
 
 PageStatusAlert.defaultProps = {