Created
March 19, 2019 13:14
-
-
Save mckeever02/3243649c60d2dcfaa6031554af50c74f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* NOTE: The Babel plugin will automatically process the `tw()` function, which | |
* means we don’t actually need to import it. ESLint will complain about this, | |
* however, so we need to add `tw` as a global variable. | |
*/ | |
/* global tw */ | |
import React from 'react' | |
import styled from 'react-emotion' | |
import { graphql } from 'gatsby' | |
import Layout from "../components/layout" | |
import SEO from "../components/seo" | |
import Space from "../components/space" | |
import { Link } from "gatsby" | |
import Modal from 'react-modal'; | |
import Form from '../components/form' | |
import { colors } from "../components/theme" | |
import Search from '../components/search'; | |
import Toggle from '../components/toggle'; | |
import Button from '../components/button'; | |
Modal.setAppElement('body'); | |
const SpacesWrapper = styled('section')` | |
${tw`flex flex-wrap mx-auto mt-4`} | |
` | |
const SpaceWrapper = styled('div')` | |
${tw`w-1/3`} | |
` | |
const StyledModal = styled(Modal)` | |
${tw`fixed w-full h-full p-16 overflow-hidden flex flex-row align-items-center justify-content-center`} | |
` | |
const ModalDialog = styled('div')` | |
${tw`bg-white shadow-xl flex flex-row w-full h-full z-50 mx-auto`} | |
max-width: 1560px; | |
` | |
const ModalClick = styled('div')` | |
${tw`absolute pin-t pin-l w-full h-full`} | |
` | |
const SearchInputWrapper = styled('div')` | |
${tw`max-w-lg mx-auto relative`} | |
` | |
const FilterWrapper = styled('div')` | |
${tw`flex flex-row align-center justify-center`} | |
` | |
const ToggleWrapper = styled('div')` | |
${tw`px-4`} | |
` | |
export default class Index extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
search: "", | |
fastWifi: false, | |
filterSockets: false, | |
filterRating: false, | |
openToday: false, | |
modalIsOpen: false, | |
userLat : false, | |
userLng: false | |
}; | |
this.openModal = this.openModal.bind(this); | |
this.afterOpenModal = this.afterOpenModal.bind(this); | |
this.closeModal = this.closeModal.bind(this); | |
this.filterSpeed = this.filterSpeed.bind(this); | |
this.filterSockets = this.filterSockets.bind(this); | |
this.filterRating = this.filterRating.bind(this); | |
} | |
openModal() { | |
this.setState({modalIsOpen: true}); | |
} | |
afterOpenModal() { | |
document.body.style.overflow = "hidden"; | |
document.querySelector('.geosuggest__input').focus(); | |
} | |
closeModal() { | |
this.setState({modalIsOpen: false}); | |
document.body.style.overflow = "auto"; | |
} | |
updateSearch(event) { | |
this.setState({search: event.target.value}); | |
} | |
filterSpeed() { | |
if (this.state.fastWifi){ | |
this.setState ({ | |
fastWifi: 0 | |
}); | |
} else { | |
this.setState ({ | |
fastWifi: 20 | |
}); | |
} | |
} | |
filterSockets() { | |
if (this.state.filterSockets){ | |
this.setState ({ | |
filterSockets: false | |
}); | |
} else { | |
this.setState ({ | |
filterSockets: true | |
}); | |
} | |
} | |
filterRating() { | |
if (this.state.filterRating){ | |
this.setState ({ | |
filterRating: false | |
}); | |
} else { | |
this.setState ({ | |
filterRating: true | |
}); | |
} | |
} | |
filterOpenToday() { | |
if (this.state.openToday){ | |
this.setState ({ | |
openToday: false | |
}); | |
} else { | |
this.setState ({ | |
openToday: true | |
}); | |
} | |
} | |
render() { | |
const sockets = this.state.filterSockets; | |
const rating = this.state.filterRating; | |
function filteredRating() { | |
if (rating) { | |
return ({ node }) => (node.rating >= 4.5); | |
} else { | |
return ({ node }) => (node.rating >= 0); | |
} | |
} | |
const filteredSpeed = ({node}) => (node.speed >= this.state.fastWifi); | |
function filteredSockets() { | |
if (sockets) { | |
return ({ node }) => (node.sockets === "Some" || node.sockets === "Many"); | |
} else { | |
return ({ node }) => (node.sockets === "Some" || node.sockets === "Many" || node.sockets === "None"); | |
} | |
} | |
let filteredResults = this.props.data.allGoogleSheetSpacesRow.edges.filter( | |
({node}) => ( | |
node.space.toLowerCase().includes(this.state.search.toLowerCase()) || node.location.toLowerCase().includes(this.state.search.toLowerCase()) || node.type.toLowerCase().includes(this.state.search.toLowerCase()) | |
) | |
); | |
return ( | |
<Layout> | |
<SEO title="Spaces" keywords={[`gatsby`, `application`, `react`]} /> | |
<Button classes="sm" onClick={this.openModal} title="Add a space" /> | |
<SearchInputWrapper> | |
<Search value={this.state.search} onChange={this.updateSearch.bind(this)} /> | |
<FilterWrapper> | |
<ToggleWrapper> | |
<Toggle | |
name="fastWifi" | |
label="Fast Wifi" | |
onChange={this.filterSpeed} | |
/> | |
</ToggleWrapper> | |
<ToggleWrapper> | |
<Toggle | |
name="socketsAvailable" | |
label="Sockets" | |
onChange={this.filterSockets} | |
/> | |
</ToggleWrapper> | |
<ToggleWrapper> | |
<Toggle | |
name="highRating" | |
label="High rating" | |
onChange={this.filterRating} | |
/> | |
</ToggleWrapper> | |
</FilterWrapper> | |
</SearchInputWrapper> | |
{ | |
navigator.geolocation.getCurrentPosition( | |
(position) => { | |
let lat = position.coords.latitude | |
let lng = position.coords.longitude | |
console.log("getCurrentPosition Success " + lat + lng) // logs position correctly | |
this.setState({ | |
userLat: lat, | |
userLng: lng | |
}) | |
}, | |
(error) => { | |
//this.props.displayError("Error dectecting your location"); | |
console.error(JSON.stringify(error)) | |
}, | |
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} | |
) | |
} | |
<SpacesWrapper> | |
{filteredResults.filter(filteredSpeed).filter(filteredSockets()).filter(filteredRating()).sort((a, b) => a.node.onCalculateDistance - b).map(({ node }) => { | |
return ( | |
<SpaceWrapper key={node.id}> | |
<Space node={node} userLat={this.state.userLat} userLng={this.state.userLng} onCalculateDistance={this.distanceChange} /> | |
</SpaceWrapper> | |
)} | |
)} | |
</SpacesWrapper> | |
<StyledModal | |
closeTimeoutMS={300} | |
isOpen={this.state.modalIsOpen} | |
onAfterOpen={this.afterOpenModal} | |
onRequestClose={this.closeModal} | |
shouldCloseOnOverlayClick={true} | |
contentLabel="Form Modal" | |
style={{ | |
overlay: { | |
backgroundColor: 'rgba(22, 24, 35, 0.95)', | |
overflow: 'hidden' | |
} | |
}} | |
> | |
<ModalClick onClick={this.closeModal}></ModalClick> | |
<ModalDialog id="ModalDialog"> | |
<Form /> | |
</ModalDialog> | |
</StyledModal> | |
</Layout> | |
) | |
} | |
} | |
export const query = graphql` | |
query Spaces { | |
allGoogleSheetSpacesRow { | |
edges { | |
node { | |
id | |
space | |
city | |
location | |
type | |
speed | |
password | |
sockets | |
timestamp | |
latitude | |
longitude | |
website | |
mapsurl | |
rating | |
monday | |
tuesday | |
wednesday | |
thursday | |
friday | |
saturday | |
sunday | |
} | |
} | |
} | |
} | |
` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment