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

Merge pull request #46 from datopian/enh/41-refactor

Browse Source 
[#41] Refactor Code
This commit is contained in:
tavareshansen 2020-08-04 21:47:02 +08:00 committed by GitHub
commit 23edcc3c9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 361 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/Error.tsx → components/_shared/Error.tsx
View File

38
components/_shared/Table.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
interface TableProps {
columns: Array<any>;
data: Array<any>;
className?: string;
}
const Table: React.FC<TableProps> = ({ columns, data, className }) => {
return (
<table className={`table-auto w-full text-sm text-left my-6 ${className}`}>
<thead>
<tr>
{columns.map(({ key, name }) => (
<th key={key} className="px-4 py-2">
{name}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item) => (
<tr key={item.id}>
{columns.map(({ key, render }) => (
<td key={key} className="px-4 py-2">
{(render && typeof render === 'function' && render(item)) ||
item[key] ||
''}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
export default Table;

4
components/_shared/index.ts Normal file
View File

@ -0,0 +1,4 @@
import Table from './Table';
import ErrorMessage from './Error';
export { Table, ErrorMessage };

80
components/dataset/About.tsx
View File

@ -1,23 +1,38 @@
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import { Table, ErrorMessage } from '../_shared';
import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
export const GET_DATAPACKAGE_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
title
size
metadata_created
metadata_modified
resources {
name
}
}
}
}
`;
const columns = [
{
name: 'Files',
key: 'files',
render: ({ resources }) => (resources && resources.length) || 0,
},
{
name: 'Size',
key: 'size',
},
{
name: 'Format',
key: 'format',
},
{
name: 'Created',
key: 'metadata_created',
},
{
name: 'Updated',
key: 'metadata_modified',
},
{
name: 'License',
key: 'license',
},
{
name: 'Source',
key: 'source',
},
];
export default function About({ variables }) {
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
@ -32,32 +47,5 @@ export default function About({ variables }) {
if (loading) return <div>Loading</div>;
const { result } = data.dataset;
return (
<>
<table className="table-auto w-full text-sm text-left my-6">
<thead>
<tr>
<th className="px-4 py-2">Files</th>
<th className="px-4 py-2">Size</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">License</th>
<th className="px-4 py-2">Source</th>
</tr>
</thead>
<tbody>
<tr>
<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">{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>
</tbody>
</table>
</>
);
return <Table columns={columns} data={[result]} />;
}

18
components/dataset/Org.tsx
View File

@ -1,21 +1,7 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
export const GET_ORG_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
organization {
name
title
image_url
}
}
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_ORG_QUERY } from '../../graphql/queries';
export default function Org({ variables }) {
const { loading, error, data } = useQuery(GET_ORG_QUERY, {

91
components/dataset/Resources.tsx
View File

@ -1,27 +1,43 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
export const GET_DATAPACKAGE_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
resources {
name
title
format
created
last_modified
}
}
}
}
`;
const columns = [
{
name: 'File',
key: 'file',
render: ({ name: resName, title, parentName }) => (
<Link href={`${parentName}/r/${resName}`}>
<a className="underline">{title || resName}</a>
</Link>
),
},
{
name: 'Format',
key: 'format',
},
{
name: 'Created',
key: 'created',
},
{
name: 'Updated',
key: 'last_modified',
},
{
name: 'Link',
key: 'link',
render: ({ name: resName, parentName }) => (
<Link href={`${parentName}/r/${resName}`}>
<a className="underline">Preview</a>
</Link>
),
},
];
export default function Resources({ variables }) {
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
const { loading, error, data } = useQuery(GET_RESOURCES_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
@ -37,36 +53,13 @@ export default function Resources({ variables }) {
return (
<>
<h3 className="text-xl font-semibold">Data Files</h3>
<table className="table-auto w-full text-sm text-left mb-6">
<thead>
<tr>
<th className="px-4 py-2">File</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">Link</th>
</tr>
</thead>
<tbody>
{result.resources.map((resource, index) => (
<tr key={index}>
<td className="px-4 py-2">
<Link href={`${result.name}/r/${resource.name}`}>
<a className="underline">{resource.title || resource.name}</a>
</Link>
</td>
<td className="px-4 py-2">{resource.format}</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">
<Link href={`${result.name}/r/${resource.name}`}>
<a className="underline">Preview</a>
</Link>
</td>
</tr>
))}
</tbody>
</table>
<Table
columns={columns}
data={result.resources.map((resource) => ({
...resource,
parentName: result.name,
}))}
/>
</>
);
}

25
components/home/Recent.tsx
View File

@ -1,29 +1,10 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
export const QUERY = gql`
query search($q: String, $sort: String, $rows: Int) {
search(q: $q, sort: $sort, rows: $rows)
@rest(type: "Search", path: "package_search?{args}") {
result {
results {
name
title
organization {
name
title
description
}
}
}
}
}
`;
import { ErrorMessage } from '../_shared';
import { SEARCH_QUERY } from '../../graphql/queries';
function Recent() {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(SEARCH_QUERY, {
variables: {
sort: 'metadata_created desc',
rows: 3,

107
components/resource/About.tsx
View File

@ -1,30 +1,53 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const QUERY = gql`
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
}
}
}
}
`;
const columns = [
{
name: 'Name',
key: 'name',
render: ({ name, id }) => name || id,
},
{
name: 'Title',
key: 'title',
},
{
name: 'Description',
key: 'description',
},
{
name: 'Format',
key: 'format',
},
{
name: 'Size',
key: 'size',
},
{
name: 'Created',
key: 'created',
},
{
name: 'Updated',
key: 'last_modified',
},
{
name: 'Download',
key: 'download',
render: ({ url, format }) => (
<a
href={url}
className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
>
{format}
</a>
),
},
];
export default function About({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_RESOURCES_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
@ -39,41 +62,5 @@ export default function About({ variables }) {
const resource = result.resources.find(
(item) => item.name === variables.resource
);
return (
<>
<table className="table-auto w-full text-sm text-left my-6">
<thead>
<tr>
<th className="px-4 py-2">Name</th>
<th className="px-4 py-2">Title</th>
<th className="px-4 py-2">Description</th>
<th className="px-4 py-2">Format</th>
<th className="px-4 py-2">Size</th>
<th className="px-4 py-2">Created</th>
<th className="px-4 py-2">Updated</th>
<th className="px-4 py-2">Download</th>
</tr>
</thead>
<tbody>
<tr>
<td className="px-4 py-2">{resource.name || resource.id}</td>
<td className="px-4 py-2">{resource.title || ''}</td>
<td className="px-4 py-2">{resource.description || ''}</td>
<td className="px-4 py-2">{resource.format}</td>
<td className="px-4 py-2">{resource.size}</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">
<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>
</table>
</>
);
return <Table columns={columns} data={[resource]} />;
}

27
components/resource/DataExplorer.tsx
View File

@ -1,30 +1,9 @@
import Link from 'next/link';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
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
}
}
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
export default function DataExplorer({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_RESOURCES_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

26
components/search/List.tsx
View File

@ -1,28 +1,10 @@
import Item from './Item';
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
results {
name
title
organization {
name
title
}
}
}
}
}
`;
import Item from './Item';
import { ErrorMessage } from '../_shared';
import { SEARCH_QUERY } from '../../graphql/queries';
export default function List({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(SEARCH_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

17
components/search/Total.tsx
View File

@ -1,20 +1,9 @@
import ErrorMessage from '../Error';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
}
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
export default function Total({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_TOTAL_COUNT_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

15
components/static/List.tsx
View File

@ -1,19 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_POSTS_QUERY } from '../../graphql/queries';
export default function List() {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_POSTS_QUERY, {
// 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

18
components/static/Page.tsx
View File

@ -1,22 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
modified
featured_image
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_PAGE_QUERY } from '../../graphql/queries';
export default function Page({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_PAGE_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

18
components/static/Post.tsx
View File

@ -1,22 +1,10 @@
import ErrorMessage from '../Error';
import parse from 'html-react-parser';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
modified
featured_image
}
}
`;
import { ErrorMessage } from '../_shared';
import { GET_PAGE_QUERY } from '../../graphql/queries';
export default function Post({ variables }) {
const { loading, error, data } = useQuery(QUERY, {
const { loading, error, data } = useQuery(GET_PAGE_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

149
graphql/queries.ts Normal file
View File

@ -0,0 +1,149 @@
import gql from 'graphql-tag';
export const GET_ORG_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
organization {
name
title
image_url
}
}
}
}
`;
export const GET_DATAPACKAGE_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
title
size
metadata_created
metadata_modified
resources {
name
}
}
}
}
`;
export const GET_RESOURCES_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
resources {
name
id
title
description
format
size
created
last_modified
url
}
}
}
}
`;
export const SEARCH_QUERY = gql`
query search($q: String, $sort: String, $rows: Int) {
search(q: $q, sort: $sort, rows: $rows)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
results {
name
title
organization {
name
title
description
}
}
}
}
}
`;
export const GET_TOTAL_COUNT_QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
}
}
}
`;
export const GET_POSTS_QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
meta
}
}
`;
export const GET_PAGE_QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
featured_image
}
}
`;
export const GET_DATASET_QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
title
size
metadata_created
metadata_modified
resources {
name
title
format
created
last_modified
}
organization {
name
title
image_url
}
}
}
}
`;
export const GET_POST_QUERY = gql`
query post($slug: String) {
post(slug: $slug)
@rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;

35
pages/[org]/[dataset]/index.tsx
View File

@ -1,42 +1,15 @@
import { GetServerSideProps } from 'next';
import { useQuery } from '@apollo/react-hooks';
import { initializeApollo } from '../../../lib/apolloClient';
import utils from '../../../utils';
import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
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 gql from 'graphql-tag';
const QUERY = gql`
query dataset($id: String) {
dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
result {
name
title
size
metadata_created
metadata_modified
resources {
name
title
format
created
last_modified
}
organization {
name
title
image_url
}
}
}
}
`;
import { GET_DATASET_QUERY } from '../../../graphql/queries';
function Dataset({ variables }) {
const { data, loading } = useQuery(QUERY, { variables });
const { data, loading } = useQuery(GET_DATASET_QUERY, { variables });
if (loading) return <div>Loading</div>;
const { result } = data.dataset;
@ -67,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
await apolloClient.query({
query: QUERY,
query: GET_DATASET_QUERY,
variables,
});

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

@ -1,35 +1,14 @@
import { GetServerSideProps } from 'next';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import { initializeApollo } from '../../../../../lib/apolloClient';
import utils from '../../../../../utils';
import Head from 'next/head';
import { initializeApollo } from '../../../../../lib/apolloClient';
import Nav from '../../../../../components/home/Nav';
import About from '../../../../../components/resource/About';
import DataExplorer from '../../../../../components/resource/DataExplorer';
const QUERY = gql`
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
}
}
}
}
`;
import { GET_RESOURCES_QUERY } from '../../../../../graphql/queries';
function Resource({ variables }) {
const { data, loading } = useQuery(QUERY, { variables });
const { data, loading } = useQuery(GET_RESOURCES_QUERY, { variables });
if (loading) return <div>Loading</div>;
const result = data.dataset.result;
@ -63,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
await apolloClient.query({
query: QUERY,
query: GET_RESOURCES_QUERY,
variables,
});

20
pages/blog/[post]/index.tsx
View File

@ -1,23 +1,9 @@
import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../../lib/apolloClient';
import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
import Nav from '../../../components/home/Nav';
import Post from '../../../components/static/Post';
import gql from 'graphql-tag';
const QUERY = gql`
query post($slug: String) {
post(slug: $slug)
@rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;
import { GET_POST_QUERY } from '../../../graphql/queries';
function PostItem({ variables }) {
return (
@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
query: GET_POST_QUERY,
variables,
});

16
pages/blog/index.tsx
View File

@ -1,19 +1,9 @@
import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../lib/apolloClient';
import Head from 'next/head';
import { initializeApollo } from '../../lib/apolloClient';
import Nav from '../../components/home/Nav';
import List from '../../components/static/List';
import gql from 'graphql-tag';
const QUERY = gql`
query posts {
posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {
found
posts
meta
}
}
`;
import { GET_POSTS_QUERY } from '../../graphql/queries';
function PostList() {
return (
@ -34,7 +24,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
query: GET_POSTS_QUERY,
});
return {

7
pages/index.tsx
View File

@ -1,9 +1,10 @@
import { GetServerSideProps } from 'next';
import { initializeApollo } from '../lib/apolloClient';
import Head from 'next/head';
import { initializeApollo } from '../lib/apolloClient';
import Nav from '../components/home/Nav';
import Recent, { QUERY } from '../components/home/Recent';
import Recent from '../components/home/Recent';
import Form from '../components/search/Form';
import { SEARCH_QUERY } from '../graphql/queries';
function Home() {
return (
@ -39,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
query: SEARCH_QUERY,
variables: {
sort: 'metadata_created desc',
rows: 3,

20
pages/p/[page]/index.tsx
View File

@ -1,23 +1,9 @@
import { GetServerSideProps } from 'next';
import { initializeApollo } from '../../../lib/apolloClient';
import Head from 'next/head';
import { initializeApollo } from '../../../lib/apolloClient';
import Nav from '../../../components/home/Nav';
import Page from '../../../components/static/Page';
import gql from 'graphql-tag';
const QUERY = gql`
query page($slug: String) {
page(slug: $slug)
@rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") {
title
content
excerpt
slug
date
modified
}
}
`;
import { GET_PAGE_QUERY } from '../../../graphql/queries';
function PageItem({ variables }) {
return (
@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
query: GET_PAGE_QUERY,
variables,
});

23
pages/search.tsx
View File

@ -6,26 +6,7 @@ import Nav from '../components/home/Nav';
import Form from '../components/search/Form';
import Total from '../components/search/Total';
import List from '../components/search/List';
import gql from 'graphql-tag';
const QUERY = gql`
query search($q: String, $sort: String) {
search(q: $q, sort: $sort)
@rest(type: "Search", path: "package_search?{args}") {
result {
count
results {
name
title
organization {
name
title
}
}
}
}
}
`;
import { SEARCH_QUERY } from '../graphql/queries';
function Search({ variables }) {
return (
@ -51,7 +32,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
query: SEARCH_QUERY,
variables,
});