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

components/dataset/About.tsx

@@ -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`
+const columns = [
-  query dataset($id: String) {
+  {
-    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+    name: 'Files',
-      result {
+    render: ({ resources }) => (resources && resources.length) || 0,
-        name
+  },
-        title
+  {
-        size
+    name: 'Size',
-        metadata_created
+    render: ({ size }) => size || 'N/A',
-        metadata_modified
+  },
-        resources {
+  {
-          name
+    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>
+            {columns.map(({ name }) => (
-            <th className="px-4 py-2">Size</th>
+              <th key={name} className="px-4 py-2">
-            <th className="px-4 py-2">Format</th>
+                {name}
-            <th className="px-4 py-2">Created</th>
+              </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>
+            {columns.map(({ name, render }) => (
-            <td className="px-4 py-2">{result.size || 'NA'}</td>
+              <td key={name} className="px-4 py-2">
-            <td className="px-4 py-2"></td>
+                {render(result)}
-            <td className="px-4 py-2">{result.metadata_created}</td>
+              </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>

components/dataset/Resources.tsx

@@ -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>
+            {columns.map(({ name }) => (
-            <th className="px-4 py-2">Format</th>
+              <th className="px-4 py-2">{name}</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) => (
+          {/* Do not use array index as key */}
-            <tr key={index}>
+          {result.resources.map((resource) => (
-              <td className="px-4 py-2">
+            <tr key={resource.id}>
-                <Link href={`${result.name}/r/${resource.name}`}>
+              {columns.map(({ name, render }) => (
-                  <a className="underline">{resource.title || resource.name}</a>
+                <td key={name} className="px-4 py-2">
-                </Link>
+                  {render(resource, result)}
-              </td>
+                </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>

components/resource/About.tsx

@@ -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>
+            {columns.map(({ key, name }) => (
-            <th className="px-4 py-2">Title</th>
+              <th key={key} className="px-4 py-2">
-            <th className="px-4 py-2">Description</th>
+                {name}
-            <th className="px-4 py-2">Format</th>
+              </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>
+            {columns.map(({ key, render }) => (
-            <td className="px-4 py-2">{resource.title || ''}</td>
+              <td className="px-4 py-2">
-            <td className="px-4 py-2">{resource.description || ''}</td>
+                {(render && typeof render === 'function' && render(resource)) ||
-            <td className="px-4 py-2">{resource.format}</td>
+                  resource[key]}
-            <td className="px-4 py-2">{resource.size}</td>
+              </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>