Cleanup and minor fixes including bug with ordering. Also implemented bug fix from thomas's branch.

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,10 +43,6 @@ 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);
     }

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))

client/src/components/MoviesStore.tsx

 import { action, makeObservable, observable } from "mobx";
 
-interface Movie {
-
-}
-
-
 export class MoviesStoreImplementation {
 
-    movies: Movie[] = [];
+    movies: Array<object> = [];
     hasMore: boolean = true;
     
     constructor() {

client/src/components/PrintTable.tsx

 
 function PrintTable(props: any) {
     return (
-
         <table>
             <thead>
             <tr>
                 <th>Title</th>
                 <th>Genre</th>
-                <th>Year</th>
+                <th>Year released</th>
             </tr>
             </thead>
             <tbody>{
@@ -17,7 +16,6 @@ function PrintTable(props: any) {
                         <td>{row.genre}</td>
                         <td>{row.year}</td>
                     </tr>;  
-
                 })
             }</tbody></table>
     )

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
-    }
-}`

server/src/server.ts

 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'));