Merge pull request #22 from swiftype/jasonstoltz/fix-back-button

Fixed browser back button and miscellaneous changes

Author: JasonStoltz

.circleci/config.yml

@@ -0,0 +1,39 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:7.10
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: npm install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: ./bin/ensure_engine_config.sh
+
+      # run tests!
+      - run: npm test

README.md

@@ -1,5 +1,7 @@
 # App Search Reference UI
 
+[![CircleCI](https://circleci.com/gh/swiftype/app-search-reference-ui-react.svg?style=svg)](https://circleci.com/gh/swiftype/app-search-reference-ui-react)
+
 The Reference UI is a configurable, generic UI meant to work with
 any [App Search](https://www.elastic.co/cloud/search-lib-service) Engine. It
 can serve as a simple demo, a functional test for your Engine data,
@@ -89,7 +91,7 @@ npm install netlify-cli -g
 netlify deploy # enter ./build as the deploy path
 ```
 
-You'll then simply follow the command prompt to log into Netlify and deploy your site. This can be
+You'll then simply follow the command prompt to log into Netlify and deploy your site. This can be completed in just a few minutes.
 
 ## Understanding the Reference UI Code
 

bin/ensure_engine_config.sh

@@ -0,0 +1,8 @@
+project_root=$( cd "$(dirname "${BASH_SOURCE[0]}")/.." ; pwd -P )
+
+if [[ ! -e ${project_root}/src/config/engine.json ]]; then
+    echo "{}" > src/config/engine.json
+    echo "wrote empty engine.json"
+else
+  echo "engine.json already exists"
+fi

src/search-lib/AppSearchAPIConnector.js

@@ -11,7 +11,7 @@ import * as SwiftypeAppSearch from "swiftype-app-search-javascript";
 function toAPIFacetSyntax(facetConfig = {}) {
   return Object.entries(facetConfig).reduce((acc, [key, value]) => {
     acc[key] = Object.entries(value).reduce((propAcc, [propKey, propValue]) => {
-      if (["type", "size", "ranges"].includes(propKey)) {
+      if (!["disjunctive", "conditional"].includes(propKey)) {
         propAcc[propKey] = propValue;
       }
       return propAcc;

src/search-lib/URLManager.js

@@ -177,6 +177,10 @@ export default class URLManager {
       // want to notify that the URL changed.
       if (`?${this.lastPushSearchString}` === location.search) return;
 
+      // Once we've decided to return based on lastPushSearchString, reset
+      // it so that we don't break back / forward button.
+      this.lastPushSearchString = "";
+
       callback(
         paramsToState(
           queryString.parse(location.search, {

src/search-lib/URLManager.test.js

@@ -12,6 +12,50 @@ function createManager() {
   return manager;
 }
 
+const basicParameterState = {
+  filters: [
+    {
+      dependencies: ["underscore", "another"]
+    },
+    {
+      keywords: ["node"]
+    }
+  ],
+  resultsPerPage: 20,
+  searchTerm: "node",
+  sortDirection: "asc",
+  sortField: "name"
+};
+
+const basicParameterStateAsUrl =
+  "?fv-dependencies=underscore&fv-dependencies=another&fv-keywords=node&q=node&size=20&sort-direction=asc&sort-field=name";
+
+const parameterStateWithRangeFilters = {
+  filters: [
+    {
+      date: [
+        {
+          from: 12,
+          to: 4000
+        },
+        {
+          to: 4000
+        }
+      ]
+    },
+    {
+      cost: [
+        {
+          from: 50
+        }
+      ]
+    },
+    {
+      keywords: "node"
+    }
+  ]
+};
+
 it("can be initialized", () => {
   const manager = new URLManager();
   expect(manager).toBeInstanceOf(URLManager);
@@ -58,20 +102,7 @@ describe("#getStateFromURL", () => {
 describe("#pushStateToURL", () => {
   it("will update the url with the url corresponding to the provided state", () => {
     const manager = createManager();
-    manager.pushStateToURL({
-      filters: [
-        {
-          dependencies: ["underscore", "another"]
-        },
-        {
-          keywords: ["node"]
-        }
-      ],
-      resultsPerPage: 20,
-      searchTerm: "node",
-      sortDirection: "asc",
-      sortField: "name"
-    });
+    manager.pushStateToURL(basicParameterState);
     const queryString = manager.history.push.mock.calls[0][0].search;
     expect(queryString).toEqual(
       "?fv-dependencies=underscore&fv-dependencies=another&fv-keywords=node&q=node&size=20&sort-field=name&sort-direction=asc"
@@ -80,31 +111,7 @@ describe("#pushStateToURL", () => {
 
   it("will update the url with range filter types", () => {
     const manager = createManager();
-    manager.pushStateToURL({
-      filters: [
-        {
-          date: [
-            {
-              from: 12,
-              to: 4000
-            },
-            {
-              to: 4000
-            }
-          ]
-        },
-        {
-          cost: [
-            {
-              from: 50
-            }
-          ]
-        },
-        {
-          keywords: "node"
-        }
-      ]
-    });
+    manager.pushStateToURL(parameterStateWithRangeFilters);
     const queryString = manager.history.push.mock.calls[0][0].search;
     expect(queryString).toEqual(
       "?fr-date=12_4000&fr-date=_4000&fr-cost=50_&fv-keywords=node"
@@ -113,20 +120,94 @@ describe("#pushStateToURL", () => {
 });
 
 describe("#onURLStateChange", () => {
+  let manager;
+
+  function setup() {
+    manager = createManager();
+  }
+
+  function pushStateToURL(state) {
+    manager.pushStateToURL(state);
+    return manager.history.push.mock.calls[0][0].search;
+  }
+
+  function simulateBrowserHistoryEvent(newUrl) {
+    // Since we're not in a real browser, we simulate the change event that
+    // would have ocurred.
+    manager.history.listen.mock.calls[0][0]({
+      search: newUrl
+    });
+  }
+
+  function subject(onURLStateChangeHandler, newUrl) {
+    // Set our handler, which we be called any time url state changes
+    manager.onURLStateChange(onURLStateChangeHandler);
+
+    simulateBrowserHistoryEvent(newUrl);
+  }
+
   it("will call provided callback with updated state when url changes", () => {
-    const manager = createManager();
+    setup();
+    let newState;
+
+    // Provide url state change handler
+    subject(state => {
+      newState = state;
+    }, basicParameterStateAsUrl);
+
+    // Verify it is called when url state changes
+    expect(newState).toEqual(basicParameterState);
+  });
+
+  /*
+    If we triggered the callback every time we pushed state to the url,
+    we would have an infinite loop.
+
+    pushStateToURL -> UpdateUrl -> HistoryEvent -> Handler -> pushstateToURL
+
+    Instead, we just want:
+    pushStateToURL -> UpdateUrl -> HistoryEvent -> Handler
 
+  */
+  it("will not trigger callback as a result of pushStateToURL", () => {
+    setup();
+
+    // Push state to the url
+    // newUrl is the url that the browser changed to
+    const newUrl = pushStateToURL(basicParameterState);
     let newState;
-    manager.onURLStateChange(state => {
+
+    // Provide url state change handler
+    subject(state => {
       newState = state;
-    });
+    }, newUrl);
 
-    // Simulate state change
-    manager.history.listen.mock.calls[0][0]({
-      search:
-        "?fv-dependencies=underscore&fv-keywords=node&q=node&size=20&sort-direction=asc&sort-field=name"
-    });
+    // Verify it is called when url state changes
+    expect(newState).toBe(undefined);
+  });
+
+  it("will trigger callback if navigating back to a url with browser buttons", () => {
+    setup();
+
+    // Push state to the url
+    // newUrl is the url that the browser changed to
+    const newUrl = pushStateToURL(basicParameterState);
+    let newState;
+
+    // Provide url state change handler
+    subject(state => {
+      newState = state;
+    }, newUrl);
+
+    // Verify it is called when url state changes
+    expect(newState).toBe(undefined);
+
+    // Back button to empty state
+    simulateBrowserHistoryEvent("");
+    expect(newState).toEqual({}); // Was called, but empty state
 
-    expect(newState).toMatchSnapshot();
+    // Forward button to double back to the original "newUrl"
+    simulateBrowserHistoryEvent(newUrl);
+    expect(newState).toEqual(basicParameterState);
   });
 });

src/search-lib/__snapshots__/URLManager.test.js.snap

@@ -78,24 +78,3 @@ Object {
   "sortField": "name",
 }
 `;
-
-exports[`#onURLStateChange will call provided callback with updated state when url changes 1`] = `
-Object {
-  "filters": Array [
-    Object {
-      "dependencies": Array [
-        "underscore",
-      ],
-    },
-    Object {
-      "keywords": Array [
-        "node",
-      ],
-    },
-  ],
-  "resultsPerPage": 20,
-  "searchTerm": "node",
-  "sortDirection": "asc",
-  "sortField": "name",
-}
-`;

src/search-lib/withSearch.js

@@ -6,12 +6,17 @@ import SearchConsumer from "./SearchConsumer";
  * This is a Higher Order Component that is used to expose (as `props`) all
  * state and Actions provided by the SearchProvider to "container"
  * components.
+ *
+ * `mapContextToProps` can be used to manipulate actions and state from context
+ * before they are passed on to the container.
  */
 export default function withSearch(Component) {
   return function(props) {
+    const { mapContextToProps = context => context, ...rest } = props;
+
     return (
       <SearchConsumer>
-        {context => <Component {...context} {...props} />}
+        {context => <Component {...mapContextToProps(context)} {...rest} />}
       </SearchConsumer>
     );
   };