Updated CropChips and navigateTo()

src/actions/navigation.ts

 import {push} from 'react-router-redux';
+import { stringify } from 'query-string';
 
-export function navigateTo(path: string) {
+export function navigateTo(path: string, query?: object) {
   return (dispatch) => {
-      dispatch(push(path));
+      if (! query) {
+        dispatch(push(path));
+      } else {
+        dispatch(push(`${path}?` + stringify(query)));
+      }
   };
 }

src/ui/catalog/crop/CropChips.tsx

@@ -4,8 +4,6 @@ import { withStyles } from 'material-ui/styles';
 
 import {Crop} from 'model/crop.model';
 
-import Grid from 'material-ui/Grid';
-
 interface ICropChipsProps extends React.ClassAttributes<any> {
     crops: string[];
     availableCrops: Crop[];
@@ -13,28 +11,37 @@ interface ICropChipsProps extends React.ClassAttributes<any> {
 }
 
 const styles = (theme) => ({
-    wrap: {
-        display: 'flex' as 'flex',
-        flexWrap: 'wrap' as 'wrap',
-        padding: theme.spacing.unit / 2,
+    chipHolder: {
+      display: 'inline-block',
+      position: 'relative' as 'relative',
+      height: '1em',
     },
     chip: {
+        display: 'inline-block',
         marginRight: theme.spacing.unit,
+        padding: '.2em .5em',
+        position: 'relative' as 'relative',
+        top: '-.2em',
+        border: 'solid 1px Gray',
+        borderRadius: '.2em',
+        backgroundColor: '#e2e2e2',
+        color: 'Black',
     },
 });
 
-const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && (
-    <Grid container>
-        <Grid item xs={ 12 } className={ classes.wrap }>
-            { crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
-              if (typeof crop === 'string') {
-                return <div key={ crop } className={ classes.chip }>{ crop }</div>;
-              } else {
-                return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
-              }
-            }) }
-        </Grid>
-    </Grid>
+const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && crops.filter((c) => c !== null).length > 0 && (
+    <div className={ classes.chipHolder }>
+        { crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
+          if (! crop) {
+            console.log('Null crop in', crops);
+            return null;
+          } else if (typeof crop === 'string') {
+            return <div key={ crop } className={ classes.chip }>{ crop }</div>;
+          } else {
+            return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
+          }
+        }) }
+    </div>
 );
 
 const mapStateToProps = (state) => ({

src/ui/pages/welcome/index.tsx

@@ -234,8 +234,7 @@ class WelcomePage extends React.Component<any, any> {
       const { navigateTo, t } = this.props;
       e.preventDefault();
       if (query && query.length > 0) {
-        // TODO is this safe??
-        navigateTo(`/search?q=${query}`);
+        navigateTo(`/search`, { q: query });
       } else {
         this.setState({
           ...this.state,