Skip to content

Instantly share code, notes, and snippets.

@gate5th gate5th/PlaylistChooser.js
Last active Sep 12, 2018

Embed
What would you like to do?
oldschoolshuffle
//PlaylistChooser.js
import React, { Component } from 'react';
import './PlaylistChooser.css';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import FormGroup from '@material-ui/core/FormGroup';
import * as SpotifyFunctions from '../spotifyFunctions.js'
class PlaylistChooser extends Component {
constructor(props){
super(props)
this.classes = props;
this.state = {
addRelatedDiscography: "false",
playlists: [],
chosenPlaylistIndex: 0,
chosenPlaylistName: 'Choose a playlist',
chosenPlaylistId: null,
anchorElement: null
}
}
async componentDidMount() {
await SpotifyFunctions.setAccessToken(this.props.accessToken);
const playlists = await SpotifyFunctions.getUserPlaylists();
this.setState({playlists: playlists});
}
changeAddRelatedDiscography(e){
e.preventDefault()
this.setState({addRelatedDiscography: e.target.value})
}
handlePlaylistChooserTopLevelClick(e) {
this.setState({anchorElement: e.currentTarget})
}
handlePlaylistMenuClick(e, playlistIndex){
this.setState({
chosenPlaylistIndex: playlistIndex,
chosenPlaylistName: this.state.playlists[playlistIndex].playlistName,
chosenPlaylistId: this.state.playlists[playlistIndex].id,
anchorElement: null})
}
handlePlaylistMenuClose(e){
this.setState({anchorElement: null})
}
generateListItem(playlistObj) {
return (
<ListItem key={playlistObj.id}>
<ListItemText primary={playlistObj.playlistName}/>
</ListItem>
)
}
generateMenuItem(playlistObj, index) {
return (
<MenuItem key={playlistObj.id} selected={index === this.state.chosenPlaylistIndex} onClick={(e) => {this.handlePlaylistMenuClick(e, index)}}>
{playlistObj.playlistName}
</MenuItem>
)
}
render() {
return (
<div className='PlaylistChooser'>
<List className={this.classes.playlistViewer}>
<ListItem button onClick={(e) => this.handlePlaylistChooserTopLevelClick(e)}>
<ListItemText primary="Choose a playlist to shuffle" secondary={this.state.chosenPlaylistName} />
</ListItem>
</List>
<Menu
id="lock-menu"
anchorelement={this.state.anchorElement}
open={Boolean(this.state.anchorElement)}
onClose={(e) => this.handlePlaylistMenuClose(e)}
>
{this.state.playlists.map((playlistObj, index) => {return this.generateMenuItem(playlistObj, index)})}
</Menu>
<div className='optionsSelection'>
<FormControl component="fieldset" className={this.classes.optionsSelection}>
<FormGroup>
<FormLabel component="legend">Add Related Discography</FormLabel>
<RadioGroup
aria-label="Add Related Discography"
name="addRelatedDiscography"
value={this.state.addRelatedDiscography}
onChange={(e) => this.changeAddRelatedDiscography(e)}
>
<FormControlLabel value="true" control={<Radio />} label="Include" />
<FormControlLabel value="false" control={<Radio />} label="Just my Playlist" />
</RadioGroup>
</FormGroup>
</FormControl>
</div>
<button className="playNowButton" onClick={(e) => {this.state.addRelatedDiscography === "false" ? SpotifyFunctions.byAlbumNoDiscography(this.state) : SpotifyFunctions.byAlbumWithDiscography(this.state)}}>Play Now</button>
<p className="checkYourPlaylistsAlert">{`You have to have Spotify open to start playback. If Spotify can't find an active device it will create a new playlist you can access later`}</p>
</div>
)
}
}
export default PlaylistChooser;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.