add PageStatusAlert component

lib/views/widget/page_content.html

@@ -51,7 +51,5 @@
 
   </div>
 
-  <div id="notifPageEdited" class="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
-    <i class="fa fa-exclamation-triangle"></i> <span class="edited-user"></span> {{ t('edited this page') }} <a href="javascript:location.reload();"><i class="fa fa-angle-double-right"></i> {{ t('Load latest') }}</a>
-  </div>
+  <div id="page-status-alert"></div>
 </div>

resource/js/app.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
 import * as toastr from 'toastr';
 
+import io from 'socket.io-client';
+
 import i18nFactory from './i18n';
 
 import Xss from '../../lib/util/xss';
@@ -24,6 +26,7 @@ import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
 import CommentForm from './components/PageComment/CommentForm';
 import PageAttachment   from './components/PageAttachment';
+import PageStatusAlert  from './components/PageStatusAlert';
 import SeenUserList     from './components/SeenUserList';
 import RevisionPath     from './components/Page/RevisionPath';
 import RevisionUrl      from './components/Page/RevisionUrl';
@@ -367,6 +370,25 @@ if (pageEditorOptionsSelectorElem) {
   );
 }
 
+// render PageStatusAlert
+let pageStatusAlert = null;
+const pageStatusAlertElem = document.getElementById('page-status-alert');
+if (pageStatusAlertElem) {
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <PageStatusAlert crowi={crowi}
+          ref={(elem) => {
+            if (pageStatusAlert == null) {
+              pageStatusAlert = elem.getWrappedInstance();
+            }
+          }}
+          pageRevisionId={pageRevisionId} />
+    </I18nextProvider>,
+    pageStatusAlertElem
+  );
+  componentInstances.pageStatusAlert = pageStatusAlert;
+}
+
 // render for admin
 const customCssEditorElem = document.getElementById('custom-css-editor');
 if (customCssEditorElem != null) {
@@ -399,6 +421,19 @@ if (customHeaderEditorElem != null) {
   );
 }
 
+// notification from websocket
+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.setLastUpdateUsername(data.user.name);
+    }
+  }
+});
+
 // うわーもうー (commented by Crowi team -- 2018.03.23 Yuki Takei)
 $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', function() {
   ReactDOM.render(<PageHistory pageId={pageId} crowi={crowi} />, document.getElementById('revision-history'));

resource/js/components/PageStatusAlert.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+/**
+ *
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ * @export
+ * @class PageStatusAlert
+ * @extends {React.Component}
+ */
+
+class PageStatusAlert extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      pageRevisionId: this.props.pageRevisionId,
+      lastUpdateUsername: undefined,
+    };
+  }
+
+  setPageRevisionId(pageRevisionId) {
+    this.setState({pageRevisionId});
+  }
+
+  setLastUpdateUsername(lastUpdateUsername) {
+    this.setState({lastUpdateUsername});
+  }
+
+  render() {
+    const { t } = this.props;
+    const label1 = t('edited this page');
+    const label2 = t('Load latest');
+
+    return (
+      <div className="myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
+        <i className="icon-fw icon-bulb"></i><span>{this.state.lastUpdateUsername}</span>
+        {label1}
+        <a href="javascript:location.reload();">
+          <i className="fa fa-angle-double-right"></i> {label2}
+        </a>
+      </div>
+    );
+  }
+}
+
+PageStatusAlert.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
+  crowi: PropTypes.object.isRequired,
+  pageRevisionId: PropTypes.string,
+};
+
+PageStatusAlert.defaultProps = {
+};
+
+export default translate()(PageStatusAlert);

resource/js/legacy/crowi.js

@@ -13,7 +13,6 @@ import { debounce } from 'throttle-debounce';
 import GrowiRenderer from '../util/GrowiRenderer';
 import Page from '../components/Page';
 
-const io = require('socket.io-client');
 const entities = require('entities');
 const escapeStringRegexp = require('escape-string-regexp');
 require('jquery.cookie');
@@ -673,14 +672,6 @@ $(function() {
       $b.toggleClass('overlay-on');
     });
 
-    // notification from websocket
-    const socket = io();
-    socket.on('page edited', function(data) {
-      if (data.page.path == pagePath) {
-        $('#notifPageEdited').show();
-        $('#notifPageEdited .edited-user').html(data.user.name);
-      }
-    });
   } // end if pageId
 
   // tab changing handling