[refactor,#59][s]: move packages/portal => examples/catalog as per plan in #59.

What is currently packages/portal is example of a running portal and should move to examples (it will get replaced by an actual portal lib soon).

examples/catalog/components/search/Form.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+const Form: 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();
+    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}
+          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>
+  );
+};
+
+export default Form;

examples/catalog/components/search/Item.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import Link from 'next/link';
+
+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>
+  );
+};
+
+export default Item;

examples/catalog/components/search/List.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from '@apollo/react-hooks';
+import Item from './Item';
+import { ErrorMessage } from '../_shared';
+import { SEARCH_QUERY } from '../../graphql/queries';
+
+const List: React.FC<{ variables: any }> = ({ variables }) => {
+  const { loading, error, data } = useQuery(SEARCH_QUERY, {
+    variables,
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading search results." />;
+  if (loading) return <div>Loading</div>;
+  const { result } = data.search;
+  return (
+    <ul>
+      {result.results.map((pkg, index) => (
+        <Item datapackage={pkg} key={index} />
+      ))}
+    </ul>
+  );
+};
+
+export default List;

examples/catalog/components/search/Total.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@apollo/react-hooks';
+import { ErrorMessage } from '../_shared';
+import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
+
+const Total: React.FC<{ variables: any }> = ({ variables }) => {
+  const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
+    variables,
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading search results." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.search;
+
+  return (
+    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+      {result.count} results found
+    </h1>
+  );
+};
+
+export default Total;