From f9b9cf3680a32638f2ef69b3dc61b6ad4b5cd9da Mon Sep 17 00:00:00 2001
From: anuveyatsu <anuar.ustayev@gmail.com>
Date: Sat, 14 Aug 2021 20:15:30 +0600
Subject: [PATCH] [Key info component][s]: bug fixes and improvements to follow
 official frictionless spec.

---
 package.json                      |  3 +-
 src/components/dataset/KeyInfo.js | 59 +++++++++++++++----------------
 yarn.lock                         |  5 +++
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 26bb0cbb..c3e5d68f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/dataset/KeyInfo.js b/src/components/dataset/KeyInfo.js
index b00aa36b..147a20d1 100644
--- a/src/components/dataset/KeyInfo.js
+++ b/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. 
- * @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
- * }
+ * KeyInfo component receives two arguments.
+ * @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields
  * @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">
-                <h1 data-testid="datasetTitle" className="text-3xl font-bold mb-8">
-                    {descriptor.title}
-                </h1>
-                <h1 className="text-2xl font-bold mb-4">Key info</h1>
+            <section className="mt-8 mb-8" name="key-info" id="key-info">
+                <h2 className="text-xl font-bold mb-4">Key info</h2>
                 <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>
-                    </div>
-                    <div>
-                        <h3 className="text-1xl">
+                        <h3 className="text-1xl">{
+                          descriptor.licenses?.length && (descriptor.licenses.map((item, index) => (
                             <a className="text-yellow-600"
-                                href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
-                                {descriptor["sources"] && descriptor["sources"][0]["title"]}
+                              href={item.path || '#'} title={item.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>
diff --git a/yarn.lock b/yarn.lock
index c9bae829..fc87cd40 100644
--- a/yarn.lock
+++ b/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"