chore: sync with 4.x webui

src/components/PackageList/index.js

@@ -1,9 +1,11 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
+import Divider from '@material-ui/core/Divider';
+
 import Package from '../Package';
 import Help from '../Help';
-import { formatAuthor, formatLicense } from '../../utils/package';
+import { formatLicense } from '../../utils/package';
 
 import classes from './packageList.scss';
 
@@ -12,28 +14,6 @@ export default class PackageList extends React.Component {
     packages: PropTypes.array,
   };
 
-  renderPackages = () => {
-    return (
-      <Fragment>
-        {this.renderList()}
-      </Fragment>
-    );
-  }
-
-  renderList = () => {
-    const { packages } = this.props;
-    return (
-      packages.map((pkg, i) => {
-        const { name, version, description, time, keywords } = pkg;
-        const author = formatAuthor(pkg.author);
-        const license = formatLicense(pkg.license);
-        return (
-          <Package key={i} {...{ name, version, author, description, license, time, keywords }} />
-        );
-      })
-    );
-  }
-
   render() {
     return (
       <div className={"package-list-items"}>
@@ -46,7 +26,32 @@ export default class PackageList extends React.Component {
 
   hasPackages() {
     const {packages} = this.props;
-
     return packages.length > 0;
   }
+
+  renderPackages = () => {
+    return (
+      <Fragment>
+        {this.renderList()}
+      </Fragment>
+    );
+  }
+
+  renderList = () => {
+    const { packages } = this.props;
+    return (
+      packages.map((pkg, i) => {
+        const { name, version, description, time, keywords, dist, homepage, bugs } = pkg;
+        const author = pkg.author;
+        // TODO: move format license to API side.
+        const license = formatLicense(pkg.license);
+        return (
+          <React.Fragment key={i}>
+            {i !== 0 && <Divider></Divider>}
+            <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
+          </React.Fragment>
+        );
+      })
+    );
+  }
 }