From e9168a8a30fa4732e4a839e68608f944787836af Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@eversports.com>
Date: Sun, 20 Jan 2019 12:02:02 +0100
Subject: [PATCH] refactor: added new style

---
 src/webui/components/Versions/index.js  | 62 +++++++++++++++----------
 src/webui/components/Versions/styles.js | 23 +++++++++
 2 files changed, 60 insertions(+), 25 deletions(-)
 create mode 100644 src/webui/components/Versions/styles.js

diff --git a/src/webui/components/Versions/index.js b/src/webui/components/Versions/index.js
index e6517b43a..bea3ae6c4 100644
--- a/src/webui/components/Versions/index.js
+++ b/src/webui/components/Versions/index.js
@@ -3,37 +3,49 @@
  * @flow
  */
 
-import React from 'react';
-import List from '@material-ui/core/List/index';
-import ListItem from '@material-ui/core/ListItem/index';
-
 import { DetailContextConsumer } from '../../pages/version/index';
+import { formatDateDistance } from '../../utils/package';
+import { Heading, Spacer, ListItemText } from './styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import React from 'react';
 
-class Versions extends React.Component<any, any> {
+class Versions extends React.PureComponent {
   render() {
-    return (
-      // $FlowFixMe
-      <DetailContextConsumer>
-        {({ packageMeta }) => {
-          const { versions } = packageMeta;
-          if (versions) {
-            return this.renderVersions(versions);
-          }
-        }}
-      </DetailContextConsumer>
-    );
+    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
   }
 
+  renderPackageList = (packages: object, isVersion: boolean = false) => (
+    <List>
+      {Object.keys(packages)
+        .reverse()
+        .map(version => (
+          <ListItem key={version}>
+            <ListItemText>{version}</ListItemText>
+            <Spacer />
+            <ListItemText>{isVersion ? `${formatDateDistance('2017-10-26T09:03:15.044Z')} ago` : packages[version]}</ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+
   // $FlowFixMe
-  renderVersions(versions) {
-    return (
-      <List>
-        {Object.keys(versions).map(version => (
-          <ListItem key={version}>{versions[version].name}</ListItem>
-        ))}
-      </List>
-    );
-  }
+  renderContent = (distTags, versions) => (
+    <>
+      {distTags && (
+        <>
+          <Heading variant={'subheading'}>{'Current Tags'}</Heading>
+          {this.renderPackageList(distTags)}
+        </>
+      )}
+      {versions && (
+        <>
+          <Heading variant={'subheading'}>{'Version History'}</Heading>
+          {this.renderPackageList(versions, true)}
+        </>
+      )}
+    </>
+  );
 }
 
 export default Versions;
diff --git a/src/webui/components/Versions/styles.js b/src/webui/components/Versions/styles.js
new file mode 100644
index 000000000..8a2655ca9
--- /dev/null
+++ b/src/webui/components/Versions/styles.js
@@ -0,0 +1,23 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
+export const Heading = styled(Typography)`
+  font-weight: 700;
+`;
+
+export const Spacer = styled('div')`
+    flex: 1 1 auto;
+    border-bottom: 1px dotted rgba(0, 0, 0, .2);
+    white-space: nowrap;
+    height: 0.5em;
+`;
+
+export const ListItemText = styled(MuiListItemText)`
+    && {
+      flex: none;
+      color: black;
+      opacity: .6;
+    }
+`;
+