Merge pull request #405 from jorilallo/issue-282

Fixed: Unencoded search terms

app/scenes/Search/Search.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import keydown from 'react-keydown';
 import { observable, action } from 'mobx';
@@ -55,21 +55,21 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
 `;
 
 @observer
-class Search extends React.Component {
+class Search extends Component {
   firstDocument: HTMLElement;
   props: Props;
 
   @observable resultIds: string[] = []; // Document IDs
-  @observable searchTerm: ?string = null;
+  @observable query: string = '';
   @observable isFetching = false;
 
   componentDidMount() {
-    this.updateSearchResults();
+    this.handleQueryChange();
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.match.params.query !== this.props.match.params.query) {
-      this.updateSearchResults();
+      this.handleQueryChange();
     }
   }
 
@@ -90,24 +90,26 @@ class Search extends React.Component {
       ev.preventDefault();
       if (this.firstDocument) {
         const element = ReactDOM.findDOMNode(this.firstDocument);
-        // $FlowFixMe
-        if (element && element.focus) element.focus();
+        if (element instanceof HTMLElement) element.focus();
       }
     }
   };
 
-  updateSearchResults = _.debounce(() => {
-    this.search(this.props.match.params.query);
-  }, 250);
+  handleQueryChange = () => {
+    const query = this.props.match.params.query;
+    this.query = query ? decodeURIComponent(query) : '';
+    this.fetchResultsDebounced();
+  };
+
+  fetchResultsDebounced = _.debounce(this.fetchResults, 250);
 
   @action
-  search = async (query: string) => {
-    this.searchTerm = query;
+  fetchResults = async () => {
     this.isFetching = true;
 
-    if (query) {
+    if (this.query) {
       try {
-        this.resultIds = await this.props.documents.search(query);
+        this.resultIds = await this.props.documents.search(this.query);
       } catch (e) {
         console.error('Something went wrong');
       }
@@ -118,7 +120,7 @@ class Search extends React.Component {
     this.isFetching = false;
   };
 
-  updateQuery = query => {
+  updateLocation = query => {
     this.props.history.replace(searchUrl(query));
   };
 
@@ -127,7 +129,7 @@ class Search extends React.Component {
   };
 
   get title() {
-    const query = this.searchTerm;
+    const query = this.query;
     const title = 'Search';
     if (query) return `${query} - ${title}`;
     return title;
@@ -135,9 +137,8 @@ class Search extends React.Component {
 
   render() {
     const { documents, notFound } = this.props;
-    const query = this.props.match.params.query;
     const hasResults = this.resultIds.length > 0;
-    const showEmpty = !this.isFetching && this.searchTerm && !hasResults;
+    const showEmpty = !this.isFetching && this.query && !hasResults;
 
     return (
       <Container auto>
@@ -151,12 +152,11 @@ class Search extends React.Component {
         )}
         <ResultsWrapper pinToTop={hasResults} column auto>
           <SearchField
-            searchTerm={this.searchTerm}
             onKeyDown={this.handleKeyDown}
-            onChange={this.updateQuery}
-            value={query || ''}
+            onChange={this.updateLocation}
+            value={this.query}
           />
-          {showEmpty && <Empty>Oop, no matching documents.</Empty>}
+          {showEmpty && <Empty>No matching documents.</Empty>}
           <ResultList visible={hasResults}>
             <StyledArrowKeyNavigation
               mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -172,7 +172,7 @@ class Search extends React.Component {
                     }
                     key={documentId}
                     document={document}
-                    highlight={this.searchTerm}
+                    highlight={this.query}
                     showCollection
                   />
                 );

app/utils/routeHelpers.js

@@ -82,7 +82,7 @@ export function newDocumentUrl(collection: Collection): string {
 }
 
 export function searchUrl(query?: string): string {
-  if (query) return `/search/${query}`;
+  if (query) return `/search/${encodeURIComponent(query)}`;
   return `/search`;
 }
 

package.json

@@ -134,7 +134,7 @@
     "react-medium-image-zoom": "^3.0.2",
     "react-modal": "^3.1.2",
     "react-portal": "^4.0.0",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.2.0",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
     "rimraf": "^2.5.4",

yarn.lock

@@ -7331,9 +7331,9 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-router-dom@^4.1.1:
+react-router-dom@^4.2.0:
   version "4.2.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
   dependencies:
     history "^4.7.2"
     invariant "^2.2.2"