feat(demos): add push/replace UI for further history-service itest sc…

…enarios (#191)
feature-hub · Dec 15, 2018 · 2c3a7d3 · 2c3a7d3
1 parent 385208d
commit 2c3a7d3
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 35 deletions.
diff --git a/packages/demos/package.json b/packages/demos/package.json
@@ -20,6 +20,7 @@
     "history": "^4.7.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-media": "^1.9.2",
     "style-loader": "^0.23.1",
     "ts-loader": "^5.3.1",
     "ts-node": "^7.0.1",

diff --git a/packages/demos/src/history-service/history-consumer-definition.tsx b/packages/demos/src/history-service/history-consumer-definition.tsx
@@ -0,0 +1,32 @@
+import {FeatureAppDefinition} from '@feature-hub/core';
+import {HistoryServiceV1} from '@feature-hub/history-service';
+import {ReactFeatureApp} from '@feature-hub/react';
+import * as React from 'react';
+import {HistoryConsumer} from './history-consumer';
+
+export const historyConsumerDefinition: FeatureAppDefinition<
+  ReactFeatureApp,
+  undefined,
+  {'s2:history': HistoryServiceV1}
+> = {
+  id: 'test:history-consumer',
+
+  dependencies: {
+    's2:history': '^1.0'
+  },
+
+  create: ({featureServices, idSpecifier}) => {
+    const historyService = featureServices['s2:history'];
+
+    return {
+      render: () => (
+        <HistoryConsumer
+          history={historyService.createBrowserHistory()}
+          idSpecifier={idSpecifier || ''}
+        />
+      )
+    };
+  }
+};
+
+export default historyConsumerDefinition;
diff --git a/packages/demos/src/history-service/history-consumer.tsx b/packages/demos/src/history-service/history-consumer.tsx
@@ -1,8 +1,15 @@
-import {Card, Classes, Label} from '@blueprintjs/core';
-import {FeatureAppDefinition} from '@feature-hub/core';
-import {History, HistoryServiceV1} from '@feature-hub/history-service';
-import {ReactFeatureApp} from '@feature-hub/react';
+import {
+  Button,
+  Card,
+  Classes,
+  ControlGroup,
+  H5,
+  InputGroup,
+  Label
+} from '@blueprintjs/core';
+import {History} from '@feature-hub/history-service';
 import * as React from 'react';
+import Media from 'react-media';
 
 interface HistoryConsumerProps {
   readonly history: History;
@@ -13,13 +20,14 @@ interface HistoryConsumerState {
   readonly pathname: string;
 }
 
-class HistoryConsumer extends React.Component<
+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;
@@ -38,8 +46,10 @@ class HistoryConsumer extends React.Component<
     const {pathname} = this.state;
 
     return (
-      <Card>
-        <Label className="bp3-inline">
+      <Card style={{margin: '20px'}}>
+        <H5>History Consumer {idSpecifier.toUpperCase()}</H5>
+
+        <Label>
           Pathname
           <input
             id={`pathname-${idSpecifier}`}
@@ -48,34 +58,32 @@ class HistoryConsumer extends React.Component<
             disabled
           />
         </Label>
+
+        <Media query="(max-width: 370px)">
+          {matches => (
+            <ControlGroup vertical={matches}>
+              <InputGroup
+                placeholder="Enter a new path..."
+                inputRef={ref => (this.inputElement = ref)}
+              />
+              <Button text="Push" onClick={() => this.changePath('push')} />
+              <Button
+                text="Replace"
+                onClick={() => this.changePath('replace')}
+              />
+            </ControlGroup>
+          )}
+        </Media>
       </Card>
     );
   }
-}
-
-export const historyConsumerDefinition: FeatureAppDefinition<
-  ReactFeatureApp,
-  undefined,
-  {'s2:history': HistoryServiceV1}
-> = {
-  id: 'test:history-consumer',
 
-  dependencies: {
-    's2:history': '^1.0'
-  },
-
-  create: ({featureServices, idSpecifier}) => {
-    const historyService = featureServices['s2:history'];
+  private changePath(method: 'push' | 'replace'): void {
+    if (!this.inputElement) {
+      return;
+    }
 
-    return {
-      render: () => (
-        <HistoryConsumer
-          history={historyService.createBrowserHistory()}
-          idSpecifier={idSpecifier || ''}
-        />
-      )
-    };
+    this.props.history[method](this.inputElement.value);
+    this.inputElement.value = '';
   }
-};
-
-export default historyConsumerDefinition;
+}
diff --git a/packages/demos/src/history-service/integrator.tsx b/packages/demos/src/history-service/integrator.tsx
@@ -4,7 +4,7 @@ import {FeatureAppContainer} from '@feature-hub/react';
 import {defineServerRenderer} from '@feature-hub/server-renderer';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {historyConsumerDefinition} from './history-consumer';
+import {historyConsumerDefinition} from './history-consumer-definition';
 import {rootLocationTransformer} from './root-location-transformer';
 
 // tslint:disable

diff --git a/packages/demos/src/start-server.ts b/packages/demos/src/start-server.ts
@@ -12,6 +12,9 @@ export async function startServer(
   app.get('/', (_req, res) => {
     res.send(
       `<html>
+        <head>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+        </head>
         <body>
           <main></main>
           <script src="integrator.js"></script>

diff --git a/yarn.lock b/yarn.lock
@@ -18,7 +18,7 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.1.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
   integrity sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==
@@ -5512,6 +5512,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 [email protected]:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
@@ -7388,7 +7395,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -7623,6 +7630,16 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-media@^1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.9.2.tgz#423ee12f952e1d69f1b994a58d3cbed21a92b370"
+  integrity sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.2"
+    json2mq "^0.2.0"
+    prop-types "^15.5.10"
+
 react-popper@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.2.tgz#e723a0a7fe1c42099a13e5d494e9d7d74b352af4"
@@ -8626,6 +8643,11 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"