Minor tweaks to client code

modules/client/autoIndex.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './autoIndex/App';
+import App from './autoIndex/App.js';
 
 const props = window.__DATA__ || {};
 

modules/client/autoIndex/App.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Global, css, jsx } from '@emotion/core';
 
-import DirectoryListing from './DirectoryListing';
+import DirectoryListing from './DirectoryListing.js';
 
 const globalStyles = css`
   body {
@@ -16,69 +15,66 @@ const globalStyles = css`
   }
 `;
 
-export default class App extends React.Component {
-  static defaultProps = {
-    availableVersions: []
-  };
-
-  handleChange = event => {
+export default function App({
+  packageName,
+  packageVersion,
+  availableVersions = [],
+  filename,
+  entry,
+  entries
+}) {
+  function handleChange(event) {
     window.location.href = window.location.href.replace(
-      '@' + this.props.packageVersion,
+      '@' + packageVersion,
       '@' + event.target.value
     );
-  };
-
-  render() {
-    return (
-      <div css={{ maxWidth: 900, margin: '0 auto' }}>
-        <Global styles={globalStyles} />
-
-        <header
-          css={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between'
-          }}
-        >
-          <h1>
-            Index of /{this.props.packageName}@{this.props.packageVersion}
-            {this.props.filename}
-          </h1>
-
-          <div css={{ float: 'right', lineHeight: '2.25em' }}>
-            Version:{' '}
-            <select
-              id="version"
-              defaultValue={this.props.packageVersion}
-              onChange={this.handleChange}
-              css={{ fontSize: '1em' }}
-            >
-              {this.props.availableVersions.map(v => (
-                <option key={v} value={v}>
-                  {v}
-                </option>
-              ))}
-            </select>
-          </div>
-        </header>
-
-        <hr />
-
-        <DirectoryListing
-          filename={this.props.filename}
-          entry={this.props.entry}
-          entries={this.props.entries}
-        />
-
-        <hr />
-
-        <address css={{ textAlign: 'right' }}>
-          {this.props.packageName}@{this.props.packageVersion}
-        </address>
-      </div>
-    );
   }
+
+  return (
+    <div css={{ maxWidth: 900, margin: '0 auto' }}>
+      <Global styles={globalStyles} />
+
+      <header
+        css={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        }}
+      >
+        <h1>
+          Index of /{packageName}@{packageVersion}
+          {filename}
+        </h1>
+
+        <div css={{ float: 'right', lineHeight: '2.25em' }}>
+          Version:{' '}
+          <select
+            id="version"
+            defaultValue={packageVersion}
+            onChange={handleChange}
+            css={{ fontSize: '1em' }}
+          >
+            {availableVersions.map(v => (
+              <option key={v} value={v}>
+                {v}
+              </option>
+            ))}
+          </select>
+        </div>
+      </header>
+
+      <hr />
+
+      <DirectoryListing filename={filename} entry={entry} entries={entries} />
+
+      <hr />
+
+      <address css={{ textAlign: 'right' }}>
+        {packageName}@{packageVersion}
+      </address>
+    </div>
+  );
 }
 
 if (process.env.NODE_ENV !== 'production') {

modules/client/main.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import App from './main/App';
+import App from './main/App.js';
 
 ReactDOM.render(<App />, document.getElementById('root'));

modules/client/main/App.js

@@ -6,8 +6,8 @@ import formatBytes from 'pretty-bytes';
 import formatDate from 'date-fns/format';
 import parseDate from 'date-fns/parse';
 
-import formatNumber from '../utils/formatNumber';
-import formatPercent from '../utils/formatPercent';
+import formatNumber from '../utils/formatNumber.js';
+import formatPercent from '../utils/formatPercent.js';
 
 import cloudflareLogo from './CloudflareLogo.png';
 import angularLogo from './AngularLogo.png';