diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 70a6a2f37cf400be4acfbf8bf9f3a12d23fe1fe5..8762b517158653ff34f5ae833d1313b8007887bb 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -46,7 +46,10 @@ class Header extends React.Component<MoviesProps, MyState> { getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) { services.queryFetch(services.generateQuery(columnType, value, neededData) , 'POST') .then(res => res.json()) - .then(res => this.props.moviesStore.setMovies(res.data.getMovieByColumnType)) + .then(res => { + this.props.moviesStore.setHasMore(false); + this.props.moviesStore.setMovies(res.data.getMovieByColumnType); + }) } } diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx index 8783ddb50d30d73071157afb2ec40ea953230ecc..8d8a738306575908131024124f389209f69e877b 100644 --- a/client/src/components/Movies.tsx +++ b/client/src/components/Movies.tsx @@ -4,6 +4,7 @@ import InfiniteScroll from "react-infinite-scroller"; import { MoviesStore, MoviesStoreImplementation } from "./MoviesStore"; import { inject, observer } from 'mobx-react'; import * as services from './services'; +import { observe } from 'mobx'; interface MoviesProps { moviesStore: MoviesStoreImplementation @@ -14,7 +15,9 @@ function Movies(props: MoviesProps){ // const [movies, setMovies] = useState([]); useEffect(() => { - getAllMovies({lim: 13}); + if (MoviesStore.hasMore){ + getAllMovies({lim: 13}); + } }, []); @@ -33,7 +36,10 @@ function Movies(props: MoviesProps){ services.queryFetch(generateAllMoviesQuery(params.lim), 'POST') .then(res => res.json()) // .then(res => setMovies(res.data.getAllMovies)) - .then(res => props.moviesStore.setMovies(res.data.getAllMovies)) + .then(res => { + props.moviesStore.setMovies(res.data.getAllMovies); + props.moviesStore.setHasMore(true); + }) } @@ -53,7 +59,7 @@ function Movies(props: MoviesProps){ <InfiniteScroll pageStart={0} loadMore={() => getAllMovies({ lim: MoviesStore.movies.length + 13 })} - hasMore={true || false} + hasMore={MoviesStore.hasMore} useWindow={true} loader={ <div key="loading" className="loader"> @@ -67,5 +73,4 @@ function Movies(props: MoviesProps){ } - export default inject('moviesStore')(observer(Movies)) diff --git a/client/src/components/MoviesStore.tsx b/client/src/components/MoviesStore.tsx index fa9cb8ed43a58c79d7705dbb8b17e6726621648a..f480e5a58bfb428159803a8223f004c11705ff5e 100644 --- a/client/src/components/MoviesStore.tsx +++ b/client/src/components/MoviesStore.tsx @@ -4,20 +4,29 @@ interface Movie { } + export class MoviesStoreImplementation { movies: Movie[] = []; + hasMore: boolean = true; constructor() { makeObservable(this, { movies: observable, - setMovies: action + setMovies: action, + hasMore: observable, + setHasMore: action }); + } setMovies(movies: any) { this.movies = movies; } + + setHasMore(hasMore: boolean) { + this.hasMore = hasMore; + } } export const MoviesStore = new MoviesStoreImplementation(); \ No newline at end of file