// NPM imports import React, { Component, PropTypes } from "react"; import ReactDOM from "react-dom"; import CSSModules from "react-css-modules"; import { defineMessages, FormattedMessage } from "react-intl"; import FontAwesome from "react-fontawesome"; import Immutable from "immutable"; // Local imports import { messagesMap } from "../utils/"; // Other components import { AlbumRow } from "./Album"; import DismissibleAlert from "./elements/DismissibleAlert"; // Translations import commonMessages from "../locales/messagesDescriptors/common"; // Styles import css from "../styles/Artist.scss"; // Define translations const artistMessages = defineMessages(messagesMap(Array.concat([], commonMessages))); /** * Single artist page */ class ArtistCSS extends Component { constructor(props) { super(props); // Set state this.state = { hasScrolled: false, // Not scrolled initially }; } componentDidUpdate() { // After each update, check if we need to scroll to a given element // State prevents scrolling at each and every update if (this.refs.scroll && !this.state.hasScrolled) { console.log("scroll!"); console.log($(ReactDOM.findDOMNode(this.refs.scroll)).offset().top); $("html, body").animate({ scrollTop: $(ReactDOM.findDOMNode(this.refs.scroll)).offset().top }, 600); this.setState({ hasScrolled: true, }); } } render() { // Define loading message let loading = null; if (this.props.isFetching) { loading = (

); } // Handle error let error = null; if (this.props.error) { error = (); } // Build album rows let albumsRows = []; const { albums, songs, playAction, playNextAction, scrollToAlbum } = this.props; if (albums && songs) { albums.forEach(function (album) { // Get songs of this album const albumSongs = album.get("tracks").map( id => songs.get(id) ); // Handle scrolling to a specific album by applying a given ref const ref = (scrollToAlbum == album.get("id")) ? "scroll" : null; albumsRows.push(); }); } return (
{ error }

{this.props.artist.get("name")}


{this.props.artist.get("summary")}

{this.props.artist.get("name")}/

{ albumsRows } { loading }
); } } ArtistCSS.propTypes = { error: PropTypes.string, isFetching: PropTypes.bool.isRequired, playAction: PropTypes.func.isRequired, playNextAction: PropTypes.func.isRequired, artist: PropTypes.instanceOf(Immutable.Map), albums: PropTypes.instanceOf(Immutable.List), songs: PropTypes.instanceOf(Immutable.Map), scrollToAlbum: PropTypes.number, }; export default CSSModules(ArtistCSS, css);