From f8602184ce29a9e31f6690a2f3a02cc1b061d231 Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Fri, 21 May 2021 16:48:55 +0100
Subject: [PATCH] Refactor catalog example to use portal.js

---
 dist/index.cjs.js                             | 32 ++++-----
 dist/index.esm.js                             | 32 ++++-----
 examples/catalog/components/dataset/About.tsx | 37 +---------
 examples/catalog/components/dataset/Org.tsx   | 32 ++-------
 examples/catalog/components/home/Nav.tsx      | 71 +++----------------
 examples/catalog/components/home/Recent.tsx   | 29 ++------
 .../catalog/components/resource/About.tsx     | 50 ++-----------
 examples/catalog/components/search/Form.tsx   | 61 +++-------------
 examples/catalog/components/search/Item.tsx   | 39 ++--------
 examples/catalog/components/search/Total.tsx  |  7 +-
 examples/catalog/pages/index.tsx              | 19 +++--
 src/components/dataset/KeyInfo.js             | 18 ++---
 src/components/dataset/ResourceInfo.js        |  5 +-
 src/components/ui/Nav.js                      |  2 +-
 14 files changed, 94 insertions(+), 340 deletions(-)

diff --git a/dist/index.cjs.js b/dist/index.cjs.js
index 9fc07386..1fee40bf 100644
--- a/dist/index.cjs.js
+++ b/dist/index.cjs.js
@@ -230,8 +230,8 @@ var KeyInfo = function KeyInfo(_ref) {
   var datasetSize = 0;
 
   if (resources) {
-    datasetSize = resources.length == 1 ? resources[0].size : resources.reduce(function (accumulator, currentValue) {
-      return accumulator.size + currentValue.size;
+    datasetSize = resources.length == 1 ? resources[0].size || 0 : resources.reduce(function (accumulator, currentValue) {
+      return (accumulator.size || 0) + (currentValue.size || 0);
     });
   }
 
@@ -266,22 +266,22 @@ var KeyInfo = function KeyInfo(_ref) {
     className: "text-1xl"
   }, resources.length)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
-  }, filesize__default['default'](datasetSize, {
+  }, datasetSize && filesize__default['default'](datasetSize, {
     bits: true
   }))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
-  }, resources[0].format, " zip")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, resources[0]["format"], " zip")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
-  }, descriptor.created)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, descriptor["created"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
-  }, descriptor.updated)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, descriptor["updated"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
-  }, descriptor.license)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, descriptor["license"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl"
   }, /*#__PURE__*/React__default['default'].createElement("a", {
     className: "text-yellow-600",
-    href: descriptor.sources[0].web
-  }, descriptor.sources[0].title))))));
+    href: descriptor["sources"] && descriptor["sources"][0]["web"]
+  }, descriptor["sources"] && descriptor["sources"][0]["title"]))))));
 };
 
 KeyInfo.propTypes = {
@@ -300,9 +300,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("section", {
     className: "m-8",
     name: "file-list"
-  }, /*#__PURE__*/React__default['default'].createElement("h1", {
-    className: "text-2xl font-bold mb-4"
-  }, "Data Files"), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "grid grid-cols-7 gap-4"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl font-bold mb-2"
@@ -324,7 +322,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
       className: "text-1xl"
     }, resource.description || "No description")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
-    }, filesize__default['default'](resource.size, {
+    }, resource.size && filesize__default['default'](resource.size, {
       bits: true
     }))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
@@ -333,9 +331,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
     }, /*#__PURE__*/React__default['default'].createElement("a", {
       className: "text-yellow-600",
       href: "/dataset/".concat(resource.path)
-    }, resource.format, " (", filesize__default['default'](resource.size, {
-      bits: true
-    }), ")"))));
+    }, resource.format))));
   })));
 };
 
