refactor PageStatusAlert

src/client/js/components/PageStatusAlert.jsx

@@ -25,81 +25,64 @@ class PageStatusAlert extends React.Component {
     this.state = {
     };
 
-    this.renderSomeoneEditingAlert = this.renderSomeoneEditingAlert.bind(this);
-    this.renderDraftExistsAlert = this.renderDraftExistsAlert.bind(this);
-    this.renderUpdatedAlert = this.renderUpdatedAlert.bind(this);
+    this.getContentsForSomeoneEditingAlert = this.getContentsForSomeoneEditingAlert.bind(this);
+    this.getContentsForDraftExistsAlert = this.getContentsForDraftExistsAlert.bind(this);
+    this.getContentsForUpdatedAlert = this.getContentsForUpdatedAlert.bind(this);
   }
 
   refreshPage() {
     window.location.reload();
   }
 
-  renderSomeoneEditingAlert() {
+  getContentsForSomeoneEditingAlert() {
     const { t } = this.props;
-    return (
-      <div className="card grw-page-status-alert text-white bg-success d-hackmd-none fixed-bottom">
-        <div className="card-body">
-          <p className="card-text grw-card-label-container">
-            <i className="icon-fw icon-people"></i>
-            {t('hackmd.someone_editing')}
-          </p>
-          <p className="card-text grw-card-btn-container">
-            <a href="#hackmd" className="btn btn-outline-white">
-              <i className="fa fa-fw fa-file-text-o"></i>
-              Open HackMD Editor
-            </a>
-          </p>
-        </div>
-      </div>
-    );
+    return [
+      ['bg-success', 'd-hackmd-none'],
+      <>
+        <i className="icon-fw icon-people"></i>
+        {t('hackmd.someone_editing')}
+      </>,
+      <a href="#hackmd" className="btn btn-outline-white">
+        <i className="fa fa-fw fa-file-text-o mr-1"></i>
+        Open HackMD Editor
+      </a>,
+    ];
   }
 
-  renderDraftExistsAlert(isRealtime) {
+  getContentsForDraftExistsAlert(isRealtime) {
     const { t } = this.props;
-    return (
-      <div className="card grw-page-status-alert text-white bg-success d-hackmd-none fixed-bottom">
-        <div className="card-body">
-          <p className="card-text grw-card-label-container">
-            <i className="icon-fw icon-pencil"></i>
-            {t('hackmd.this_page_has_draft')}
-          </p>
-          <p className="card-text grw-card-btn-container">
-            <a href="#hackmd" className="btn btn-outline-white">
-              <i className="fa fa-fw fa-file-text-o"></i>
-              Open HackMD Editor
-            </a>
-          </p>
-        </div>
-      </div>
-    );
+    return [
+      ['bg-success', 'd-hackmd-none'],
+      <>
+        <i className="icon-fw icon-pencil"></i>
+        {t('hackmd.this_page_has_draft')}
+      </>,
+      <a href="#hackmd" className="btn btn-outline-white">
+        <i className="fa fa-fw fa-file-text-o mr-1"></i>
+        Open HackMD Editor
+      </a>,
+    ];
   }
 
-  renderUpdatedAlert() {
+  getContentsForUpdatedAlert() {
     const { t } = this.props;
     const label1 = t('edited this page');
     const label2 = t('Load latest');
 
-    return (
-      <div className="card grw-page-status-alert text-white bg-warning fixed-bottom">
-        <div className="card-body">
-          <p className="card-text grw-card-label-container">
-            <i className="icon-fw icon-bulb"></i>
-            {this.props.pageContainer.state.lastUpdateUsername} {label1}
-          </p>
-          <p className="card-text grw-card-btn-container">
-            <a href="#" className="btn btn-outline-white" onClick={this.refreshPage}>
-              <i className="icon-fw icon-reload"></i>
-              {label2}
-            </a>
-          </p>
-        </div>
-      </div>
-    );
+    return [
+      ['bg-warning'],
+      <>
+        <i className="icon-fw icon-bulb"></i>
+        {this.props.pageContainer.state.lastUpdateUsername} {label1}
+      </>,
+      <a href="#" className="btn btn-outline-white" onClick={this.refreshPage}>
+        <i className="icon-fw icon-reload mr-1"></i>
+        {label2}
+      </a>,
+    ];
   }
 
   render() {
-    let content = <React.Fragment></React.Fragment>;
-
     const {
       revisionId, revisionIdHackmdSynced, remoteRevisionId, hasDraftOnHackmd, isHackmdDraftUpdatingInRealtime,
     } = this.props.pageContainer.state;
@@ -107,20 +90,39 @@ class PageStatusAlert extends React.Component {
     const isRevisionOutdated = revisionId !== remoteRevisionId;
     const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId;
 
+    let getContentsFunc = null;
+
     // when remote revision is newer than both
     if (isHackmdDocumentOutdated && isRevisionOutdated) {
-      content = this.renderUpdatedAlert();
+      getContentsFunc = this.getContentsFunc;
     }
     // when someone editing with HackMD
     else if (isHackmdDraftUpdatingInRealtime) {
-      content = this.renderSomeoneEditingAlert();
+      getContentsFunc = this.getContentsForSomeoneEditingAlert;
     }
     // when the draft of HackMD is newest
     else if (hasDraftOnHackmd) {
-      content = this.renderDraftExistsAlert();
+      getContentsFunc = this.getContentsForDraftExistsAlert;
+    }
+    // do not render anything
+    else {
+      return null;
     }
 
-    return content;
+    const [additionalClasses, label, btn] = getContentsFunc();
+
+    return (
+      <div className={`card grw-page-status-alert text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
+        <div className="card-body">
+          <p className="card-text grw-card-label-container">
+            {label}
+          </p>
+          <p className="card-text grw-card-btn-container">
+            {btn}
+          </p>
+        </div>
+      </div>
+    );
   }
 
 }