From 9ae654dc71a4a7420c3e45efe17745a49e73c983 Mon Sep 17 00:00:00 2001
From: anuveyatsu <anuar.ustayev@gmail.com>
Date: Fri, 19 Jun 2020 18:14:22 +0600
Subject: [PATCH] [dataset page][xl]: refactor to work with Apollo.

---
 components/dataset/About.tsx     | 45 +++++++++++++++++++++++++++----
 components/dataset/Org.tsx       | 43 +++++++++++++++++++++++++----
 components/dataset/Resources.tsx | 45 ++++++++++++++++++++++++++++---
 pages/[org]/[dataset]/index.tsx  | 46 +++++++++++++++++++++++---------
 4 files changed, 152 insertions(+), 27 deletions(-)

diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx
index 9aac13db..3d59ee8d 100644
--- a/components/dataset/About.tsx
+++ b/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>
diff --git a/components/dataset/Org.tsx b/components/dataset/Org.tsx
index 0971532c..b8751dde 100644
--- 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) {
+      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
index e4753de1..93a01e17 100644
--- 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 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>
diff --git a/pages/[org]/[dataset]/index.tsx b/pages/[org]/[dataset]/index.tsx
index 43210a48..967136e0 100644
--- a/pages/[org]/[dataset]/index.tsx
+++ b/pages/[org]/[dataset]/index.tsx
@@ -1,39 +1,59 @@
 import { GetServerSideProps } from 'next';
+import { useQuery } from '@apollo/react-hooks';
+import { initializeApollo } from '../../../lib/apolloClient';
 import config from '../../../config';
 import utils from '../../../utils';
 import Head from 'next/head';
 import Nav from '../../../components/home/Nav';
 import About from '../../../components/dataset/About';
 import Org from '../../../components/dataset/Org';
-import Resources from '../../../components/dataset/Resources';
+import Resources, {
+  DEFAULT_DATASET_QUERY,
+} from '../../../components/dataset/Resources';
+
+function Dataset({ variables }) {
+  const {
+    data: {
+      dataset: { result },
+    },
+  } = useQuery(DEFAULT_DATASET_QUERY, { variables });
 
-function Dataset({ datapackage }) {
   return (
     <>
       <Head>
-        <title>Portal | {datapackage.title || datapackage.name}</title>
+        <title>Portal | {result.title || result.name}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav />
       <main className="p-6">
         <h1 className="text-3xl font-semibold text-primary mb-2">
-          {datapackage.title || datapackage.name}
+          {result.title || result.name}
         </h1>
-        <Org org={datapackage.organization} />
-        <About datapackage={datapackage} />
-        <Resources datapackage={datapackage} />
+        <Org variables={variables} />
+        <About variables={variables} />
+        <Resources variables={variables} />
       </main>
     </>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_show?id=${context.query.dataset}`
-  );
-  const ckanResult = (await res.json()).result;
-  const datapackage = utils.ckanToDataPackage(ckanResult);
-  return { props: { datapackage } };
+  const apolloClient = initializeApollo();
+  const variables = {
+    id: context.query.dataset,
+  };
+
+  const apolloResponse = await apolloClient.query({
+    query: DEFAULT_DATASET_QUERY,
+    variables,
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
 };
 
 export default Dataset;