From 0ef23f975881234f69b2449d4dd2f90009e562ba Mon Sep 17 00:00:00 2001
From: rjz <rj@rjzaworski.com>
Date: Fri, 18 Aug 2017 18:49:09 -0700
Subject: [PATCH 1/2] Adds example higher-order component

---
 package.json                                  |  2 +-
 .../__snapshots__/counter_spec.tsx.snap       |  2 +-
 src/components/counter.tsx                    |  8 +++++-
 .../__snapshots__/loadable_spec.tsx.snap      |  3 +++
 src/decorators/__tests__/loadable_spec.tsx    | 26 +++++++++++++++++++
 src/decorators/loadable.tsx                   | 16 ++++++++++++
 6 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap
 create mode 100644 src/decorators/__tests__/loadable_spec.tsx
 create mode 100644 src/decorators/loadable.tsx

diff --git a/package.json b/package.json
index 392a7b4..64a3076 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "setup": "typings install",
-    "start": "http-server",
+    "start": "http-server -c-1",
     "build": "npm run setup && npm run test && webpack",
     "watch": "webpack --watch",
     "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
diff --git a/src/components/__tests__/__snapshots__/counter_spec.tsx.snap b/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
index deff78a..f273f3d 100644
--- a/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
+++ b/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Counter renders 1`] = `
-<CounterComponent
+<Loadable(CounterComponent)
   counter={
     Object {
       "value": 0,
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
index ea2037f..b0199ad 100644
--- a/src/components/counter.tsx
+++ b/src/components/counter.tsx
@@ -10,6 +10,8 @@ import {
 
 import { Store } from '../reducers'
 
+import loadable from '../decorators/loadable'
+
 type OwnProps = {
 }
 
@@ -86,5 +88,9 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
   }
 }
 
+const isLoading = (p: ConnectedState & ConnectedDispatch & OwnProps) =>
+  p.isLoading || p.isSaving
+
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
-export const Counter: React.ComponentClass<OwnProps> = connect(mapStateToProps, mapDispatchToProps)(CounterComponent)
+export const Counter: React.ComponentClass<OwnProps> =
+  connect(mapStateToProps, mapDispatchToProps)(loadable(isLoading)(CounterComponent))
diff --git a/src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap b/src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap
new file mode 100644
index 0000000..8e75946
--- /dev/null
+++ b/src/decorators/__tests__/__snapshots__/loadable_spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`decorators/loadable maps props to loading 1`] = `<TestComponent />`;
diff --git a/src/decorators/__tests__/loadable_spec.tsx b/src/decorators/__tests__/loadable_spec.tsx
new file mode 100644
index 0000000..6a32c3b
--- /dev/null
+++ b/src/decorators/__tests__/loadable_spec.tsx
@@ -0,0 +1,26 @@
+// tslint:disable-next-line no-unused-variable
+import * as React from 'react'
+import * as TestUtils from 'react-dom/test-utils'
+import * as ReactShallowRenderer from 'react-test-renderer/shallow'
+
+import loadable from '../loadable'
+
+const TestComponent = () => <div>OK</div>
+const LoadableTestComponent = loadable(props => props.isLoading)(TestComponent)
+
+describe('decorators/loadable', () => {
+
+  it('sets friendly .displayName', () => {
+    expect(LoadableTestComponent.displayName)
+      .toEqual('Loadable(TestComponent)')
+  })
+
+  it('maps props to loading', () => {
+    const renderer = new ReactShallowRenderer()
+    expect(renderer.render(<LoadableTestComponent isLoading />).props.children)
+      .toEqual('Just a moment, please...')
+
+    expect(renderer.render(<LoadableTestComponent />))
+      .toMatchSnapshot()
+  })
+})
diff --git a/src/decorators/loadable.tsx b/src/decorators/loadable.tsx
new file mode 100644
index 0000000..36ff82d
--- /dev/null
+++ b/src/decorators/loadable.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export default function loadable<P>(isLoading: (p: P) => boolean) {
+  return (C: React.ComponentClass<P>|React.SFC<P>) => {
+    const LoadableComponent: React.SFC<P> = (props) => {
+      if (isLoading(props)) {
+        return <div>Just a moment, please...</div>
+      }
+      return <C {...props} />
+    }
+
+    // Set pretty `displayName` for dev tooling
+    LoadableComponent.displayName = `Loadable(${C.name})`
+    return LoadableComponent
+  }
+}

From b38c6470d25ae5c85f769e694c8d2c58736221e0 Mon Sep 17 00:00:00 2001
From: rjz <rj@rjzaworski.com>
Date: Sat, 19 Aug 2017 19:31:26 -0700
Subject: [PATCH 2/2] Fixes inline docs

---
 .../__tests__/__snapshots__/counter_spec.tsx.snap        | 2 +-
 src/components/counter.tsx                               | 9 ++++++---
 src/decorators/loadable.tsx                              | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/counter_spec.tsx.snap b/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
index f273f3d..24a7858 100644
--- a/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
+++ b/src/components/__tests__/__snapshots__/counter_spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/Counter renders 1`] = `
-<Loadable(CounterComponent)
+<Loadable(PureCounter)
   counter={
     Object {
       "value": 0,
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
index b0199ad..04bdcd5 100644
--- a/src/components/counter.tsx
+++ b/src/components/counter.tsx
@@ -44,7 +44,7 @@ const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): ConnectedDispa
     dispatch(saveCount({ value })),
 })
 
-class CounterComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
+class PureCounter extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
 
   _onClickIncrement = (e: React.SyntheticEvent<HTMLButtonElement>) => {
     e.preventDefault()
@@ -91,6 +91,9 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
 const isLoading = (p: ConnectedState & ConnectedDispatch & OwnProps) =>
   p.isLoading || p.isSaving
 
+// Invoke `loadable` manually pending decorator support
+// See: https://github.com/Microsoft/TypeScript/issues/4881
+const LoadableCounter = loadable(isLoading)(PureCounter)
+
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
-export const Counter: React.ComponentClass<OwnProps> =
-  connect(mapStateToProps, mapDispatchToProps)(loadable(isLoading)(CounterComponent))
+export const Counter = connect(mapStateToProps, mapDispatchToProps)(LoadableCounter)
diff --git a/src/decorators/loadable.tsx b/src/decorators/loadable.tsx
index 36ff82d..9920878 100644
--- a/src/decorators/loadable.tsx
+++ b/src/decorators/loadable.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 export default function loadable<P>(isLoading: (p: P) => boolean) {
-  return (C: React.ComponentClass<P>|React.SFC<P>) => {
+  return (C: React.ComponentClass<P>|React.SFC<P>): React.SFC<P> => {
     const LoadableComponent: React.SFC<P> = (props) => {
       if (isLoading(props)) {
         return <div>Just a moment, please...</div>