[Key info component][s]: bug fixes and improvements to follow official frictionless spec.

package.json

@@ -22,7 +22,8 @@
     "postcss": "^8.1.10",
     "react-plotly.js": "^2.5.1",
     "react-scripts": "3.4.3",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^2.0.2",
+    "timeago.js": "^4.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.1",

src/components/dataset/KeyInfo.js

@@ -1,20 +1,11 @@
 import React from 'react';
 import filesize from 'filesize'
+import * as timeago from 'timeago.js';
 import PropTypes from 'prop-types';
 
 /**
- * KeyInfo component receives two arguments. 
+ * KeyInfo component receives two arguments.
- * @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields:
+ * @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields
- * {
- *  title: "Title of the data package",
- *  length: "The number of resources present in the data package"
- *  datasetSize: The combined size of the data package resources
- *  format: The format of resources in the dataset. e.g csv, json, excel
- *  created: The date the dataset was created
- *  updated: The date the dataset was last updated
- *  licence: The licence of the dataset
- *  sources: An array of the data set sources
- * }
  * @param {Array} resources A Frictionless datapackage resource array
  * @returns React Component
  */
@@ -28,13 +19,12 @@ const KeyInfo = ({ descriptor, resources }) => {
             })
     }
 
+    const formats = resources.map(item => item.format).join(', ');
+
     return (
         <>
-            <section className="m-8" name="key-info" id="key-info">
+            <section className="mt-8 mb-8" name="key-info" id="key-info">
-                <h1 data-testid="datasetTitle" className="text-3xl font-bold mb-8">
+                <h2 className="text-xl font-bold mb-4">Key info</h2>
-                    {descriptor.title}
-                </h1>
-                <h1 className="text-2xl font-bold mb-4">Key info</h1>
                 <div className="grid grid-cols-7 gap-4">
                     <div>
                         <h3 className="text-1xl font-bold mb-2">Files</h3>
@@ -52,10 +42,10 @@ const KeyInfo = ({ descriptor, resources }) => {
                         <h3 className="text-1xl font-bold mb-2">Updated</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl font-bold mb-2">Licence</h3>
+                        <h3 className="text-1xl font-bold mb-2">Licenses</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl font-bold mb-2">Source</h3>
+                        <h3 className="text-1xl font-bold mb-2">Sources</h3>
                     </div>
                 </div>
                 <div className="grid grid-cols-7 gap-4">
@@ -63,27 +53,36 @@ const KeyInfo = ({ descriptor, resources }) => {
                         <h3 className="text-1xl">{resources.length}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{datasetSize && filesize(datasetSize, { bits: true })}</h3>
+                        <h3 className="text-1xl">{datasetSize}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{resources[0]["format"]} zip</h3>
+                        <h3 className="text-1xl">{formats}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor["created"]}</h3>
+                        <h3 className="text-1xl">{descriptor.created && timeago.format(descriptor.created)}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor["updated"]}</h3>
+                        <h3 className="text-1xl">{descriptor.updated && timeago.format(descriptor.updated)}</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl">{descriptor["license"]}</h3>
+                        <h3 className="text-1xl">{
-                    </div>
+                          descriptor.licenses?.length && (descriptor.licenses.map((item, index) => (
-                    <div>
-                        <h3 className="text-1xl">
                             <a className="text-yellow-600"
-                                href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
+                              href={item.path || '#'} title={item.title || ''}
-                                {descriptor["sources"] && descriptor["sources"][0]["title"]}
+                              key={index}>
+                                {item.name}
                             </a>
-                        </h3>
+                          )))
+                        }</h3>
+                    </div>
+                    <div>
+                        <h3 className="text-1xl">{
+                          descriptor.sources?.length && (descriptor.sources.map((item, index) => (
+                            <a className="text-yellow-600" href={item.path} key={index}>
+                              {item.title}
+                            </a>
+                          )))
+                        }</h3>
                     </div>
                 </div>
             </section>

yarn.lock

@@ -12453,6 +12453,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
+
 timers-browserify@^2.0.4:
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"