Skip to content
Snippets Groups Projects
Commit 8012d84b authored by thombje's avatar thombje
Browse files

pagination working with Movies.tsx as functional component

parent 13f6e5dd
No related branches found
No related tags found
No related merge requests found
import React from 'react'; import React, {useEffect, useState} from 'react';
import './movies.css'; import './movies.css';
import PrintTable from "./PrintTable"; import PrintTable from "./PrintTable";
import InfiniteScroll from "react-infinite-scroller"; import InfiniteScroll from "react-infinite-scroller";
type MyProps = {};
type MyState = {
movies: any,
lim: number
};
enum ColumnType{ enum ColumnType{
Id, Id,
Title, Title,
...@@ -21,31 +15,27 @@ enum ColumnType{ ...@@ -21,31 +15,27 @@ enum ColumnType{
Description Description
} }
class Movies extends React.Component<MyProps, MyState> { function Movies(){
constructor(props: any) { const [movies, setMovies] = useState([]);
super(props);
this.state = {
movies: [],
lim: 33
}
}
useEffect(() => {
getAllMovies({lim: 13});
}, []);
getAllMoviesQuery = ` let getAllMoviesQuery = `
query { query {
getAllMovies(lim: 13) { getAllMovies(lim: 13) {
id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image
} }
}` }`
createMovieQuery = ` let createMovieQuery = `
mutation { mutation {
createMovie(title: "testing", genre: "gaming", rating_dice_throw: 1, year: '2000', director_first_name: "torje", director_last_name: "the_gamer", description: "amazing", cover_image: "url123") { createMovie(title: "testing", genre: "gaming", rating_dice_throw: 1, year: '2000', director_first_name: "torje", director_last_name: "the_gamer", description: "amazing", cover_image: "url123") {
id id
} }
}` }`
generateAllMoviesQuery(lim: number){ function generateAllMoviesQuery(lim: number){
return ` return `
query { query {
getAllMovies(lim: ${lim}) { getAllMovies(lim: ${lim}) {
...@@ -55,14 +45,13 @@ class Movies extends React.Component<MyProps, MyState> { ...@@ -55,14 +45,13 @@ class Movies extends React.Component<MyProps, MyState> {
} }
getAllMovies() { function getAllMovies(params: any) {
this.queryFetch(this.generateAllMoviesQuery(this.state.lim), 'POST') queryFetch(generateAllMoviesQuery(params.lim), 'POST')
.then(res => res.json()) .then(res => res.json())
.then(res => this.setState({ movies: res.data.getAllMovies })) .then(res => setMovies(res.data.getAllMovies))
.then(res => console.log(this.state.movies))
} }
generateQuery(columnType: ColumnType, value: string, neededData: string){ function generateQuery(columnType: ColumnType, value: string, neededData: string){
let column = ''; let column = '';
...@@ -102,21 +91,15 @@ class Movies extends React.Component<MyProps, MyState> { ...@@ -102,21 +91,15 @@ class Movies extends React.Component<MyProps, MyState> {
}`; }`;
} }
getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) { function getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) {
this.queryFetch(this.generateQuery(columnType, value, neededData) , 'POST') queryFetch(generateQuery(columnType, value, neededData) , 'POST')
.then(res => res.json()) .then(res => res.json())
.then(res => this.setState({ movies: res.data.getMovieByColumnType })) .then(res => setMovies(res.data.getMovieByColumnType))
.then(res => console.log(this.state.movies))
} }
componentDidMount() {
this.getAllMovies();
//this.getMovieByColumnType(ColumnType.Genre, 'Drama', 'title genre year');
}
queryFetch(query: String, method: string) { function queryFetch(query: String, method: string) {
return fetch('/graphql', { return fetch('/graphql', {
method: method, method: method,
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
...@@ -128,11 +111,22 @@ class Movies extends React.Component<MyProps, MyState> { ...@@ -128,11 +111,22 @@ class Movies extends React.Component<MyProps, MyState> {
} }
render() {
return ( return (
<PrintTable data={this.state.movies}/> <InfiniteScroll
pageStart={0}
loadMore={() => getAllMovies({ lim: movies.length + 13 })}
hasMore={true || false}
useWindow={true}
loader={
<div key="loading" className="loader">
Loading ...
</div>
}
>
<PrintTable data={movies}/>
</InfiniteScroll>
); );
}
} }
export default Movies; export default Movies;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment