Refactor catalog example to use portal.js

examples/catalog/components/search/Form.tsx

@@ -1,65 +1,20 @@
-import { useState } from 'react';
 import { useRouter } from 'next/router';
+import { Form } from 'portal';
 
-const Form: React.FC = () => {
+const SearchForm: React.FC = () => {
   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();
+  const handleSubmit = (q) => {
     router.push({
       pathname: '/search',
-      query: { q, sort },
+      query: { q },
     });
   };
-
   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}
-          onBlur={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>
+    <>
+      <Form handleSubmit={handleSubmit} />
+    </>
   );
 };
 
-export default Form;
+export default SearchForm;

examples/catalog/components/search/Item.tsx

@@ -1,38 +1,7 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import Link from 'next/link';
+import { Item } from 'portal';
 
-const Item: React.FC<{ datapackage: any }> = ({ datapackage }) => {
-  return (
-    <div className="mb-6">
-      <h3 className="text-xl font-semibold">
-        <Link
-          href={`/@${
-            datapackage.organization
-              ? datapackage.organization.name
-              : 'dataset'
-          }/${datapackage.name}`}
-        >
-          <a className="text-primary">
-            {datapackage.title || datapackage.name}
-          </a>
-        </Link>
-      </h3>
-      <Link
-        href={`/@${
-          datapackage.organization ? datapackage.organization.name : 'dataset'
-        }`}
-      >
-        <a className="text-gray-500 block mt-1">
-          {datapackage.organization
-            ? datapackage.organization.title
-            : 'dataset'}
-        </a>
-      </Link>
-      <div className="leading-relaxed mt-2">
-        {datapackage.description || datapackage.notes}
-      </div>
-    </div>
-  );
+const SearchItem: React.FC<{ datapackage: any }> = ({ datapackage }) => {
+  return <Item dataset={datapackage} />;
 };
 
-export default Item;
+export default SearchItem;

examples/catalog/components/search/Total.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
+import { ItemTotal } from 'portal';
 
 const Total: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
@@ -16,11 +17,7 @@ const Total: React.FC<{ variables: any }> = ({ variables }) => {
 
   const { result } = data.search;
 
-  return (
-    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
-      {result.count} results found
-    </h1>
-  );
+  return <ItemTotal count={result.count} />;
 };
 
 export default Total;