Changes to actions and reducer

frontend/actions/playlist_actions.js

@@ -1,6 +1,8 @@
 import * as APIUtil from '../util/playlist_api_util'
 
 export const RECEIVE_ALL_PLAYLISTS = 'RECEIVE_ALL_PLAYLISTS';
+export const RECEIVE_SINGLE_PLAYLIST = 'RECEIVE_SINGLE_PLAYLIST';
+export const DELETE_PLAYLIST = 'DELETE_PLAYLIST';
 
 const receivePlaylists = (playlists) => {
   return {
@@ -9,9 +11,51 @@ const receivePlaylists = (playlists) => {
   };
 };
 
+const receivePlaylist = (playlist) => {
+  return {
+    type: RECEIVE_SINGLE_PLAYLIST,
+    playlist
+  };
+};
+
+const removePlaylist = playlistId => {
+  return {
+    type: DELETE_PLAYLIST,
+    playlistId
+  }
+}
+
 export const fetchPlaylists = () => dispatch => {
   return (
     APIUtil.fetchPlaylists().then(
       res => dispatch(receivePlaylists(res))
     ));
 };
+
+export const fetchPlaylist = (id) => dispatch => {
+  return (
+    APIUtil.fetchPlaylist(id).then(
+      res => dispatch(receivePlaylist(res))
+    ));
+};
+
+export const createPlaylist = (title) => dispatch => {
+  return (
+    APIUtil.createPlaylist(title).then(
+      res => dispatch(receivePlaylist(res))
+    ));
+};
+
+export const updatePlaylist = (playlist) => dispatch => {
+  return (
+    APIUtil.updatePlaylist(playlist).then(
+      res => dispatch(receivePlaylist(res))
+    ));
+};
+
+export const deletePlaylist = (id) => dispatch => {
+  return (
+    APIUtil.deletePlaylist(id).then(
+      () => dispatch(removePlaylist(id))
+    ));
+};

frontend/reducers/entities/playlists_reducer.js

@@ -1,10 +1,18 @@
-import { RECEIVE_ALL_PLAYLISTS } from '../../actions/playlist_actions';
+import { RECEIVE_ALL_PLAYLISTS, RECEIVE_SINGLE_PLAYLIST, DELETE_PLAYLIST } from '../../actions/playlist_actions';
+import merge from 'lodash/merge';
 
 const playlistsReducer = (state = {}, action) => {
   Object.freeze(state);
+  let newState;
   switch(action.type){
     case RECEIVE_ALL_PLAYLISTS:
       return action.playlists;
+    case RECEIVE_SINGLE_PLAYLIST:
+      return merge({}, state, {[action.playlist.id]: action.playlist});
+    case DELETE_PLAYLIST:
+      newState = merge({}, state);
+      delete newState[action.playlistId];
+      return newState;
     default:
       return state;
   }

frontend/util/playlist_api_util.jsx

@@ -4,3 +4,33 @@ export const fetchPlaylists = () => {
       url: '/api/playlists'
     })
 };
+
+export const fetchPlaylist = (id) => {
+  return $.ajax({
+      method: 'GET',
+      url: `/api/playlists/${id}`
+    })
+};
+
+export const createPlaylist = (playlist) => {
+  return $.ajax({
+      method: 'POST',
+      url: `/api/playlists`,
+      data: { playlist } 
+    })
+};
+
+export const updatePlaylist = (playlist) => {
+  return $.ajax({
+      method: 'PATCH',
+      url: `/api/playlists/${playlist.id}`,
+      data: { playlist }
+    })
+};
+
+export const deletePlaylist = (id) => {
+  return $.ajax({
+      method: 'DELETE',
+      url: `/api/playlists/${id}`
+    })
+};