[dataset page][xl]: refactor to work with Apollo.

components/dataset/About.tsx

@@ -1,4 +1,39 @@
-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) {
+      result {
+        name
+        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 +50,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) {
+      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 DEFAULT_DATASET_QUERY = gql`
+  query dataset($id: String!) {
+    dataset(id: $id) {
+      result {
+        name
+        resources {
+          name
+          title
+          format
+          created
+          last_modified
+        }
+      }
+    }
+  }
+`;
+
+export default function Resources({ variables }) {
+  const { loading, error, data, fetchMore, networkStatus } = useQuery(
+    DEFAULT_DATASET_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>