Redux PR

[sonnynomnom]

No description provided.

[codecaaron]

Nice! Left a comment about trying to normalize the data structure instead of using an array :)

[codecaaron]

This is a good use case for normalization due to arrays being tough to mutate / lookup values from.

let nextRoomId = 0;

export default function playlistReducer(state = {}, action) {
  switch (action.type) {
    case "CREATE_ROOM": {
     const roomId =  ++nextRoomId;
      return {
         ...state,
         [roomId]:  {
          roomId,
          socketUserMap: action.payload.user,
          playlist: [],
          queue: [],
          currentPlayingIndex: 0,
          currentPlayingTime: 0,
          isPlaying: false,
       }
   }
}

Normalization helps with both getting and setting of rooms (especially if we only ever are acting on / using 1!) see how updates become simpler:

 case "PLAY_PRESSED": {
      return  {
        ...state, // keep all other keys the same
        [action.payload.id]: {
           ...state[action.payload.id], // keep the rest of the room state the same
           isPlaying: true
       }
   }
}

[sonnynomnom]

The link says "normalizr" is not maintained anymore. That shouldn't matter though, right?

[sonnynomnom]

Fixed!

[sonnynomnom]

The currentPlayingIndex: --songIndex doesn't seem right. Is it?

How do I grab the previous currentPlayingIndex of that specific room?

[sonnynomnom]

Btw, you can find my dispatches in the console when you are on the landing page (no need to get inside into a room). You will need to scroll up to the very top of the console though.

[codecaaron]

    case "PREV_PRESSED": {
     const roomId = action.payload.id;
     const room = state[roomId];
      return {
        ...state,
        [roomId]: {
          ...room,
          currentPlayingIndex: room.currentPlayingIndex - 1 ?? 0, // Don't go below 0
       }
    }
}

[codecaaron]

The reducer pattern's main benefit is for computing the next state from both the input and the current state.

Actions can have empty payloads in certain cases because the type of action only requires the previous state to do the specific task.

case 'PLAY': {
   return {
      ...state,
      isPlaying: true
    }
}
case 'PAUSE': {
   return {
      ...state,
      isPlaying: false
    }
}

[sonnynomnom]

just updated PREV_PRESSED and NEXT_PRESSED.

for PLAY_PRESSED, shouldn't it be:

case "PLAY_PRESSED": {
   const roomId = action.payload.id;
   const room = state[roomId];
   return {
      ...state,
      [roomId]: {
         ...room,
         isPlaying: true
      }
   }
}

[codecaaron]

yep!