[refactor,#59][s]: move packages/portal => examples/catalog as per plan in #59.

What is currently packages/portal is example of a running portal and should move to examples (it will get replaced by an actual portal lib soon).

examples/catalog/components/dataset/About.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from '@apollo/react-hooks';
+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',
+    key: 'size',
+  },
+  {
+    name: 'Format',
+    key: 'format',
+  },
+  {
+    name: 'Created',
+    key: 'metadata_created',
+  },
+  {
+    name: 'Updated',
+    key: 'metadata_modified',
+  },
+  {
+    name: 'License',
+    key: 'license',
+  },
+  {
+    name: 'Source',
+    key: 'source',
+  },
+];
+
+const About: React.FC<{ variables: any }> = ({ variables }) => {
+  const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
+    variables,
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+  return <Table columns={columns} data={[result]} />;
+};
+
+export default About;

examples/catalog/components/dataset/Org.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import { useQuery } from '@apollo/react-hooks';
+import { ErrorMessage } from '../_shared';
+import { GET_ORG_QUERY } from '../../graphql/queries';
+
+const Org: 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
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading dataset." />;
+  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>
+        </>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default Org;

examples/catalog/components/dataset/Resources.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/display-name */
+import Link from 'next/link';
+import { useQuery } from '@apollo/react-hooks';
+import { Table, ErrorMessage } from '../_shared';
+import { GET_RESOURCES_QUERY } from '../../graphql/queries';
+
+const columns = [
+  {
+    name: 'File',
+    key: 'file',
+    render: ({ name: resName, title, parentName }) => (
+      <Link href={`${parentName}/r/${resName}`}>
+        <a className="underline">{title || resName}</a>
+      </Link>
+    ),
+  },
+  {
+    name: 'Format',
+    key: 'format',
+  },
+  {
+    name: 'Created',
+    key: 'created',
+  },
+  {
+    name: 'Updated',
+    key: 'last_modified',
+  },
+  {
+    name: 'Link',
+    key: 'link',
+    render: ({ name: resName, parentName }) => (
+      <Link href={`${parentName}/r/${resName}`}>
+        <a className="underline">Preview</a>
+      </Link>
+    ),
+  },
+];
+
+const Resources: React.FC<{ variables: any }> = ({ variables }) => {
+  const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
+    variables,
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.dataset;
+
+  return (
+    <>
+      <h3 className="text-xl font-semibold">Data Files</h3>
+      <Table
+        columns={columns}
+        data={result.resources.map((resource) => ({
+          ...resource,
+          parentName: result.name,
+        }))}
+      />
+    </>
+  );
+};
+
+export default Resources;