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] 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;