From 7aebcad25b8182226f8a949741b57b12f50521fa Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Mon, 13 Apr 2020 21:49:15 +0200
Subject: [PATCH] link fe: refactor message display into component

---
 .../link/src/js/components/lib/message-screen.js  | 15 +++++++++++++++
 .../link/src/js/components/links-list.js          | 10 ++--------
 pkg/interface/link/src/js/components/loading.js   | 11 ++---------
 pkg/interface/link/src/js/components/root.js      |  9 ++-------
 4 files changed, 21 insertions(+), 24 deletions(-)
 create mode 100644 pkg/interface/link/src/js/components/lib/message-screen.js

diff --git a/pkg/interface/link/src/js/components/lib/message-screen.js b/pkg/interface/link/src/js/components/lib/message-screen.js
new file mode 100644
index 000000000..deb26f465
--- /dev/null
+++ b/pkg/interface/link/src/js/components/lib/message-screen.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+export class MessageScreen extends Component {
+  render() {
+    return (
+      <div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
+        <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
+          <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
+            {this.props.text}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/pkg/interface/link/src/js/components/links-list.js b/pkg/interface/link/src/js/components/links-list.js
index 3a9f1a2b7..aa222879b 100644
--- a/pkg/interface/link/src/js/components/links-list.js
+++ b/pkg/interface/link/src/js/components/links-list.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { LoadingScreen } from './loading';
+import { MessageScreen } from '/components/lib/message-screen';
 import { LinksTabBar } from './lib/links-tabbar';
 import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 import { Route, Link } from "react-router-dom";
@@ -59,15 +60,8 @@ export class Links extends Component {
 
     let LinkList = (<LoadingScreen/>);
     if (props.links && props.links.totalItems === 0) {
-      //TODO the below re-used from landing screen. refactor into MessageScreen?
       LinkList = (
-        <div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
-          <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
-            <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
-              Start by posting a link to this collection.
-            </p>
-          </div>
-        </div>
+        <MessageScreen text="Start by posting a link to this collection."/>
       );
     } else if (Object.keys(links).length > 0) {
       LinkList = Object.keys(links)
diff --git a/pkg/interface/link/src/js/components/loading.js b/pkg/interface/link/src/js/components/loading.js
index 70551a0ae..6c00a7fac 100644
--- a/pkg/interface/link/src/js/components/loading.js
+++ b/pkg/interface/link/src/js/components/loading.js
@@ -1,15 +1,8 @@
 import React, { Component } from 'react';
+import { MessageScreen } from '/components/lib/message-screen';
 
 export class LoadingScreen extends Component {
   render() {
-    return (
-      <div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
-        <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
-          <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
-            Loading...
-          </p>
-        </div>
-      </div>
-    );
+    return (<MessageScreen text="Loading..."/>);
   }
 }
diff --git a/pkg/interface/link/src/js/components/root.js b/pkg/interface/link/src/js/components/root.js
index 7e6888e68..61914f744 100644
--- a/pkg/interface/link/src/js/components/root.js
+++ b/pkg/interface/link/src/js/components/root.js
@@ -10,6 +10,7 @@ import { Skeleton } from '/components/skeleton';
 import { NewScreen } from '/components/new';
 import { MemberScreen } from '/components/member';
 import { SettingsScreen } from '/components/settings';
+import { MessageScreen } from '/components/lib/message-screen';
 import { Links } from '/components/links-list';
 import { LinkDetail } from '/components/link';
 import { makeRoutePath, amOwnerOfGroup, base64urlDecode } from '../lib/util';
@@ -63,13 +64,7 @@ export class Root extends Component {
                 selectedGroups={selectedGroups}
                 links={links}
                 listening={state.listening}>
-                <div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
-                <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
-                      <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
-                        Select or create a collection to begin.
-                      </p>
-                    </div>
-                </div>
+                <MessageScreen text="Select or create a collection to begin."/>
               </Skeleton>
             );
           }} />