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

[refactor][x]: refactor, remove duplicated code

Browse Source
This commit is contained in:
Tavares Hansen
2020-08-03 19:03:29 -07:00
parent f8197f865c
commit 477fb77a78
3 changed files with 140 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/dataset/Resources.tsx
View File

@@ -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>