From bd94620e1a3741a870546fbd52d9cbd08afec1fa Mon Sep 17 00:00:00 2001
From: Hendrik Liebau <mail@hendrik-liebau.de>
Date: Sun, 7 Jul 2019 12:34:34 +0200
Subject: [PATCH] feat(demos): use react-router in history-service demo (#477)

---
 package.json                                  |  4 +-
 packages/demos/src/history-service/app.tsx    |  2 +-
 .../src/history-service/history-consumer.tsx  | 90 -------------------
 .../history-consumer/history-consumer.tsx     | 42 +++++++++
 .../index.tsx}                                | 10 +--
 .../history-consumer/new-path-control.tsx     | 46 ++++++++++
 .../history-consumer/pathname-label.tsx       | 19 ++++
 .../demos/src/history-service/index.test.ts   | 10 +--
 packages/react/package.json                   |  2 +-
 packages/website/package.json                 |  2 +-
 yarn.lock                                     |  4 +-
 11 files changed, 122 insertions(+), 109 deletions(-)
 delete mode 100644 packages/demos/src/history-service/history-consumer.tsx
 create mode 100644 packages/demos/src/history-service/history-consumer/history-consumer.tsx
 rename packages/demos/src/history-service/{history-consumer-definition.tsx => history-consumer/index.tsx} (80%)
 create mode 100644 packages/demos/src/history-service/history-consumer/new-path-control.tsx
 create mode 100644 packages/demos/src/history-service/history-consumer/pathname-label.tsx

diff --git a/package.json b/package.json
index dcc1e05b..68fb6127 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.15.2",
     "puppeteer": "^1.11.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "rimraf": "^2.6.2",
     "size-limit": "^1.0.0",
     "sort-package-json": "^1.16.0",
diff --git a/packages/demos/src/history-service/app.tsx b/packages/demos/src/history-service/app.tsx
index b0d4ed19..cf38b8a9 100644
--- a/packages/demos/src/history-service/app.tsx
+++ b/packages/demos/src/history-service/app.tsx
@@ -4,7 +4,7 @@ import {
   FeatureHubContextProvider
 } from '@feature-hub/react';
 import * as React from 'react';
-import {historyConsumerDefinition} from './history-consumer-definition';
+import {historyConsumerDefinition} from './history-consumer';
 
 export interface AppProps {
   featureAppManager: FeatureAppManager;
diff --git a/packages/demos/src/history-service/history-consumer.tsx b/packages/demos/src/history-service/history-consumer.tsx
deleted file mode 100644
index 6de5ee63..00000000
--- a/packages/demos/src/history-service/history-consumer.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  Button,
-  Card,
-  ControlGroup,
-  H5,
-  InputGroup,
-  Label
-} from '@blueprintjs/core';
-import {History} from 'history';
-import * as React from 'react';
-import Media from 'react-media';
-
-interface HistoryConsumerProps {
-  readonly history: History;
-  readonly historyKey: string;
-}
-
-interface HistoryConsumerState {
-  readonly pathname: string;
-}
-
-export class HistoryConsumer extends React.Component<
-  HistoryConsumerProps,
-  HistoryConsumerState
-> {
-  public readonly state = {pathname: this.props.history.location.pathname};
-
-  private unlisten?: () => void;
-  private inputElement: HTMLInputElement | null = null;
-
-  public componentDidMount(): void {
-    const {history} = this.props;
-
-    this.unlisten = history.listen(({pathname}) => this.setState({pathname}));
-  }
-
-  public componentWillUnmount(): void {
-    if (this.unlisten) {
-      this.unlisten();
-    }
-  }
-
-  public render(): React.ReactNode {
-    const {historyKey} = this.props;
-    const specifier = historyKey.slice(historyKey.length - 1);
-    const {pathname} = this.state;
-
-    return (
-      <Card style={{margin: '20px'}}>
-        <H5>History Consumer {specifier.toUpperCase()}</H5>
-
-        <Label>
-          Pathname
-          <InputGroup id={`pathname-${specifier}`} value={pathname} disabled />
-        </Label>
-
-        <Media query="(max-width: 370px)">
-          {matches => (
-            <ControlGroup vertical={matches}>
-              <InputGroup
-                id={`new-pathname-${specifier}`}
-                placeholder="Enter a new path..."
-                inputRef={ref => (this.inputElement = ref)}
-              />
-              <Button
-                id={`push-${specifier}`}
-                text="Push"
-                onClick={() => this.changePath('push')}
-              />
-              <Button
-                id={`replace-${specifier}`}
-                text="Replace"
-                onClick={() => this.changePath('replace')}
-              />
-            </ControlGroup>
-          )}
-        </Media>
-      </Card>
-    );
-  }
-
-  private changePath(method: 'push' | 'replace'): void {
-    if (!this.inputElement) {
-      return;
-    }
-
-    this.props.history[method](this.inputElement.value);
-    this.inputElement.value = '';
-  }
-}
diff --git a/packages/demos/src/history-service/history-consumer/history-consumer.tsx b/packages/demos/src/history-service/history-consumer/history-consumer.tsx
new file mode 100644
index 00000000..26256da3
--- /dev/null
+++ b/packages/demos/src/history-service/history-consumer/history-consumer.tsx
@@ -0,0 +1,42 @@
+import {Card, H5} from '@blueprintjs/core';
+import * as React from 'react';
+import Media from 'react-media';
+import {Route} from 'react-router';
+import {NewPathControl} from './new-path-control';
+import {PathnameLabel} from './pathname-label';
+
+interface HistoryConsumerProps {
+  readonly historyKey: string;
+}
+
+export function HistoryConsumer({
+  historyKey
+}: HistoryConsumerProps): JSX.Element {
+  const specifier = historyKey.slice(historyKey.length - 1);
+
+  return (
+    <Card style={{margin: '20px'}}>
+      <H5>History Consumer {specifier.toUpperCase()}</H5>
+
+      <Route>
+        {({location}) => (
+          <PathnameLabel specifier={specifier} pathname={location.pathname} />
+        )}
+      </Route>
+
+      <Media query="(max-width: 370px)">
+        {matches => (
+          <Route>
+            {({history}) => (
+              <NewPathControl
+                history={history}
+                specifier={specifier}
+                vertical={matches}
+              />
+            )}
+          </Route>
+        )}
+      </Media>
+    </Card>
+  );
+}
diff --git a/packages/demos/src/history-service/history-consumer-definition.tsx b/packages/demos/src/history-service/history-consumer/index.tsx
similarity index 80%
rename from packages/demos/src/history-service/history-consumer-definition.tsx
rename to packages/demos/src/history-service/history-consumer/index.tsx
index d523ee92..2c439a7d 100644
--- a/packages/demos/src/history-service/history-consumer-definition.tsx
+++ b/packages/demos/src/history-service/history-consumer/index.tsx
@@ -2,6 +2,7 @@ import {FeatureAppDefinition, FeatureServices} from '@feature-hub/core';
 import {HistoryServiceV2} from '@feature-hub/history-service';
 import {ReactFeatureApp} from '@feature-hub/react';
 import * as React from 'react';
+import {Router} from 'react-router';
 import {HistoryConsumer} from './history-consumer';
 
 interface Dependencies extends FeatureServices {
@@ -23,13 +24,10 @@ export const historyConsumerDefinition: FeatureAppDefinition<
 
     return {
       render: () => (
-        <HistoryConsumer
-          history={historyService.history}
-          historyKey={historyService.historyKey}
-        />
+        <Router history={historyService.history}>
+          <HistoryConsumer historyKey={historyService.historyKey} />
+        </Router>
       )
     };
   }
 };
