From eb8ef781b8b52a8b6ba95b238d2437a3bc925584 Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sun, 20 Jan 2019 11:04:37 +0100
Subject: [PATCH 1/2] chore: clean up component

---
 src/webui/components/DetailSidebar/index.js | 70 ++++++++-------------
 src/webui/components/Install/index.js       | 48 ++++++++++++++
 2 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 src/webui/components/Install/index.js

diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js
index ad63dbfa9..70997edcf 100644
--- a/src/webui/components/DetailSidebar/index.js
+++ b/src/webui/components/DetailSidebar/index.js
@@ -1,19 +1,11 @@
-/* eslint react/jsx-max-depth: 0 */
-
 import React, {Component} from 'react';
 
 import { DetailContextConsumer } from '../../pages/version/index';
-// import Paper from '@material-ui/core/Paper/index';
 import Typography from '@material-ui/core/Typography/index';
 import Grid from '@material-ui/core/Grid/index';
-// import CardHeader from '@material-ui/core/CardHeader';
-import Card from '@material-ui/core/Card/index';
-import CardContent from '@material-ui/core/CardContent/index';
+
+import Install from '../Install';
 import { Content } from './styles';
-import CopyToClipBoard from '../CopyToClipBoard';
-import Button from '@material-ui/core/Button';
-import CardActions from '@material-ui/core/CardActions';
-// import Paper from '@material-ui/core/Paper/index';
 
 class DetailSidebar extends Component<any, any> {
   render() {
@@ -28,46 +20,34 @@ class DetailSidebar extends Component<any, any> {
 
   renderSideBar = ({packageMeta, packageName}) => {
     return (
-      <React.Fragment>
-        {this.renderDescription(packageMeta, packageName)}
-        <Content>
-          <Grid container={true} spacing={24}>
-            <Grid item={true} xs={12}>
-              <Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
-                {packageName}
-              </Typography>
-              <Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
-                {packageMeta.latest.description}
-              </Typography>
-            </Grid>
-            <Grid item={true} xs={12}>
-              <Card>
-                <CardContent>
-                  <CopyToClipBoard text={`npm install ${packageName}`} />
-                  <CopyToClipBoard text={`pnpm install ${packageName}`} />
-                  <CopyToClipBoard text={`yarn add ${packageName}`} />
-                  <CardActions>
-                    <Button color={"primary"} size={'small'} variant={"contained"}>
-                      {'Download Tarball'}
-                    </Button>
-                  </CardActions>
-                </CardContent>
-              </Card>
-            </Grid>
+      <Content>
+        <Grid container={true} spacing={24}>
+          <Grid item={true} xs={12}>
+            {this.renderTitle(packageName, packageMeta)}
           </Grid>
-        </Content>
-      </React.Fragment>
+          <Grid item={true} xs={12}>
+            {this.renderCopyCLI()}
+          </Grid>
+        </Grid>
+      </Content>
     );
   }
 
-  renderDescription = (packageMeta) => {
-    console.log('packageMeta', packageMeta);
+  renderTitle = (packageName, packageMeta) => {
+      return (
+        <React.Fragment>
+          <Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
+            {packageName}
+          </Typography>
+          <Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
+            {packageMeta.latest.description}
+          </Typography>
+        </React.Fragment>
+      );
+  }
 
-    return (
-      <React.Fragment>
-
-      </React.Fragment>
-    );
+  renderCopyCLI = () => {
+    return <Install />;
   }
 }
 
diff --git a/src/webui/components/Install/index.js b/src/webui/components/Install/index.js
new file mode 100644
index 000000000..631932e34
--- /dev/null
+++ b/src/webui/components/Install/index.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import CopyToClipBoard from '../CopyToClipBoard';
+import Button from '@material-ui/core/Button';
+import CardActions from '@material-ui/core/CardActions';
+
+class Install extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderCopyCLI(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderCopyCLI = ({packageName}) => {
+    return (
+      <Card>
+        <CardContent>
+          <CopyToClipBoard text={`npm install ${packageName}`} />
+          <CopyToClipBoard text={`pnpm install ${packageName}`} />
+          <CopyToClipBoard text={`yarn add ${packageName}`} />
+          <CardActions>
+            {this.renderDownloadButton()}
+          </CardActions>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  renderDownloadButton = () => {
+    return (
+      <CardActions>
+        <Button color={"primary"} size={'small'} variant={"contained"}>
+          {'Download Tarball'}
+        </Button>
+      </CardActions>
+    );
+  }
+}
+
+
+export default Install;

From 2929e371b95fd5ef3349c6d5bc829019a0aca644 Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sun, 20 Jan 2019 15:17:54 +0100
Subject: [PATCH 2/2] chore: add repository,  license and author

---
 src/webui/components/Author/index.js        | 54 +++++++++++++++++
 src/webui/components/DetailSidebar/index.js | 36 +++++++++++-
 src/webui/components/License/index.js       | 51 ++++++++++++++++
 src/webui/components/Repository/index.js    | 64 +++++++++++++++++++++
 src/webui/components/Repository/styles.js   | 13 +++++
 src/webui/components/Versions/index.js      | 21 ++++---
 src/webui/icons/GitHub.js                   | 16 ++++++
 src/webui/pages/version/index.js            |  1 -
 8 files changed, 247 insertions(+), 9 deletions(-)
 create mode 100644 src/webui/components/Author/index.js
 create mode 100644 src/webui/components/License/index.js
 create mode 100644 src/webui/components/Repository/index.js
 create mode 100644 src/webui/components/Repository/styles.js
 create mode 100644 src/webui/icons/GitHub.js

diff --git a/src/webui/components/Author/index.js b/src/webui/components/Author/index.js
new file mode 100644
index 000000000..7f1c30b89
--- /dev/null
+++ b/src/webui/components/Author/index.js
@@ -0,0 +1,54 @@
+/* eslint no-unused-vars: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import CopyToClipBoard from '../CopyToClipBoard';
+import CardHeader from '@material-ui/core/CardHeader/index';
+import Avatar from '@material-ui/core/Avatar';
+import CardActions from '@material-ui/core/CardActions';
+import Typography from "@material-ui/core/Typography/index";
+
+class Authors extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { author } = packageMeta.latest;
+    
+    if (!author) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent>
+          {this.renderAvatar(author)}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  renderAvatar = ({name, email, url, avatar}) => {
+    return (
+      <Fragment>
+        <Avatar aria-label={name} src={avatar} />
+        <Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
+          {name}
+        </Typography>
+      </Fragment>
+    );
+  }
+}
+
+
+export default Authors;
diff --git a/src/webui/components/DetailSidebar/index.js b/src/webui/components/DetailSidebar/index.js
index 70997edcf..86a78e357 100644
--- a/src/webui/components/DetailSidebar/index.js
+++ b/src/webui/components/DetailSidebar/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 import Typography from '@material-ui/core/Typography/index';
@@ -6,6 +6,9 @@ import Grid from '@material-ui/core/Grid/index';
 
 import Install from '../Install';
 import { Content } from './styles';
+import Authors from '../Author';
+import License from '../License';
+import Repository from '../Repository';
 
 class DetailSidebar extends Component<any, any> {
   render() {
@@ -28,6 +31,12 @@ class DetailSidebar extends Component<any, any> {
           <Grid item={true} xs={12}>
             {this.renderCopyCLI()}
           </Grid>
+          <Grid item={true} xs={12}>
+            {this.renderSecondLevel(8)}
+          </Grid>
+          <Grid item={true} xs={12}>
+            {this.renderRepository()}
+          </Grid>
         </Grid>
       </Content>
     );
@@ -49,6 +58,31 @@ class DetailSidebar extends Component<any, any> {
   renderCopyCLI = () => {
     return <Install />;
   }
+  
+  renderSecondLevel = (spacing = 24) => {
+    return (
+      <Grid container={true} spacing={spacing}>
+        {this.renderAuthor()}
+      </Grid>
+    );
+  }
+
+  renderRepository = () => {
+    return <Repository />;
+  }
+
+  renderAuthor = () => {
+    return (
+      <Fragment>
+        <Grid item={true} xs={6}>
+          <Authors />
+        </Grid>
+        <Grid item={true} xs={6}>
+          <License />
+        </Grid>
+      </Fragment>
+    );
+  }
 }
 
 
diff --git a/src/webui/components/License/index.js b/src/webui/components/License/index.js
new file mode 100644
index 000000000..f7c3c4c5f
--- /dev/null
+++ b/src/webui/components/License/index.js
@@ -0,0 +1,51 @@
+/* eslint no-unused-vars: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Avatar from '@material-ui/core/Avatar';
+import Notes from '@material-ui/icons/Notes';
+import Typography from "@material-ui/core/Typography/index";
+
+class License extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { license } = packageMeta.latest;
+    if (!license) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent style={{ textAling: 'center'}}>
+          {this.renderLicense(license)}
+        </CardContent> 
+      </Card>
+    );
+  }
+
+  renderLicense = (license) => {
+    return (
+      <Fragment>
+        <Notes style={{ fontSize: 38 }} />
+        <Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
+          {license}
+        </Typography>
+      </Fragment>
+    );
+  }
+}
+
+
+export default License;
diff --git a/src/webui/components/Repository/index.js b/src/webui/components/Repository/index.js
new file mode 100644
index 000000000..ded02165f
--- /dev/null
+++ b/src/webui/components/Repository/index.js
@@ -0,0 +1,64 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/jsx-max-depth: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Grid from '@material-ui/core/Grid/index';
+import GitHub from '../../icons/GitHub';
+import CopyToClipBoard from '../CopyToClipBoard';
+import BugReport from '@material-ui/icons/BugReport';
+import CardActions from '@material-ui/core/CardActions/index';
+import Button from '@material-ui/core/Button';
+import {GridRepo} from './styles';
+
+class Repository extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { repository, bugs } = packageMeta.latest;
+    if (!repository) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent style={{ textAling: 'center'}}>
+          <GridRepo container={true} spacing={24}>
+            {this.renderRepository(repository, bugs)}
+          </GridRepo>
+        </CardContent>
+        <CardActions>
+          <Button size={"small"}>{'Open Bugs'}</Button>
+          <Button size={"small"}>{'Open Repository'}</Button>
+        </CardActions>
+      </Card>
+    );
+  }
+
+  renderRepository = ({url, type}, bugs) => {
+    return (
+      <Fragment>
+        <Grid item={true} xs={3}>
+          <GitHub style={{ fontSize: 45 }} />
+        </Grid>
+        <Grid item={true} xs={9}>
+          <CopyToClipBoard text={url} />
+        </Grid>
+      </Fragment>
+    );
+  }
+}
+
+
+export default Repository;
diff --git a/src/webui/components/Repository/styles.js b/src/webui/components/Repository/styles.js
new file mode 100644
index 000000000..8533347d5
--- /dev/null
+++ b/src/webui/components/Repository/styles.js
@@ -0,0 +1,13 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Grid from '@material-ui/core/Grid/index';
+
+export const GridRepo = styled(Grid)`
+  && {
+    align-items: center;
+  }
+`;
diff --git a/src/webui/components/Versions/index.js b/src/webui/components/Versions/index.js
index bea3ae6c4..ca8e004cc 100644
--- a/src/webui/components/Versions/index.js
+++ b/src/webui/components/Versions/index.js
@@ -6,16 +6,24 @@
 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 List from '@material-ui/core/List/index';
+import ListItem from '@material-ui/core/ListItem/index';
 import React from 'react';
+import { DIST_TAGS } from '../../../lib/constants';
 
-class Versions extends React.PureComponent {
+class Versions extends React.PureComponent<any> {
   render() {
-    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
+    return (
+      // $FlowFixMe
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          return this.renderContent(packageMeta[DIST_TAGS], packageMeta.versions);
+        }}
+      </DetailContextConsumer>
+    );
   }
 
-  renderPackageList = (packages: object, isVersion: boolean = false) => (
+  renderPackageList = (packages: any, isVersion: boolean = false) => (
     <List>
       {Object.keys(packages)
         .reverse()
@@ -29,8 +37,7 @@ class Versions extends React.PureComponent {
     </List>
   );
 
-  // $FlowFixMe
-  renderContent = (distTags, versions) => (
+  renderContent = (distTags: any, versions: any) => (
     <>
       {distTags && (
         <>
diff --git a/src/webui/icons/GitHub.js b/src/webui/icons/GitHub.js
new file mode 100644
index 000000000..264784f1c
--- /dev/null
+++ b/src/webui/icons/GitHub.js
@@ -0,0 +1,16 @@
+// @flow
+/* eslint-disable max-len */
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon/index';
+
+function GitHub(props: Object) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
+    </SvgIcon>
+  );
+}
+
+export default GitHub;
diff --git a/src/webui/pages/version/index.js b/src/webui/pages/version/index.js
index c918c60e5..655e17021 100644
--- a/src/webui/pages/version/index.js
+++ b/src/webui/pages/version/index.js
@@ -110,7 +110,6 @@ class VersionPage extends Component<any, any> {
 
   render() {
     const { isLoading, packageMeta, readMe, packageName } = this.state;
-    console.log('render', packageName, isLoading);
 
     if (isLoading === false) {
       return (