[home][s]-make recent dataset section dynamic
This commit is contained in:
Gift Egwuenu
parent
676d54280d
commit
702f796d6f
@ -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="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
|
||||
<h1 className="text-2xl font-thin">Title</h1>
|
||||
<p className="text-gray-500">Description</p>
|
||||
<Link href="/">
|
||||
<a className="pt-3 flex justify-end text-orange-500">
|
||||
View Dataset
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
{datapackages.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>
|
||||
);
|
||||
|
||||
126
mocks/index.js
126
mocks/index.js
@ -58,63 +58,64 @@ const population = {
|
||||
},
|
||||
};
|
||||
|
||||
const recentDataset = {
|
||||
license_title: 'Creative Commons Attribution',
|
||||
maintainer: '',
|
||||
relationships_as_object: [],
|
||||
private: false,
|
||||
maintainer_email: '',
|
||||
num_tags: 0,
|
||||
id: '9b960530-728c-4a07-8f96-c5f89b545d05',
|
||||
metadata_created: '2020-06-19T07:30:03.796668',
|
||||
metadata_modified: '2020-06-19T07:30:11.392832',
|
||||
author: '',
|
||||
author_email: '',
|
||||
state: 'active',
|
||||
version: '',
|
||||
creator_user_id: '0d23e029-ddd5-4909-a2cd-5af7fe8d6e9c',
|
||||
type: 'dataset',
|
||||
resources: [
|
||||
{
|
||||
mimetype: null,
|
||||
cache_url: null,
|
||||
hash: '',
|
||||
description: '',
|
||||
name: 'gettyimages-954867550.jpg',
|
||||
format: 'JPEG',
|
||||
url:
|
||||
'https://demo.ckan.org/pl/dataset/9b960530-728c-4a07-8f96-c5f89b545d05/resource/ac28179c-023e-4c17-af3c-00cbb81f5dcb/download/gettyimages-954867550.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,
|
||||
const recentDataset = [
|
||||
{
|
||||
name: 'gdp',
|
||||
title: 'Country, Regional and World GDP (Gross Domestic Product)',
|
||||
notes:
|
||||
'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.',
|
||||
resources: [
|
||||
{
|
||||
name: 'gdp',
|
||||
id: 'gdp',
|
||||
title: 'GDP data',
|
||||
format: 'csv',
|
||||
created: '2019-03-07T12:00:36.273495',
|
||||
last_modified: '2020-05-07T12:00:36.273495',
|
||||
datastore_active: false,
|
||||
url: 'http://mock.filestore/gdp.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',
|
||||
},
|
||||
],
|
||||
num_resources: 1,
|
||||
tags: [],
|
||||
groups: [],
|
||||
license_id: 'cc-by',
|
||||
relationships_as_subject: [],
|
||||
organization: null,
|
||||
name: 'sdfasdasda',
|
||||
isopen: true,
|
||||
url: '',
|
||||
notes: 'sdf',
|
||||
owner_org: null,
|
||||
extras: [],
|
||||
license_url: 'http://www.opendefinition.org/licenses/cc-by',
|
||||
title: 'sdf',
|
||||
revision_id: 'a810e134-79ba-4ab7-a7c4-f60e2fb21d40',
|
||||
};
|
||||
metadata_created: '2019-03-07T11:56:19.696257',
|
||||
metadata_modified: '2019-03-07T12:03:58.817280',
|
||||
},
|
||||
{
|
||||
name: 'population',
|
||||
title: 'World population data',
|
||||
notes:
|
||||
'Population figures for countries, regions (e.g. Asia) and the world. Data comes originally from World Bank and has been converted into standard CSV.',
|
||||
resources: [
|
||||
{
|
||||
name: 'population',
|
||||
id: 'population',
|
||||
title: 'Population data',
|
||||
format: 'csv',
|
||||
created: '2019-03-07T12:00:36.273495',
|
||||
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,
|
||||
result: {
|
||||
count: 1923,
|
||||
sort: 'metadata_created desc',
|
||||
facets: {},
|
||||
results: [recentDataset],
|
||||
search_facets: {},
|
||||
},
|
||||
count: 2,
|
||||
sort: 'metadata_created desc',
|
||||
facets: {},
|
||||
results: recentDataset,
|
||||
search_facets: {},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
console.log(datapackages);
|
||||
const datapackages = ckanResult.results;
|
||||
return {
|
||||
props: {
|
||||
datapackages,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user