-
-export default historyConsumerDefinition;
diff --git a/packages/demos/src/history-service/history-consumer/new-path-control.tsx b/packages/demos/src/history-service/history-consumer/new-path-control.tsx
new file mode 100644
index 00000000..2d0bf513
--- /dev/null
+++ b/packages/demos/src/history-service/history-consumer/new-path-control.tsx
@@ -0,0 +1,46 @@
+import {Button, ControlGroup, InputGroup} from '@blueprintjs/core';
+import {History} from 'history';
+import * as React from 'react';
+
+export interface NewPathControlProps {
+  readonly history: History;
+  readonly specifier: string;
+  readonly vertical?: boolean;
+}
+
+export function NewPathControl({
+  history,
+  specifier,
+  vertical
+}: NewPathControlProps): JSX.Element {
+  const inputElement = React.useRef<HTMLInputElement | null>(null);
+
+  const changePath = (method: 'push' | 'replace') => {
+    if (!inputElement.current) {
+      return;
+    }
+
+    history[method](inputElement.current.value);
+    inputElement.current.value = '';
+  };
+
+  return (
+    <ControlGroup vertical={vertical}>
+      <InputGroup
+        id={`new-path-${specifier}`}
+        placeholder="Enter a new path..."
+        inputRef={ref => (inputElement.current = ref)}
+      />
+      <Button
+        id={`push-${specifier}`}
+        text="Push"
+        onClick={() => changePath('push')}
+      />
+      <Button
+        id={`replace-${specifier}`}
+        text="Replace"
+        onClick={() => changePath('replace')}
+      />
+    </ControlGroup>
+  );
+}
diff --git a/packages/demos/src/history-service/history-consumer/pathname-label.tsx b/packages/demos/src/history-service/history-consumer/pathname-label.tsx
new file mode 100644
index 00000000..f89757b3
--- /dev/null
+++ b/packages/demos/src/history-service/history-consumer/pathname-label.tsx
@@ -0,0 +1,19 @@
+import {InputGroup, Label} from '@blueprintjs/core';
+import * as React from 'react';
+
+export interface PathnameLabelProps {
+  readonly specifier: string;
+  readonly pathname: string;
+}
+
+export function PathnameLabel({
+  specifier,
+  pathname
+}: PathnameLabelProps): JSX.Element {
+  return (
+    <Label>
+      Pathname
+      <InputGroup id={`pathname-${specifier}`} value={pathname} disabled />
+    </Label>
+  );
+}
diff --git a/packages/demos/src/history-service/index.test.ts b/packages/demos/src/history-service/index.test.ts
index 5f55f3ec..1fe93588 100644
--- a/packages/demos/src/history-service/index.test.ts
+++ b/packages/demos/src/history-service/index.test.ts
@@ -27,24 +27,22 @@ class HistoryConsumerUi {
   }
 
   public async push(pathname: string): Promise<void> {
-    await (await this.getNewPathnameInput()).type(pathname);
+    await (await this.getNewPathInput()).type(pathname);
 
     await this.browser.waitForNavigation((await this.getPushButton()).click());
   }
 
   public async replace(pathname: string): Promise<void> {
-    await (await this.getNewPathnameInput()).type(pathname);
+    await (await this.getNewPathInput()).type(pathname);
 
     await this.browser.waitForNavigation(
       (await this.getReplaceButton()).click()
     );
   }
 
-  private async getNewPathnameInput(): Promise<
-    ElementHandle<HTMLInputElement>
-  > {
+  private async getNewPathInput(): Promise<ElementHandle<HTMLInputElement>> {
     // tslint:disable-next-line:no-non-null-assertion
-    return (await page.$(`#new-pathname-${this.specifier}`))!;
+    return (await page.$(`#new-path-${this.specifier}`))!;
   }
 
   private async getPathnameInput(): Promise<ElementHandle<HTMLInputElement>> {
diff --git a/packages/react/package.json b/packages/react/package.json
index 067c787c..30f2824d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@types/react-test-renderer": "^16.0.3",
     "@types/url-join": "^4.0.0",
-    "react": "^16.6.3",
+    "react": "^16.8.6",
     "react-test-renderer": "^16.7.0"
   },
   "peerDependencies": {
diff --git a/packages/website/package.json b/packages/website/package.json
index 59ada2eb..4f7b8a85 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "react": "^16.6.3"
+    "react": "^16.8.6"
   },
   "devDependencies": {
     "docusaurus": "^1.6.2"
diff --git a/yarn.lock b/yarn.lock
index e43db7bb..24ecda06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11294,7 +11294,7 @@ react-dev-utils@^5.0.2:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@^16.5.0, react-dom@^16.6.3, react-dom@^16.8.6:
+react-dom@^16.5.0, react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -11377,7 +11377,7 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@16.8.6, react@^16.5.0, react@^16.6.3, react@^16.8.6:
+react@16.8.6, react@^16.5.0, react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==