[refactor][x]: refactor, remove duplicated code
This commit is contained in:
Tavares Hansen
parent
f8197f865c
commit
477fb77a78
@ -1,23 +1,37 @@
|
||||
import ErrorMessage from '../Error';
|
||||
import { useQuery } from '@apollo/react-hooks';
|
||||
import gql from 'graphql-tag';
|
||||
import ErrorMessage from '../Error';
|
||||
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',
|
||||
render: ({ resources }) => (resources && resources.length) || 0,
|
||||
},
|
||||
{
|
||||
name: 'Size',
|
||||
render: ({ size }) => size || 'N/A',
|
||||
},
|
||||
{
|
||||
name: 'Format',
|
||||
render: () => null,
|
||||
},
|
||||
{
|
||||
name: 'Created',
|
||||
render: ({ metadata_created: created }) => created || 'N/A',
|
||||
},
|
||||
{
|
||||
name: 'Updated',
|
||||
render: ({ metadata_modified: updated }) => updated || 'N/A',
|
||||
},
|
||||
{
|
||||
name: 'License',
|
||||
render: () => null,
|
||||
},
|
||||
{
|
||||
name: 'Source',
|
||||
render: () => null,
|
||||
},
|
||||
];
|
||||
|
||||
export default function About({ variables }) {
|
||||
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
|
||||
@ -37,24 +51,20 @@ export default function About({ variables }) {
|
||||
<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>
|
||||
{columns.map(({ name }) => (
|
||||
<th key={name} className="px-4 py-2">
|
||||
{name}
|
||||
</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>
|
||||
{columns.map(({ name, render }) => (
|
||||
<td key={name} className="px-4 py-2">
|
||||
{render(result)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -3,6 +3,36 @@ import { useQuery } from '@apollo/react-hooks';
|
||||
import ErrorMessage from '../Error';
|
||||
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'File',
|
||||
render: ({ name: resName, title }, { name }) => (
|
||||
<Link href={`${name}/r/${resName}`}>
|
||||
<a className="underline">{title || resName}</a>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Format',
|
||||
render: ({ format }) => format,
|
||||
},
|
||||
{
|
||||
name: 'Created',
|
||||
render: ({ created }) => created,
|
||||
},
|
||||
{
|
||||
name: 'Updated',
|
||||
render: ({ last_modified }) => last_modified,
|
||||
},
|
||||
{
|
||||
name: 'Link',
|
||||
render: ({ name }, { name: resName }) => (
|
||||
<Link href={`${name}/r/${resName}`}>
|
||||
<a className="underline">Preview</a>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
];
|
||||
export default function Resources({ variables }) {
|
||||
const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
|
||||
variables,
|
||||
@ -23,29 +53,20 @@ export default function Resources({ variables }) {
|
||||
<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>
|
||||
{columns.map(({ name }) => (
|
||||
<th className="px-4 py-2">{name}</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>
|
||||
{/* 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>
|
||||
|
||||
@ -2,6 +2,52 @@ import { useQuery } from '@apollo/react-hooks';
|
||||
import ErrorMessage from '../Error';
|
||||
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
|
||||
|
||||
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(GET_RESOURCES_QUERY, {
|
||||
variables,
|
||||
@ -23,33 +69,21 @@ export default function About({ variables }) {
|
||||
<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>
|
||||
{columns.map(({ key, name }) => (
|
||||
<th key={key} className="px-4 py-2">
|
||||
{name}
|
||||
</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>
|
||||
{columns.map(({ key, render }) => (
|
||||
<td className="px-4 py-2">
|
||||
{(render && typeof render === 'function' && render(resource)) ||
|
||||
resource[key]}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user