Merge pull request #27 from datopian/feature/apollo-setup

Feature/apollo setup
datopian · Jun 24, 2020 · 3909dfa · 3909dfa
2 parents 9b957ab + 4d06595
commit 3909dfa
Show file tree

Hide file tree

Showing 25 changed files with 914 additions and 315 deletions.
diff --git a/components/Error.tsx b/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>
+  );
+}
diff --git a/components/dataset/About.tsx b/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>

diff --git a/components/dataset/Org.tsx b/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>
         </>

diff --git a/components/dataset/Resources.tsx b/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,18 +52,18 @@ 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>
               <td className="px-4 py-2">{resource.format}</td>
               <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>

diff --git a/components/home/Nav.tsx b/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>
   );

diff --git a/components/resource/About.tsx b/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>

diff --git a/components/resource/DataExplorer.tsx b/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)}</>;
 }