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

merged with trym

parents 8012d84b cc55000e
Branches
No related tags found
No related merge requests found
...@@ -9856,6 +9856,24 @@ ...@@ -9856,6 +9856,24 @@
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"mobx": {
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/mobx/-/mobx-6.3.5.tgz",
"integrity": "sha512-MeDfqtiSbhVoJgXqQsrJwvq2klj7Xk9pPdMThCdFiwFt33vgWJe82ATppPwVzQoz0AI3QpSSwQzcp3TBDK4syg=="
},
"mobx-react": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.2.1.tgz",
"integrity": "sha512-LZS99KFLn75VWDXPdRJhILzVQ7qLcRjQbzkK+wVs0Qg4kWw5hOI2USp7tmu+9zP9KYsVBmKyx2k/8cTTBfsymw==",
"requires": {
"mobx-react-lite": "^3.2.0"
}
},
"mobx-react-lite": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.2.1.tgz",
"integrity": "sha512-hwURgfmP2apX3HQrB55V9DN47kuN3C6KlQvI5UIfJRibXma72C/JudcNt2r9dWjAdFMrcZoz1ivvtXMCkJ2aQA=="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
......
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
"@types/react": "^17.0.28", "@types/react": "^17.0.28",
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"mobx": "^6.3.5",
"mobx-react": "^7.2.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-infinite-scroller": "^1.2.4", "react-infinite-scroller": "^1.2.4",
......
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
} }
} }
.App-header { .header {
background-color: #282c34; background-color: gray;
min-height: 100vh; min-height: 5vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
......
import './App.css'; import './App.css';
import Movies from './components/Movies' import Movies from './components/Movies'
import Header from './components/Header'
import { MoviesStore } from "./components/MoviesStore";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<Movies /> <Header moviesStore={MoviesStore}/>
<Movies moviesStore={MoviesStore}/>
</div> </div>
); );
} }
......
import React, { Component } from 'react'
import { MoviesStoreImplementation } from "./MoviesStore";
import { inject, observer } from 'mobx-react';
import * as services from './services';
type MyState = {
input: string
};
interface MoviesProps {
moviesStore: MoviesStoreImplementation
}
class Header extends React.Component<MoviesProps, MyState> {
constructor(props: any) {
super(props);
this.state = {
input: ''
}
}
render() {
return (
<div className="header">
<input type="text" placeholder="Search for movies..." onChange={this.handleChange}></input>
<button onClick={this.search}>Search</button>
</div>
)
}
handleChange = (e: any) => {
this.setState({ input: e.target.value })
}
search = () => {
this.getMovieByColumnType(services.ColumnType.Title, this.state.input, 'id title genre description');
}
getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
services.queryFetch(services.generateQuery(columnType, value, neededData) , 'POST')
.then(res => res.json())
.then(res => this.props.moviesStore.setMovies(res.data.getMovieByColumnType))
}
}
export default inject('moviesStore')(observer(Header))
\ No newline at end of file
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import './movies.css';
import PrintTable from "./PrintTable"; import PrintTable from "./PrintTable";
import InfiniteScroll from "react-infinite-scroller"; import InfiniteScroll from "react-infinite-scroller";
import { MoviesStore, MoviesStoreImplementation } from "./MoviesStore";
import { inject, observer } from 'mobx-react';
import * as services from './services';
interface MoviesProps {
enum ColumnType{ moviesStore: MoviesStoreImplementation
Id,
Title,
Genre,
Rating,
Year,
DirectorFirstName,
DirectorLastName,
Description
} }
function Movies(){
const [movies, setMovies] = useState([]); function Movies(props: MoviesProps){
// const [movies, setMovies] = useState([]);
useEffect(() => { useEffect(() => {
getAllMovies({lim: 13}); getAllMovies({lim: 13});
}, []); }, []);
let getAllMoviesQuery = `
query {
getAllMovies(lim: 13) {
id,title,genre,rating_dice_throw,year,director_first_name,director_last_name,description,cover_image
}
}`
let 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
}
}`
function generateAllMoviesQuery(lim: number){ function generateAllMoviesQuery(lim: number){
return ` return `
...@@ -46,75 +30,29 @@ function Movies(){ ...@@ -46,75 +30,29 @@ function Movies(){
function getAllMovies(params: any) { function getAllMovies(params: any) {
queryFetch(generateAllMoviesQuery(params.lim), 'POST') services.queryFetch(generateAllMoviesQuery(params.lim), 'POST')
.then(res => res.json()) .then(res => res.json())
.then(res => setMovies(res.data.getAllMovies)) // .then(res => setMovies(res.data.getAllMovies))
} .then(res => props.moviesStore.setMovies(res.data.getAllMovies))
function generateQuery(columnType: ColumnType, value: string, neededData: string){
let column = '';
switch(columnType){
case ColumnType.Title:
column = 'title';
break;
case ColumnType.Genre:
column = 'genre';
break;
case ColumnType.Rating:
column = 'rating_dice_throw';
break;
case ColumnType.Year:
column = 'year';
break;
case ColumnType.DirectorFirstName:
column = 'director_first_name';
break;
case ColumnType.DirectorLastName:
column = 'director_last_name';
break;
case ColumnType.Description:
column = 'description';
break;
default:
column = 'id';
break;
} }
return ` function getMovieByColumnType(columnType : services.ColumnType, value: string, neededData: string) {
query { services.queryFetch(services.generateQuery(columnType, value, neededData) , 'POST')
getMovieByColumnType(${column}: "${value}") {
${neededData}
}
}`;
}
function getMovieByColumnType(columnType : ColumnType, value: string, neededData: string) {
queryFetch(generateQuery(columnType, value, neededData) , 'POST')
.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))
} }
function queryFetch(query: String, method: string) {
return fetch('/graphql', {
method: method,
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query: query,
// variables: variables
})
})
}
return ( return (
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
loadMore={() => getAllMovies({ lim: movies.length + 13 })} loadMore={() => getAllMovies({ lim: MoviesStore.movies.length + 13 })}
hasMore={true || false} hasMore={true || false}
useWindow={true} useWindow={true}
loader={ loader={
...@@ -123,10 +61,11 @@ function Movies(){ ...@@ -123,10 +61,11 @@ function Movies(){
</div> </div>
} }
> >
<PrintTable data={movies}/> <PrintTable data={MoviesStore.movies}/>
</InfiniteScroll> </InfiniteScroll>
); );
} }
export default Movies;
export default inject('moviesStore')(observer(Movies))
import { action, makeObservable, observable } from "mobx";
interface Movie {
}
export class MoviesStoreImplementation {
movies: Movie[] = [];
constructor() {
makeObservable(this, {
movies: observable,
setMovies: action
});
}
setMovies(movies: any) {
this.movies = movies;
}
}
export const MoviesStore = new MoviesStoreImplementation();
\ No newline at end of file
.App {
margin: auto
}
.App-header {
height: auto
}
\ No newline at end of file
//@ts-nocheck export function queryFetch(query: String, method: string) {
// const continentSelect = document.getElementById('continent-select') return fetch('/graphql', {
// const countryList = document.getElementById('countries-list') method: method,
headers: { "Content-Type": "application/json" },
// queryFetch(` body: JSON.stringify({
// query { query: query,
// continents {
// name
// code
// }
// }
// `)
// .then(data => {
// data.data.movies.forEach(movie => {
// option.innerText = continent.name
// continentSelect.append(option)
// })
// })
// continentSelect.addEventListener('change', async e => {
// const continentCode = e.target.value
// const countries = await getContinentCountries(continentCode)
// countryList.innerHTML = ''
// countries.forEach(country => {
// const element = document.createElement('div')
// element.innerText = country.name
// countryList.append(element)
// })
// })
// function getContinentCountries(continentCode) {
// return queryFetch(`
// query getCountries($code: String) {
// continent(code: $code) {
// countries {
// name
// }
// }
// }
// `, { code: continentCode }).then(data => {
// return data.data.continent.countries
// })
// }
// export function queryFetch(query, variables) {
// return fetch('https://countries.trevorblades.com/', {
// method: 'POST',
// headers: { "Content-Type": "application/json" },
// body: JSON.stringify({
// query: query,
// variables: variables // variables: variables
// }) })
// }).then(res => res.json()) })
// } }
export {}
\ No newline at end of file export enum ColumnType{
Id,
Title,
Genre,
Rating,
Year,
DirectorFirstName,
DirectorLastName,
Description
}
export function generateQuery(columnType: ColumnType, value: string, neededData: string){
let column = '';
switch(columnType){
case ColumnType.Title:
column = 'title';
break;
case ColumnType.Genre:
column = 'genre';
break;
case ColumnType.Rating:
column = 'rating_dice_throw';
break;
case ColumnType.Year:
column = 'year';
break;
case ColumnType.DirectorFirstName:
column = 'director_first_name';
break;
case ColumnType.DirectorLastName:
column = 'director_last_name';
break;
case ColumnType.Description:
column = 'description';
break;
default:
column = 'id';
break;
}
return `
query {
getMovieByColumnType(${column}: "${value}") {
${neededData}
}
}`;
}
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
}
}`
...@@ -41,7 +41,7 @@ const RootQuery = new GraphQLObjectType({ ...@@ -41,7 +41,7 @@ const RootQuery = new GraphQLObjectType({
getMovieByColumnType: { getMovieByColumnType: {
type: new GraphQLList(MovieType), type: new GraphQLList(MovieType),
args: { args: {
id: { type: GraphQLString }, id: { type: GraphQLInt },
title: { type: GraphQLString }, title: { type: GraphQLString },
genre: { type: GraphQLString }, genre: { type: GraphQLString },
rating_dice_throw: { type: GraphQLInt }, rating_dice_throw: { type: GraphQLInt },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment