require('./App.css'); const React = require('react'); const DirectoryListing = require('./DirectoryListing'); class App extends React.Component { static defaultProps = { availableVersions: [] }; handleChange = event => { window.location.href = window.location.href.replace( '@' + this.props.packageVersion, '@' + event.target.value ); }; render() { return ( <div className="app"> <header className="app-header"> <h1> Index of /{this.props.packageName}@{this.props.packageVersion} {this.props.filename} </h1> <div className="app-version-selector"> Version:{' '} <select id="version" defaultValue={this.props.packageVersion} onChange={this.handleChange} > {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 className="app-address"> {this.props.packageName}@{this.props.packageVersion} </address> </div> ); } } if (process.env.NODE_ENV === 'development') { const PropTypes = require('prop-types'); const entryType = PropTypes.object; App.propTypes = { packageName: PropTypes.string.isRequired, packageVersion: PropTypes.string.isRequired, availableVersions: PropTypes.arrayOf(PropTypes.string), filename: PropTypes.string.isRequired, entry: entryType.isRequired, entries: PropTypes.objectOf(entryType).isRequired }; } module.exports = App;