From 5573ff5acd5ea724b653ede479b980e7207e3cd2 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@eversports.com>
Date: Mon, 14 Jan 2019 22:31:49 +0100
Subject: [PATCH] feat: added versions. wip

---
 src/webui/components/DetailContainer/index.js |  9 +++--
 src/webui/components/Versions/index.js        | 38 +++++++++++++++++++
 src/webui/components/Versions/types.js        |  6 +++
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 src/webui/components/Versions/index.js
 create mode 100644 src/webui/components/Versions/types.js

diff --git a/src/webui/components/DetailContainer/index.js b/src/webui/components/DetailContainer/index.js
index 8b87c39ae..f6d331706 100644
--- a/src/webui/components/DetailContainer/index.js
+++ b/src/webui/components/DetailContainer/index.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 import Readme from '../Readme';
+import Versions from '../Versions';
 import { preventXSS } from '../../utils/sec-utils';
 import Tabs from '@material-ui/core/Tabs/index';
 import Tab from '@material-ui/core/Tab/index';
@@ -43,7 +44,7 @@ class DetailContainer extends Component<any, any> {
         <Content>
           {tabPosition === 0 && this.renderReadme(readMe)}
           {tabPosition === 1 && this.renderDependencies()}
-          {tabPosition === 2 && this.renderReadme(readMe)}
+          {tabPosition === 2 && this.renderVersions()}
           {tabPosition === 3 && this.renderReadme(readMe)}
         </Content>
       </React.Fragment>
@@ -56,9 +57,9 @@ class DetailContainer extends Component<any, any> {
     return <Readme description={encodedReadme} />;
   };
 
-  renderDependencies = () => {
-    return <Dependencies />;
-  };
+  renderVersions = () => <Versions />;
+
+  renderDependencies = () => <Dependencies />;
 
   handleChange = (event: any, tabPosition: number) => {
     event.preventDefault();
diff --git a/src/webui/components/Versions/index.js b/src/webui/components/Versions/index.js
new file mode 100644
index 000000000..2bfd47d41
--- /dev/null
+++ b/src/webui/components/Versions/index.js
@@ -0,0 +1,38 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+
+class Versions extends React.PureComponent {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          const { versions } = packageMeta;
+          if (versions) {
+            return this.renderVersions(versions);
+          }
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  // $FlowFixMe
+  renderVersions(versions) {
+    return (
+      <List>
+        {Object.keys(versions).map(version => (
+          <ListItem key={version}>{versions[version].name}</ListItem>
+        ))}
+      </List>
+    );
+  }
+}
+
+export default Versions;
diff --git a/src/webui/components/Versions/types.js b/src/webui/components/Versions/types.js
new file mode 100644
index 000000000..2c6bf3ee3
--- /dev/null
+++ b/src/webui/components/Versions/types.js
@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {}