Skip to content
Snippets Groups Projects
Commit d87f81c5 authored by Trym Grande's avatar Trym Grande
Browse files

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

parent c96b0abe
Branches
No related tags found
No related merge requests found
...@@ -35,7 +35,6 @@ class Header extends React.Component<MoviesProps, MyState> { ...@@ -35,7 +35,6 @@ class Header extends React.Component<MoviesProps, MyState> {
<input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input> <input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input>
Order by year: Order by year:
<input type="checkbox" id="checkbox1" onChange={this.handleChange}></input> <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input>
<button onClick={this.search}>Search</button> <button onClick={this.search}>Search</button>
</div> </div>
) )
...@@ -44,10 +43,6 @@ class Header extends React.Component<MoviesProps, MyState> { ...@@ -44,10 +43,6 @@ class Header extends React.Component<MoviesProps, MyState> {
handleChange = (event: any) => { handleChange = (event: any) => {
let element = event.target.id let element = event.target.id
if (event.keyCode === 13) { // not working
console.log("enter")
this.search()
}
if (element == 'textfield1') { if (element == 'textfield1') {
this.setState({ inputTitle: event.target.value }) this.setState({ inputTitle: event.target.value })
...@@ -58,12 +53,8 @@ class Header extends React.Component<MoviesProps, MyState> { ...@@ -58,12 +53,8 @@ class Header extends React.Component<MoviesProps, MyState> {
else if (element == 'checkbox1') { else if (element == 'checkbox1') {
this.setState({ checkbox1_checked: event.target.checked }) 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 = () => { search = () => {
this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked); this.getMoviesBySearch('title genre year', this.state.inputTitle, this.state.inputGenre, this.state.checkbox1_checked);
} }
......
...@@ -4,12 +4,7 @@ import InfiniteScroll from "react-infinite-scroller"; ...@@ -4,12 +4,7 @@ import InfiniteScroll from "react-infinite-scroller";
import { MoviesStore, MoviesStoreImplementation } from "./MoviesStore"; import { MoviesStore, MoviesStoreImplementation } from "./MoviesStore";
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import * as services from './services'; import * as services from './services';
import { observe } from 'mobx';
// type MyProps = {};
type MyState = {
movies: any
};
interface MoviesProps { interface MoviesProps {
moviesStore: MoviesStoreImplementation moviesStore: MoviesStoreImplementation
...@@ -17,7 +12,6 @@ interface MoviesProps { ...@@ -17,7 +12,6 @@ interface MoviesProps {
function Movies(props: MoviesProps){ function Movies(props: MoviesProps){
// const [movies, setMovies] = useState([]);
useEffect(() => { useEffect(() => {
if (MoviesStore.hasMore){ if (MoviesStore.hasMore){
...@@ -26,7 +20,6 @@ function Movies(props: MoviesProps){ ...@@ -26,7 +20,6 @@ function Movies(props: MoviesProps){
}, []); }, []);
function generateAllMoviesQuery(lim: number){ function generateAllMoviesQuery(lim: number){
return ` return `
query { query {
...@@ -45,7 +38,6 @@ function Movies(props: MoviesProps){ ...@@ -45,7 +38,6 @@ function Movies(props: MoviesProps){
props.moviesStore.setMovies(res.data.getAllMovies); props.moviesStore.setMovies(res.data.getAllMovies);
props.moviesStore.setHasMore(true); props.moviesStore.setHasMore(true);
}) })
} }
function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) { function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
...@@ -53,17 +45,17 @@ function Movies(props: MoviesProps){ ...@@ -53,17 +45,17 @@ function Movies(props: MoviesProps){
.then(res => res.json()) .then(res => res.json())
// .then(res => setMovies(res.data.getMovieByColumnType)) // .then(res => setMovies(res.data.getMovieByColumnType))
.then(res => props.moviesStore.setMovies(res.data.getMovieByColumnType)) .then(res => props.moviesStore.setMovies(res.data.getMovieByColumnType))
} }
return ( return (
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
loadMore={() => getAllMovies({ lim: MoviesStore.movies.length + 13 })} loadMore={() => {
if (MoviesStore.hasMore){
getAllMovies({ lim: MoviesStore.movies.length + 13 })
}
}}
hasMore={MoviesStore.hasMore} hasMore={MoviesStore.hasMore}
useWindow={true} useWindow={true}
loader={ loader={
...@@ -76,6 +68,7 @@ function Movies(props: MoviesProps){ ...@@ -76,6 +68,7 @@ function Movies(props: MoviesProps){
</InfiniteScroll> </InfiniteScroll>
); );
} }
export default inject('moviesStore')(observer(Movies)) export default inject('moviesStore')(observer(Movies))
import { action, makeObservable, observable } from "mobx"; import { action, makeObservable, observable } from "mobx";
interface Movie {
}
export class MoviesStoreImplementation { export class MoviesStoreImplementation {
movies: Movie[] = []; movies: Array<object> = [];
hasMore: boolean = true; hasMore: boolean = true;
constructor() { constructor() {
......
function PrintTable(props: any) { function PrintTable(props: any) {
return ( return (
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Title</th> <th>Title</th>
<th>Genre</th> <th>Genre</th>
<th>Year</th> <th>Year released</th>
</tr> </tr>
</thead> </thead>
<tbody>{ <tbody>{
...@@ -17,7 +16,6 @@ function PrintTable(props: any) { ...@@ -17,7 +16,6 @@ function PrintTable(props: any) {
<td>{row.genre}</td> <td>{row.genre}</td>
<td>{row.year}</td> <td>{row.year}</td>
</tr>; </tr>;
}) })
}</tbody></table> }</tbody></table>
) )
......
...@@ -4,7 +4,6 @@ export function queryFetch(query: String) { ...@@ -4,7 +4,6 @@ export function queryFetch(query: String) {
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
query: query, query: query,
// variables: variables
}) })
}) })
} }
...@@ -71,17 +70,3 @@ export function generateSearchQuery(neededData: string, title: string, genre: st ...@@ -71,17 +70,3 @@ export function generateSearchQuery(neededData: string, title: string, genre: st
console.log(query) console.log(query)
return 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
}
}`
declare var require: any declare var require: any
var express = require('express'); var express = require('express');
var { graphqlHTTP } = require('express-graphql'); 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" import {connect} from "./database"
...@@ -77,17 +77,9 @@ const RootQuery = new GraphQLObjectType({ ...@@ -77,17 +77,9 @@ const RootQuery = new GraphQLObjectType({
async resolve(parent: any, args: any) { async resolve(parent: any, args: any) {
const connection = await connect(); const connection = await connect();
let query = ''; let query = '';
// if(typeof args.id!='undefined' && args.id){query = getQuery('id' , args.id)}
if(typeof args.title!='undefined' && typeof args.genre!='undefined'){ if(typeof args.title!='undefined' && typeof args.genre!='undefined'){
console.log("resolve") console.log("resolve")
query = getSearchQuery(args.title, args.genre, args.order)} 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); const response = await connection.query(query);
return response[0]; return response[0];
} }
...@@ -114,7 +106,7 @@ function getSearchQuery(title: string, genre: string, order: boolean): string { ...@@ -114,7 +106,7 @@ function getSearchQuery(title: string, genre: string, order: boolean): string {
query = query + ' genre LIKE "%' + genre + '%"' query = query + ' genre LIKE "%' + genre + '%"'
} }
if (order) { if (order) {
query = query + ' ORDER BY "year"' query = query + ' ORDER BY "year" DESC'
} }
console.log(query) console.log(query)
return query return query
...@@ -173,7 +165,7 @@ const Mutation = new GraphQLObjectType({ ...@@ -173,7 +165,7 @@ const Mutation = new GraphQLObjectType({
return response[0]; return response[0];
} }
}, },
updateRating: { // TODO test this updateRating: {
type: MovieType, type: MovieType,
args: { args: {
id: {type: GraphQLInt}, id: {type: GraphQLInt},
...@@ -193,8 +185,7 @@ const schema = new GraphQLSchema({query: RootQuery, mutation: Mutation}) ...@@ -193,8 +185,7 @@ const schema = new GraphQLSchema({query: RootQuery, mutation: Mutation})
var app = express(); var app = express();
app.use('/graphql', graphqlHTTP({ app.use('/graphql', graphqlHTTP({
schema: schema, schema: schema,
// rootValue: RootQuery, graphiql: true,
graphiql: true, // graphql gui
})); }));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql on local')); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql on local'));
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment