ngRx practice

user.reducer.ts

import * as userActions from '../actions/user';
import * as skillActions from '../actions/skill';

export interface State {
    user: {
        isPro: boolean;
        skills: any[];
        id;
        cards: any[];
    };
    hasLoginError: boolean;
    loginErrorMessage: string;
    isLoginLoading: boolean;
    hasRegisterError: boolean;
    registerErrorMessage: string;
    isRegisterLoading: boolean;
}

const initialState: State = {
    user: {
        isPro: false,
        id: null,
        skills: [],
        cards: []
    },
    hasLoginError: false,
    loginErrorMessage: '',
    isLoginLoading: false,
    hasRegisterError: false,
    registerErrorMessage: '',
    isRegisterLoading: false,
};

export function reducer(state = initialState, action: userActions.Actions | skillActions.Actions): State {
    switch (action.type) {
        case userActions.LOGIN:
            return {
                ...state,
                hasLoginError: false,
                loginErrorMessage: '',
                isLoginLoading: true
            };

        case userActions.REGISTER:
            return {
                ...state,
                hasRegisterError: false,
                registerErrorMessage: '',
                isRegisterLoading: true
            };

        case userActions.LOGOUT:
            return {
                ...initialState,
                user: {
                    ...initialState.user
                  }
            };

        case userActions.LOGIN_COMPLETE:
            return {
                ...state,
                isLoginLoading: false,
                user: action.payload.user
            };

        case userActions.REGISTER_COMPLETE:
            return {
                ...state,
                isRegisterLoading: false,
                user: action.payload.user
            };

        case userActions.PRO_TOGGLE_COMPLETE:
            return {
                ...state,
                user: action.payload
            };

        case userActions.LOGIN_ERROR:
            return {
                ...state,
                isLoginLoading: false,
                hasLoginError: true,
                loginErrorMessage: action.payload
            };

        case userActions.REGISTER_ERROR:
            return {
                ...state,
                isRegisterLoading: false,
                hasRegisterError: true,
                registerErrorMessage: action.payload
            };

        case userActions.ATTACH_CARD_COMPLETE:
            return {
                ...state,
                user: {
                    ...state.user,
                    cards: [action.payload]
                }
            };

        case skillActions.DELETE_COMPLETE:
            // TODO: update the state.user.skills array to remove the return skill object by it's id (action.payload.id).

        case skillActions.PUT_COMPLETE:
            return {
                ...state,
                user: {
                    ...state.user,
                    skills: state.user.skills.map(skill => {
                        if (skill.id !== action.payload.id) {
                            return skill;
                        } else {
                            return {
                                ...skill,
                                ...action.payload
                            };
                        }
                    }),
                },
            };

        case skillActions.POST_COMPLETE: {
            // TODO: update the state.user.skills array to include a new skill object (action.payload) at the end of the array.
        }

        default:
            return state;
    }
}

export const getUser = (state: State) => state.user;
export const getUserId = (state: State) => state.user.id;
export const getIsPro = (state: State) => state.user.isPro;
export const getUserHasCard = (state: State) => state.user.cards.length > 0 ? true : false;
export const hasLoginError = (state: State) => state.hasLoginError;
export const loginErrorMessage = (state: State) => state.loginErrorMessage;
export const hasRegisterError = (state: State) => state.hasRegisterError;
export const registerErrorMessage = (state: State) => state.registerErrorMessage;
export const isLoginLoading = (state: State) => state.isLoginLoading;
export const isRegisterLoading = (state: State) => state.isRegisterLoading;