diff --git a/src/js/Playlist/Playlists.js b/src/js/Playlist/Playlists.js
index 9312d27..136ea41 100644
--- a/src/js/Playlist/Playlists.js
+++ b/src/js/Playlist/Playlists.js
@@ -4,6 +4,7 @@ const axios = require('axios');
import PlaylistsView from "./PlaylistsView.js"
import NewPlaylist from "./NewPlaylist.js";
+import ScratchView from "./ScratchView.js";
class Playlists extends Component {
render(){
@@ -11,11 +12,13 @@ class Playlists extends Component {
);
diff --git a/src/js/Playlist/ScratchView.js b/src/js/Playlist/ScratchView.js
new file mode 100644
index 0000000..532860e
--- /dev/null
+++ b/src/js/Playlist/ScratchView.js
@@ -0,0 +1,354 @@
+import React, { Component } from "react";
+const axios = require('axios');
+
+import showMessage from "../Toast.js"
+
+class ScratchView extends Component{
+
+ constructor(props){
+ super(props);
+ this.state = {
+ name: 'play',
+ parts: [],
+ playlists: [],
+ filteredPlaylists: [],
+ playlist_references: [],
+ type: 'default',
+
+ day_boundary: 5,
+ recommendation_sample: 5,
+ newPlaylistName: '',
+ newPlaylistReference: '',
+
+ shuffle: false,
+ include_recommendations: false
+ }
+ this.handleAddPart = this.handleAddPart.bind(this);
+ this.handleAddReference = this.handleAddReference.bind(this);
+ this.handleInputChange = this.handleInputChange.bind(this);
+ this.handleRemoveRow = this.handleRemoveRow.bind(this);
+ this.handleRemoveRefRow = this.handleRemoveRefRow.bind(this);
+
+ this.handleRun = this.handleRun.bind(this);
+
+ this.handleShuffleChange = this.handleShuffleChange.bind(this);
+ this.handleRecChange = this.handleRecChange.bind(this);
+ }
+
+ componentDidMount(){
+
+ this.getPlaylists();
+ }
+
+
+ getPlaylists(){
+ return axios.get(`/api/playlists`)
+ .then((response) => {
+ var filteredPlaylists = response.data.playlists.filter((entry) => entry.name != this.state.name);
+
+ this.setState({
+ playlists: response.data.playlists,
+ newPlaylistReference: filteredPlaylists.length > 0 ? filteredPlaylists[0].name : ''
+ });
+ })
+ .catch((error) => {
+ showMessage(`error getting playlists (${error.response.status})`);
+ });
+ }
+
+ handleInputChange(event){
+ this.setState({
+ [event.target.name]: event.target.value
+ });
+ }
+
+ handleTypeChange(sample){
+ axios.post('/api/playlist', {
+ name: this.state.name,
+ type: sample
+ }).catch((error) => {
+ showMessage(`error updating type (${error.response.status})`);
+ });
+ }
+
+ handleShuffleChange(event) {
+ this.setState({
+ shuffle: event.target.checked
+ });
+ }
+
+ handleRecChange(event) {
+ this.setState({
+ include_recommendations: event.target.checked
+ });
+ }
+
+ handleAddPart(event){
+
+ if(this.state.newPlaylistName.length != 0){
+
+ var check = this.state.parts.includes(this.state.newPlaylistName);
+
+ if(check == false) {
+ var parts = this.state.parts.slice();
+ parts.push(this.state.newPlaylistName);
+
+ parts.sort(function(a, b){
+ if(a < b) { return -1; }
+ if(a > b) { return 1; }
+ return 0;
+ });
+
+ this.setState({
+ parts: parts,
+ newPlaylistName: ''
+ });
+ }else{
+ showMessage('playlist already added');
+ }
+
+ }else{
+ showMessage('enter playlist name');
+ }
+ }
+
+ handleAddReference(event){
+
+ if(this.state.newPlaylistReference.length != 0){
+
+ var check = this.state.playlist_references.includes(this.state.newPlaylistReference);
+
+ if(check == false) {
+ var playlist_references = this.state.playlist_references.slice();
+ playlist_references.push(this.state.newPlaylistReference);
+
+ playlist_references.sort(function(a, b){
+ if(a < b) { return -1; }
+ if(a > b) { return 1; }
+ return 0;
+ });
+
+ var filteredPlaylists = this.state.playlists.filter((entry) => entry.name != this.state.name);
+
+ this.setState({
+ playlist_references: playlist_references,
+ newPlaylistReference: filteredPlaylists.length > 0 ? filteredPlaylists[0].name : ''
+ });
+
+ }else{
+ showMessage('playlist already added');
+ }
+
+ }else{
+ showMessage('no other playlists to add');
+ }
+ }
+
+ handleRemoveRow(id, event){
+ var parts = this.state.parts;
+ parts = parts.filter(e => e !== id);
+ this.setState({
+ parts: parts
+ });
+
+ if(parts.length == 0) {
+ parts = -1;
+ }
+ }
+
+ handleRemoveRefRow(id, event){
+ var playlist_references = this.state.playlist_references;
+ playlist_references = playlist_references.filter(e => e !== id);
+ this.setState({
+ playlist_references: playlist_references
+ });
+ }
+
+ handleRun(event){
+ if(this.state.playlist_references.length > 0 || this.state.parts.length > 0){
+ axios.get('/api/user')
+ .then((response) => {
+ if(response.data.spotify_linked == true){
+ axios.post('/api/playlist/play', {
+ parts: this.state.parts,
+ playlists: this.state.playlist_references,
+ shuffle: this.state.shuffle,
+ include_recommendations: this.state.include_recommendations,
+ recommendation_sample: this.state.recommendation_sample,
+ day_boundary: this.state.day_boundary,
+ playlist_type: this.state.type
+ })
+ .then((reponse) => {
+ showMessage(`played`);
+ })
+ .catch((error) => {
+ showMessage(`error playing (${error.response.status})`);
+ });
+ }else{
+ showMessage(`link spotify before running`);
+ }
+ }).catch((error) => {
+ showMessage(`error playing (${error.response.status})`);
+ });
+ }else{
+ showMessage(`add either playlists or parts`);
+ }
+ }
+
+ render(){
+
+ const table = (
+
+ );
+
+ const error = { this.state.error_text }
;
+
+ return this.state.error ? error : table;
+ }
+
+}
+
+function ReferenceEntry(props) {
+ return (
+ {props.name}
+ );
+}
+
+function ListBlock(props) {
+ return (
+