[home][s]-make recent dataset section dynamic

components/home/Recent.tsx

@@ -1,19 +1,28 @@
 import Link from 'next/link';
 
-function Recent() {
+function Recent({ datapackages }) {
   return (
     <section className="my-10 mx-4 lg:my-20">
       <h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
-      <div>
+      <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">
+        {datapackages.map((resource, index) => (
-          <h1 className="text-2xl font-thin">Title</h1>
+          <div
-          <p className="text-gray-500">Description</p>
+            key={index}
-          <Link href="/">
+            className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
-            <a className="pt-3 flex justify-end text-orange-500">
+          >
-              View Dataset
+            <h1 className="text-2xl font-thin">{resource.title}</h1>
-            </a>
+            <p className="text-gray-500">{resource.organization.description}</p>
-          </Link>
+            <Link
-        </div>
+              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>
   );

mocks/index.js

@@ -58,63 +58,64 @@ const population = {
   },
 };
 
-const recentDataset = {
+const recentDataset = [
-  license_title: 'Creative Commons Attribution',
+  {
-  maintainer: '',
+    name: 'gdp',
-  relationships_as_object: [],
+    title: 'Country, Regional and World GDP (Gross Domestic Product)',
-  private: false,
+    notes:
-  maintainer_email: '',
+      'Country, regional and world GDP in current US Dollars ($). Regional means collections of countries e.g. Europe & Central Asia. Data is sourced from the World Bank and turned into a standard normalized CSV.',
-  num_tags: 0,
+    resources: [
-  id: '9b960530-728c-4a07-8f96-c5f89b545d05',
+      {
-  metadata_created: '2020-06-19T07:30:03.796668',
+        name: 'gdp',
-  metadata_modified: '2020-06-19T07:30:11.392832',
+        id: 'gdp',
-  author: '',
+        title: 'GDP data',
-  author_email: '',
+        format: 'csv',
-  state: 'active',
+        created: '2019-03-07T12:00:36.273495',
-  version: '',
+        last_modified: '2020-05-07T12:00:36.273495',
-  creator_user_id: '0d23e029-ddd5-4909-a2cd-5af7fe8d6e9c',
+        datastore_active: false,
-  type: 'dataset',
+        url: 'http://mock.filestore/gdp.csv',
-  resources: [
+      },
-    {
+    ],
-      mimetype: null,
+    organization: {
-      cache_url: null,
+      title: 'World Bank',
-      hash: '',
+      name: 'world-bank',
-      description: '',
+      description:
-      name: 'gettyimages-954867550.jpg',
+        'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
-      format: 'JPEG',
+      created: '2019-03-07T11:51:13.758844',
-      url:
+      image_url:
-        'https://demo.ckan.org/pl/dataset/9b960530-728c-4a07-8f96-c5f89b545d05/resource/ac28179c-023e-4c17-af3c-00cbb81f5dcb/download/gettyimages-954867550.jpg',
+        'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
-      datastore_active: false,
-      cache_last_updated: null,
-      package_id: '9b960530-728c-4a07-8f96-c5f89b545d05',
-      created: '2020-06-19T07:30:10.786597',
-      state: 'active',
-      mimetype_inner: null,
-      last_modified: null,
-      position: 0,
-      revision_id: 'a810e134-79ba-4ab7-a7c4-f60e2fb21d40',
-      url_type: 'upload',
-      id: 'ac28179c-023e-4c17-af3c-00cbb81f5dcb',
-      resource_type: null,
-      size: null,
     },
-  ],
+    metadata_created: '2019-03-07T11:56:19.696257',
-  num_resources: 1,
+    metadata_modified: '2019-03-07T12:03:58.817280',
-  tags: [],
+  },
-  groups: [],
+  {
-  license_id: 'cc-by',
+    name: 'population',
-  relationships_as_subject: [],
+    title: 'World population data',
-  organization: null,
+    notes:
-  name: 'sdfasdasda',
+      'Population figures for countries, regions (e.g. Asia) and the world. Data comes originally from World Bank and has been converted into standard CSV.',
-  isopen: true,
+    resources: [
-  url: '',
+      {
-  notes: 'sdf',
+        name: 'population',
-  owner_org: null,
+        id: 'population',
-  extras: [],
+        title: 'Population data',
-  license_url: 'http://www.opendefinition.org/licenses/cc-by',
+        format: 'csv',
-  title: 'sdf',
+        created: '2019-03-07T12:00:36.273495',
-  revision_id: 'a810e134-79ba-4ab7-a7c4-f60e2fb21d40',
+        last_modified: '2020-05-07T12:00:36.273495',
-};
+        datastore_active: true,
+        url: 'http://mock.filestore/population.csv',
+      },
+    ],
+    organization: {
+      title: 'World Bank',
+      name: 'world-bank',
+      description:
+        'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
+      created: '2019-03-07T11:51:13.758844',
+      image_url:
+        'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
+    },
+  },
+];
 
 module.exports.initMocks = function () {
   // Uncomment this line if you want to record API calls
@@ -173,14 +174,11 @@ module.exports.initMocks = function () {
     .reply(200, {
       success: true,
       result: {
-        success: true,
+        count: 2,
-        result: {
+        sort: 'metadata_created desc',
-          count: 1923,
+        facets: {},
-          sort: 'metadata_created desc',
+        results: recentDataset,
-          facets: {},
+        search_facets: {},
-          results: [recentDataset],
-          search_facets: {},
-        },
       },
     });
 

pages/index.tsx

@@ -4,10 +4,8 @@ import Nav from '../components/home/Nav';
 import Recent from '../components/home/Recent';
 import Input from '../components/search/Input';
 import config from '../config/';
-import utils from '../utils';
-import { util } from 'prettier';
 
-function Home() {
+function Home({ datapackages }) {
   return (
     <div className="container mx-auto">
       <Head>
@@ -32,7 +30,7 @@ function Home() {
           <img src="/images/banner.svg" className="w-4/5" />
         </div>
       </section>
-      <Recent />
+      <Recent datapackages={datapackages} />
     </div>
   );
 }
@@ -44,8 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     )}/api/3/action/package_search?sort=metadata_created%20desc`
   );
   const ckanResult = (await res.json()).result;
-  const datapackages = ckanResult;
+  const datapackages = ckanResult.results;
-  console.log(datapackages);
   return {
     props: {
       datapackages,