Merge branch 'master' into make-recent-datasets-dynamic

components/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/dataset/About.tsx

@@ -1,4 +1,41 @@
-export default function About({ datapackage }) {
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const GET_DATAPACKAGE_QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        name
+        title
+        size
+        metadata_created
+        metadata_modified
+        resources {
+          name
+        }
+      }
+    }
+  }
+`;
+
+export default function About({ variables }) {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    GET_DATAPACKAGE_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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
   return (
     <>
       <table className="table-auto w-full text-sm text-left my-6">
@@ -15,11 +52,11 @@ export default function About({ datapackage }) {
         </thead>
         <tbody>
           <tr>
-            <td className="px-4 py-2">{datapackage.resources.length}</td>
-            <td className="px-4 py-2">{datapackage.size || 'NA'}</td>
+            <td className="px-4 py-2">{result.resources.length}</td>
+            <td className="px-4 py-2">{result.size || 'NA'}</td>
             <td className="px-4 py-2"></td>
-            <td className="px-4 py-2">{datapackage.created}</td>
-            <td className="px-4 py-2">{datapackage.modified}</td>
+            <td className="px-4 py-2">{result.metadata_created}</td>
+            <td className="px-4 py-2">{result.metadata_modified}</td>
             <td className="px-4 py-2"></td>
             <td className="px-4 py-2"></td>
           </tr>

components/dataset/Org.tsx

@@ -1,20 +1,53 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 
-export default function Org({ org }) {
+export const GET_ORG_QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        organization {
+          name
+          title
+          image_url
+        }
+      }
+    }
+  }
+`;
+
+export default function Org({ variables }) {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    GET_ORG_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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { organization } = data.dataset.result;
   return (
     <>
-      {org ? (
+      {organization ? (
         <>
           <img
             src={
-              org.image_url ||
+              organization.image_url ||
               'https://datahub.io/static/img/datahub-cube-edited.svg'
             }
             className="h-5 w-5 mr-2 inline-block"
           />
-          <Link href={`/@${org.name}`}>
+          <Link href={`/@${organization.name}`}>
             <a className="font-semibold text-primary underline">
-              {org.title || org.name}
+              {organization.title || organization.name}
             </a>
           </Link>
         </>

components/dataset/Resources.tsx

@@ -1,6 +1,43 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const GET_DATAPACKAGE_QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        name
+        resources {
+          name
+          title
+          format
+          created
+          last_modified
+        }
+      }
+    }
+  }
+`;
+
+export default function Resources({ variables }) {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    GET_DATAPACKAGE_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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
 
-export default function Resources({ datapackage }) {
   return (
     <>
       <h3 className="text-xl font-semibold">Data Files</h3>
@@ -15,10 +52,10 @@ export default function Resources({ datapackage }) {
           </tr>
         </thead>
         <tbody>
-          {datapackage.resources.map((resource, index) => (
+          {result.resources.map((resource, index) => (
             <tr key={index}>
               <td className="px-4 py-2">
-                <Link href={`${datapackage.name}/r/${resource.name}`}>
+                <Link href={`${result.name}/r/${resource.name}`}>
                   <a className="underline">{resource.title || resource.name}</a>
                 </Link>
               </td>
@@ -26,7 +63,7 @@ export default function Resources({ datapackage }) {
               <td className="px-4 py-2">{resource.created}</td>
               <td className="px-4 py-2">{resource.last_modified}</td>
               <td className="px-4 py-2">
-                <Link href={`${datapackage.name}/r/${resource.name}`}>
+                <Link href={`${result.name}/r/${resource.name}`}>
                   <a className="underline">Preview</a>
                 </Link>
               </td>

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/resource/About.tsx

@@ -1,6 +1,45 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
 
-export default function About({ resource }) {
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        resources {
+          name
+          id
+          title
+          description
+          format
+          size
+          created
+          last_modified
+          url
+        }
+      }
+    }
+  }
+`;
+
+export default function About({ variables }) {
+  const { loading, error, data } = useQuery(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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
   return (
     <>
       <table className="table-auto w-full text-sm text-left my-6">
@@ -26,11 +65,12 @@ export default function About({ resource }) {
             <td className="px-4 py-2">{resource.created}</td>
             <td className="px-4 py-2">{resource.last_modified || ''}</td>
             <td className="px-4 py-2">
-              <Link href={resource.path}>
-                <a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded">
-                  {resource.format}
-                </a>
-              </Link>
+              <a
+                href={resource.url}
+                className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
+              >
+                {resource.format}
+              </a>
             </td>
           </tr>
         </tbody>

components/resource/DataExplorer.tsx

@@ -1,5 +1,45 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { NetworkStatus } from 'apollo-client';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        resources {
+          name
+          id
+          title
+          description
+          format
+          size
+          created
+          last_modified
+          url
+        }
+      }
+    }
+  }
+`;
+
+export default function DataExplorer({ variables }) {
+  const { loading, error, data } = useQuery(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 dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
 
-export default function DataExplorer({ resource }) {
   return <>{JSON.stringify(resource)}</>;
 }

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({ query }) {
-  const router = useRouter();
-  const [q, setQ] = useState(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/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,10 +1,44 @@
 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 default function List({ datapackages }) {
+const QUERY = gql`
+  query search($q: String, $sort: String) {
+    search(q: $q, sort: $sort)
+      @rest(type: "Search", path: "package_search?{args}") {
+      result {
+        results {
+          name
+          title
+          organization {
+            name
+            title
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default function List({ variables }) {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(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>
-      {datapackages.map((datapackage, index) => (
-        <Item datapackage={datapackage} key={index} />
+      {result.results.map((pkg, index) => (
+        <Item datapackage={pkg} key={index} />
       ))}
     </ul>
   );

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>
-  );
-}

components/search/Total.tsx

@@ -1,7 +1,33 @@
-export default function Total({ total }) {
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+const QUERY = gql`
+  query search($q: String, $sort: String) {
+    search(q: $q, sort: $sort)
+      @rest(type: "Search", path: "package_search?{args}") {
+      result {
+        count
+      }
+    }
+  }
+`;
+
+export default function Total({ variables }) {
+  const { loading, error, data } = useQuery(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 (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>
   );
 }