daily pastebin goal
24%
SHARE
TWEET

Untitled

a guest Mar 24th, 2019 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * NOTE: The Babel plugin will automatically process the `tw()` function, which
  3.  * means we don’t actually need to import it. ESLint will complain about this,
  4.  * however, so we need to add `tw` as a global variable.
  5.  */
  6.  
  7. /* global tw */
  8. import React from 'react'
  9. import styled from 'react-emotion'
  10. import { graphql } from 'gatsby'
  11. import Layout from "../components/layout"
  12. import SEO from "../components/seo"
  13. import Space from "../components/space"
  14. import { Link } from "gatsby"
  15. import Modal from 'react-modal';
  16. import Form from '../components/form'
  17. import { colors } from "../components/theme"
  18. import Search from '../components/search';
  19. import Toggle from '../components/toggle';
  20. import Button from '../components/button';
  21.  
  22. Modal.setAppElement('body');
  23.  
  24. const SpacesWrapper = styled('section')`
  25.     ${tw`flex flex-wrap mx-auto mt-4`}
  26. `
  27.  
  28. const SpaceWrapper = styled('div')`
  29.     ${tw`w-1/3`}
  30. `
  31.  
  32. const StyledModal = styled(Modal)`
  33.     ${tw`fixed w-full h-full p-16 overflow-hidden flex flex-row align-items-center justify-content-center`}
  34. `
  35.  
  36. const ModalDialog = styled('div')`
  37.     ${tw`bg-white shadow-xl flex flex-row w-full h-full z-50 mx-auto`}
  38.     max-width: 1560px;
  39. `
  40.  
  41. const ModalClick = styled('div')`
  42.   ${tw`absolute pin-t pin-l w-full h-full`}
  43. `
  44.  
  45. const SearchInputWrapper = styled('div')`
  46.     ${tw`max-w-lg mx-auto relative`}
  47. `
  48.  
  49. const FilterWrapper = styled('div')`
  50.     ${tw`flex flex-row align-center justify-center`}
  51. `
  52.  
  53. const ToggleWrapper = styled('div')`
  54.     ${tw`px-4`}
  55. `
  56.  
  57. export default class Index extends React.Component {
  58.     constructor(props) {
  59.         super(props);
  60.         this.state = {
  61.                     search: "",
  62.                     fastWifi: false,
  63.                     filterSockets: false,
  64.                     filterRating: false,
  65.                     openToday: false,
  66.                     modalIsOpen: false,
  67.                     userLat : false,
  68.                     userLng: false
  69.                 };
  70.                 this.openModal = this.openModal.bind(this);
  71.                 this.afterOpenModal = this.afterOpenModal.bind(this);
  72.                 this.closeModal = this.closeModal.bind(this);
  73.                 this.filterSpeed = this.filterSpeed.bind(this);
  74.                 this.filterSockets = this.filterSockets.bind(this);
  75.                 this.filterRating = this.filterRating.bind(this);
  76.     }
  77.  
  78.     openModal() {
  79.             this.setState({modalIsOpen: true});
  80.     }
  81.  
  82.     afterOpenModal() {
  83.             document.body.style.overflow = "hidden";
  84.             document.querySelector('.geosuggest__input').focus();
  85.     }
  86.  
  87.     closeModal() {
  88.             this.setState({modalIsOpen: false});
  89.             document.body.style.overflow = "auto";
  90.     }
  91.  
  92.     updateSearch(event) {
  93.         this.setState({search: event.target.value});
  94.     }
  95.  
  96.     filterSpeed() {
  97.         if (this.state.fastWifi){
  98.             this.setState ({
  99.                 fastWifi: 0
  100.             });
  101.         } else {
  102.             this.setState ({
  103.                     fastWifi: 20
  104.             });
  105.         }
  106.     }
  107.  
  108.     filterSockets() {
  109.         if (this.state.filterSockets){
  110.             this.setState ({
  111.                 filterSockets: false
  112.             });
  113.         } else {
  114.             this.setState ({
  115.                     filterSockets: true
  116.             });
  117.         }
  118.     }
  119.  
  120.     filterRating() {
  121.         if (this.state.filterRating){
  122.             this.setState ({
  123.                 filterRating: false
  124.             });
  125.         } else {
  126.             this.setState ({
  127.                     filterRating: true
  128.             });
  129.         }
  130.     }
  131.  
  132.     filterOpenToday() {
  133.         if (this.state.openToday){
  134.             this.setState ({
  135.                 openToday: false
  136.             });
  137.         } else {
  138.             this.setState ({
  139.                     openToday: true
  140.             });
  141.         }
  142.     }
  143.  
  144.  
  145.   render() {
  146.  
  147.     const sockets = this.state.filterSockets;
  148.     const rating = this.state.filterRating;
  149.  
  150.     function filteredRating() {
  151.         if (rating) {
  152.             return ({ node }) => (node.rating >= 4.5);
  153.         } else {
  154.             return ({ node }) => (node.rating >= 0);
  155.         }
  156.     }
  157.  
  158.     const filteredSpeed = ({node}) => (node.speed >= this.state.fastWifi);
  159.  
  160.     function filteredSockets() {
  161.         if (sockets) {
  162.             return ({ node }) => (node.sockets === "Some" || node.sockets === "Many");
  163.         } else {
  164.             return ({ node }) => (node.sockets === "Some" || node.sockets === "Many" || node.sockets === "None");
  165.         }
  166.     }
  167.  
  168.  
  169.     let filteredResults = this.props.data.allGoogleSheetSpacesRow.edges.filter(
  170.         ({node}) => (
  171.             node.space.toLowerCase().includes(this.state.search.toLowerCase()) || node.location.toLowerCase().includes(this.state.search.toLowerCase()) || node.type.toLowerCase().includes(this.state.search.toLowerCase())
  172.         )
  173.     );
  174.  
  175.  
  176.     return (
  177.       <Layout>
  178.                 <SEO title="Spaces" keywords={[`gatsby`, `application`, `react`]} />
  179.                 <Button classes="sm" onClick={this.openModal} title="Add a space" />
  180.                 <SearchInputWrapper>
  181.                     <Search value={this.state.search} onChange={this.updateSearch.bind(this)} />
  182.  
  183.                     <FilterWrapper>
  184.  
  185.                         <ToggleWrapper>
  186.                             <Toggle
  187.                                 name="fastWifi"
  188.                                 label="Fast Wifi"
  189.                                 onChange={this.filterSpeed}
  190.                             />
  191.                         </ToggleWrapper>
  192.  
  193.                         <ToggleWrapper>
  194.                             <Toggle
  195.                                     name="socketsAvailable"
  196.                                     label="Sockets"
  197.                                 onChange={this.filterSockets}
  198.                                 />
  199.                         </ToggleWrapper>
  200.  
  201.                         <ToggleWrapper>
  202.                             <Toggle
  203.                                 name="highRating"
  204.                                 label="High rating"
  205.                             onChange={this.filterRating}
  206.                             />
  207.                         </ToggleWrapper>
  208.  
  209.  
  210.                     </FilterWrapper>
  211.  
  212.                 </SearchInputWrapper>
  213.  
  214.                     {
  215.                         navigator.geolocation.getCurrentPosition(
  216.                                 (position) => {
  217.                                         let lat = position.coords.latitude
  218.                                         let lng = position.coords.longitude
  219.                                         console.log("getCurrentPosition Success " + lat + lng) // logs position correctly
  220.                                         this.setState({
  221.                                                 userLat: lat,
  222.                                                 userLng: lng
  223.                                         })
  224.                                 },
  225.                                 (error) => {
  226.                                         //this.props.displayError("Error dectecting your location");
  227.                                         console.error(JSON.stringify(error))
  228.                                 },
  229.                                 {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
  230.                         )
  231.                     }
  232.  
  233.                 <SpacesWrapper>
  234.                     {filteredResults.filter(filteredSpeed).filter(filteredSockets()).filter(filteredRating()).sort((a, b) => a.node.onCalculateDistance - b).map(({ node }) => {
  235.                         return (
  236.                             <SpaceWrapper key={node.id}>
  237.                                 <Space node={node} userLat={this.state.userLat} userLng={this.state.userLng} onCalculateDistance={this.distanceChange} />
  238.                             </SpaceWrapper>
  239.                         )}
  240.                     )}
  241.                 </SpacesWrapper>
  242.                 <StyledModal
  243.                         closeTimeoutMS={300}
  244.                         isOpen={this.state.modalIsOpen}
  245.                         onAfterOpen={this.afterOpenModal}
  246.                         onRequestClose={this.closeModal}
  247.                         shouldCloseOnOverlayClick={true}
  248.                         contentLabel="Form Modal"
  249.                         style={{
  250.                             overlay: {
  251.                                 backgroundColor: 'rgba(22, 24, 35, 0.95)',
  252.                                 overflow: 'hidden'
  253.                             }
  254.                         }}
  255.                         >
  256.                     <ModalClick onClick={this.closeModal}></ModalClick>
  257.                     <ModalDialog id="ModalDialog">
  258.                         <Form />
  259.                     </ModalDialog>
  260.                 </StyledModal>
  261.       </Layout>
  262.     )
  263.   }
  264. }
  265.  
  266. export const query = graphql`
  267.     query Spaces {
  268.         allGoogleSheetSpacesRow {
  269.             edges {
  270.                 node {
  271.                     id
  272.                     space
  273.                     city
  274.                     location
  275.                     type
  276.                     speed
  277.                     password
  278.                     sockets
  279.                     twitter
  280.                     timestamp
  281.                     latitude
  282.                     longitude
  283.                     website
  284.                     mapsurl
  285.                     twitter
  286.                     rating
  287.                     monday
  288.                     tuesday
  289.                     wednesday
  290.                     thursday
  291.                     friday
  292.                     saturday
  293.                     sunday
  294.                 }
  295.             }
  296.         }
  297.     }
  298. `
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top