@@ -551,11 +547,13 @@ var Nav = function Nav(_ref) {
     className: "flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "flex items-center flex-shrink-0 text-gray-700 mr-6"
+  }, /*#__PURE__*/React__default['default'].createElement(Link__default['default'], {
+    href: "/"
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     src: logo,
     alt: "portal logo",
     width: "40"
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "block lg:hidden mx-4"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
     onClick: handleClick,
diff --git a/dist/index.esm.js b/dist/index.esm.js
index 35c2558b..23d38720 100644
--- a/dist/index.esm.js
+++ b/dist/index.esm.js
@@ -197,8 +197,8 @@ var KeyInfo = function KeyInfo(_ref) {
   var datasetSize = 0;
 
   if (resources) {
-    datasetSize = resources.length == 1 ? resources[0].size : resources.reduce(function (accumulator, currentValue) {
-      return accumulator.size + currentValue.size;
+    datasetSize = resources.length == 1 ? resources[0].size || 0 : resources.reduce(function (accumulator, currentValue) {
+      return (accumulator.size || 0) + (currentValue.size || 0);
     });
   }
 
@@ -233,22 +233,22 @@ var KeyInfo = function KeyInfo(_ref) {
     className: "text-1xl"
   }, resources.length)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
-  }, filesize(datasetSize, {
+  }, datasetSize && filesize(datasetSize, {
     bits: true
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
-  }, resources[0].format, " zip")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+  }, resources[0]["format"], " zip")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
-  }, descriptor.created)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+  }, descriptor["created"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
-  }, descriptor.updated)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+  }, descriptor["updated"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
-  }, descriptor.license)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+  }, descriptor["license"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl"
   }, /*#__PURE__*/React.createElement("a", {
     className: "text-yellow-600",
-    href: descriptor.sources[0].web
-  }, descriptor.sources[0].title))))));
+    href: descriptor["sources"] && descriptor["sources"][0]["web"]
+  }, descriptor["sources"] && descriptor["sources"][0]["title"]))))));
 };
 
 KeyInfo.propTypes = {
@@ -267,9 +267,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
     className: "m-8",
     name: "file-list"
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "text-2xl font-bold mb-4"
-  }, "Data Files"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "grid grid-cols-7 gap-4"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl font-bold mb-2"
@@ -291,7 +289,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
       className: "text-1xl"
     }, resource.description || "No description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
-    }, filesize(resource.size, {
+    }, resource.size && filesize(resource.size, {
       bits: true
     }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
@@ -300,9 +298,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
     }, /*#__PURE__*/React.createElement("a", {
       className: "text-yellow-600",
       href: "/dataset/".concat(resource.path)
-    }, resource.format, " (", filesize(resource.size, {
-      bits: true
-    }), ")"))));
+    }, resource.format))));
   })));
 };
 
