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

components/dataset/About.tsx

@@ -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 (
+  return <Table columns={columns} data={[result]} />;
-    <>
-      <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>
-    </>
-  );
 }

components/dataset/Resources.tsx

@@ -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 }) => (
+    key: 'file',
-      <Link href={`${name}/r/${resName}`}>
+    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 }) => (
+    key: 'link',
-      <Link href={`${name}/r/${resName}`}>
+    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">
+      <Table
-        <thead>
+        columns={columns}
-          <tr>
+        data={result.resources.map((resource) => ({
-            {columns.map(({ name }) => (
+          ...resource,
-              <th className="px-4 py-2">{name}</th>
+          parentName: result.name,
-            ))}
+        }))}
-          </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>
     </>
   );
 }

components/resource/About.tsx

@@ -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 (
+  return <Table columns={columns} data={[resource]} />;
-    <>
-      <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>
-    </>
-  );
 }