movies.state.ts

import { State, Action, StateContext, Selector, NgxsOnInit } from '@ngxs/store';
import { patch, append, removeItem, insertItem, updateItem } from '@ngxs/store/operators';
import { tap, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { Movie } from '../../models/movie.model';
import { FetchMovies, AddMovie, EditMovie, DeleteMovie, FilterMovies, SaveFilterMovies,
         /*SearchMovies,*/ GetMovieTrailer, ClearMovies, LikeMovie, CommentMovie, FavoriteMovie,
         DeleteFavoriteMovie, DeleteAllFavoritesMovies, ClearState } from './../actions/movies.actions';

import { MoviesService } from '../../providers/movies-service';
import { YoutubeApiService } from '../../providers/youtube-api-service';

export class MoviesStateModel {
    movies: Movie[];
    movieForm: {
        model: Movie,
        dirty: boolean,
        status: string,
        errors: {}
    };
    filter: {
        genre: string,
        years: {
            lower: number,
            upper: number
        },
        rate: number
    };
    favorites: Movie[];
}

@State<MoviesStateModel>({
    name: 'catalog',
    defaults: {
        movies: [],
        movieForm: {
            model: null,
            dirty: false,
            status: '',
            errors: {}
        },
        filter: {
            genre: 'Action',
            years: {
                lower: 1900,
                upper: new Date().getFullYear()
            },
            rate: 0
        },
        favorites:  []
    }
})

export class MovieState implements NgxsOnInit {

    constructor(private moviesService: MoviesService, private youtubeApiService: YoutubeApiService) {}

    @Selector()
    static getMovies(state: MoviesStateModel) {
        return state.movies;
    }

    @Selector()
    static movieById(state: MoviesStateModel) {
        return (id: string) => {
            return state.movies.filter(movie => movie.id === id)[0];
        };
    }

    ngxsOnInit(ctx: StateContext<MoviesStateModel>) {
        console.log('State initialized.');
        ctx.dispatch(new ClearState());
    }

    @Action(ClearState)
    clearState({ setState }: StateContext<MoviesStateModel>) {
        setState({
            movies: [],
            movieForm: {
                model: null,
                dirty: false,
                status: '',
                errors: {}
            },
            filter: {
                genre: 'Action',
                years: {
                    lower: 1900,
                    upper: new Date().getFullYear()
                },
                rate: 0
            },
        favorites:  []});
    }

    @Action(FetchMovies, { cancelUncompleted: true })
    fetchMovies({ getState, setState }: StateContext<MoviesStateModel>, { payload }) {
        // console.log('MovieState::fetchMovies() | method called');
        // console.log('fetchMovies payload', payload);
        const { start, end } = payload;
        return this.moviesService.getMovies(start, end).pipe(
            catchError((x, caught) => {
                // console.log('inside catchError', x);
                return throwError(x);
            }),
            tap((result) => {
            // console.log('fetchMovies result', result);
            const state = getState();
            // console.log('state', state);
            setState({
                ...state,
                movies: [ ...state.movies, ...result ]
            });
        },
        (error) => {
            console.log('error', error.message);
        }));
    }

    @Action(AddMovie)
    addMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.addMovie(payload).pipe(
            catchError((x, caught) => {
                return throwError(x);
            }),
            tap((result) => {
            setState(
                patch({
                    movies: append([result])
                })
            );
        }));
    }

    @Action(EditMovie)
    editMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.editMovie(payload).pipe(
            catchError((x, caught) => {
                return throwError(x);
            }),
            tap((result) => {
            setState(
                patch({
                    movies: updateItem<Movie>(movie => movie.id === result.id, result)
                })
            );
        }));
    }

    @Action(DeleteMovie)
    deleteMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.deleteMovie(payload).pipe(
            catchError((x, caught) => {
                return throwError(x);
            }),
            tap((result) => {
            setState(
                patch({
                    movies: removeItem<Movie>(movie => movie.id === result.id)
                })
            );
        }));
    }

    @Action(FilterMovies, { cancelUncompleted: true })
    filterMovies({ getState, setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.filterMovies(payload).pipe(
            catchError((x, caught) => {
                // console.log('inside catchError', x);
                return throwError(x);
            }),
            tap((result) => {
            // console.log('filterMovies result', result);
            const state = getState();
            setState({
                ...state,
                movies: [ ...result ]
            });
            /*
            setState(
                patch({
                  movies: append(result)
                })
            );
            */
        },
        (error) => {
            console.log('error', error.message);
        }));
    }

    @Action(SaveFilterMovies)
    saveFilterMovies({ setState }: StateContext<MoviesStateModel>, { payload }) {
        setState(
            patch({
                filter: {...payload}
            })
          );
    }

    /*
    @Action(SearchMovies, { cancelUncompleted: true })
    searchMovies({ getState, setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.searchMovies(payload.queryText).pipe(
            catchError((x, caught) => {
                // console.log('inside catchError', x);
                return throwError(x);
            }),
            tap((result) => {
            const state = getState();
            setState({
                ...state,
                movies: [ ...result ]
            });
        },
        (error) => {
            console.log('error', error.message);
        }));
    }
    */

    @Action(GetMovieTrailer, { cancelUncompleted: true })
    getMovieTrailer({ getState, setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.youtubeApiService.searchMovieTrailer(payload.movieTitle).pipe(
            catchError((x, caught) => {
                // console.log('inside catchError', x);
                return throwError(x);
            }),
            tap((result) => {
            console.log(result);
        },
        (error) => {
            console.log('error', error.message);
        }));
    }

    @Action(ClearMovies)
    clearMovies({ getState, setState }: StateContext<MoviesStateModel>) {
        console.log('MovieState::clearMovies() | action called');
        const state = getState();
        setState({
            ...state,
            movies: []
        });
    }

    @Action(LikeMovie)
    likeMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.editMovie(payload).pipe(
            catchError((x, caught) => {
                return throwError(x);
            }),
            tap((result) => {
           setState(
            patch({
                movies: updateItem<Movie>(movie => movie.id === result.id, result)
            })
        );
        }));
    }

    @Action(CommentMovie)
    commentMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        return this.moviesService.editMovie(payload).pipe(
            catchError((x, caught) => {
                return throwError(x);
            }),
            tap((result) => {
           setState(
            patch({
                movies: updateItem<Movie>(movie => movie.id === result.id, result)
            })
        );
        }));
    }

    @Action(FavoriteMovie)
    favoriteMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        setState(
            patch({
                favorites: append([payload])
            })
        );
    }

    @Action(DeleteFavoriteMovie)
    deleteFavoriteMovie({ setState }: StateContext<MoviesStateModel>, { payload }) {
        setState(
            patch({
                favorites: removeItem<Movie>(movie => movie.id === payload.id)
            })
        );
    }

    @Action(DeleteAllFavoritesMovies)
    deleteAllFavoritesMovies({ getState, setState }: StateContext<MoviesStateModel>) {
        const state = getState();
        setState({
            ...state,
            favorites: []
        });
    }
}