[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;

examples/catalog/graphql/queries.ts

@@ -79,6 +79,22 @@ export const GET_TOTAL_COUNT_QUERY = gql`
   }
 `;
 
+export const GET_STATS_QUERY = gql`
+  query stats {
+    datasets @rest(type: "Search", path: "package_search?rows=0") {
+      result {
+        count
+      }
+    }
+    orgs @rest(type: "Search", path: "organization_list") {
+      result
+    }
+    groups @rest(type: "Search", path: "group_list") {
+      result
+    }
+  }
+`;
+
 export const GET_POSTS_QUERY = gql`
   query posts {
     posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") {

examples/catalog/pages/index.tsx

@@ -8,6 +8,7 @@ import useTranslation from 'next-translate/useTranslation';
 import NavBar from '../components/home/Nav';
 import Hero from '../components/home/Hero';
 import Footer from '../components/home/Footer';
+import Stats from '../components/home/Stats';
 
 const Home: React.FC<{ locale: any; locales: any }> = ({
   locale,
@@ -23,6 +24,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
         </Head>
         <NavBar />
         <Hero />
+        <Stats />
         <RecentDataset />
         <Footer />
       </div>