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