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

[refactor][m]: refactor components using reusable component

Browse Source
This commit is contained in:
Tavares Hansen 2020-08-03 19:19:41 -07:00
parent d286c7f6ff
commit a82325b91a
3 changed files with 29 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/dataset/About.tsx
View File

@ -1,35 +1,36 @@
import { useQuery } from '@apollo/react-hooks';
import ErrorMessage from '../Error';
import { Table, ErrorMessage } from '../_shared';
import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
const columns = [
{
name: 'Files',
key: 'files',
render: ({ resources }) => (resources && resources.length) || 0,
},
{
name: 'Size',
render: ({ size }) => size || 'N/A',
key: 'size',
},
{
name: 'Format',
render: () => null,
key: 'format',
},
{
name: 'Created',
render: ({ metadata_created: created }) => created || 'N/A',
key: 'metadata_created',
},
{
name: 'Updated',
render: ({ metadata_modified: updated }) => updated || 'N/A',
key: 'metadata_modified',
},
{
name: 'License',
render: () => null,
key: 'license',
},
{
name: 'Source',
render: () => null,
key: 'source',
},
];
@ -46,28 +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>
{columns.map(({ name }) => (
<th key={name} className="px-4 py-2">
{name}
</th>
))}
</tr>
</thead>
<tbody>
<tr>
{columns.map(({ name, render }) => (
<td key={name} className="px-4 py-2">
{render(result)}
</td>
))}
</tr>
</tbody>
</table>
</>
);
return <Table columns={columns} data={[result]} />;
}

47
components/dataset/Resources.tsx
View File

@ -1,38 +1,41 @@
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';
import ErrorMessage from '../Error';
import { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const columns = [
{
name: 'File',
render: ({ name: resName, title }, { name }) => (
<Link href={`${name}/r/${resName}`}>
key: 'file',
render: ({ name: resName, title, parentName }) => (
<Link href={`${parentName}/r/${resName}`}>
<a className="underline">{title || resName}</a>
</Link>
),
},
{
name: 'Format',
render: ({ format }) => format,
key: 'format',
},
{
name: 'Created',
render: ({ created }) => created,
key: 'created',
},
{
name: 'Updated',
render: ({ last_modified }) => last_modified,
key: 'last_modified',
},
{
name: 'Link',
render: ({ name }, { name: resName }) => (
<Link href={`${name}/r/${resName}`}>
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_RESOURCES_QUERY, {
variables,
@ -50,27 +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>
{columns.map(({ name }) => (
<th className="px-4 py-2">{name}</th>
))}
</tr>
</thead>
<tbody>
{/* Do not use array index as key */}
{result.resources.map((resource) => (
<tr key={resource.id}>
{columns.map(({ name, render }) => (
<td key={name} className="px-4 py-2">
{render(resource, result)}
</td>
))}
</tr>
))}
</tbody>
</table>
<Table
columns={columns}
data={result.resources.map((resource) => ({
...resource,
parentName: result.name,
}))}
/>
</>
);
}

28
components/resource/About.tsx
View File

@ -1,5 +1,5 @@
import { useQuery } from '@apollo/react-hooks';
import ErrorMessage from '../Error';
import { Table, ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const columns = [
@ -64,29 +64,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>
{columns.map(({ key, name }) => (
<th key={key} className="px-4 py-2">
{name}
</th>
))}
</tr>
</thead>
<tbody>
<tr>
{columns.map(({ key, render }) => (
<td className="px-4 py-2">
{(render && typeof render === 'function' && render(resource)) ||
resource[key]}
</td>
))}
</tr>
</tbody>
</table>
</>
);
return <Table columns={columns} data={[resource]} />;
}