Refactor catalog example to use portal.js

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;