Mapping all remaining views - just modals and components to go
This commit is contained in:
James Barnsley
@ -8,7 +8,7 @@ import PlaylistGrid from '../components/PlaylistGrid';
|
||||
import FollowButton from '../components/Fields/FollowButton';
|
||||
import LazyLoadListener from '../components/LazyLoadListener';
|
||||
import Parallax from '../components/Parallax';
|
||||
import NiceNumber from '../components/NiceNumber';
|
||||
import NiceNumber, { nice_number } from '../components/NiceNumber';
|
||||
import Loader from '../components/Loader';
|
||||
import Icon from '../components/Icon';
|
||||
import * as coreActions from '../services/core/actions';
|
||||
@ -20,12 +20,21 @@ import {
|
||||
sourceIcon,
|
||||
} from '../util/helpers';
|
||||
import { collate } from '../util/format';
|
||||
import { i18n, I18n } from '../locale';
|
||||
|
||||
class User extends React.Component {
|
||||
componentDidMount() {
|
||||
const {
|
||||
uri,
|
||||
coreActions: {
|
||||
loadUser,
|
||||
loadUserPlaylists,
|
||||
},
|
||||
} = this.props;
|
||||
|
||||
this.setWindowTitle();
|
||||
this.props.coreActions.loadUser(this.props.uri);
|
||||
this.props.coreActions.loadUserPlaylists(this.props.uri);
|
||||
loadUser(uri);
|
||||
loadUserPlaylists(uri);
|
||||
}
|
||||
|
||||
componentDidUpdate = ({
|
||||
@ -49,55 +58,69 @@ class User extends React.Component {
|
||||
if (!prevUser && user) this.setWindowTitle(user);
|
||||
}
|
||||
|
||||
setWindowTitle(user = this.props.user) {
|
||||
setWindowTitle = (user = this.props.user) => {
|
||||
const {
|
||||
uiActions: { setWindowTitle },
|
||||
} = this.props;
|
||||
if (user) {
|
||||
this.props.uiActions.setWindowTitle(`${user.name} (user)`);
|
||||
setWindowTitle(i18n('user.title_window', { name: user.name }));
|
||||
} else {
|
||||
this.props.uiActions.setWindowTitle('User');
|
||||
setWindowTitle(i18n('user.title'));
|
||||
}
|
||||
}
|
||||
|
||||
loadMore() {
|
||||
this.props.spotifyActions.getMore(
|
||||
this.props.user.playlists_more,
|
||||
loadMore = () => {
|
||||
const {
|
||||
uri,
|
||||
spotifyActions: { getMore },
|
||||
user: { playlists_more } = {},
|
||||
} = this.props;
|
||||
|
||||
getMore(
|
||||
playlists_more,
|
||||
{
|
||||
parent_type: 'user',
|
||||
parent_key: this.props.uri,
|
||||
parent_key: uri,
|
||||
records_type: 'playlist',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
isMe() {
|
||||
const userid = getFromUri('userid', this.props.uri);
|
||||
return (this.props.me && this.props.me.id && this.props.me.id == userid);
|
||||
isMe = () => {
|
||||
const {
|
||||
uri,
|
||||
me: { id } = {},
|
||||
} = this.props;
|
||||
|
||||
return (id && id === getFromUri('userid', uri));
|
||||
}
|
||||
|
||||
render() {
|
||||
const user_id = getFromUri('userid', this.props.uri);
|
||||
render = () => {
|
||||
const {
|
||||
uri,
|
||||
load_queue,
|
||||
user: userProp,
|
||||
playlists,
|
||||
slim_mode,
|
||||
} = this.props;
|
||||
|
||||
if (!this.props.user) {
|
||||
if (isLoading(this.props.load_queue, [`spotify_users/${user_id}`, `spotify_users/${user_id}/playlists/?`])) {
|
||||
const user_id = getFromUri('userid', uri);
|
||||
|
||||
if (!userProp) {
|
||||
if (isLoading(load_queue, [`spotify_users/${user_id}`, `spotify_users/${user_id}/playlists/?`])) {
|
||||
return <Loader body loading />
|
||||
}
|
||||
return (
|
||||
<ErrorMessage type="not-found" title="Not found">
|
||||
<p>
|
||||
Could not find user with URI "
|
||||
{encodeURIComponent(this.props.uri)}
|
||||
"
|
||||
<I18n path="errors.uri_not_found" uri={uri} />
|
||||
</p>
|
||||
</ErrorMessage>
|
||||
);
|
||||
}
|
||||
|
||||
const user = collate(this.props.user, { playlists: this.props.playlists });
|
||||
|
||||
if (user && user.images) {
|
||||
var image = user.images.huge;
|
||||
} else {
|
||||
var image = null;
|
||||
}
|
||||
const user = collate(userProp, { playlists });
|
||||
const image = user.images ? user.images.huge : null;
|
||||
|
||||
return (
|
||||
<div className="view user-view preserve-3d">
|
||||
@ -116,27 +139,36 @@ Could not find user with URI "
|
||||
<h1>{user.name}</h1>
|
||||
<div className="heading__content__details">
|
||||
<div className="actions">
|
||||
<FollowButton className="primary" uri={user.uri} addText="Follow" removeText="Unfollow" />
|
||||
<FollowButton
|
||||
className="primary"
|
||||
uri={user.uri}
|
||||
/>
|
||||
</div>
|
||||
<h2>
|
||||
<ul className="details">
|
||||
{!this.props.slim_mode ? <li className="source"><Icon type="fontawesome" name={sourceIcon(user.uri)} /></li> : null}
|
||||
{user.playlists_total ? (
|
||||
<li>
|
||||
<NiceNumber value={user.playlists_total} />
|
||||
{' '}
|
||||
playlists
|
||||
</li>
|
||||
) : null}
|
||||
{user.followers ? (
|
||||
<li>
|
||||
<NiceNumber value={user.followers} />
|
||||
{' '}
|
||||
followers
|
||||
</li>
|
||||
) : null}
|
||||
{this.isMe() ? <li><span className="blue-text">You</span></li> : null}
|
||||
</ul>
|
||||
{!slim_mode && (
|
||||
<li className="source">
|
||||
<Icon type="fontawesome" name={sourceIcon(user.uri)} />
|
||||
</li>
|
||||
)}
|
||||
{user.playlists_total && (
|
||||
<li>
|
||||
<I18n path="specs.playlists" count={nice_number(user.playlists_total)} />
|
||||
</li>
|
||||
)}
|
||||
{user.followers && (
|
||||
<li>
|
||||
<I18n path="specs.followers" count={nice_number(user.followers)} />
|
||||
</li>
|
||||
)}
|
||||
{this.isMe() && (
|
||||
<li>
|
||||
<span className="blue-text">
|
||||
<I18n path="user.you" />
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,12 +178,14 @@ followers
|
||||
|
||||
<div className="content-wrapper">
|
||||
<section className="grid-wrapper">
|
||||
<h4>Playlists</h4>
|
||||
<h4>
|
||||
<I18n path="playlist.title_plural" />
|
||||
</h4>
|
||||
<PlaylistGrid playlists={user.playlists} />
|
||||
<LazyLoadListener
|
||||
loadKey={user.playlists_more}
|
||||
showLoader={user.playlists_more}
|
||||
loadMore={() => this.loadMore()}
|
||||
loadMore={this.loadMore}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user