Merge pull request #9 from tomwayson/fix/items-route

Fix/items route

app.css

@@ -8,3 +8,8 @@ body {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     url(/static/images/Banner9.jpg) center top/cover no-repeat;
 }
+
+/* items */
+.search-form-inline {
+  margin-top: 5px;
+}

components/AgoSearch.js

@@ -1,10 +1,5 @@
 import React from 'react';
 
-function inputGroupClass(size) {
-  const sizeClass = size ? `input-group-${size}` : '';
-  return `input-group ${sizeClass}`.trim();
-}
-
 class AgoSearch extends React.Component {
   constructor(props) {
     super(props);
@@ -18,15 +13,19 @@ class AgoSearch extends React.Component {
   onSearch = e => {
     // don't actually submit the form
     e.preventDefault();
-    if (this.props.onSearch) {
+    const { onSearch } = this.props;
+    if (onSearch) {
       // call search function that was passed in as a prop
-      this.props.onSearch(this.state.searchCopy);
+      onSearch(this.state.searchCopy);
     }
   };
   render() {
+    const { size, className } = this.props;
+    const formClassName = `search-form ${className}`;
+    const inputGroupClass = `input-group ${size && `input-group-${size}`}`;
     return (
-      <form className="search-form" onSubmit={this.onSearch}>
-        <div className={inputGroupClass(this.props.size)}>
+      <form className={formClassName} onSubmit={this.onSearch}>
+        <div className={inputGroupClass}>
           <input
             className="form-control"
             placeholder="search for items"

components/ItemsLayout.js

@@ -25,7 +25,7 @@ function ItemsLayout({ results, total, num, q, start, onParamsChange }) {
       <div className="row mb-2">
         <div className="col-9">
           <h2>
-            Your search for "{q}" yielded {total} items
+            Your search for &quot;{q}&quot; yielded {total} items
           </h2>
         </div>
         <div className="col-3">

pages/items.js

@@ -16,6 +16,10 @@ class Items extends React.Component {
       start: 1
     };
     const searchForm = { ...defaults, ...query };
+    if (!searchForm.q) {
+      // invalid search term, emulate an empty response rather than sending a request
+      return { results: [], total: 0 };
+    }
     // execute search and update state
     return searchItems({
       searchForm //,
@@ -35,13 +39,13 @@ class Items extends React.Component {
         // TODO: should we not catch here and instead
         // let users be taken to the error route?
         // see: https://nextjs.org/docs#custom-error-handling
-        this.setState({
+        return {
           pathname,
           error: e.message || e,
           results: null,
           total: 0,
           ...searchForm
-        });
+        };
       });
   }
   onParamsChange = (q, start) => {