diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 31bdc57860564e5c794b2f8c6d765462cbd855f1..47a4590c1887160b6d48eb98301b6a8f44d1583f 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -35,7 +35,6 @@ class Header extends React.Component<MoviesProps, MyState> { <input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input> Order by year: <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input> - <button onClick={this.search}>Search</button> </div> ) @@ -44,11 +43,7 @@ class Header extends React.Component<MoviesProps, MyState> { handleChange = (event: any) => { let element = event.target.id - if (event.keyCode === 13) { // not working - console.log("enter") - this.search() - } - + if (element == 'textfield1') { this.setState({ inputTitle: event.target.value }) } @@ -58,12 +53,8 @@ class Header extends React.Component<MoviesProps, MyState> { else if (element == 'checkbox1') { this.setState({ checkbox1_checked: event.target.checked }) } - // else if (element == 'checkbox12') { - // this.setState({ checkbox2_checked: event.target.checked }) - // } } -// TODO mysql ordering not working because of graphql scrambling search = () => { this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked); } diff --git a/client/src/components/Movies.tsx b/client/src/components/Movies.tsx index d0c058703ed9fe5996980557ff898ea78b448d01..e22bb2ed7db9a1b60e1c3b5145a97342e82b597e 100644 --- a/client/src/components/Movies.tsx +++ b/client/src/components/Movies.tsx @@ -4,12 +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'; -// type MyProps = {}; -type MyState = { - movies: any -}; interface MoviesProps { moviesStore: MoviesStoreImplementation @@ -17,7 +12,6 @@ interface MoviesProps { function Movies(props: MoviesProps){ - // const [movies, setMovies] = useState([]); useEffect(() => { if (MoviesStore.hasMore){ @@ -26,7 +20,6 @@ function Movies(props: MoviesProps){ }, []); - function generateAllMoviesQuery(lim: number){ return ` query { @@ -45,7 +38,6 @@ function Movies(props: MoviesProps){ props.moviesStore.setMovies(res.data.getAllMovies); props.moviesStore.setHasMore(true); }) - } function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) { @@ -53,17 +45,17 @@ function Movies(props: MoviesProps){ .then(res => res.json()) // .then(res => setMovies(res.data.getMovieByColumnType)) .then(res => props.moviesStore.setMovies(res.data.getMovieByColumnType)) - } - - - return ( <InfiniteScroll pageStart={0} - loadMore={() => getAllMovies({ lim: MoviesStore.movies.length + 13 })} + loadMore={() => { + if (MoviesStore.hasMore){ + getAllMovies({ lim: MoviesStore.movies.length + 13 }) + } + }} hasMore={MoviesStore.hasMore} useWindow={true} loader={ @@ -76,6 +68,7 @@ function Movies(props: MoviesProps){ </InfiniteScroll> ); + } export default inject('moviesStore')(observer(Movies)) diff --git a/client/src/components/MoviesStore.tsx b/client/src/components/MoviesStore.tsx index f480e5a58bfb428159803a8223f004c11705ff5e..d6615fcf18ab226b54084678ffdc57c95a217445 100644 --- a/client/src/components/MoviesStore.tsx +++ b/client/src/components/MoviesStore.tsx @@ -1,13 +1,8 @@ import { action, makeObservable, observable } from "mobx"; -interface Movie { - -} - - export class MoviesStoreImplementation { - movies: Movie[] = []; + movies: Array<object> = []; hasMore: boolean = true; constructor() { diff --git a/client/src/components/PrintTable.tsx b/client/src/components/PrintTable.tsx index 2a0489af1f1eb1930e3427fe7911bf79ba757a50..358207f145be86371d056a11c9a6f4669e67aa66 100644 --- a/client/src/components/PrintTable.tsx +++ b/client/src/components/PrintTable.tsx @@ -1,13 +1,12 @@ function PrintTable(props: any) { return ( - <table> <thead> <tr> <th>Title</th> <th>Genre</th> - <th>Year</th> + <th>Year released</th> </tr> </thead> <tbody>{ @@ -16,8 +15,7 @@ function PrintTable(props: any) { <td>{row.title}</td> <td>{row.genre}</td> <td>{row.year}</td> - </tr>; - + </tr>; }) }</tbody></table> ) diff --git a/client/src/components/services.ts b/client/src/components/services.ts index 3519d71d7804d4f0eaf00e3033de5793dedcb731..76e9a0a188ab4a05cc6db2151425417ad9c7590d 100644 --- a/client/src/components/services.ts +++ b/client/src/components/services.ts @@ -4,7 +4,6 @@ export function queryFetch(query: String) { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query, - // variables: variables }) }) } @@ -71,17 +70,3 @@ export function generateSearchQuery(neededData: string, title: string, genre: st console.log(query) return query } - -export const getAllMoviesQuery = ` -query { - getAllMovies { - id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image - } -}` - -export const createMovieQuery = ` -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") { - id - } -}` diff --git a/server/src/server.ts b/server/src/server.ts index f1656132e28c12ce2eb5712cd911c89f60aeb200..cee17fe8fc776c5bdfb637fa181bf09c5aed2562 100644 --- a/server/src/server.ts +++ b/server/src/server.ts @@ -1,7 +1,7 @@ declare var require: any var express = require('express'); var { graphqlHTTP } = require('express-graphql'); -var { GraphQLObjectType, GraphQLSchema, buildSchema, GraphQLInt, GraphQLString, GraphQLList, GraphQLBoolean } = require('graphql'); +var { GraphQLObjectType, GraphQLSchema, GraphQLInt, GraphQLString, GraphQLList, GraphQLBoolean } = require('graphql'); import {connect} from "./database" @@ -77,17 +77,9 @@ const RootQuery = new GraphQLObjectType({ async resolve(parent: any, args: any) { const connection = await connect(); let query = ''; - // if(typeof args.id!='undefined' && args.id){query = getQuery('id' , args.id)} if(typeof args.title!='undefined' && typeof args.genre!='undefined'){ console.log("resolve") query = getSearchQuery(args.title, args.genre, args.order)} - // else if(typeof args.genre!='undefined' && args.genre){query = getQuery('genre' , args.genre)} - // else if(typeof args.rating_dice_throw!='undefined' && args.rating_dice_throw){query = getQuery('rating_dice_throw' , args.rating_dice_throw)} - // else if(typeof args.year!='undefined' && args.year){query = getQuery('year' , args.year)} - // else if(typeof args.director_first_name!='undefined' && args.director_first_name){query = getQuery('director_first_name' , args.director_first_name)} - // else if(typeof args.director_last_name!='undefined' && args.director_last_name){query = getQuery('director_last_name' , args.director_last_name)} - // else if(typeof args.description!='undefined' && args.description){query = getQuery('description' , args.description)} - const response = await connection.query(query); return response[0]; } @@ -114,7 +106,7 @@ function getSearchQuery(title: string, genre: string, order: boolean): string { query = query + ' genre LIKE "%' + genre + '%"' } if (order) { - query = query + ' ORDER BY "year"' + query = query + ' ORDER BY "year" DESC' } console.log(query) return query @@ -173,7 +165,7 @@ const Mutation = new GraphQLObjectType({ return response[0]; } }, - updateRating: { // TODO test this + updateRating: { type: MovieType, args: { id: {type: GraphQLInt}, @@ -193,8 +185,7 @@ const schema = new GraphQLSchema({query: RootQuery, mutation: Mutation}) var app = express(); app.use('/graphql', graphqlHTTP({ schema: schema, - // rootValue: RootQuery, - graphiql: true, // graphql gui + graphiql: true, })); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql on local'));