From bdf4fef2f5a358dfbb368caa497144dd236c8b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <decentralion@dandelion.io>
Date: Mon, 13 Aug 2018 20:30:12 -0700
Subject: [PATCH] Pull `Badge` out as a shared functional component

Test plan: Trivial refactor; `yarn test` suffices
---
 .../credExplorer/pagerankTable/Connection.js  | 19 +------------------
 src/app/credExplorer/pagerankTable/shared.js  | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/app/credExplorer/pagerankTable/Connection.js b/src/app/credExplorer/pagerankTable/Connection.js
index 16dc75a..53f7b40 100644
--- a/src/app/credExplorer/pagerankTable/Connection.js
+++ b/src/app/credExplorer/pagerankTable/Connection.js
@@ -10,7 +10,7 @@ import {DynamicAdapterSet} from "../../adapters/adapterSet";
 import {TableRow} from "./TableRow";
 import {NodeRow} from "./Node";
 
-import {edgeVerb, nodeDescription, type SharedProps} from "./shared";
+import {edgeVerb, nodeDescription, type SharedProps, Badge} from "./shared";
 
 type ConnectionRowListProps = {|
   +depth: number,
@@ -91,23 +91,6 @@ export class ConnectionView extends React.PureComponent<{|
 |}> {
   render() {
     const {connection, adapters} = this.props;
-    function Badge({children}) {
-      return (
-        // The outer <span> acts as a strut to ensure that the badge
-        // takes up a full line height, even though its text is smaller.
-        <span>
-          <span
-            style={{
-              textTransform: "uppercase",
-              fontWeight: 700,
-              fontSize: "smaller",
-            }}
-          >
-            {children}
-          </span>
-        </span>
-      );
-    }
     const {adjacency} = connection;
     switch (adjacency.type) {
       case "SYNTHETIC_LOOP":
diff --git a/src/app/credExplorer/pagerankTable/shared.js b/src/app/credExplorer/pagerankTable/shared.js
index d243a0b..28ddf00 100644
--- a/src/app/credExplorer/pagerankTable/shared.js
+++ b/src/app/credExplorer/pagerankTable/shared.js
@@ -1,5 +1,6 @@
 // @flow
 
+import React, {type Node as ReactNode} from "react";
 import {
   type EdgeAddressT,
   type NodeAddressT,
@@ -38,3 +39,21 @@ export type SharedProps = {|
   +adapters: DynamicAdapterSet,
   +maxEntriesPerList: number,
 |};
+
+export function Badge({children}: {children: ReactNode}): ReactNode {
+  return (
+    // The outer <span> acts as a strut to ensure that the badge
+    // takes up a full line height, even though its text is smaller.
+    <span>
+      <span
+        style={{
+          textTransform: "uppercase",
+          fontWeight: 700,
+          fontSize: "smaller",
+        }}
+      >
+        {children}
+      </span>
+    </span>
+  );
+}