From d87f81c544ab4b1f613a6a9e9434b817bf0f14a6 Mon Sep 17 00:00:00 2001
From: trymg <trymg@stud.ntnu.no>
Date: Wed, 27 Oct 2021 13:38:27 +0200
Subject: [PATCH] Cleanup and minor fixes including bug with ordering. Also
implemented bug fix from thomas's branch.
---
client/src/components/Header.tsx | 11 +----------
client/src/components/Movies.tsx | 19 ++++++-------------
client/src/components/MoviesStore.tsx | 7 +------
client/src/components/PrintTable.tsx | 6 ++----
client/src/components/services.ts | 15 ---------------
server/src/server.ts | 17 ++++-------------
6 files changed, 14 insertions(+), 61 deletions(-)
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 31bdc57..47a4590 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 d0c0587..e22bb2e 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 f480e5a..d6615fc 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 2a0489a..358207f 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 3519d71..76e9a0a 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 f165613..cee17fe 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'));
--
GitLab