@@ -518,11 +514,13 @@ var Nav = function Nav(_ref) {
     className: "flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
   }, /*#__PURE__*/React.createElement("div", {
     className: "flex items-center flex-shrink-0 text-gray-700 mr-6"
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "/"
   }, /*#__PURE__*/React.createElement("img", {
     src: logo,
     alt: "portal logo",
     width: "40"
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "block lg:hidden mx-4"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: handleClick,
diff --git a/examples/catalog/components/dataset/About.tsx b/examples/catalog/components/dataset/About.tsx
index bdaa1f85..50c2d3cb 100644
--- a/examples/catalog/components/dataset/About.tsx
+++ b/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;
diff --git a/examples/catalog/components/dataset/Org.tsx b/examples/catalog/components/dataset/Org.tsx
index cf4f10af..a3fec592 100644
--- a/examples/catalog/components/dataset/Org.tsx
+++ b/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;
diff --git a/examples/catalog/components/home/Nav.tsx b/examples/catalog/components/home/Nav.tsx
index 2422bec2..93ed7efa 100644
--- a/examples/catalog/components/home/Nav.tsx
+++ b/examples/catalog/components/home/Nav.tsx
@@ -1,65 +1,14 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import Link from 'next/link';
-import { useState } from 'react';
+import { Nav } from 'portal';
 
-const Nav: React.FC = () => {
-  const [open, setOpen] = useState(false);
+const NavBar: React.FC = () => {
+  const navMenu = [
+    { title: 'Blog', path: '/blog' },
+    { title: 'Search', path: '/search' },
+    { title: 'Docs', path: 'http://tech.datopian.com/frontend/' },
+    { title: 'GitHub', path: 'https://github.com/datopian/portal' },
+  ];
 
-  const handleClick = (event) => {
-    event.preventDefault();
-    setOpen(!open);
-  };
-
-  return (
-    <nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
-      <div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
-        <img src="/images/logo.svg" alt="portal logo" width="40" />
-      </div>
-      <div className="block lg:hidden mx-4">
-        <button
-          onClick={handleClick}
-          className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
-        >
-          <svg
-            className="fill-current h-3 w-3"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Menu</title>
-            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-          </svg>
-        </button>
-      </div>
-      <div className={`${open ? `block` : `hidden`} lg:block`}>
-        <Link href="/blog">
-          <a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
-            Blog
-          </a>
-        </Link>
-        <Link href="/search">
-          <a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6">
-            Search
-          </a>
-        </Link>
-        <a
-          href="http://tech.datopian.com/frontend/"
-          className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Docs
-        </a>
-        <a
-          href="https://github.com/datopian/portal"
-          className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
-          target="_blank"
-          rel="noreferrer"
-        >
-          GitHub
-        </a>
-      </div>
-    </nav>
-  );
+  return <Nav logo={'/images/logo.svg'} navMenu={navMenu} />;
 };
 
-export default Nav;
+export default NavBar;
diff --git a/examples/catalog/components/home/Recent.tsx b/examples/catalog/components/home/Recent.tsx
index 993dc112..3c1b493c 100644
--- a/examples/catalog/components/home/Recent.tsx
+++ b/examples/catalog/components/home/Recent.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import Link from 'next/link';
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { SEARCH_QUERY } from '../../graphql/queries';
+import { Recent } from 'portal';
 
-const Recent: React.FC = () => {
+const RecentDataset: React.FC = () => {
   const { loading, error, data } = useQuery(SEARCH_QUERY, {
     variables: {
       sort: 'metadata_created desc',
@@ -24,30 +24,9 @@ const Recent: React.FC = () => {
   return (
     <section className="my-10 mx-4 lg:my-20">
       <h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
-      <div className="recent flex flex-col lg:flex-row">
-        {result.results.map((dataset, index) => (
-          <div
-            key={index}
-            className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
-          >
-            <h1 className="text-2xl font-thin">{dataset.title}</h1>
-            <p className="text-gray-500">
-              {dataset.organization && dataset.organization.description}
-            </p>
-            <Link
-              href={`/@${
-                dataset.organization ? dataset.organization.name : 'dataset'
-              }/${dataset.name}`}
-            >
-              <a className="pt-3 flex justify-end text-orange-500">
-                View Dataset
-              </a>
-            </Link>
-          </div>
-        ))}
-      </div>
+      <Recent datasets={result.results} />
     </section>
   );
 };
 
-export default Recent;
+export default RecentDataset;
diff --git a/examples/catalog/components/resource/About.tsx b/examples/catalog/components/resource/About.tsx
index 9d22e5db..a4f21d02 100644
--- a/examples/catalog/components/resource/About.tsx
+++ b/examples/catalog/components/resource/About.tsx
@@ -1,51 +1,8 @@
 /* eslint-disable react/display-name */
 import { useQuery } from '@apollo/react-hooks';
-import { Table, ErrorMessage } from '../_shared';
+import { ErrorMessage } from '../_shared';
 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>
-    ),
-  },
-];
+import { ResourceInfo } from 'portal';
 
 const About: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
@@ -63,7 +20,8 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
   const resource = result.resources.find(
     (item) => item.name === variables.resource
   );
-  return <Table columns={columns} data={[resource]} />;
+
+  return <ResourceInfo resources={[resource]} />;
 };
 
 export default About;
diff --git a/examples/catalog/components/search/Form.tsx b/examples/catalog/components/search/Form.tsx
index 0824c8ff..27113f55 100644
--- a/examples/catalog/components/search/Form.tsx
+++ b/examples/catalog/components/search/Form.tsx
@@ -1,65 +1,20 @@
-import { useState } from 'react';
 import { useRouter } from 'next/router';
+import { Form } from 'portal';
 
-const Form: React.FC = () => {
+const SearchForm: React.FC = () => {
   const router = useRouter();
-  const [q, setQ] = useState(router.query.q);
-  const [sort, setSort] = useState(router.query.sort);
 
-  const handleChange = (event) => {
-    if (event.target.name === 'q') {
-      setQ(event.target.value);
-    } else if (event.target.name === 'sort') {
-      setSort(event.target.value);
-    }
-  };
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
+  const handleSubmit = (q) => {
     router.push({
       pathname: '/search',
-      query: { q, sort },
+      query: { q },
     });
   };
-
   return (
-    <form onSubmit={handleSubmit} className="items-center">
-      <div className="flex">
-        <input
-          type="text"
-          name="q"
-          value={q}
-          onChange={handleChange}
-          placeholder="Search"
-          aria-label="Search"
-          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
-        />
-        <button
-          onClick={handleSubmit}
-          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
-        >
-          Search
-        </button>
-      </div>
-      <div className="inline-block my-6 float-right">
-        <label htmlFor="field-order-by">Order by:</label>
-        <select
-          className="bg-white"
-          id="field-order-by"
-          name="sort"
-          onChange={handleChange}
-          onBlur={handleChange}
-          value={sort}
-        >
-          <option value="score:desc">Relevance</option>
-          <option value="title_string:asc">Name Ascending</option>
-          <option value="title_string:desc">Name Descending</option>
-          <option value="metadata_modified:desc">Last Modified</option>
-          <option value="views_recent:desc">Popular</option>
-        </select>
-      </div>
-    </form>
+    <>
+      <Form handleSubmit={handleSubmit} />
+    </>
   );
 };
 
-export default Form;
+export default SearchForm;
diff --git a/examples/catalog/components/search/Item.tsx b/examples/catalog/components/search/Item.tsx
index bbd5ffae..2885c085 100644
--- a/examples/catalog/components/search/Item.tsx
+++ b/examples/catalog/components/search/Item.tsx
@@ -1,38 +1,7 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import Link from 'next/link';
+import { Item } from 'portal';
 
-const Item: React.FC<{ datapackage: any }> = ({ datapackage }) => {
-  return (
-    <div className="mb-6">
-      <h3 className="text-xl font-semibold">
-        <Link
-          href={`/@${
-            datapackage.organization
-              ? datapackage.organization.name
-              : 'dataset'
-          }/${datapackage.name}`}
-        >
-          <a className="text-primary">
-            {datapackage.title || datapackage.name}
-          </a>
-        </Link>
-      </h3>
-      <Link
-        href={`/@${
-          datapackage.organization ? datapackage.organization.name : 'dataset'
-        }`}
-      >
-        <a className="text-gray-500 block mt-1">
-          {datapackage.organization
-            ? datapackage.organization.title
-            : 'dataset'}
-        </a>
-      </Link>
-      <div className="leading-relaxed mt-2">
-        {datapackage.description || datapackage.notes}
-      </div>
-    </div>
-  );
+const SearchItem: React.FC<{ datapackage: any }> = ({ datapackage }) => {
+  return <Item dataset={datapackage} />;
 };
 
-export default Item;
+export default SearchItem;
diff --git a/examples/catalog/components/search/Total.tsx b/examples/catalog/components/search/Total.tsx
index 8b7a826a..a4b9c77e 100644
--- a/examples/catalog/components/search/Total.tsx
+++ b/examples/catalog/components/search/Total.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
+import { ItemTotal } from 'portal';
 
 const Total: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
@@ -16,11 +17,7 @@ const Total: React.FC<{ variables: any }> = ({ variables }) => {
 
   const { result } = data.search;
 
-  return (
-    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
-      {result.count} results found
-    </h1>
-  );
+  return <ItemTotal count={result.count} />;
 };
 
 export default Total;
diff --git a/examples/catalog/pages/index.tsx b/examples/catalog/pages/index.tsx
index df92eb56..bd21898d 100644
--- a/examples/catalog/pages/index.tsx
+++ b/examples/catalog/pages/index.tsx
@@ -1,19 +1,24 @@
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { initializeApollo } from '../lib/apolloClient';
-import Nav from '../components/home/Nav';
-import Recent from '../components/home/Recent';
-import Form from '../components/search/Form';
+import RecentDataset from '../components/home/Recent';
+import SearchForm from '../components/search/Form';
 import { SEARCH_QUERY } from '../graphql/queries';
 import { loadNamespaces } from './_app';
 import useTranslation from 'next-translate/useTranslation';
+import NavBar from '../components/home/Nav';
 
 const Home: React.FC<{ locale: any; locales: any }> = ({
   locale,
   locales,
 }) => {
   const { t } = useTranslation();
-
+  const navMenu = [
+    { title: 'Blog', path: '/blog' },
+    { title: 'Search', path: '/search' },
+    { title: 'Docs', path: 'http://tech.datopian.com/frontend/' },
+    { title: 'GitHub', path: 'https://github.com/datopian/portal' },
+  ];
   return (
     <>
       <div className="container mx-auto">
@@ -21,7 +26,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
           <title>{t(`common:title`)}</title>
           <link rel="icon" href="/favicon.ico" />
         </Head>
-        <Nav />
+        <NavBar logo={'/images/logo.svg'} navMenu={navMenu} />
         <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
           <div>
             <h1 className="text-4xl mb-3 font-thin">
@@ -31,13 +36,13 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
             <p className="text-md font-light mb-3 w-4/5">
               {t(`common:description`)}
             </p>
-            <Form />
+            <SearchForm />
           </div>
           <div className="mt-4">
             <img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
           </div>
         </section>
-        <Recent />
+        <RecentDataset />
       </div>
     </>
   );
diff --git a/src/components/dataset/KeyInfo.js b/src/components/dataset/KeyInfo.js
index 07139469..b00aa36b 100644
--- a/src/components/dataset/KeyInfo.js
+++ b/src/components/dataset/KeyInfo.js
@@ -22,9 +22,9 @@ const KeyInfo = ({ descriptor, resources }) => {
     let datasetSize = 0
     if (resources) {
         datasetSize = resources.length == 1 ?
-            resources[0].size :
+            (resources[0].size || 0) :
             resources.reduce((accumulator, currentValue) => {
-                return accumulator.size + currentValue.size
+                return (accumulator.size || 0) + (currentValue.size || 0)
             })
     }
 
@@ -63,25 +63,25 @@ const KeyInfo = ({ descriptor, resources }) => {
                         <h3 className="text-1xl">{resources.length}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{filesize(datasetSize, { bits: true })}</h3>
+                        <h3 className="text-1xl">{datasetSize && filesize(datasetSize, { bits: true })}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{resources[0].format} zip</h3>
+                        <h3 className="text-1xl">{resources[0]["format"]} zip</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor.created}</h3>
+                        <h3 className="text-1xl">{descriptor["created"]}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor.updated}</h3>
+                        <h3 className="text-1xl">{descriptor["updated"]}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor.license}</h3>
+                        <h3 className="text-1xl">{descriptor["license"]}</h3>
                     </div>
                     <div>
                         <h3 className="text-1xl">
                             <a className="text-yellow-600"
-                                href={descriptor.sources[0].web}>
-                                {descriptor.sources[0].title}
+                                href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
+                                {descriptor["sources"] && descriptor["sources"][0]["title"]}
                             </a>
                         </h3>
                     </div>
diff --git a/src/components/dataset/ResourceInfo.js b/src/components/dataset/ResourceInfo.js
index e1c9f583..04eac149 100644
--- a/src/components/dataset/ResourceInfo.js
+++ b/src/components/dataset/ResourceInfo.js
@@ -11,7 +11,6 @@ const ResourcesInfo = ({ resources }) => {
     return (
         <>
             <section className="m-8" name="file-list">
-                <h1 className="text-2xl font-bold mb-4">Data Files</h1>
                 <div className="grid grid-cols-7 gap-4">
                     <div>
                         <h3 className="text-1xl font-bold mb-2">File</h3>
@@ -40,7 +39,7 @@ const ResourcesInfo = ({ resources }) => {
                                 <h3 className="text-1xl">{resource.description || "No description"}</h3>
                             </div>
                             <div>
-                                <h3 className="text-1xl">{filesize(resource.size, { bits: true })}</h3>
+                                <h3 className="text-1xl">{resource.size && filesize(resource.size, { bits: true })}</h3>
                             </div>
                             <div>
                                 <h3 className="text-1xl">{resource.updated}</h3>
@@ -48,7 +47,7 @@ const ResourcesInfo = ({ resources }) => {
                             <div>
                                 <h3 className="text-1xl">
                                     <a className="text-yellow-600" href={`/dataset/${resource.path}`}>
-                                        {resource.format} ({filesize(resource.size, { bits: true })})
+                                        {resource.format}
                                     </a>
                                 </h3>
                             </div>
diff --git a/src/components/ui/Nav.js b/src/components/ui/Nav.js
index b5b488d3..e134b1d2 100644
--- a/src/components/ui/Nav.js
+++ b/src/components/ui/Nav.js
@@ -22,7 +22,7 @@ const Nav = ({ logo, navMenu }) => {
   return (
     <nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
       <div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
-        <img src={logo} alt="portal logo" width="40" />
+        <Link href="/"><img src={logo} alt="portal logo" width="40" /></Link>
       </div>
       <div className="block lg:hidden mx-4">
         <button