import React, { Component, PropTypes } from "react"; import { Link} from "react-router"; import CSSModules from "react-css-modules"; import { defineMessages, FormattedMessage } from "react-intl"; import Fuse from "fuse.js"; import FilterBar from "./elements/FilterBar"; import Pagination from "./elements/Pagination"; import { formatLength, messagesMap } from "../utils"; import commonMessages from "../locales/messagesDescriptors/common"; import messages from "../locales/messagesDescriptors/Songs"; import css from "../styles/Songs.scss"; const songsMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages))); 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 }; class SongsTableCSS 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}
); } } SongsTableCSS.propTypes = { songs: PropTypes.array.isRequired, filterText: PropTypes.string }; export let SongsTable = CSSModules(SongsTableCSS, css); 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 };