fix: PackageList component is converted to functional (#219) #116

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>
+  );
+};

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', () => {

src/components/PackageList/index.ts

@@ -1 +1 @@
-export { default } from './PackageList';
+export { PackageList } from './PackageList';

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 {