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
Show Stats 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 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>

16
components/resource/DataExplorer.tsx
View File

@ -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)}</>;
}

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';
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,
});