feat(test-components): split visual from logic in status-pill

app/components/header.js

@@ -7,7 +7,9 @@ import { ZcashLogo } from './zcash-logo';
 import { TextComponent } from './text';
 import { Divider } from './divider';
 import { RowComponent } from './row';
-import { StatusPill } from './status-pill';
+import StatusPill from './status-pill';
+
+import withSyncStatus from '../../services/sync-status';
 
 const Wrapper = styled.div`
   height: ${props => props.theme.headerHeight};
@@ -59,17 +61,22 @@ type Props = {
   title: string,
 };
 
-export const HeaderComponent = ({ title }: Props) => (
-  <Wrapper>
-    <LogoWrapper>
-      <ZcashLogo />
-    </LogoWrapper>
-    <TitleWrapper>
-      <TitleRow alignItems='center' justifyContent='space-around'>
-        <Title value={title} />
-        <StatusPill />
-      </TitleRow>
-      <Divider opacity={0.1} />
-    </TitleWrapper>
-  </Wrapper>
-);
+const Status = withSyncStatus(StatusPill);
+
+export const HeaderComponent = ({ title }: Props) => {
+
+  return (
+    <Wrapper>
+      <LogoWrapper>
+        <ZcashLogo />
+      </LogoWrapper>
+      <TitleWrapper>
+        <TitleRow alignItems='center' justifyContent='space-around'>
+          <Title value={title} />
+          <Status />
+        </TitleRow>
+        <Divider opacity={0.1} />
+      </TitleWrapper>
+    </Wrapper>
+  )
+};

app/components/status-pill.js

@@ -1,12 +1,9 @@
 // @flow
 import React, { Component } from 'react';
 import styled, { keyframes } from 'styled-components';
-import eres from 'eres';
 
 import { TextComponent } from './text';
 
-import rpc from '../../services/api';
-
 import readyIcon from '../assets/images/green_check.png';
 import syncIcon from '../assets/images/sync_icon.png';
 import errorIcon from '../assets/images/error_icon.png';
@@ -46,70 +43,24 @@ const StatusPillLabel = styled(TextComponent)`
   user-select: none;
 `;
 
-type Props = {};
-
 type State = {
-  type: string,
-  icon: string,
+  type: 'syncing' | 'ready' | 'error',
   progress: number,
-  isSyncing: boolean,
 };
 
-export class StatusPill extends Component<Props, State> {
-  timer: ?IntervalID = null;
+export const StatusPill = ({ type, progress }: State) => {
 
-  state = {
-    type: 'syncing',
-    icon: syncIcon,
-    progress: 0,
-    isSyncing: true,
-  };
+  const isSyncing = type === 'syncing';
 
-  componentDidMount() {
-    this.timer = setInterval(() => {
-      this.getBlockchainStatus();
-    }, 2000);
-  }
+  const icon = type === 'error' ? errorIcon : (isSyncing ? syncIcon : readyIcon);
+  const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
 
-  componentWillUnmount() {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
+  return (
+    <Wrapper>
+      <Icon src={icon} animated={isSyncing} />
+      <StatusPillLabel value={`${type} ${showPercent}`} />
+    </Wrapper>
+  );
+};
 
-  getBlockchainStatus = async () => {
-    const [blockchainErr, blockchaininfo] = await eres(
-      rpc.getblockchaininfo(),
-    );
-
-    const newProgress = blockchaininfo.verificationprogress * 100;
-
-    this.setState({
-      progress: newProgress,
-      ...(newProgress > 99.99 ? {
-        type: 'ready',
-        icon: readyIcon,
-        isSyncing: false,
-      } : {}),
-    });
-
-    if (blockchainErr) {
-      this.setState(() => ({ type: 'error', icon: errorIcon }));
-    }
-  }
-
-  render() {
-    const {
-      type, icon, progress, isSyncing,
-    } = this.state;
-    const showPercent = isSyncing ? `(${progress.toFixed(2)}%)` : '';
-
-    return (
-      <Wrapper>
-        <Icon src={icon} animated={isSyncing} />
-        <StatusPillLabel value={`${type} ${showPercent}`} />
-      </Wrapper>
-    );
-  }
-}
+export default StatusPill;

app/components/status-pill.mdx

@@ -0,0 +1,54 @@
+---
+name: StatusPill
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { StatusPill } from './status-pill.js'
+import { DoczWrapper } from '../theme.js'
+
+# StatusPill
+
+## Properties
+
+<PropsTable of={StatusPill} />
+
+## Syching
+
+<Playground>
+  <DoczWrapper>
+    {() => 
+      <StatusPill
+        progress={99.3}
+        type='syncing'
+      />
+    }
+  </DoczWrapper>
+</Playground>
+
+## Ready
+
+<Playground>
+  <DoczWrapper>
+    {() => 
+      <StatusPill
+        progress={100.}
+        type='ready'
+      />
+    }
+  </DoczWrapper>
+</Playground>
+
+
+## With Error
+
+<Playground>
+  <DoczWrapper>
+    {() => 
+      <StatusPill
+        progress={0.}
+        type='error'
+      />
+    }
+  </DoczWrapper>
+</Playground>

services/sync-status.js

@@ -0,0 +1,61 @@
+// @flow
+import React, { type ComponentType, Component } from 'react';
+import eres from 'eres';
+
+import rpc from './api';
+
+type Props = {};
+
+type State = {
+  type: 'syncing' | 'ready' | 'error',
+  progress: number,
+};
+
+export default function syncStatus(WrappedComponent: ComponentType<PassedProps>) {
+  return class extends Component<Props, State> {
+    timer: ?IntervalID = null;
+
+    state = {
+      type: 'syncing',
+      progress: 0,
+    };
+
+    componentDidMount() {
+      this.timer = setInterval(() => {
+        this.getBlockchainStatus();
+      }, 2000);
+    }
+  
+    componentWillUnmount() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    }
+  
+    getBlockchainStatus = async () => {
+      const [blockchainErr, blockchaininfo] = await eres(
+        rpc.getblockchaininfo(),
+      );
+  
+      const newProgress = blockchaininfo.verificationprogress * 100;
+  
+      this.setState({
+        progress: newProgress,
+        ...(newProgress > 99.99 ? {
+          type: 'ready',
+        } : {}),
+      });
+  
+      if (blockchainErr) {
+        this.setState(() => ({ type: 'error' }));
+      }
+    }
+
+    render() {
+      const { type, progress} = this.state;
+
+      return <WrappedComponent type={type} progress={progress} />;
+    }
+  };
+}