Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { PropTypes, Component } from 'react';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import './App.css';
import BookSearch from './BookSearch';
import BookDetails from './BookDetails';
import GoogleMap from 'google-map-react';
const Layout = ({ children }) => (
<div>{ children }</div>
);
// Replace this Uri with your GraphQL server Uri
const serverUri = 'http://localhost:5000/graphql';
const plumber = {
background: 'url(./src/img/plumber.png)',
backgroundSize: 'contain',
width: '30px',
height: '30px'
}
class MyGreatPlace extends Component {
constructor(props) {
super(props)
this.state = {open: false};
this.handleClick = this.handleClick.bind(this)
}
static propTypes = {
text: PropTypes.string
};
handleClick(event) {
event.preventDefault();
event.stopPropagation();
this.setState({open: !this.state.open})
}
render() {
return (
<div onClick={this.handleClick} style={plumber}>
{ this.props.text }
</div>
);
}
}
// const toolTipStyles = {
// position: 'absolute',
// width: '50px',
// height: '50px',
// top: '-100px',
// left: '30px',
// background: 'navajo'
// }
// class Tooltip extends Component {
// render () {
// return (
// <div style={toolTipStyles}>ToolTip</div>
// )
// }
// }
class Drawer extends Component {
constructor(props) {
super(props)
}
render () {
console.log(this.props)
return (
<div style={
{
transition: 'width 0.5s ease',
position: 'absolute',
top: 0,
right: 0,
width: '200px',
height: '100vh',
background: 'mediumorchid'
}
}>
</div>
)
}
}
class App extends Component {
constructor(...args) {
super(...args);
const networkInterface = createNetworkInterface({
uri: serverUri,
opts: { cors: true },
});
this.handlePlumberClick = this.handlePlumberClick.bind(this)
this.state = {
open: false,
id: null
}
this.client = new ApolloClient({
networkInterface,
// Our backend has unique IDs, so we should use them for cache consistency
dataIdFromObject: r => r.id,
});
}
handlePlumberClick (id) {
this.setState({
id: id,
open: !this.state.open
})
}
render() {
return (
<ApolloProvider client={this.client}>
<div>
<GoogleMap
style={null}
bootstrapURLKeys={{
key: 'AIzaSyA877dUOx8E9Pt0wAaFUjULuKUGEiVJ8RM',
language: 'en'
}}
defaultCenter={{lat: 42.360, lng: -71.0}}
defaultZoom={9}
onChildClick={this.handlePlumberClick}
>
<MyGreatPlace lat={59.955413} lng={30.337844} />
</GoogleMap>
{
this.state.open &&
<Drawer id={this.state.id} />
}
</div>
</ApolloProvider>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment