From 676d54280d3b4fd359312db867ae3ad4c48f7d56 Mon Sep 17 00:00:00 2001 From: Gift Egwuenu Date: Fri, 19 Jun 2020 13:07:41 +0100 Subject: [PATCH 1/5] [home][s] - add mock data for recent datasets --- components/home/Recent.tsx | 45 ++++------------------ mocks/index.js | 76 ++++++++++++++++++++++++++++++++++++++ pages/index.tsx | 24 +++++++++++- 3 files changed, 106 insertions(+), 39 deletions(-) diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index fc02cd50..821904b8 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -1,49 +1,16 @@ import Link from 'next/link'; -export default function Recent() { +function Recent() { return (

Recent Datasets

-
+
-

Our World in Data - COVID 19

-

Dataset

-

- data collected and managed by Our World in Data - COVID 19 pulled - from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus -

+

Title

+

Description

- {' '} - View Dataset{' '} - - -
-
-

Our World in Data - COVID 19

-

Dataset

-

- data collected and managed by Our World in Data - COVID 19 pulled - from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus -

- - - {' '} - View Dataset{' '} - - -
-
-

Our World in Data - COVID 19

-

Dataset

-

- data collected and managed by Our World in Data - COVID 19 pulled - from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus -

- - - {' '} - View Dataset{' '} + View Dataset
@@ -51,3 +18,5 @@ export default function Recent() {
); } + +export default Recent; diff --git a/mocks/index.js b/mocks/index.js index 17c11e04..d894908a 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -58,6 +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, + }, + ], + 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', +}; + module.exports.initMocks = function () { // Uncomment this line if you want to record API calls // nock.recorder.rec() @@ -108,6 +166,24 @@ module.exports.initMocks = function () { result: population, }); + // recent datapackages + nock('http://mock.ckan/api/3/action', { encodedQueryParams: true }) + .persist() + .get('/package_search?sort=metadata_created%20desc') + .reply(200, { + success: true, + result: { + success: true, + result: { + count: 1923, + sort: 'metadata_created desc', + facets: {}, + results: [recentDataset], + search_facets: {}, + }, + }, + }); + // "datastore_search" mocks nock('http://mock.ckan/api/3/action', { encodedQueryParams: true }) .persist() diff --git a/pages/index.tsx b/pages/index.tsx index 01cfe020..b4224ece 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,13 @@ import Head from 'next/head'; +import { GetServerSideProps } from 'next'; 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'; -export default function Home() { +function Home() { return (
@@ -32,3 +36,21 @@ export default function Home() {
); } + +export const getServerSideProps: GetServerSideProps = async (context) => { + const res = await fetch( + `${config.get( + 'DMS' + )}/api/3/action/package_search?sort=metadata_created%20desc` + ); + const ckanResult = (await res.json()).result; + const datapackages = ckanResult; + console.log(datapackages); + return { + props: { + datapackages, + }, + }; +}; + +export default Home; From 702f796d6f7e873d6c430d9fb017f4bd81d43748 Mon Sep 17 00:00:00 2001 From: Gift Egwuenu Date: Mon, 22 Jun 2020 10:29:31 +0100 Subject: [PATCH 2/5] [home][s]-make recent dataset section dynamic --- components/home/Recent.tsx | 31 +++++---- mocks/index.js | 126 ++++++++++++++++++------------------- pages/index.tsx | 9 +-- 3 files changed, 85 insertions(+), 81 deletions(-) diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index 821904b8..37f9f4a2 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -1,19 +1,28 @@ import Link from 'next/link'; -function Recent() { +function Recent({ datapackages }) { return (

Recent Datasets

-
-
-

Title

-

Description

- - - View Dataset - - -
+
+ {datapackages.map((resource, index) => ( +
+

{resource.title}

+

{resource.organization.description}

+ + + View Dataset + + +
+ ))}
); diff --git a/mocks/index.js b/mocks/index.js index d894908a..017f19ed 100644 --- a/mocks/index.js +++ b/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: {}, }, }); diff --git a/pages/index.tsx b/pages/index.tsx index b4224ece..1897b09e 100644 --- a/pages/index.tsx +++ b/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 (
@@ -32,7 +30,7 @@ function Home() {
- + ); } @@ -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, From 01566a0cc79aa4fad80b847406b18db011ea24ce Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Wed, 24 Jun 2020 12:32:44 +0600 Subject: [PATCH 3/5] [home page][xs]: integrate with Apollo. --- components/home/Recent.tsx | 39 ++++++++++++++++++++++++++++++++++++-- pages/index.tsx | 22 ++++++++++----------- 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index 37f9f4a2..8177a185 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -1,11 +1,46 @@ 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, { + sort: 'sort=metadata_created%20desc', + // 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 ; + if (loading) return
Loading
; + + const { result } = data.search; -function Recent({ datapackages }) { return (

Recent Datasets

- {datapackages.map((resource, index) => ( + {result.results.map((resource, index) => (
- + ); } export const getServerSideProps: GetServerSideProps = async (context) => { - const res = await fetch( - `${config.get( - 'DMS' - )}/api/3/action/package_search?sort=metadata_created%20desc` - ); - const ckanResult = (await res.json()).result; - const datapackages = ckanResult.results; + const apolloClient = initializeApollo(); + + await apolloClient.query({ + query: QUERY, + }); + return { props: { - datapackages, + initialApolloState: apolloClient.cache.extract(), }, }; }; From a677e0894bd77cfdba99b2f6982eadf2db5068b7 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Wed, 24 Jun 2020 12:38:40 +0600 Subject: [PATCH 4/5] [home page][xs]: DRY in mocks. --- mocks/index.js | 86 +++++++------------------------------------------- 1 file changed, 12 insertions(+), 74 deletions(-) diff --git a/mocks/index.js b/mocks/index.js index 1b4a9a0b..ff42cde6 100644 --- a/mocks/index.js +++ b/mocks/index.js @@ -59,65 +59,6 @@ const population = { }, }; -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', - }, - 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 // nock.recorder.rec() @@ -148,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 @@ -164,21 +117,6 @@ module.exports.initMocks = function () { result: population, }); - // recent datapackages - nock('http://mock.ckan/api/3/action', { encodedQueryParams: true }) - .persist() - .get('/package_search?sort=metadata_created%20desc') - .reply(200, { - success: true, - result: { - count: 2, - sort: 'metadata_created desc', - facets: {}, - results: recentDataset, - search_facets: {}, - }, - }); - // "datastore_search" mocks nock('http://mock.ckan/api/3/action', { encodedQueryParams: true }) .persist() From 11feb03a7e0d1b8bb7b87b099e9139ffa546dd65 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Wed, 24 Jun 2020 12:46:07 +0600 Subject: [PATCH 5/5] [bug fix][xs]: fix wrong sort arg in variables. --- components/home/Recent.tsx | 2 +- pages/index.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index 8177a185..bf83cb5c 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -24,7 +24,7 @@ export const QUERY = gql` function Recent() { const { loading, error, data } = useQuery(QUERY, { - sort: 'sort=metadata_created%20desc', + 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 diff --git a/pages/index.tsx b/pages/index.tsx index 61f420a0..dfb9c05c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -40,6 +40,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => { await apolloClient.query({ query: QUERY, + variables: { + sort: 'metadata_created desc', + }, }); return {