From b441f39283ecdee09fd98c605e70fcda9a2d02c6 Mon Sep 17 00:00:00 2001 From: thombje <thombje@ntnu.no> Date: Tue, 26 Oct 2021 22:26:46 +0200 Subject: [PATCH] added hasMore global state --- client/src/components/Header.tsx | 5 ++++- client/src/components/Movies.tsx | 13 +++++++++---- client/src/components/MoviesStore.tsx | 11 ++++++++++- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 70a6a2f..8762b51 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 8783ddb..8d8a738 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 fa9cb8e..f480e5a 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 -- GitLab