import React , { useState , useContext } from "react" ; import { TestContext } from "../../../provider/TestProvider" ; import { StateContext } from "../../../provider/StateProvider" ; import Input from "../../../../node_modules/@material-ui/core/Input" ; import "./GraphQLEndpoint.scss" ; import { AwesomeButtonProgress } from "react-awesome-button" ; import Switch , { SwitchClassKey , SwitchProps } from '@material-ui/core/Switch' ; import Grid from '@material-ui/core/Grid' ; import { green } from '@material-ui/core/colors' ; import { withStyles } from '@material-ui/core/styles' ; const { remote } = window . require ( "electron" ) ; const GraphQl = ( ) => { const { test , testHandler } = useContext ( TestContext ) ; const { activePort , activeFile , setActiveFile } = useContext ( StateContext ) ; const [ operationIsMutation , setOperationIsMutation ] = useState ( false ) ; const [ operationIsValid , setOperationIsValid ] = useState ( false ) ; let current ; const getSchemaPath = ( ) => { remote . dialog . showOpenDialog ( { properties : [ "openFile" ] , message : "Please choose your schema file" , } ) . then ( ( files ) => { if ( ! files . cancelled ) { current = files . filePaths [ 0 ] ; testHandler ( "schemaFile" , current ) ; } } ) ; } ; const getResolverPath = ( ) => { remote . dialog . showOpenDialog ( { properties : [ "openFile" ] , message : "Please choose your resolver file" , } ) . then ( ( files ) => { if ( ! files . cancelled ) { current = files . filePaths [ 0 ] ; testHandler ( "resolverFile" , current ) ; } } ) ; } ; const inputHandler = ( e ) : void => { if ( e == null ) { console . log ( { schemaFile : current } ) ; testHandler ( "schemaFile" , current ) ; } else if ( e == undefined ) { console . log ( { resolverFile : current } ) ; testHandler ( "resolverFile" , current ) ; } else testHandler ( e . target . id , ( e . target as HTMLInputElement ) . value ) ; } ; const gqlOperationHandler = ( ) : void => { setOperationIsMutation ( ! operationIsMutation ) ; testHandler ( "operationIsMutation" , operationIsMutation ) ; } ; const validOperationHandler = ( ) : void => { setOperationIsValid ( ! operationIsValid ) ; testHandler ( "operationIsValid" , operationIsValid ) ; } ; const GreenSwitch = withStyles ( { switchBase : { color : green [ 300 ] , '&$checked' : { color : green [ 500 ] , } , '&$checked + $track' : { backgroundColor : green [ 500 ] , } , } , checked : { } , track : { } , } ) ( Switch ) ; return ( < div > < i className = "fas fa-vial" > < /i> < div id = "test-title" > GraphQL Test Builder < /div> < div className = "rest-endpoint" > < div id = "server-button" > { } < AwesomeButtonProgress type = "secondary" ripple = { true } action = { ( element , next ) => { getSchemaPath ( ) ; setTimeout ( ( ) => { next ( ) ; } , 1000 ) ; return ; } } loadingLabel = "connecting" resultLabel = "connected" > UPLOAD SCHEMAS < /AwesomeButtonProgress> { } < AwesomeButtonProgress type = "secondary" ripple = { true } action = { ( element , next ) => { getResolverPath ( ) ; setTimeout ( ( ) => { next ( ) ; } , 1000 ) ; return ; } } loadingLabel = "connecting" resultLabel = "connected" > UPLOAD RESOLVERS < /AwesomeButtonProgress> < br / > < /div> { } < Input placeholder = "Describe Your Test" fullWidth = { true } id = "expectedRes" type = "text" onChange = { inputHandler } / > { } < Grid component = "label" container alignItems = "center" justify = "center" spacing = { 1 } > < Grid item > Valid Operation < /Grid> < Grid item > < Switch checked = { operationIsValid } onChange = { validOperationHandler } id = "operationIsValid" / > < /Grid> < Grid item > Invalid Operation < /Grid> < /Grid> { } < Input placeholder = { `Enter Your Query/Mutation: ${ '\n' }${ '\n' } query: { users { id, name } } ${ '\n' } mutation: { users { id, name } }` } fullWidth = { true } id = "gqlOperationText" type = "text" multiline = { true } rows = { 4 } onChange = { inputHandler } / > { } < Grid component = "label" container alignItems = "center" justify = "center" spacing = { 1 } > < Grid item > Query < /Grid> < Grid item > < Switch checked = { operationIsMutation } onChange = { gqlOperationHandler } id = "operationIsMutation" / > < /Grid> < Grid item > Mutation < /Grid> < /Grid> { } { ( operationIsMutation ) ? < Input placeholder = "Mutation Object with fields of input" defaultValue = { test . mutationObject || "" } fullWidth = { true } id = "mutationObject" type = "text" multiline = { true } rows = { 3 } onChange = { inputHandler } / > : null } < br > < /br> < /div> < /div>); } ; export default GraphQl ;