refactor: adds no data message in uplinks and dependency components

src/webui/components/Dependencies/index.js

@@ -10,7 +10,9 @@ import { withRouter } from 'react-router-dom';
 import CardContent from '@material-ui/core/CardContent/index';
 
 import { DetailContextConsumer } from '../../pages/version';
+
 import { Content, CardWrap, Heading, Tags, Tag } from './styles';
+import NoItems from '../NoItems';
 
 class DepDetail extends Component<any, any> {
   constructor(props: any) {
@@ -41,13 +43,6 @@ class DepDetail extends Component<any, any> {
 const WrappDepDetail = withRouter(DepDetail);
 
 class DependencyBlock extends Component<any, any> {
-  renderTags = (deps: any, enableLoading: any) =>
-    deps.map(dep => {
-      const [name, version] = dep;
-
-      return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
-    });
-
   render() {
     const { dependencies, title } = this.props;
     const deps = Object.entries(dependencies);
@@ -59,7 +54,7 @@ class DependencyBlock extends Component<any, any> {
           return (
             <CardWrap>
               <CardContent>
-                <Heading variant={'subheading'}>{title}</Heading>
+                <Heading variant={'subheading'}>{`${title} (${deps.length})`}</Heading>
                 <Tags>{this.renderTags(deps, enableLoading)}</Tags>
               </CardContent>
             </CardWrap>
@@ -68,6 +63,13 @@ class DependencyBlock extends Component<any, any> {
       </DetailContextConsumer>
     );
   }
+
+  renderTags = (deps: any, enableLoading: any) =>
+    deps.map(dep => {
+      const [name, version] = dep;
+
+      return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
+    });
 }
 
 class Dependencies extends Component<any, any> {
@@ -88,15 +90,22 @@ class Dependencies extends Component<any, any> {
   // $FlowFixMe
   renderDependencies({ packageMeta }) {
     const { latest } = packageMeta;
-    const { dependencies, devDependencies, peerDependencies } = latest;
+    const { dependencies, devDependencies, peerDependencies, name } = latest;
 
+    if (dependencies || devDependencies || peerDependencies) {
+      return (
+        <Content>
+          <Fragment>
+            {dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
+            {devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
+            {peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
+          </Fragment>
+        </Content>
+      );
+    }
     return (
       <Content>
-        <Fragment>
-          {dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
-          {devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
-          {peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
-        </Fragment>
+        <NoItems text={`${name} has no dependencies.`} />
       </Content>
     );
   }

src/webui/components/Engines/index.js

@@ -63,19 +63,18 @@ class Engine extends Component {
     );
   }
 
-  renderListItems = (text, value) => {
+  renderListItems = (heading, text) => {
     return (
-      <List subheader={<Heading variant={"subheading"}>{value}</Heading>}>
+      <List subheader={<Heading variant={"subheading"}>{text}</Heading>}>
         <ListItem>
           <Avatar>
-            { ICONS[value] }
+            { ICONS[text] }
           </Avatar>
-          <ListItemText primary={text} />
+          <ListItemText primary={heading} />
         </ListItem>
       </List>
     );
   }
 }
 
-
 export default Engine;

src/webui/components/NoItems/index.js

@@ -4,13 +4,14 @@
  */
 
 import React from 'react';
+import Typography from '@material-ui/core/Typography/index';
+
 import { IProps } from './types';
-import { Wrapper } from './styles';
 
 const NoItems = ({ text }: IProps) => (
-  <Wrapper>
-    <h2>{text}</h2>
-  </Wrapper>
+  <Typography gutterBottom={true} variant={'subtitle1'}>
+    {text}
+  </Typography>
 );
 
 export default NoItems;

src/webui/components/NoItems/styles.js

@@ -1,12 +0,0 @@
-/**
- * @prettier
- * @flow
- */
-
-import styled from 'react-emotion';
-
-export const Wrapper = styled.div`
-  && {
-    margin: 5em 0;
-  }
-`;

src/webui/components/UpLinks/index.js

@@ -1,13 +1,15 @@
 /**
  * @prettier
  */
-
-import { DetailContextConsumer } from '../../pages/version/index';
-import { formatDateDistance } from '../../utils/package';
-import { Heading, Spacer, ListItemText } from './styles';
+import React from 'react';
 import List from '@material-ui/core/List/index';
 import ListItem from '@material-ui/core/ListItem/index';
-import React from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import NoItems from '../NoItems';
+import { formatDateDistance } from '../../utils/package';
+
+import { Heading, Spacer, ListItemText } from './styles';
 
 class UpLinks extends React.PureComponent<any> {
   render() {
@@ -15,7 +17,7 @@ class UpLinks extends React.PureComponent<any> {
       // $FlowFixMe
       <DetailContextConsumer>
         {({ packageMeta }) => {
-          return this.renderContent(packageMeta._uplinks);
+          return this.renderContent(packageMeta._uplinks, packageMeta.latest);
         }}
       </DetailContextConsumer>
     );
@@ -35,15 +37,19 @@ class UpLinks extends React.PureComponent<any> {
     </List>
   );
 
-  renderContent(uplinks) {
-    return (
-      uplinks && (
-        <>
-          <Heading variant={'subheading'}>{'Uplinks'}</Heading>
-          {this.renderUpLinksList(uplinks)}
-        </>
-      )
-    );
+  renderContent(uplinks, { name }) {
+    console.log(uplinks);
+    if (Object.keys(uplinks).length > 0) {
+      return (
+        uplinks && (
+          <>
+            <Heading variant={'subheading'}>{'Uplinks'}</Heading>
+            {this.renderUpLinksList(uplinks)}
+          </>
+        )
+      );
+    }
+    return <NoItems text={`${name} has no uplinks.`} />;
   }
 }