[apollo][xl]: mocked graphql setup + search page working from apollo now.

components/home/Nav.tsx

@@ -35,19 +35,20 @@ export default function Nav() {
             Search
           </a>
         </Link>
-        <Link href="http://tech.datopian.com/frontend/">
-          <a
-            className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
-            target="_blank"
-          >
-            Docs
-          </a>
-        </Link>
-        <Link href="https://github.com/datopian/portal">
-          <a className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0">
-            GitHub
-          </a>
-        </Link>
+        <a
+          href="http://tech.datopian.com/frontend/"
+          className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
+          target="_blank"
+        >
+          Docs
+        </a>
+        <a
+          href="https://github.com/datopian/portal"
+          className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
+          target="_blank"
+        >
+          GitHub
+        </a>
       </div>
     </nav>
   );

components/search/Error.tsx

@@ -0,0 +1,15 @@
+export default function ErrorMessage({ message }) {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  );
+}

components/search/Input.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 
-export default function Input({ query }) {
+export default function Input() {
   const router = useRouter();
-  const [q, setQ] = useState(query.q);
+  const [q, setQ] = useState(router.query.q);
 
   const handleChange = (event) => {
     setQ(event.target.value);

components/search/Item.tsx

@@ -25,7 +25,9 @@ export default function Item({ datapackage }) {
             : 'dataset'}
         </a>
       </Link>
-      <div className="leading-relaxed mt-2">{datapackage.description}</div>
+      <div className="leading-relaxed mt-2">
+        {datapackage.description || datapackage.notes}
+      </div>
     </div>
   );
 }

components/search/List.tsx

@@ -1,19 +1,33 @@
 import Item from './Item';
+import ErrorMessage from './Error';
+import { NetworkStatus } from 'apollo-client';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
 export const DEFAULT_SEARCH_QUERY = gql`
-  search($query: SearchQuery!) {
-    result {
-      results
+  query search($query: SearchQuery!) {
+    search(query: $query) {
+      result {
+        results {
+          name
+          title
+          notes
+          organization {
+            name
+            title
+            description
+          }
+        }
+      }
     }
   }
 `;
 
-export default function List() {
+export default function List({ variables }) {
   const { loading, error, data, fetchMore, networkStatus } = useQuery(
     DEFAULT_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
@@ -24,12 +38,11 @@ export default function List() {
   if (error) return <ErrorMessage message="Error loading posts." />;
   if (loading) return <div>Loading</div>;
 
-  const { result } = data;
-
+  const { result } = data.search;
   return (
     <ul>
-      {result.map((datapackage, index) => (
-        <Item datapackage={datapackage} key={index} />
+      {result.results.map((pkg, index) => (
+        <Item datapackage={pkg} key={index} />
       ))}
     </ul>
   );

components/search/Total.tsx

@@ -1,7 +1,32 @@
-export default function Total({ total }) {
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const GET_NUMBER_OF_DATASETS = gql`
+  query search($query: SearchQuery!) {
+    search(query: $query) {
+      result {
+        count
+      }
+    }
+  }
+`;
+
+export default function Total({ variables }) {
+  const { loading, error, data } = useQuery(GET_NUMBER_OF_DATASETS, {
+    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 (loading) return <div>Loading</div>;
+
+  const { result } = data.search;
+
   return (
     <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
-      {total} results found
+      {result.count} results found
     </h1>
   );
 }