From ae0222cf650a4bfbc0d610e21c03fb264a2680de Mon Sep 17 00:00:00 2001
From: Alfonso Austin <22054505+agar23@users.noreply.github.com>
Date: Sat, 26 Oct 2019 05:36:16 -0400
Subject: [PATCH] fix: PackageList component is converted to functional (#219)
 #116

---
 src/components/PackageList/PackageList.tsx    | 40 +++++++------------
 .../PackageList/Packagelist.test.tsx          |  2 +-
 src/components/PackageList/index.ts           |  2 +-
 src/pages/home/Home.tsx                       |  2 +-
 4 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/PackageList/PackageList.tsx b/src/components/PackageList/PackageList.tsx
index 597f561..59cda80 100644
--- a/src/components/PackageList/PackageList.tsx
+++ b/src/components/PackageList/PackageList.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactElement } from 'react';
+import * as React from 'react';
 import Divider from '@material-ui/core/Divider';
 
 import Package from '../Package';
@@ -12,36 +12,26 @@ interface Props {
   packages: PackageInterface[];
 }
 
-export default class PackageList extends React.Component<Props, {}> {
-  public render(): ReactElement<HTMLElement> {
-    return (
-      <div className={'package-list-items'}>
-        <div className={classes.pkgContainer}>{this.hasPackages() ? this.renderPackages() : <Help />}</div>
-      </div>
-    );
-  }
-
-  private hasPackages(): boolean {
-    const { packages } = this.props;
-    return packages.length > 0;
-  }
-
-  private renderPackages = () => {
-    return <>{this.renderList()}</>;
-  };
-
-  private renderList = () => {
-    const { packages } = this.props;
-    return packages.map((pkg, i) => {
+export const PackageList: React.FC<Props> = props => {
+  const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
+    return props.packages.map((pkg, i) => {
       const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
       // TODO: move format license to API side.
       const license = formatLicense(pkg.license);
       return (
-        <Fragment key={i}>
+        <React.Fragment key={i}>
           {i !== 0 && <Divider />}
           <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
-        </Fragment>
+        </React.Fragment>
       );
     });
   };
-}
+
+  const hasPackages: () => boolean = () => props.packages.length > 0;
+
+  return (
+    <div className={'package-list-items'}>
+      <div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
+    </div>
+  );
+};
diff --git a/src/components/PackageList/Packagelist.test.tsx b/src/components/PackageList/Packagelist.test.tsx
index b91372e..684c324 100644
--- a/src/components/PackageList/Packagelist.test.tsx
+++ b/src/components/PackageList/Packagelist.test.tsx
@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 import Help from '../Help';
 
-import PackageList from './PackageList';
+import { PackageList } from './PackageList';
 
 describe('<PackageList /> component', () => {
   test('should load the component with no packages', () => {
diff --git a/src/components/PackageList/index.ts b/src/components/PackageList/index.ts
index b2a8ddf..0ff7783 100644
--- a/src/components/PackageList/index.ts
+++ b/src/components/PackageList/index.ts
@@ -1 +1 @@
-export { default } from './PackageList';
+export { PackageList } from './PackageList';
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index dc94812..6f2c72b 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import PackageList from '../../components/PackageList';
+import { PackageList } from '../../components/PackageList';
 import { PackageInterface } from '../../components/Package/Package';
 
 interface Props {