fix: sort app versions in descending order and remove button text und…

…erline (#315) * fix: remove text decoration from download link * fix: sort app versions in descending order
dhis2 · Sep 7, 2021 · 946a795 · 946a795
1 parent 1f8e09a
commit 946a795
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-09-07T11:04:30.998Z\n"
-"PO-Revision-Date: 2021-09-07T11:04:30.998Z\n"
+"POT-Creation-Date: 2021-09-07T11:19:00.521Z\n"
+"PO-Revision-Date: 2021-09-07T11:19:00.521Z\n"
 
 msgid "Version {{version}} installed"
 msgstr "Version {{version}} installed"

diff --git a/src/components/AppDetails/AppDetails.js b/src/components/AppDetails/AppDetails.js
@@ -13,8 +13,9 @@ import { Versions } from './Versions'
 
 const Metadata = ({ installedVersion, versions }) => {
     const relativeTime = datetime => moment(datetime).fromNow()
-    versions = versions.sort((a, b) => a.created - b.created)
     const latestVersion = getLatestVersion(versions)?.version
+    const firstPublishedVersion = versions[versions.length - 1]
+    const lastPublishedVersion = versions[0]
 
     return (
         <ul className={styles.metadataList}>
@@ -29,14 +30,12 @@ const Metadata = ({ installedVersion, versions }) => {
             </li>
             <li className={styles.metadataItem}>
                 {i18n.t('Last updated {{relativeTime}}', {
-                    relativeTime: relativeTime(
-                        versions[versions.length - 1].created
-                    ),
+                    relativeTime: relativeTime(lastPublishedVersion.created),
                 })}
             </li>
             <li className={styles.metadataItem}>
                 {i18n.t('First published {{relativeTime}}', {
-                    relativeTime: relativeTime(versions[0].created),
+                    relativeTime: relativeTime(firstPublishedVersion.created),
                 })}
             </li>
         </ul>
@@ -104,6 +103,7 @@ export const AppDetails = ({
     const screenshots = appHubApp?.images
         .filter(i => !i.logo)
         .map(i => i.imageUrl)
+    const versions = appHubApp?.versions.sort((a, b) => b.created - a.created)
 
     return (
         <Card className={styles.appCard}>
@@ -153,7 +153,7 @@ export const AppDetails = ({
                             </h2>
                             <Metadata
                                 installedVersion={installedApp.version}
-                                versions={appHubApp.versions}
+                                versions={versions}
                             />
                         </div>
                     )}
@@ -181,7 +181,7 @@ export const AppDetails = ({
                         </h2>
                         <Versions
                             installedVersion={installedApp?.version}
-                            versions={appHubApp.versions}
+                            versions={versions}
                             onVersionInstall={onVersionInstall}
                         />
                     </section>

diff --git a/src/components/AppDetails/AppDetails.module.css b/src/components/AppDetails/AppDetails.module.css
@@ -122,3 +122,7 @@
 .installBtn {
     margin-right: var(--spacers-dp8);
 }
+
+.downloadLink {
+    text-decoration: none;
+}
diff --git a/src/components/AppDetails/Versions.js b/src/components/AppDetails/Versions.js
@@ -120,7 +120,11 @@ const VersionsTable = ({ installedVersion, versions, onVersionInstall }) => (
                                 ? i18n.t('Installed')
                                 : i18n.t('Install')}
                         </Button>
-                        <a download href={version.downloadUrl}>
+                        <a
+                            download
+                            href={version.downloadUrl}
+                            className={styles.downloadLink}
+                        >
                             <Button small secondary>
                                 {i18n.t('Download')}
                             </Button>