[catalog][m]: added Stats component.

examples/catalog/components/home/Footer.tsx

@@ -9,10 +9,8 @@ const Footer: React.FC = () => {
       {
         name: 'GitHub',
         href: 'https://github.com/datopian/portal.js',
-        icon: (
-          // eslint-disable-line
-          props
-        ) => (
+        // eslint-disable-next-line
+        icon: (props) => (
           <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
             <path
               fillRule="evenodd"

examples/catalog/components/home/Stats.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { useQuery } from '@apollo/react-hooks';
+import { ErrorMessage } from '../_shared';
+import { GET_STATS_QUERY } from '../../graphql/queries';
+
+const Stats: React.FC = () => {
+  const { loading, error, data } = useQuery(GET_STATS_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 search results." />;
+  if (loading) return <div>Loading</div>;
+
+  const stats = [
+    { name: 'Datasets', stat: data.datasets.result.count },
+    {
+      name: 'Organizations',
+      stat: data.orgs.result ? data.orgs.result.length : 0,
+    },
+    {
+      name: 'Groups',
+      stat: data.groups.result ? data.groups.result.length : 0,
+    },
+  ];
+
+  return (
+    <div className="p-4">
+      <h3 className="text-lg leading-6 font-medium text-gray-900">
+        DataHub Stats
+      </h3>
+      <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
+        {stats.map((item) => (
+          <div
+            key={item.name}
+            className="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6"
+          >
+            <dt className="text-sm font-medium text-gray-500 truncate">
+              {item.name}
+            </dt>
+            <dd className="mt-1 text-3xl font-semibold text-gray-900">
+              {item.stat}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+export default Stats;