[dataset][l]: functional dataset page.

Mocked page is here: `/@world-bank/gdp`

components/dataset/About.tsx

@@ -0,0 +1,37 @@
+export default function About({ datapackage }) {
+  return (
+    <>
+      <h1 className="text-4xl font-semibold text-primary">{ datapackage.title || datapackage.name }</h1>
+      <table className="table info no-left-padding">
+        <thead>
+          <tr>
+            <th>Files</th>
+            <th>Size</th>
+            <th>Format</th>
+            <th>Created</th>
+            <th>Updated</th>
+            <th>License</th>
+            <th>Source</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="col-xs-1">{ datapackage.resources.length }</td>
+            <td className="col-xs-1">{ datapackage.size || 'N\A' }</td>
+            <td className="col-xs-2 format-list">
+            
+            </td>
+            <td className="col-xs-2">{ datapackage.created }</td>
+            <td className="col-xs-2">{ datapackage.modified }</td>
+            <td className="col-xs-2">
+
+            </td>
+            <td className="col-xs-2">
+
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  )
+}

components/dataset/Org.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Org({ org }) {
+  return (
+    <Link href={`/@${org.name}`}>
+      <a className="text-2xl font-semibold text-primary">{ org.title || org.name }</a>
+    </Link>
+  )
+}

components/dataset/Resources.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export default function Resources({ resources }) {
+  return (
+    <ul>
+      {resources.map((resource, index) => (
+          <li key={index}>
+            <Link href={`r/${resource.name}`}>
+              <a className="text-xl font-semibold text-primary">{ resource.title || resource.name }</a>
+            </Link>
+          </li>
+        )
+      )}
+    </ul>
+  )
+}

pages/[org]/[dataset]/index.tsx

@@ -1,3 +1,25 @@
-export default function Dataset() {
-  return <h1>Dataset page</h1>
+import { GetServerSideProps } from 'next'
+import config from '../../../config'
+import utils from '../../../utils'
+import About from '../../../components/dataset/About'
+import Org from '../../../components/dataset/Org'
+import Resources from '../../../components/dataset/Resources'
+
+function Dataset({ datapackage }) {
+  return (
+    <>
+      <About datapackage={datapackage} />
+      <Org org={datapackage.organization} />
+      <Resources resources={datapackage.resources} />
+    </>
+  )
 }
+
+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 } }
+}
+
+export default Dataset

pages/search.tsx

@@ -23,7 +23,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const ckanQuery = querystring.stringify(
     utils.convertToCkanSearchQuery(query)
   )
-  console.log(ckanQuery)
   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))