Skip to content

Instantly share code, notes, and snippets.

@john-nash-rs
Created August 7, 2020 10:10
Show Gist options
  • Save john-nash-rs/85d7ff33342997e06eaac9699dad1ac7 to your computer and use it in GitHub Desktop.
Save john-nash-rs/85d7ff33342997e06eaac9699dad1ac7 to your computer and use it in GitHub Desktop.
import React from 'react';
import { QueryRenderer } from 'react-relay';
import environment from './RelayEnvironment'
import graphql from 'babel-plugin-relay/macro';
import './tailwind.output.css';
export default class App extends React.Component {
//this.state = {farmCropId:1}
constructor(props) {
super(props)
this.state = { farmCropId: 1 }
}
onFarmCropIdChange = (event) => {
console.log(event.target.value)
this.setState({ farmCropId: event.target.value })
}
render() {
const farmCropId = this.state.farmCropId
console.log('Props', this.props)
return (
<div>
<div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl">
<label class="block text-gray-700 text-sm font-bold mb-2" for="farmCropId">
Farm Crop Id
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" value={farmCropId} onChange={this.onFarmCropIdChange} />
</div>
<QueryRenderer
environment={environment}
query={graphql`
query AppQuery($farmCropId: Int) {
bookings(input: {farmCropId: $farmCropId}){
bookings {
bookingId
machines{
location
}
}
}
}
`}
variables={{ farmCropId }}
render={({ error, props }) => {
console.log('Error', error, 'Props', props)
if (error) {
return <div>Error!</div>;
}
if (!props) {
return <div>Loading...</div>;
}
return <div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl">
<div className="ml-6 pt-1">
<h1 className="text-2xl text-blue-700 leading-tight">
Booking Information:
</h1>
{props.bookings.bookings.map((booking) => {
return (
<div className="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl" key={`booking-${booking.bookingId}`}>
<label>Booking Id: {booking.bookingId}</label>
<br />
<label>Machine Location Id: {booking.machines.location}</label>
</div>
)
})}
</div>
</div>;
}}
/>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment