From 4baf72273d4d75d0aeecc2797a15c74ceb4efe99 Mon Sep 17 00:00:00 2001
From: anuveyatsu <anuar.ustayev@gmail.com>
Date: Wed, 24 Jun 2020 11:37:11 +0600
Subject: [PATCH] [resource page][m]: refactored page and components to work
 with Apollo client wired with CKAN API.

---
 components/resource/About.tsx                | 27 ++++++++++-------
 components/resource/DataExplorer.tsx         | 16 ++++++----
 pages/[org]/[dataset]/r/[resource]/index.tsx | 31 ++++++++++++--------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/components/resource/About.tsx b/components/resource/About.tsx
index c750e3e7..7caa9765 100644
--- a/components/resource/About.tsx
+++ b/components/resource/About.tsx
@@ -4,18 +4,20 @@ import { NetworkStatus } from 'apollo-client';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
-export const QUERY = gql`
-  query dataset($id: String!) {
-    dataset(id: $id) {
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
         resources {
           name
           id
-          url
-          format
           title
+          description
+          format
+          size
           created
           last_modified
+          url
         }
       }
     }
@@ -35,7 +37,9 @@ export default function About({ variables }) {
   if (loading) return <div>Loading</div>;
 
   const { result } = data.dataset;
-  const resource = result.resources[0];
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
   return (
     <>
       <table className="table-auto w-full text-sm text-left my-6">
@@ -61,11 +65,12 @@ export default function About({ variables }) {
             <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.url}>
-                <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
index ee35308d..5fdf4363 100644
--- a/components/resource/DataExplorer.tsx
+++ b/components/resource/DataExplorer.tsx
@@ -4,18 +4,20 @@ import { NetworkStatus } from 'apollo-client';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
-export const QUERY = gql`
-  query dataset($id: String!) {
-    dataset(id: $id) {
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
       result {
         resources {
           name
           id
-          url
-          format
           title
+          description
+          format
+          size
           created
           last_modified
+          url
         }
       }
     }
@@ -35,7 +37,9 @@ export default function DataExplorer({ variables }) {
   if (loading) return <div>Loading</div>;
 
   const { result } = data.dataset;
-  const resource = result.resources[0];
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
 
   return <>{JSON.stringify(resource)}</>;
 }
diff --git a/pages/[org]/[dataset]/r/[resource]/index.tsx b/pages/[org]/[dataset]/r/[resource]/index.tsx
index 39b893d5..8fe092db 100644
--- a/pages/[org]/[dataset]/r/[resource]/index.tsx
+++ b/pages/[org]/[dataset]/r/[resource]/index.tsx
@@ -9,12 +9,19 @@ import About from '../../../../../components/resource/About';
 import DataExplorer from '../../../../../components/resource/DataExplorer';
 
 const QUERY = gql`
-  query dataset($id: String!) {
-    dataset(id: $id) {
+  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
         }
       }
     }
@@ -22,24 +29,24 @@ const QUERY = gql`
 `;
 
 function Resource({ variables }) {
-  const {
-    data: {
-      dataset: { result },
-    },
-  } = useQuery(QUERY, { variables });
+  const { data, loading } = useQuery(QUERY, { variables });
 
+  if (loading) return <div>Loading</div>;
+  const result = data.dataset.result;
+  // Find right resource
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
   return (
     <>
       <Head>
-        <title>
-          Portal | {result.resources[0].title || result.resources[0].name}
-        </title>
+        <title>Portal | {resource.title || resource.name}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav />
       <main className="p-6">
         <h1 className="text-3xl font-semibold text-primary mb-2">
-          {result.resources[0].title || result.resources[0].name}
+          {resource.title || resource.name}
         </h1>
         <About variables={variables} />
         <DataExplorer variables={variables} />
@@ -55,7 +62,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     resource: context.query.resource,
   };
 
-  const apolloResponse = await apolloClient.query({
+  await apolloClient.query({
     query: QUERY,
     variables,
   });