Updated algolia package and handle multiple query params (#311)

tech-conferences · Jun 10, 2018 · 0bc0d01 · 0bc0d01
1 parent 549cebd
commit 0bc0d01
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -55,14 +55,15 @@
     "postcss-loader": "2.0.6",
     "prettier": "^1.5.3",
     "promise": "8.0.1",
+    "query-string": "^6.1.0",
     "react": "^16.2.0",
     "react-datepicker": "^1.2.1",
     "react-dev-utils": "^3.1.0",
     "react-dom": "^16.2.0",
     "react-error-overlay": "^1.0.10",
     "react-favicon": "0.0.13",
     "react-helmet": "^5.1.3",
-    "react-instantsearch": "^4.5.1",
+    "react-instantsearch": "^5.2.0-beta.1",
     "react-recaptcha": "^2.3.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.0",

diff --git a/src/components/ConferencePage/ConferencePage.js b/src/components/ConferencePage/ConferencePage.js
@@ -3,6 +3,7 @@ import React, {Component} from 'react';
 import Favicon from 'react-favicon';
 import {Helmet} from 'react-helmet';
 import {orderBy} from 'lodash';
+import queryString from 'query-string';
 import {
   Configure,
   InstantSearch,
@@ -21,6 +22,7 @@ import Heading from '../Heading';
 import ConferenceList from '../ConferenceList';
 import {TOPICS} from '../config';
 
+const QUERY_SEPARATOR = '+';
 const CURRENT_YEAR = new Date().getFullYear();
 const TODAY = Math.round(new Date().getTime() / 1000);
 const ONE_YEAR = 365 * 24 * 60 * 60;
@@ -49,15 +51,21 @@ class ConferencePage extends Component {
     this.setState({
       refinementList: searchState.refinementList || {},
     }, () => {
+      const {match: {params}} = this.props;
       const {refinementList: {country, topics}} = this.state;
       const {history, showCFP} = this.props;
       const startURL = showCFP ? '/cfp' : '';
+      const queryParams = {
+        topics: (topics || [params.topic]).join(QUERY_SEPARATOR),
+        countries: (country || [params.country]).join(QUERY_SEPARATOR)
+      };
+
       if (topics && country) {
-        history.push(`${startURL}/${topics[0]}/${country[0]}`);
+        history.push(`${startURL}/${topics[0]}/${country[0]}?${queryString.stringify(queryParams)}`);
       } else if (topics) {
-        history.push(`${startURL}/${topics[0]}`);
+        history.push(`${startURL}/${topics[0]}?${queryString.stringify(queryParams)}`);
       } else {
-        history.push(`${startURL}/`);
+        history.push(`${startURL}/?${queryString.stringify(queryParams)}`);
       }
     });
   };
@@ -81,6 +89,9 @@ class ConferencePage extends Component {
   render() {
     const {showPast, sortBy, hitsPerPage} = this.state;
     const {showCFP, match: {params: {topic, country}}} = this.props;
+    const queryParams = queryString.parse(location.search);
+    const topics = (queryParams.topics && queryParams.topics.split(QUERY_SEPARATOR) || topic && [topic] || []);
+    const countries = (queryParams.countries && queryParams.countries.split(QUERY_SEPARATOR) || country && [country] || []);
 
     return (
       <div>
@@ -111,18 +122,18 @@ class ConferencePage extends Component {
             filters={this.algoliaFilter()}
           />
           <RefinementList
-            limitMin={20}
-            attributeName="topics"
-            defaultRefinement={topic ? [topic] : []}
+            limit={20}
+            attribute="topics"
+            defaultRefinement={topics}
             transformItems={transformTopicRefinements}
           />
           <RefinementList
-            limitMin={9}
-            limitMax={100}
+            showMoreLimit={9}
+            limit={100}
             showMore
-            attributeName="country"
+            attribute="country"
             transformItems={transformCountryRefinements}
-            defaultRefinement={country ? [country] : []}
+            defaultRefinement={countries}
           />
 
           <CurrentRefinements
@@ -178,7 +189,7 @@ function transformCountryRefinements(items) {
 }
 
 function transformCurrentRefinements(items) {
-  if (items.length && items[0].attributeName === 'topics') {
+  if (items.length && items[0].attribute === 'topics') {
     items[0].items.map((item) => {
       item.label = TOPICS[item.label] || item.label;
       return item;

diff --git a/src/components/ConferencePage/CurrentRefinement.scss b/src/components/ConferencePage/CurrentRefinement.scss
@@ -2,11 +2,21 @@
 @import '../style/foundation/colors';
 @import '../style/foundation/spacing';
 
-:global(.ais-CurrentRefinements__root) {
+:global(.ais-CurrentRefinements) {
   margin-bottom: spacing(base);
 }
 
-:global(.ais-CurrentRefinements__itemParent .ais-CurrentRefinements__item) {
+:global(.ais-CurrentRefinements-list) {
+  padding-left: 0;
+  margin: 0;
+}
+
+:global(.ais-CurrentRefinements-item) {
+  list-style: none;
+  display: inline-block;
+}
+
+:global(.ais-CurrentRefinements-list) :global(.ais-CurrentRefinements-category) {
   display: inline-block;
   margin-right: spacing(base);
   margin-bottom: spacing(tight);
@@ -18,25 +28,25 @@
   transition: all 100ms linear;
 }
 
-:global(.ais-CurrentRefinements__itemParent .ais-CurrentRefinements__item:hover) {
+:global(.ais-CurrentRefinements-list) :global(.ais-CurrentRefinements-category:hover) {
   background-color: color(gray);
   color: white;
 }
 
-:global(.ais-CurrentRefinements__itemParent) {
+:global(.ais-CurrentRefinements-list) {
   background-color: transparent;
   display: inline-block;
 }
 
-:global(.ais-CurrentRefinements__itemParent > .ais-CurrentRefinements__itemLabel) {
+:global(.ais-CurrentRefinements-label) {
   display: none;
 }
 
-:global(.ais-CurrentRefinements__itemLabel) {
+:global(.ais-CurrentRefinements-categoryLabel) {
   vertical-align: middle;
 }
 
-:global(.ais-CurrentRefinements__itemClear) {
+:global(.ais-CurrentRefinements-delete) {
   vertical-align: middle;
   appearance: none;
   margin-left: spacing(tight);
@@ -53,8 +63,7 @@
   transition: all 100ms linear;
 }
 
-:global(.ais-CurrentRefinements__itemParent .ais-CurrentRefinements__item:hover .ais-CurrentRefinements__itemClear) {
-  // background-color: color(gray);
+:global(.ais-CurrentRefinements-category:hover) :global(.ais-CurrentRefinements-delete) {
   color: color(gray);
   background-color: white;
 }
diff --git a/src/components/ConferencePage/RefinementList.scss b/src/components/ConferencePage/RefinementList.scss
@@ -3,47 +3,64 @@
 @import '../style/foundation/colors';
 @import '../style/foundation/spacing';
 
-:global(.ais-RefinementList__root) {
+:global(.ais-RefinementList) {
   margin-bottom: spacing(base);
 }
 
-:global(.ais-RefinementList__items) {
+:global(.ais-RefinementList-list) {
   display: flex;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  padding-left: 0;
+  margin: 0;
 }
 
-:global(.ais-RefinementList__item) {
+:global(.ais-RefinementList-item) {
   margin-right: spacing(loose);
   margin-bottom: spacing(tight);
+  list-style: none;
 }
 
-:global(.ais-RefinementList__itemCheckbox) {
-  display: none;
+:global(.ais-RefinementList-checkbox) {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
 }
 
-:global(.ais-RefinementList__itemLabel) {
+
+:global(.ais-RefinementList-label) {
   @include link();
 
+  &:focus {
+    background: black;
+  }
+
   &:hover {
     @include link--hover();
   }
 }
 
-:global(.ais-RefinementList__itemLabelSelected) {
+:global(:not(.ais-RefinementList-item--selected)) :global(.ais-RefinementList-checkbox:focus) + :global(.ais-RefinementList-labelText) {
+  outline-style: auto;
+}
+
+:global(.ais-RefinementList-item--selected) :global(.ais-RefinementList-labelText) {
   @include link--hover();
 }
 
-:global(.ais-RefinementList__itemCount) {
+:global(.ais-RefinementList-count) {
   border-radius: 30px;
   background-color: color(gray, lighter);
   color: color(accent, dark);
   font-size: font-size(filter, itemCount);
   padding: 0 6px;
 }
 
-:global(.ais-RefinementList__showMore) {
+:global(.ais-RefinementList-showMore) {
   @include link();
   font-size: 0.9em;
   &:hover {