knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[resource page][m]: refactored page and components to work with Apollo client wired with CKAN API.

Browse Source
This commit is contained in:
anuveyatsu
2020-06-24 11:37:11 +06:00
parent 2589ecaeeb
commit 4baf72273d
3 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/resource/About.tsx
View File

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

16
components/resource/DataExplorer.tsx
View File

@@ -4,18 +4,20 @@ import { NetworkStatus } from 'apollo-client';
import { useQuery } from '@apollo/react-hooks'; import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag'; import gql from 'graphql-tag';
export const QUERY = gql` const QUERY = gql`
query dataset($id: String!) { query dataset($id: String) {
dataset(id: $id) { dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result { result {
resources { resources {
name name
id id
url
format
title title
description
format
size
created created
last_modified last_modified
url
} }
} }
} }
@@ -35,7 +37,9 @@ export default function DataExplorer({ variables }) {
if (loading) return <div>Loading</div>; if (loading) return <div>Loading</div>;
const { result } = data.dataset; const { result } = data.dataset;
const resource = result.resources[0]; const resource = result.resources.find(
(item) => item.name === variables.resource
);
return <>{JSON.stringify(resource)}</>; return <>{JSON.stringify(resource)}</>;
} }

31
pages/[org]/[dataset]/r/[resource]/index.tsx
View File

@@ -9,12 +9,19 @@ import About from '../../../../../components/resource/About';
import DataExplorer from '../../../../../components/resource/DataExplorer'; import DataExplorer from '../../../../../components/resource/DataExplorer';
const QUERY = gql` const QUERY = gql`
query dataset($id: String!) { query dataset($id: String) {
dataset(id: $id) { dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result { result {
resources { resources {
name name
id
title title
description
format
size
created
last_modified
url
} }
} }
} }
@@ -22,24 +29,24 @@ const QUERY = gql`
`; `;
function Resource({ variables }) { function Resource({ variables }) {
const { const { data, loading } = useQuery(QUERY, { variables });
data: {
dataset: { result },
},
} = 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 ( return (
<> <>
<Head> <Head>
<title> <title>Portal | {resource.title || resource.name}</title>
Portal | {result.resources[0].title || result.resources[0].name}
</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Nav /> <Nav />
<main className="p-6"> <main className="p-6">
<h1 className="text-3xl font-semibold text-primary mb-2"> <h1 className="text-3xl font-semibold text-primary mb-2">
{result.resources[0].title || result.resources[0].name} {resource.title || resource.name}
</h1> </h1>
<About variables={variables} /> <About variables={variables} />
<DataExplorer variables={variables} /> <DataExplorer variables={variables} />
@@ -55,7 +62,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
resource: context.query.resource, resource: context.query.resource,
}; };
const apolloResponse = await apolloClient.query({ await apolloClient.query({
query: QUERY, query: QUERY,
variables, variables,
}); });