import React, { Component, PropTypes } from "react"; import { Link} from "react-router"; import Fuse from "fuse.js"; import FilterBar from "./elements/FilterBar"; import Pagination from "./elements/Pagination"; import { formatLength} from "../utils"; export class SongsTableRow extends Component { render () { const length = formatLength(this.props.song.length); const linkToArtist = "/artist/" + this.props.song.artist.id; const linkToAlbum = "/album/" + this.props.song.album.id; return ( {this.props.song.name} {this.props.song.artist.name} {this.props.song.album.name} {this.props.song.genre} {length} ); } } SongsTableRow.propTypes = { song: PropTypes.object.isRequired }; export class SongsTable extends Component { render () { var displayedSongs = this.props.songs; if (this.props.filterText) { // Use Fuse for the filter displayedSongs = new Fuse( this.props.songs, { "keys": ["name"], "threshold": 0.4, "include": ["score"] }).search(this.props.filterText); // Keep only items in results displayedSongs = displayedSongs.map(function (item) { return item.item; }); } var rows = []; displayedSongs.forEach(function (song) { rows.push(); }); return (
{rows}
Title Artist Album Genre Length
); } } SongsTable.propTypes = { songs: PropTypes.array.isRequired, filterText: PropTypes.string }; export default class FilterablePaginatedSongsTable extends Component { constructor (props) { super(props); this.state = { filterText: "" }; this.handleUserInput = this.handleUserInput.bind(this); } handleUserInput (filterText) { this.setState({ filterText: filterText.trim() }); } render () { const nPages = Math.ceil(this.props.songsTotalCount / this.props.songsPerPage); return (
); } } FilterablePaginatedSongsTable.propTypes = { songs: PropTypes.array.isRequired, songsTotalCount: PropTypes.number.isRequired, songsPerPage: PropTypes.number.isRequired, currentPage: PropTypes.number.isRequired, location: PropTypes.object.isRequired };