Refactor catalog example to use portal.js

examples/catalog/components/dataset/About.tsx

@@ -1,38 +1,7 @@
 import { useQuery } from '@apollo/react-hooks';
-import { Table, ErrorMessage } from '../_shared';
+import { ErrorMessage } from '../_shared';
 import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
-
-const columns = [
-  {
-    name: 'Files',
-    key: 'files',
-    render: ({ resources }) => (resources && resources.length) || 0,
-  },
-  {
-    name: 'Size',
-    key: 'size',
-  },
-  {
-    name: 'Format',
-    key: 'format',
-  },
-  {
-    name: 'Created',
-    key: 'metadata_created',
-  },
-  {
-    name: 'Updated',
-    key: 'metadata_modified',
-  },
-  {
-    name: 'License',
-    key: 'license',
-  },
-  {
-    name: 'Source',
-    key: 'source',
-  },
-];
+import { KeyInfo } from 'portal';
 
 const About: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
@@ -47,7 +16,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
   if (loading) return <div>Loading</div>;
 
   const { result } = data.dataset;
-  return <Table columns={columns} data={[result]} />;
+  return <KeyInfo descriptor={result} resources={result.resources} />;
 };
 
 export default About;

examples/catalog/components/dataset/Org.tsx

@@ -1,9 +1,9 @@
-import Link from 'next/link';
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_ORG_QUERY } from '../../graphql/queries';
+import { Org } from 'portal';
 
-const Org: React.FC<{ variables: any }> = ({ variables }) => {
+const OrgInfo: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_ORG_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -16,30 +16,8 @@ const Org: React.FC<{ variables: any }> = ({ variables }) => {
   if (loading) return <div>Loading</div>;
 
   const { organization } = data.dataset.result;
-  return (
-    <>
-      {organization ? (
-        <>
-          <img
-            src={
-              organization.image_url ||
-              'https://datahub.io/static/img/datahub-cube-edited.svg'
-            }
-            className="h-5 w-5 mr-2 inline-block"
-            alt="org_img"
-          />
-          <Link href={`/@${organization.name}`}>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className="font-semibold text-primary underline">
-              {organization.title || organization.name}
-            </a>
-          </Link>
-        </>
-      ) : (
-        ''
-      )}
-    </>
-  );
+
+  return <Org organization={organization} />;
 };
 
-export default Org;
+export default OrgInfo;