refactor PageStatusAlert

packages/app/src/components/PageStatusAlert.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
@@ -26,7 +26,6 @@ class PageStatusAlert extends React.Component {
     };
 
     this.getContentsForSomeoneEditingAlert = this.getContentsForSomeoneEditingAlert.bind(this);
-    this.getContentsForRevisionOutdated = this.getContentsForRevisionOutdated.bind(this);
     this.getContentsForDraftExistsAlert = this.getContentsForDraftExistsAlert.bind(this);
     this.getContentsForUpdatedAlert = this.getContentsForUpdatedAlert.bind(this);
     this.onClickResolveConflict = this.onClickResolveConflict.bind(this);
@@ -57,45 +56,6 @@ class PageStatusAlert extends React.Component {
     ];
   }
 
-  getContentsForRevisionOutdated() {
-    const { t, appContainer, pageContainer } = this.props;
-    const pageEditor = appContainer.getComponentInstance('PageEditor');
-
-    let markdownOnEdit = '';
-    let isConflictOnEdit = false;
-
-    if (pageEditor != null) {
-      markdownOnEdit = pageEditor.getMarkdown();
-      isConflictOnEdit = markdownOnEdit !== pageContainer.state.markdown;
-    }
-
-    return [
-      ['bg-warning', 'd-hackmd-none'],
-      <>
-        <i className="icon-fw icon-pencil"></i>
-        {t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
-      </>,
-      <>
-        <button type="button" onClick={() => this.refreshPage()} className="btn btn-outline-white mr-4">
-          <i className="icon-fw icon-reload mr-1"></i>
-          {t('Load latest')}
-        </button>
-        {isConflictOnEdit
-          && (
-            <button
-              type="button"
-              onClick={this.onClickResolveConflict}
-              className="btn btn-outline-white"
-            >
-              <i className="fa fa-fw fa-file-text-o mr-1"></i>
-              {t('modal_resolve_conflict.resolve_conflict')}
-            </button>
-          )
-        }
-      </>,
-    ];
-  }
-
   getContentsForDraftExistsAlert(isRealtime) {
     const { t } = this.props;
     return [
@@ -112,20 +72,42 @@ class PageStatusAlert extends React.Component {
   }
 
   getContentsForUpdatedAlert() {
-    const { t } = this.props;
-    const label1 = t('edited this page');
-    const label2 = t('Load latest');
+    const { t, appContainer, pageContainer } = this.props;
+    const pageEditor = appContainer.getComponentInstance('PageEditor');
+
+    let isConflictOnEdit = false;
+
+    if (pageEditor != null) {
+      const markdownOnEdit = pageEditor.getMarkdown();
+      isConflictOnEdit = markdownOnEdit !== pageContainer.state.markdown;
+    }
+
+    const label1 = isConflictOnEdit
+      ? t('modal_resolve_conflict.file_conflicting_with_newer_remote')
+      : `${pageContainer.state.lastUpdateUsername} ${t('edited this page')}`;
 
     return [
       ['bg-warning'],
       <>
         <i className="icon-fw icon-bulb"></i>
-        {this.props.pageContainer.state.lastUpdateUsername} {label1}
+        {label1}
+      </>,
+      <>
+        <button type="button" onClick={() => this.refreshPage()} className="btn btn-outline-white mr-4">
+          <i className="icon-fw icon-reload mr-1"></i>
+          {t('Load latest')}
+        </button>
+        { isConflictOnEdit && (
+          <button
+            type="button"
+            onClick={this.onClickResolveConflict}
+            className="btn btn-outline-white"
+          >
+            <i className="fa fa-fw fa-file-text-o mr-1"></i>
+            {t('modal_resolve_conflict.resolve_conflict')}
+          </button>
+        )}
       </>,
-      <a href="#" className="btn btn-outline-white" onClick={this.refreshPage}>
-        <i className="icon-fw icon-reload mr-1"></i>
-        {label2}
-      </a>,
     ];
   }
 
@@ -139,12 +121,8 @@ class PageStatusAlert extends React.Component {
 
     let getContentsFunc = null;
 
-    // when conflicting on save
-    if (isRevisionOutdated) {
-      getContentsFunc = this.getContentsForRevisionOutdated;
-    }
     // when remote revision is newer than both
-    else if (isHackmdDocumentOutdated && isRevisionOutdated) {
+    if (isHackmdDocumentOutdated && isRevisionOutdated) {
       getContentsFunc = this.getContentsForUpdatedAlert;
     }
     // when someone editing with HackMD