[search][s]: implement 'Form' component that merges 'Input' and 'Sort' components and fixes 'Sort' functionality.

components/search/Form.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+export default function Form() {
+  const router = useRouter();
+  const [q, setQ] = useState(router.query.q);
+  const [sort, setSort] = useState(router.query.sort);
+
+  const handleChange = (event) => {
+    if (event.target.name === 'q') {
+      setQ(event.target.value);
+    } else if (event.target.name === 'sort') {
+      setSort(event.target.value);
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    router.push({
+      pathname: '/search',
+      query: { q, sort },
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="items-center">
+      <div className="flex">
+        <input
+          type="text"
+          name="q"
+          value={q}
+          onChange={handleChange}
+          placeholder="Search"
+          aria-label="Search"
+          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
+        />
+        <button
+          onClick={handleSubmit}
+          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+        >
+          Search
+        </button>
+      </div>
+      <div className="inline-block my-6 float-right">
+        <label htmlFor="field-order-by">Order by:</label>
+        <select
+          className="bg-white"
+          id="field-order-by"
+          name="sort"
+          onChange={handleChange}
+          value={sort}
+        >
+          <option value="score:desc">Relevance</option>
+          <option value="title_string:asc">Name Ascending</option>
+          <option value="title_string:desc">Name Descending</option>
+          <option value="metadata_modified:desc">Last Modified</option>
+          <option value="views_recent:desc">Popular</option>
+        </select>
+      </div>
+    </form>
+  );
+}

components/search/Input.tsx

@@ -1,40 +0,0 @@
-import { useState } from 'react';
-import { useRouter } from 'next/router';
-import Link from 'next/link';
-
-export default function Input() {
-  const router = useRouter();
-  const [q, setQ] = useState(router.query.q);
-
-  const handleChange = (event) => {
-    setQ(event.target.value);
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    router.push({
-      pathname: '/search',
-      query: { q },
-    });
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="flex items-center">
-      <input
-        type="text"
-        name="q"
-        value={q}
-        onChange={handleChange}
-        placeholder="Search"
-        aria-label="Search"
-        className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
-      />
-      <button
-        onClick={handleSubmit}
-        className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
-      >
-        Search
-      </button>
-    </form>
-  );
-}

components/search/Sort.tsx

@@ -1,14 +0,0 @@
-export default function Sort() {
-  return (
-    <div className="inline-block my-6 float-right">
-      <label htmlFor="field-order-by">Order by:</label>
-      <select className="bg-white" id="field-order-by" name="sort">
-        <option value="score:desc">Relevance</option>
-        <option value="title_string:asc">Name Ascending</option>
-        <option value="title_string:desc">Name Descending</option>
-        <option value="metadata_modified:desc">Last Modified</option>
-        <option value="views_recent:desc">Popular</option>
-      </select>
-    </div>
-  );
-}

pages/search.tsx

@@ -4,9 +4,8 @@ import config from '../config';
 import utils from '../utils';
 import Head from 'next/head';
 import Nav from '../components/home/Nav';
-import Input from '../components/search/Input';
+import Form from '../components/search/Form';
 import Total from '../components/search/Total';
-import Sort from '../components/search/Sort';
 import List, { DEFAULT_SEARCH_QUERY } from '../components/search/List';
 import { initializeApollo } from '../lib/apolloClient';
 
@@ -19,9 +18,8 @@ function Search({ variables }) {
       </Head>
       <Nav />
       <main className="p-6">
-        <Input />
+        <Form />
         <Total variables={variables} />
-        <Sort />
         <List variables={variables} />
       </main>
     </>