feat(demos): use react-router in history-service demo

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",

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;

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>
+  );
+}

packages/demos/src/history-service/history-consumer-definition.tsx → 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;

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>
+  );
+}

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>
+  );
+}

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>> {

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": {

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"

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==