Merge pull request #28 from datopian/make-recent-datasets-dynamic

[Home][s]- Remove Hardcoded Recent Datasets

components/home/Recent.tsx

@@ -1,53 +1,66 @@
 import Link from 'next/link';
+import ErrorMessage from '../Error';
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const QUERY = gql`
+  query search($q: String, $sort: String) {
+    search(q: $q, sort: $sort)
+      @rest(type: "Search", path: "package_search?{args}") {
+      result {
+        results {
+          name
+          title
+          organization {
+            name
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Recent() {
+  const { loading, error, data } = useQuery(QUERY, {
+    variables: { sort: 'metadata_created desc' },
+    // 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 { result } = data.search;
 
-export default function Recent() {
   return (
     <section className="my-10 mx-4 lg:my-20">
       <h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
       <div className="flex flex-col lg:flex-row">
-        <div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
-          <h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
-          <p className="text-gray-500">Dataset</p>
-          <p>
-            data collected and managed by Our World in Data - COVID 19 pulled
-            from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
-          </p>
-          <Link href="/">
-            <a className="pt-3 flex justify-end text-orange-500">
-              {' '}
-              View Dataset{' '}
-            </a>
-          </Link>
-        </div>
-        <div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6  shadow-sm">
-          <h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
-          <p className="text-gray-500">Dataset</p>
-          <p>
-            data collected and managed by Our World in Data - COVID 19 pulled
-            from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
-          </p>
-          <Link href="/">
-            <a className="pt-3 flex justify-end  text-orange-500">
-              {' '}
-              View Dataset{' '}
-            </a>
-          </Link>
-        </div>
-        <div className="border px-4 mb-4 border-gray-100 w-5/6 shadow-sm">
-          <h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
-          <p className="text-gray-500 mb-2">Dataset</p>
-          <p>
-            data collected and managed by Our World in Data - COVID 19 pulled
-            from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
-          </p>
-          <Link href="/">
-            <a className="pt-3 flex justify-end  text-orange-500">
-              {' '}
-              View Dataset{' '}
-            </a>
-          </Link>
-        </div>
+        {result.results.map((resource, 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">{resource.title}</h1>
+            <p className="text-gray-500">{resource.organization.description}</p>
+            <Link
+              href={`/@${
+                resource.organization ? resource.organization.name : 'dataset'
+              }/${resource.name}`}
+            >
+              <a className="pt-3 flex justify-end text-orange-500">
+                View Dataset
+              </a>
+            </Link>
+          </div>
+        ))}
       </div>
     </section>
   );
 }
+
+export default Recent;

mocks/index.js

@@ -89,6 +89,18 @@ module.exports.initMocks = function () {
         results: [gdp],
         search_facets: {},
       },
+    })
+    // 3. Call for recent packages.
+    .get('/package_search?sort=metadata_created%20desc')
+    .reply(200, {
+      success: true,
+      result: {
+        count: 2,
+        sort: 'metadata_created desc',
+        facets: {},
+        results: [gdp, population],
+        search_facets: {},
+      },
     });
 
   // "package_show" mocks

pages/index.tsx

@@ -1,9 +1,11 @@
+import { GetServerSideProps } from 'next';
+import { initializeApollo } from '../lib/apolloClient';
 import Head from 'next/head';
 import Nav from '../components/home/Nav';
-import Recent from '../components/home/Recent';
+import Recent, { QUERY } from '../components/home/Recent';
 import Form from '../components/search/Form';
 
-export default function Home() {
+function Home({ datapackages }) {
   return (
     <div className="container mx-auto">
       <Head>
@@ -32,3 +34,22 @@ export default function Home() {
     </div>
   );
 }
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: QUERY,
+    variables: {
+      sort: 'metadata_created desc',
+    },
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+    },
+  };
+};
+
+export default Home;