import React, { Component, PropTypes } from "react"; import { Link} from "react-router"; import CSSModules from "react-css-modules"; import { defineMessages, FormattedMessage } from "react-intl"; import FontAwesome from "react-fontawesome"; import Immutable from "immutable"; import Fuse from "fuse.js"; import DismissibleAlert from "./elements/DismissibleAlert"; 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))); class SongsTableRowCSS extends Component { render () { const length = formatLength(this.props.song.get("time")); const linkToArtist = "/artist/" + this.props.song.getIn(["artist", "id"]); const linkToAlbum = "/album/" + this.props.song.getIn(["album", "id"]); return ( {this.props.song.get("name")} {this.props.song.getIn(["artist", "name"])} {this.props.song.getIn(["album", "name"])} {this.props.song.get("genre")} {length} ); } } SongsTableRowCSS.propTypes = { song: PropTypes.instanceOf(Immutable.Map).isRequired }; export let SongsTableRow = CSSModules(SongsTableRowCSS, css); class SongsTableCSS extends Component { render () { let displayedSongs = this.props.songs; if (this.props.filterText) { // Use Fuse for the filter displayedSongs = new Fuse( this.props.songs.toArray(), { "keys": ["name"], "threshold": 0.4, "include": ["score"] }).search(this.props.filterText); // Keep only items in results displayedSongs = displayedSongs.map(function (item) { return item.item; }); } let rows = []; displayedSongs.forEach(function (song) { rows.push(); }); let loading = null; if (rows.length == 0 && this.props.isFetching) { // If we are fetching and there is nothing to show loading = (

); } return (
{rows}
{loading}
); } } SongsTableCSS.propTypes = { songs: PropTypes.instanceOf(Immutable.List).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 () { let error = null; if (this.props.error) { error = (); } return (
{ error }
); } } FilterablePaginatedSongsTable.propTypes = { isFetching: PropTypes.bool.isRequired, error: PropTypes.string, songs: PropTypes.instanceOf(Immutable.List).isRequired, pagination: PropTypes.object.isRequired };