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

[resource page][m]: refactor to work with Apollo.

Browse Source
This commit is contained in:
anuveyatsu
2020-06-22 10:58:30 +06:00
parent 9ae654dc71
commit e11133c32e
3 changed files with 119 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/resource/About.tsx
View File

@@ -1,6 +1,41 @@
import Link from 'next/link'; 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 }) { export const QUERY = gql`
query dataset($id: String!) {
dataset(id: $id) {
result {
resources {
name
id
url
format
title
created
last_modified
}
}
}
}
`;
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[0];
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">
@@ -26,7 +61,7 @@ export default function About({ resource }) {
<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.path}> <Link href={resource.url}>
<a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"> <a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded">
{resource.format} {resource.format}
</a> </a>

38
components/resource/DataExplorer.tsx
View File

@@ -1,5 +1,41 @@
import Link from 'next/link'; 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 QUERY = gql`
query dataset($id: String!) {
dataset(id: $id) {
result {
resources {
name
id
url
format
title
created
last_modified
}
}
}
}
`;
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[0];
export default function DataExplorer({ resource }) {
return <>{JSON.stringify(resource)}</>; return <>{JSON.stringify(resource)}</>;
} }

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

@@ -1,4 +1,7 @@
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import { initializeApollo } from '../../../../../lib/apolloClient';
import config from '../../../../../config'; import config from '../../../../../config';
import utils from '../../../../../utils'; import utils from '../../../../../utils';
import Head from 'next/head'; import Head from 'next/head';
@@ -6,39 +9,64 @@ import Nav from '../../../../../components/home/Nav';
import About from '../../../../../components/resource/About'; import About from '../../../../../components/resource/About';
import DataExplorer from '../../../../../components/resource/DataExplorer'; import DataExplorer from '../../../../../components/resource/DataExplorer';
function Resource({ resource }) { const QUERY = gql`
query dataset($id: String!) {
dataset(id: $id) {
result {
resources {
name
title
}
}
}
}
`;
function Resource({ variables }) {
const {
data: {
dataset: { result },
},
} = useQuery(QUERY, { variables });
return ( return (
<> <>
<Head> <Head>
<title>Portal | {resource.title || resource.name}</title> <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">
{resource.title || resource.name} {result.resources[0].title || result.resources[0].name}
</h1> </h1>
<About resource={resource} /> <About variables={variables} />
<DataExplorer resource={resource} /> <DataExplorer variables={variables} />
</main> </main>
</> </>
); );
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const res = await fetch( const apolloClient = initializeApollo();
`${config.get('DMS')}/api/3/action/package_show?id=${context.query.dataset}` const variables = {
); id: context.query.dataset,
const ckanResult = (await res.json()).result; resource: context.query.resource,
// Only keep single resource };
ckanResult.resources = ckanResult.resources.filter((resource) => {
return ( const apolloResponse = await apolloClient.query({
resource.name === context.query.resource || query: QUERY,
resource.id === context.query.resource variables,
);
}); });
const resourceDescriptor = utils.ckanToDataPackage(ckanResult).resources[0];
return { props: { resource: resourceDescriptor } }; return {
props: {
initialApolloState: apolloClient.cache.extract(),
variables,
},
};
}; };
export default Resource; export default Resource;