Refactor catalog example to use portal.js

This commit is contained in:
Rising Odegua
2021-05-21 16:48:55 +01:00
parent b103b0e845
commit f8602184ce
14 changed files with 94 additions and 340 deletions

View File

@@ -22,9 +22,9 @@ const KeyInfo = ({ descriptor, resources }) => {
let datasetSize = 0
if (resources) {
datasetSize = resources.length == 1 ?
resources[0].size :
(resources[0].size || 0) :
resources.reduce((accumulator, currentValue) => {
return accumulator.size + currentValue.size
return (accumulator.size || 0) + (currentValue.size || 0)
})
}
@@ -63,25 +63,25 @@ const KeyInfo = ({ descriptor, resources }) => {
<h3 className="text-1xl">{resources.length}</h3>
</div>
<div>
<h3 className="text-1xl">{filesize(datasetSize, { bits: true })}</h3>
<h3 className="text-1xl">{datasetSize && filesize(datasetSize, { bits: true })}</h3>
</div>
<div>
<h3 className="text-1xl">{resources[0].format} zip</h3>
<h3 className="text-1xl">{resources[0]["format"]} zip</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.created}</h3>
<h3 className="text-1xl">{descriptor["created"]}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.updated}</h3>
<h3 className="text-1xl">{descriptor["updated"]}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.license}</h3>
<h3 className="text-1xl">{descriptor["license"]}</h3>
</div>
<div>
<h3 className="text-1xl">
<a className="text-yellow-600"
href={descriptor.sources[0].web}>
{descriptor.sources[0].title}
href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
{descriptor["sources"] && descriptor["sources"][0]["title"]}
</a>
</h3>
</div>

View File

@@ -11,7 +11,6 @@ const ResourcesInfo = ({ resources }) => {
return (
<>
<section className="m-8" name="file-list">
<h1 className="text-2xl font-bold mb-4">Data Files</h1>
<div className="grid grid-cols-7 gap-4">
<div>
<h3 className="text-1xl font-bold mb-2">File</h3>
@@ -40,7 +39,7 @@ const ResourcesInfo = ({ resources }) => {
<h3 className="text-1xl">{resource.description || "No description"}</h3>
</div>
<div>
<h3 className="text-1xl">{filesize(resource.size, { bits: true })}</h3>
<h3 className="text-1xl">{resource.size && filesize(resource.size, { bits: true })}</h3>
</div>
<div>
<h3 className="text-1xl">{resource.updated}</h3>
@@ -48,7 +47,7 @@ const ResourcesInfo = ({ resources }) => {
<div>
<h3 className="text-1xl">
<a className="text-yellow-600" href={`/dataset/${resource.path}`}>
{resource.format} ({filesize(resource.size, { bits: true })})
{resource.format}
</a>
</h3>
</div>

View File

@@ -22,7 +22,7 @@ const Nav = ({ logo, navMenu }) => {
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<img src={logo} alt="portal logo" width="40" />
<Link href="/"><img src={logo} alt="portal logo" width="40" /></Link>
</div>
<div className="block lg:hidden mx-4">
<button