Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building Applications with React and Redux Putting it all Together Solution: The Player Detail Component

Posted by katinkahesselink
katinkahesselink
2,392 Points

Remove player and add player no longer work

I have followed the tutorial here completely (as far as I can tell).

The player details are showing when I click on a player, but I can no longer delete or add a player.

I just checked: when I try adding or removing players through the redux dev tools in Chrome, the actions get logged, but the screen doesn't change.

I tried what happens in the dev tools when I click on the x: it SELECTS the player I want to delete, instead of deleting it.

Nothing happens when I click on the 'add player' button.

I'm not sure where else to look.

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! Can you post your code for us to analyze or something? (:

4 Answers

katinkahesselink
katinkahesselink
2,392 Points
katinkahesselink
katinkahesselink
2,392 Points

Sure. It's in this branch: https://github.com/smilingkite/react-treehouse/tree/assignment/react-redux-course

Tim Williams
PLUS
Tim Williams
Courses Plus Student 9,267 Points
Tim Williams
Tim Williams
Courses Plus Student 9,267 Points

Hi,

Check the brackets for your reducers. I noticed a few things that looked off there where the brackets dont seem to close out their respective statements (ie ADD_PLAYER is missing the ending bracket). There were no compile errors? I matched your beginning and ending brackets and couldnt get the program to compile. Let me know if this fixes the issue, if not we can proceed further and trace where there are other issues with these functions.

Chris Martinez
Chris Martinez
11,715 Points
Chris Martinez
Chris Martinez
11,715 Points

You are closing your curly braces before you use the variable in your return statement. Each set of curly braces after the case statement is a separate scope and your variables are not accessible outside of it. I did not download your code, but I am fairly sure this is what is happening.

As a side note, check out this article. Using curly braces in complex switch statements like we use in reducers seems to be a good practice. https://medium.com/@e_himmelfarb/use-curly-braces-with-es6-let-and-const-in-switch-blocks-react-redux-reducers-c0b01b37d748

katinkahesselink
katinkahesselink
2,392 Points
katinkahesselink
katinkahesselink
2,392 Points

I think I understand what you mean and have changed my reducerfile accordingly. However, when I do yarn start, the whole thing does not get beyond compiling webpack (which, yes - it did do before).

Here is my reducer: 

export default function Player(state = initialState, action) {
    let date = new Date();
    let day = date.getDate();
    let month = date.getMonth() + 1;
    let year = date.getFullYear();

    switch (action.type) {
        case PlayerActionTypes.ADD_PLAYER: {
            const addPlayerList = [
                ...state.players,
                {
                    name: action.name,
                    score: 0,
                    created: `${month}/${day}/${year}`
                }
            ];

            return {
                ...state,
                players: addPlayerList
            };
        }
        case PlayerActionTypes.REMOVE_PLAYER: {
            const removePlayerList = [
                ...state.players.slice(0, action.index),
                ...state.players.slice(action.index + 1)
            ];

            return { ...state, players: removePlayerList };
        }
        case PlayerActionTypes.UPDATE_PLAYER_SCORE: {
            const updatePlayerList = state.players.map((player, index) => {
                if (index === action.index) {
                    return {
                        ...player,
                        score: player.score + action.score,
                        updated: `${month}/${day}/${year}`
                    };
                }
                return player;
            });
            return {
                ...state,
                players: updatePlayerList
            };
        }

        case PlayerActionTypes.SELECT_PLAYER:
            return { ...state, selectedPlayerIndex: action.index };

        default:
            return state;
    }
}