Merge branch 'master' into make-recent-datasets-dynamic

2020-06-24 12:23:39 +06:00
parent 702f796d6f 3909dfacec
commit 0bc0424d14
25 changed files with 913 additions and 315 deletions
--- a/pages/[org]/[dataset]/index.tsx
+++ b/pages/[org]/[dataset]/index.tsx
@@ -1,39 +1,82 @@
 import { GetServerSideProps } from 'next';
-import config from '../../../config';
+import { useQuery } from '@apollo/react-hooks';
+import { initializeApollo } from '../../../lib/apolloClient';
 import utils from '../../../utils';
 import Head from 'next/head';
 import Nav from '../../../components/home/Nav';
 import About from '../../../components/dataset/About';
 import Org from '../../../components/dataset/Org';
 import Resources from '../../../components/dataset/Resources';
+import gql from 'graphql-tag';
+
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        name
+        title
+        size
+        metadata_created
+        metadata_modified
+        resources {
+          name
+          title
+          format
+          created
+          last_modified
+        }
+        organization {
+          name
+          title
+          image_url
+        }
+      }
+    }
+  }
+`;
+
+function Dataset({ variables }) {
+  const { data, loading } = useQuery(QUERY, { variables });
+
+  if (loading) return <div>Loading</div>;
+  const { result } = data.dataset;

-function Dataset({ datapackage }) {
  return (
    <>
      <Head>
-        <title>Portal | {datapackage.title || datapackage.name}</title>
+        <title>Portal | {result.title || result.name}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Nav />
      <main className="p-6">
        <h1 className="text-3xl font-semibold text-primary mb-2">
-          {datapackage.title || datapackage.name}
+          {result.title || result.name}
        </h1>
-        <Org org={datapackage.organization} />
-        <About datapackage={datapackage} />
-        <Resources datapackage={datapackage} />
+        <Org variables={variables} />
+        <About variables={variables} />
+        <Resources variables={variables} />
      </main>
    </>
  );
 }

 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_show?id=${context.query.dataset}`
-  );
-  const ckanResult = (await res.json()).result;
-  const datapackage = utils.ckanToDataPackage(ckanResult);
-  return { props: { datapackage } };
+  const apolloClient = initializeApollo();
+  const variables = {
+    id: context.query.dataset,
+  };
+
+  await apolloClient.query({
+    query: QUERY,
+    variables,
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
 };

 export default Dataset;
--- a/pages/[org]/[dataset]/r/[resource]/index.tsx
+++ b/pages/[org]/[dataset]/r/[resource]/index.tsx
@@ -1,12 +1,42 @@
 import { GetServerSideProps } from 'next';
-import config from '../../../../../config';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { initializeApollo } from '../../../../../lib/apolloClient';
 import utils from '../../../../../utils';
 import Head from 'next/head';
 import Nav from '../../../../../components/home/Nav';
 import About from '../../../../../components/resource/About';
 import DataExplorer from '../../../../../components/resource/DataExplorer';

-function Resource({ resource }) {
+const QUERY = gql`
+  query dataset($id: String) {
+    dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+      result {
+        resources {
+          name
+          id
+          title
+          description
+          format
+          size
+          created
+          last_modified
+          url
+        }
+      }
+    }
+  }
+`;
+
+function Resource({ variables }) {
+  const { data, loading } = useQuery(QUERY, { variables });
+
+  if (loading) return <div>Loading</div>;
+  const result = data.dataset.result;
+  // Find right resource
+  const resource = result.resources.find(
+    (item) => item.name === variables.resource
+  );
  return (
    <>
      <Head>
@@ -18,27 +48,31 @@ function Resource({ resource }) {
        <h1 className="text-3xl font-semibold text-primary mb-2">
          {resource.title || resource.name}
        </h1>
-        <About resource={resource} />
-        <DataExplorer resource={resource} />
+        <About variables={variables} />
+        <DataExplorer variables={variables} />
      </main>
    </>
  );
 }

 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_show?id=${context.query.dataset}`
-  );
-  const ckanResult = (await res.json()).result;
-  // Only keep single resource
-  ckanResult.resources = ckanResult.resources.filter((resource) => {
-    return (
-      resource.name === context.query.resource ||
-      resource.id === context.query.resource
-    );
+  const apolloClient = initializeApollo();
+  const variables = {
+    id: context.query.dataset,
+    resource: context.query.resource,
+  };
+
+  await apolloClient.query({
+    query: QUERY,
+    variables,
  });
-  const resourceDescriptor = utils.ckanToDataPackage(ckanResult).resources[0];
-  return { props: { resource: resourceDescriptor } };
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
 };

 export default Resource;
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,13 +1,15 @@
 /* istanbul ignore file */
 import '../styles/index.css';

-// Setup mocks
-if (process.env.NODE_ENV === 'development') {
-  const mocks = require('../mocks');
-  mocks.initMocks();
-  console.warn('You have activated the mocks.');
-}
+import { ApolloProvider } from '@apollo/react-hooks';
+import { useApollo } from '../lib/apolloClient';

 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  const apolloClient = useApollo(pageProps.initialApolloState);
+
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Component {...pageProps} />
+    </ApolloProvider>
+  );
 }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,8 +2,7 @@ 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 Form from '../components/search/Form';

 function Home({ datapackages }) {
  return (
@@ -24,7 +23,7 @@ function Home({ datapackages }) {
            Premium Data Service for additional or customised data with
            guaranteed updates.
          </p>
-          <Input query={{}} />
+          <Form />
        </div>
        <div className="mt-4">
          <img src="/images/banner.svg" className="w-4/5" />
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,15 +1,33 @@
 import { GetServerSideProps } from 'next';
-import querystring from 'querystring';
-import config from '../config';
+import { initializeApollo } from '../lib/apolloClient';
 import utils from '../utils';
 import Head from 'next/head';
 import Nav from '../components/home/Nav';
-import Input from '../components/search/Input';
+import Form from '../components/search/Form';
 import Total from '../components/search/Total';
-import Sort from '../components/search/Sort';
 import List from '../components/search/List';
+import gql from 'graphql-tag';

-function Search({ ckanResult, datapackages, query }) {
+const QUERY = gql`
+  query search($q: String, $sort: String) {
+    search(q: $q, sort: $sort)
+      @rest(type: "Search", path: "package_search?{args}") {
+      result {
+        count
+        results {
+          name
+          title
+          organization {
+            name
+            title
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Search({ variables }) {
  return (
    <>
      <Head>
@@ -18,10 +36,9 @@ function Search({ ckanResult, datapackages, query }) {
      </Head>
      <Nav />
      <main className="p-6">
-        <Input query={query} />
-        <Total total={ckanResult.count} />
-        <Sort />
-        <List datapackages={datapackages} />
+        <Form />
+        <Total variables={variables} />
+        <List variables={variables} />
      </main>
    </>
  );
@@ -29,18 +46,21 @@ function Search({ ckanResult, datapackages, query }) {

 export const getServerSideProps: GetServerSideProps = async (context) => {
  const query = context.query || {};
-  const ckanQuery = querystring.stringify(
-    utils.convertToCkanSearchQuery(query)
-  );
-  const res = await fetch(
-    `${config.get('DMS')}/api/3/action/package_search?${ckanQuery}`
-  );
-  const ckanResult = (await res.json()).result;
-  const datapackages = ckanResult.results.map((item) =>
-    utils.ckanToDataPackage(item)
-  );
+  const variables = utils.convertToCkanSearchQuery(query);

-  return { props: { ckanResult, datapackages, query } };
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: QUERY,
+    variables,
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
 };

 export default Search;