\n
\n \n
\n \n \n 
\n \n
\n \n setSearch(evt.target.value)}\n onSearch={onSearch}\n />\n
\n \n
\n \n \n
\n
\n );\n};\n","import React from 'react';\nimport { Layout } from 'antd';\n\nimport logo from './assets/tinyhouse-logo.png';\n\nconst { Header } = Layout;\n\nexport const AppHeaderSkeleton = () => {\n return (\n \n \n Find a place you'll love to stay at\n \n
\n \n
\n \n \n
\n \n
\n \n \n );\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { Listings } from '../../../../lib/graphql/queries/Listings/__generated__/Listings';\n\ninterface Props {\n title: string;\n listings: Listings['listings']['result'];\n}\n\nconst { Title } = Typography;\n\nexport const HomeListings = ({ title, listings }: Props) => {\n return (\n \n \n {formatListingPrice(price)}\n <span>/day</span>\n \n \n {title}\n \n \n {address}\n \n
\n \n {numOfGuests} guests \n
\n \n \n {title}\n \n (\n \n \n )}\n />\n
\n );\n};\n","import React from 'react';\nimport { Card, List, Skeleton } from 'antd';\n\nimport listingLoadingCardCover from '../../assets/listing-loading-card-cover.jpg';\n\nexport const HomeListingsSkeleton = () => {\n const emptyData = [{}, {}, {}, {}];\n\n return (\n \n (\n \n
\n }\n loading\n />\n \n )}\n />\n \n );\n};\n","import React from 'react';\nimport { Link, RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Row, Layout, Typography } from 'antd';\nimport { LISTINGS } from '../../lib/graphql/queries';\nimport {\n Listings as ListingsData,\n ListingsVariables\n} from '../../lib/graphql/queries/Listings/__generated__/Listings';\nimport { ListingsFilter } from '../../lib/graphql/globalTypes';\nimport { displayErrorMessage } from '../../lib/utils';\nimport { HomeHero, HomeListings, HomeListingsSkeleton } from './components';\n\nimport mapBackground from './assets/map-background.jpg';\nimport sanFransiscoImage from './assets/san-fransisco.jpg';\nimport cancunImage from './assets/cancun.jpg';\n\nconst { Content } = Layout;\nconst { Paragraph, Title } = Typography;\n\nconst PAGE_LIMIT = 4;\nconst PAGE_NUMBER = 1;\n\nexport const Home = ({ history }: RouteComponentProps) => {\n const { loading, data } = useQuery\n \n Your guide for all things rental\n \n \n Helping you make the best decisions in renting your last minute\n locations.\n \n \n Popular listings in the United States\n \n
\n\n {renderListingsSection()}\n\n \n \n Listings of any kind\n \n \n
\n
\n \n );\n};\n","import React, { useState, FormEvent } from 'react';\nimport { Link, Redirect } from 'react-router-dom';\nimport { useMutation } from '@apollo/react-hooks';\nimport {\n Button,\n Form,\n Icon,\n Input,\n InputNumber,\n Layout,\n Radio,\n Typography,\n Upload\n} from 'antd';\nimport { FormComponentProps } from 'antd/lib/form';\nimport { UploadChangeParam } from 'antd/lib/upload';\nimport { HOST_LISTING } from '../../lib/graphql/mutations';\nimport {\n HostListing as HostListingData,\n HostListingVariables\n} from '../../lib/graphql/mutations/HostListing/__generated__/HostListing';\nimport { ListingType } from '../../lib/graphql/globalTypes';\nimport {\n iconColor,\n displaySuccessNotification,\n displayErrorMessage\n} from '../../lib/utils';\nimport { Viewer } from '../../lib/types';\n\ninterface Props {\n viewer: Viewer;\n}\n\nconst { Content } = Layout;\nconst { Text, Title } = Typography;\nconst { Item } = Form;\n\nexport const Host = ({ viewer, form }: Props & FormComponentProps) => {\n const [imageLoading, setImageLoading] = useState(false);\n const [imageBase64Value, setImageBase64Value] = useState\n
\n \n \n \n
\n \n \n \n \n You'll have to be signed in and connected with Stripe to host a\n listing!\n \n \n We only allow users who've signed in to our application and have\n connected with Stripe to host new listings. You can sign in at the{' '}\n /login page and connect with Stripe shortly\n after.\n \n
\n \n \n Please wait!\n \n We're creating your listing now. \n
\n \n
\n );\n\n return (\n \n Check in: {listingBooking.checkIn} \n
\n \n Check out: {listingBooking.checkOut} \n
\n \n
\n ) : null;\n\n return listingBookingsElement;\n};\n","import React from 'react';\nimport { Button, Card, DatePicker, Divider, Typography } from 'antd';\nimport moment, { Moment } from 'moment';\nimport { Listing as ListingData } from '../../../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { displayErrorMessage, formatListingPrice } from '../../../../lib/utils';\nimport { Viewer } from '../../../../lib/types';\nimport { BookingsIndex } from './types';\n\nconst { Paragraph, Text, Title } = Typography;\n\ninterface Props {\n viewer: Viewer;\n host: ListingData['listing']['host'];\n price: number;\n bookingsIndex: ListingData['listing']['bookingsIndex'];\n checkInDate: Moment | null;\n checkOutDate: Moment | null;\n setCheckInDate: (checkInDate: Moment | null) => void;\n setCheckOutDate: (checkOutDate: Moment | null) => void;\n setModalVisible: (modalVisible: boolean) => void;\n}\n\nexport const ListingCreateBooking = ({\n viewer,\n host,\n price,\n bookingsIndex,\n checkInDate,\n checkOutDate,\n setCheckInDate,\n setCheckOutDate,\n setModalVisible,\n}: Props) => {\n const bookingsIndexJSON: BookingsIndex = JSON.parse(bookingsIndex);\n\n const dateIsBooked = (currentDate: Moment) => {\n const year = moment(currentDate).year();\n const month = moment(currentDate).month();\n const day = moment(currentDate).date();\n\n if (bookingsIndexJSON[year] && bookingsIndexJSON[year][month]) {\n return Boolean(bookingsIndexJSON[year][month][day]);\n } else {\n return false;\n }\n };\n\n const disabledDate = (currentDate: Moment | null) => {\n if (currentDate) {\n const dateIsBeforeEndOfDay = currentDate.isBefore(moment().endOf('day'));\n\n return dateIsBeforeEndOfDay || dateIsBooked(currentDate);\n } else {\n return false;\n }\n };\n\n const verifyAndSetCheckOutDate = (selectedCheckOutDate: Moment | null) => {\n if (checkInDate && selectedCheckOutDate) {\n if (moment(selectedCheckOutDate).isBefore(checkInDate, 'days')) {\n return displayErrorMessage(\n `You can't book date of check out to be prior to check in!`\n );\n }\n\n let dateCursor = checkInDate;\n\n while (moment(dateCursor).isBefore(selectedCheckOutDate, 'days')) {\n dateCursor = moment(dateCursor).add(1, 'days');\n\n const year = moment(dateCursor).year();\n const month = moment(dateCursor).month();\n const day = moment(dateCursor).date();\n\n if (\n bookingsIndexJSON[year] &&\n bookingsIndexJSON[year][month] &&\n bookingsIndexJSON[year][month][day]\n ) {\n return displayErrorMessage(\n \"You can't book a period of time that overlaps existing bookings. Please try again!\"\n );\n }\n }\n }\n\n setCheckOutDate(selectedCheckOutDate);\n };\n\n const viewerIsHost = viewer.id === host.id;\n const checkInInputDisabled = !viewer.id || viewerIsHost || !host.hasWallet;\n const checkOutInputDisabled = checkInInputDisabled || !checkInDate;\n const buttonDisabled = checkOutInputDisabled || !checkInDate || !checkOutDate;\n\n let buttonMessage = \"You won't be charged yet\";\n if (!viewer.id) {\n buttonMessage = 'You have to be signed in to book a listing!';\n } else if (viewerIsHost) {\n buttonMessage = \"You can't book your own listing!\";\n } else if (!host.hasWallet) {\n buttonMessage =\n \"The host has disconnected from Stripe and thus won't be able to receive payments!\";\n }\n\n return (\n \n Bookings \n
\n {listingBookingsList}\n \n \n setModalVisible(true)}\n >\n Request to book!\n \n \n {buttonMessage}\n \n \n
\n );\n};\n","import React from 'react';\nimport { useMutation } from '@apollo/react-hooks';\nimport {\n CardElement,\n injectStripe,\n ReactStripeElements,\n} from 'react-stripe-elements';\nimport { Button, Divider, Icon, Modal, Typography } from 'antd';\nimport moment, { Moment } from 'moment';\nimport { CREATE_BOOKING } from '../../../../lib/graphql/mutations';\nimport {\n CreateBooking as CreateBookingData,\n CreateBookingVariables,\n} from '../../../../lib/graphql/mutations/CreateBooking/__generated__/CreateBooking';\nimport {\n formatListingPrice,\n displaySuccessNotification,\n displayErrorMessage,\n} from '../../../../lib/utils';\n\ninterface Props {\n id: string;\n price: number;\n modalVisible: boolean;\n checkInDate: Moment;\n checkOutDate: Moment;\n setModalVisible: (modalVisible: boolean) => void;\n clearBookingData: () => void;\n handleListingRefetch: () => Promise\n \n \n {formatListingPrice(price)}\n <span>/day</span>\n \n \n
\n \n Check In \n setCheckInDate(dateValue)}\n onOpenChange={() => setCheckOutDate(null)}\n />\n
\n \n Check Out \n verifyAndSetCheckOutDate(dateValue)}\n />\n
\n \n
\n \n );\n};\n\nexport const WrappedListingCreateBookingModal = injectStripe(\n ListingCreateBookingModal\n);\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Avatar, Divider, Icon, Tag, Typography } from 'antd';\nimport { Listing as ListingData } from '../../../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { iconColor } from '../../../../lib/utils';\n\ninterface Props {\n listing: ListingData['listing'];\n}\n\nconst { Paragraph, Title } = Typography;\n\nexport const ListingDetails = ({ listing }: Props) => {\n const {\n title,\n description,\n image,\n type,\n address,\n city,\n numOfGuests,\n host\n } = listing;\n\n return (\n \n \n <Icon type='key'></Icon>\n \n \n Book your trip\n \n \n Enter your payment information to book the listing from the dates\n between{' '}\n \n {moment(checkInDate).format('MMMM Do YYYY')}\n {' '}\n and{' '}\n \n {moment(checkOutDate).format('MMMM Do YYYY')}\n \n , inclusive.\n \n
\n\n \n \n {formatListingPrice(price, false)} * {daysBooked} days ={' '}\n {formatListingPrice(listingPrice, false)} \n \n \n Total = {formatListingPrice(listingPrice, false)} \n \n
\n\n \n \n Book\n \n \n Test using the credit card number: 4242 4242 4242 4242, a future\n expiration date, and any 3 digits for the CVC code.\n \n
\n \n
\n );\n};\n","import React, { useState } from 'react';\nimport { RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Layout, Row } from 'antd';\nimport { Moment } from 'moment';\nimport { ErrorBanner, PageSkeleton } from '../../lib/components';\nimport { LISTING } from '../../lib/graphql/queries';\nimport {\n Listing as ListingData,\n ListingVariables,\n} from '../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { Viewer } from '../../lib/types';\nimport {\n ListingBookings,\n ListingCreateBooking,\n WrappedListingCreateBookingModal as ListingCreateBookingModal,\n ListingDetails,\n} from './components';\n\ninterface MatchParams {\n id: string;\n}\n\ninterface Props {\n viewer: Viewer;\n}\n\nconst { Content } = Layout;\nconst PAGE_LIMIT = 3;\n\nexport const Listing = ({\n viewer,\n match,\n}: Props & RouteComponentProps\n \n \n \n {title}\n \n
\n\n \n \n \n {host.name}\n \n \n
\n\n \n About this space \n \n {description}\n \n
\n \n {type} \n {numOfGuests} Guests \n
\n \n Filter By\n setFilter(filter)}\n >\n \n \n \n
\n );\n};\n","import React from 'react';\nimport { Pagination } from 'antd';\n\ninterface Props {\n total: number;\n page: number;\n limit: number;\n setPage: (page: number) => void;\n}\n\nexport const ListingsPagination = ({ total, page, limit, setPage }: Props) => {\n return (\n \n (\n \n
\n }\n loading\n className='listings-skeleton__card'\n />\n \n )}\n />\n \n );\n};\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Link, RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Affix, Layout, List, Typography } from 'antd';\nimport { ErrorBanner, ListingCard } from '../../lib/components';\nimport { LISTINGS } from '../../lib/graphql/queries';\nimport {\n Listings as ListingsData,\n ListingsVariables\n} from '../../lib/graphql/queries/Listings/__generated__/Listings';\nimport { ListingsFilter } from '../../lib/graphql/globalTypes';\nimport {\n ListingsFilters,\n ListingsPagination,\n ListingsSkeleton\n} from './components';\n\ninterface MatchParams {\n location: string;\n}\n\nconst { Content } = Layout;\nconst { Paragraph, Text, Title } = Typography;\n\nconst PAGE_LIMIT = 8;\n\nexport const Listings = ({ match }: RouteComponentProps\n \n \n (\n \n \n )}\n />\n
\n ) : (\n \n
\n \n \n It appears that no listings have yet been created for{' '}\n \"{listingsRegion}\" \n \n \n Be the first person to create a{' '}\n listing in this area!\n \n
\n );\n\n const listingsRegionElement = listingsRegion ? (\n \n \n <span role='img' aria-label='wave'>\n 👋\n </span>\n \n \n Log in to TinyHouse!\n \n Sign in with Google to start booking available rentals! \n
\n NotFound
;\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { User } from '../../../../lib/graphql/queries/User/__generated__/User';\n\ninterface Props {\n userBookings: User['user']['bookings'];\n bookingsPage: number;\n limit: number;\n setBookingsPage: (page: number) => void;\n}\n\nconst { Paragraph, Text, Title } = Typography;\n\nexport const UserBookings = ({\n userBookings,\n bookingsPage,\n limit,\n setBookingsPage\n}: Props) => {\n const total = userBookings ? userBookings.total : null;\n const result = userBookings ? userBookings.result : null;\n\n const userBookingsList = userBookings ? (\n\n
\n );\n\n return (\n \n Check in: {userBooking.checkIn} \n
\n \n Check out: {userBooking.checkOut} \n
\n \n \n Bookings\n \n \n This section highlights the bookings you've made, and the\n check-in/check-out dates associated with said bookings.\n \n {userBookingsList}\n
\n ) : null;\n\n return userBookingsElement;\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { User } from '../../../../lib/graphql/queries/User/__generated__/User';\n\ninterface Props {\n userListings: User['user']['listings'];\n listingsPage: number;\n limit: number;\n setListingsPage: (page: number) => void;\n}\n\nconst { Paragraph, Title } = Typography;\n\nexport const UserListings = ({\n userListings,\n listingsPage,\n limit,\n setListingsPage\n}: Props) => {\n const { total, result } = userListings;\n\n const userListingsList = (\n \n \n Listings\n \n \n This section highlights the listings this user currently hosts and has\n made available for bookings.\n \n {userListingsList}\n
\n );\n};\n","import React, { Fragment } from 'react';\nimport { useMutation } from '@apollo/react-hooks';\nimport { Avatar, Button, Card, Divider, Tag, Typography } from 'antd';\nimport {\n formatListingPrice,\n displaySuccessNotification,\n displayErrorMessage\n} from '../../../../lib/utils';\nimport { DISCONNECT_STRIPE } from '../../../../lib/graphql/mutations';\nimport { DisconnectStripe as DisconnectStripeData } from '../../../../lib/graphql/mutations/DisconnectStripe/__generated__/DisconnectStripe';\nimport { User as UserData } from '../../../../lib/graphql/queries/User/__generated__/User';\nimport { Viewer } from '../../../../lib/types';\n\ninterface Props {\n user: UserData['user'];\n viewer: Viewer;\n viewerIsUser: boolean;\n setViewer: (viewer: Viewer) => void;\n handleUserRefetch: () => void;\n}\n\nconst stripeAuthUrl = `https://connect.stripe.com/oauth/authorize?response_type=code&client_id=${process.env.REACT_APP_STRIPE_CLIENT_ID}&scope=read_write`;\nconst { Paragraph, Text, Title } = Typography;\n\nexport const UserProfile = ({\n user,\n viewer,\n viewerIsUser,\n setViewer,\n handleUserRefetch\n}: Props) => {\n const [disconnectStripe, { loading }] = useMutation\n Additional Details \n {additionalDetails}\n
\n \n \n \n
\n );\n};\n","import React, { useState } from 'react';\nimport { RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Layout, Row } from 'antd';\nimport { USER } from '../../lib/graphql/queries';\nimport {\n User as UserData,\n UserVariables\n} from '../../lib/graphql/queries/User/__generated__/User';\nimport { ErrorBanner, PageSkeleton } from '../../lib/components';\nimport { Viewer } from '../../lib/types';\nimport { UserBookings, UserListings, UserProfile } from './components';\n\ninterface Props {\n viewer: Viewer;\n setViewer: (viewer: Viewer) => void;\n}\n\ninterface MatchParams {\n id: string;\n}\n\nconst { Content } = Layout;\nconst PAGE_LIMIT = 4;\n\nexport const User = ({\n viewer,\n setViewer,\n match\n}: Props & RouteComponentProps\n
\n \n Details \n \n Name: {user.name} \n \n \n Contact: {user.contact} \n \n
\n {additionalDetailsSection}\n \n
\n \n
\n \n
\n \n \n \n \n
\n \n setSearch(evt.target.value)}\n onSearch={onSearch}\n />\n
\n \n
\n \n \n
\n
\n );\n};\n","import React from 'react';\nimport { Layout } from 'antd';\n\nimport logo from './assets/tinyhouse-logo.png';\n\nconst { Header } = Layout;\n\nexport const AppHeaderSkeleton = () => {\n return (\n \n \n Find a place you'll love to stay at\n \n
\n \n
\n \n \n
\n \n
\n \n \n );\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { Listings } from '../../../../lib/graphql/queries/Listings/__generated__/Listings';\n\ninterface Props {\n title: string;\n listings: Listings['listings']['result'];\n}\n\nconst { Title } = Typography;\n\nexport const HomeListings = ({ title, listings }: Props) => {\n return (\n \n \n {formatListingPrice(price)}\n <span>/day</span>\n \n \n {title}\n \n \n {address}\n \n
\n \n {numOfGuests} guests \n
\n \n \n {title}\n \n (\n \n \n )}\n />\n
\n );\n};\n","import React from 'react';\nimport { Card, List, Skeleton } from 'antd';\n\nimport listingLoadingCardCover from '../../assets/listing-loading-card-cover.jpg';\n\nexport const HomeListingsSkeleton = () => {\n const emptyData = [{}, {}, {}, {}];\n\n return (\n \n (\n \n
\n }\n loading\n />\n \n )}\n />\n \n );\n};\n","import React from 'react';\nimport { Link, RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Row, Layout, Typography } from 'antd';\nimport { LISTINGS } from '../../lib/graphql/queries';\nimport {\n Listings as ListingsData,\n ListingsVariables\n} from '../../lib/graphql/queries/Listings/__generated__/Listings';\nimport { ListingsFilter } from '../../lib/graphql/globalTypes';\nimport { displayErrorMessage } from '../../lib/utils';\nimport { HomeHero, HomeListings, HomeListingsSkeleton } from './components';\n\nimport mapBackground from './assets/map-background.jpg';\nimport sanFransiscoImage from './assets/san-fransisco.jpg';\nimport cancunImage from './assets/cancun.jpg';\n\nconst { Content } = Layout;\nconst { Paragraph, Title } = Typography;\n\nconst PAGE_LIMIT = 4;\nconst PAGE_NUMBER = 1;\n\nexport const Home = ({ history }: RouteComponentProps) => {\n const { loading, data } = useQuery\n \n Your guide for all things rental\n \n \n Helping you make the best decisions in renting your last minute\n locations.\n \n \n Popular listings in the United States\n \n
\n\n {renderListingsSection()}\n\n \n \n Listings of any kind\n \n \n
\n
\n \n );\n};\n","import React, { useState, FormEvent } from 'react';\nimport { Link, Redirect } from 'react-router-dom';\nimport { useMutation } from '@apollo/react-hooks';\nimport {\n Button,\n Form,\n Icon,\n Input,\n InputNumber,\n Layout,\n Radio,\n Typography,\n Upload\n} from 'antd';\nimport { FormComponentProps } from 'antd/lib/form';\nimport { UploadChangeParam } from 'antd/lib/upload';\nimport { HOST_LISTING } from '../../lib/graphql/mutations';\nimport {\n HostListing as HostListingData,\n HostListingVariables\n} from '../../lib/graphql/mutations/HostListing/__generated__/HostListing';\nimport { ListingType } from '../../lib/graphql/globalTypes';\nimport {\n iconColor,\n displaySuccessNotification,\n displayErrorMessage\n} from '../../lib/utils';\nimport { Viewer } from '../../lib/types';\n\ninterface Props {\n viewer: Viewer;\n}\n\nconst { Content } = Layout;\nconst { Text, Title } = Typography;\nconst { Item } = Form;\n\nexport const Host = ({ viewer, form }: Props & FormComponentProps) => {\n const [imageLoading, setImageLoading] = useState(false);\n const [imageBase64Value, setImageBase64Value] = useState\n
\n \n \n \n
\n \n \n \n \n You'll have to be signed in and connected with Stripe to host a\n listing!\n \n \n We only allow users who've signed in to our application and have\n connected with Stripe to host new listings. You can sign in at the{' '}\n /login page and connect with Stripe shortly\n after.\n \n
\n \n \n Please wait!\n \n We're creating your listing now. \n
\n \n
\n );\n\n return (\n \n Check in: {listingBooking.checkIn} \n
\n \n Check out: {listingBooking.checkOut} \n
\n \n
\n ) : null;\n\n return listingBookingsElement;\n};\n","import React from 'react';\nimport { Button, Card, DatePicker, Divider, Typography } from 'antd';\nimport moment, { Moment } from 'moment';\nimport { Listing as ListingData } from '../../../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { displayErrorMessage, formatListingPrice } from '../../../../lib/utils';\nimport { Viewer } from '../../../../lib/types';\nimport { BookingsIndex } from './types';\n\nconst { Paragraph, Text, Title } = Typography;\n\ninterface Props {\n viewer: Viewer;\n host: ListingData['listing']['host'];\n price: number;\n bookingsIndex: ListingData['listing']['bookingsIndex'];\n checkInDate: Moment | null;\n checkOutDate: Moment | null;\n setCheckInDate: (checkInDate: Moment | null) => void;\n setCheckOutDate: (checkOutDate: Moment | null) => void;\n setModalVisible: (modalVisible: boolean) => void;\n}\n\nexport const ListingCreateBooking = ({\n viewer,\n host,\n price,\n bookingsIndex,\n checkInDate,\n checkOutDate,\n setCheckInDate,\n setCheckOutDate,\n setModalVisible,\n}: Props) => {\n const bookingsIndexJSON: BookingsIndex = JSON.parse(bookingsIndex);\n\n const dateIsBooked = (currentDate: Moment) => {\n const year = moment(currentDate).year();\n const month = moment(currentDate).month();\n const day = moment(currentDate).date();\n\n if (bookingsIndexJSON[year] && bookingsIndexJSON[year][month]) {\n return Boolean(bookingsIndexJSON[year][month][day]);\n } else {\n return false;\n }\n };\n\n const disabledDate = (currentDate: Moment | null) => {\n if (currentDate) {\n const dateIsBeforeEndOfDay = currentDate.isBefore(moment().endOf('day'));\n\n return dateIsBeforeEndOfDay || dateIsBooked(currentDate);\n } else {\n return false;\n }\n };\n\n const verifyAndSetCheckOutDate = (selectedCheckOutDate: Moment | null) => {\n if (checkInDate && selectedCheckOutDate) {\n if (moment(selectedCheckOutDate).isBefore(checkInDate, 'days')) {\n return displayErrorMessage(\n `You can't book date of check out to be prior to check in!`\n );\n }\n\n let dateCursor = checkInDate;\n\n while (moment(dateCursor).isBefore(selectedCheckOutDate, 'days')) {\n dateCursor = moment(dateCursor).add(1, 'days');\n\n const year = moment(dateCursor).year();\n const month = moment(dateCursor).month();\n const day = moment(dateCursor).date();\n\n if (\n bookingsIndexJSON[year] &&\n bookingsIndexJSON[year][month] &&\n bookingsIndexJSON[year][month][day]\n ) {\n return displayErrorMessage(\n \"You can't book a period of time that overlaps existing bookings. Please try again!\"\n );\n }\n }\n }\n\n setCheckOutDate(selectedCheckOutDate);\n };\n\n const viewerIsHost = viewer.id === host.id;\n const checkInInputDisabled = !viewer.id || viewerIsHost || !host.hasWallet;\n const checkOutInputDisabled = checkInInputDisabled || !checkInDate;\n const buttonDisabled = checkOutInputDisabled || !checkInDate || !checkOutDate;\n\n let buttonMessage = \"You won't be charged yet\";\n if (!viewer.id) {\n buttonMessage = 'You have to be signed in to book a listing!';\n } else if (viewerIsHost) {\n buttonMessage = \"You can't book your own listing!\";\n } else if (!host.hasWallet) {\n buttonMessage =\n \"The host has disconnected from Stripe and thus won't be able to receive payments!\";\n }\n\n return (\n \n Bookings \n
\n {listingBookingsList}\n \n \n setModalVisible(true)}\n >\n Request to book!\n \n \n {buttonMessage}\n \n \n
\n );\n};\n","import React from 'react';\nimport { useMutation } from '@apollo/react-hooks';\nimport {\n CardElement,\n injectStripe,\n ReactStripeElements,\n} from 'react-stripe-elements';\nimport { Button, Divider, Icon, Modal, Typography } from 'antd';\nimport moment, { Moment } from 'moment';\nimport { CREATE_BOOKING } from '../../../../lib/graphql/mutations';\nimport {\n CreateBooking as CreateBookingData,\n CreateBookingVariables,\n} from '../../../../lib/graphql/mutations/CreateBooking/__generated__/CreateBooking';\nimport {\n formatListingPrice,\n displaySuccessNotification,\n displayErrorMessage,\n} from '../../../../lib/utils';\n\ninterface Props {\n id: string;\n price: number;\n modalVisible: boolean;\n checkInDate: Moment;\n checkOutDate: Moment;\n setModalVisible: (modalVisible: boolean) => void;\n clearBookingData: () => void;\n handleListingRefetch: () => Promise\n \n \n {formatListingPrice(price)}\n <span>/day</span>\n \n \n
\n \n Check In \n setCheckInDate(dateValue)}\n onOpenChange={() => setCheckOutDate(null)}\n />\n
\n \n Check Out \n verifyAndSetCheckOutDate(dateValue)}\n />\n
\n \n
\n \n );\n};\n\nexport const WrappedListingCreateBookingModal = injectStripe(\n ListingCreateBookingModal\n);\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Avatar, Divider, Icon, Tag, Typography } from 'antd';\nimport { Listing as ListingData } from '../../../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { iconColor } from '../../../../lib/utils';\n\ninterface Props {\n listing: ListingData['listing'];\n}\n\nconst { Paragraph, Title } = Typography;\n\nexport const ListingDetails = ({ listing }: Props) => {\n const {\n title,\n description,\n image,\n type,\n address,\n city,\n numOfGuests,\n host\n } = listing;\n\n return (\n \n \n <Icon type='key'></Icon>\n \n \n Book your trip\n \n \n Enter your payment information to book the listing from the dates\n between{' '}\n \n {moment(checkInDate).format('MMMM Do YYYY')}\n {' '}\n and{' '}\n \n {moment(checkOutDate).format('MMMM Do YYYY')}\n \n , inclusive.\n \n
\n\n \n \n {formatListingPrice(price, false)} * {daysBooked} days ={' '}\n {formatListingPrice(listingPrice, false)} \n \n \n Total = {formatListingPrice(listingPrice, false)} \n \n
\n\n \n \n Book\n \n
\n \n
\n );\n};\n","import React, { useState } from 'react';\nimport { RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Layout, Row } from 'antd';\nimport { Moment } from 'moment';\nimport { ErrorBanner, PageSkeleton } from '../../lib/components';\nimport { LISTING } from '../../lib/graphql/queries';\nimport {\n Listing as ListingData,\n ListingVariables,\n} from '../../lib/graphql/queries/Listing/__generated__/Listing';\nimport { Viewer } from '../../lib/types';\nimport {\n ListingBookings,\n ListingCreateBooking,\n WrappedListingCreateBookingModal as ListingCreateBookingModal,\n ListingDetails,\n} from './components';\n\ninterface MatchParams {\n id: string;\n}\n\ninterface Props {\n viewer: Viewer;\n}\n\nconst { Content } = Layout;\nconst PAGE_LIMIT = 3;\n\nexport const Listing = ({\n viewer,\n match,\n}: Props & RouteComponentProps\n \n \n \n {title}\n \n
\n\n \n \n \n {host.name}\n \n \n
\n\n \n About this space \n \n {description}\n \n
\n \n {type} \n {numOfGuests} Guests \n
\n \n Filter By\n setFilter(filter)}\n >\n \n \n \n
\n );\n};\n","import React from 'react';\nimport { Pagination } from 'antd';\n\ninterface Props {\n total: number;\n page: number;\n limit: number;\n setPage: (page: number) => void;\n}\n\nexport const ListingsPagination = ({ total, page, limit, setPage }: Props) => {\n return (\n \n (\n \n
\n }\n loading\n className='listings-skeleton__card'\n />\n \n )}\n />\n \n );\n};\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Link, RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Affix, Layout, List, Typography } from 'antd';\nimport { ErrorBanner, ListingCard } from '../../lib/components';\nimport { LISTINGS } from '../../lib/graphql/queries';\nimport {\n Listings as ListingsData,\n ListingsVariables\n} from '../../lib/graphql/queries/Listings/__generated__/Listings';\nimport { ListingsFilter } from '../../lib/graphql/globalTypes';\nimport {\n ListingsFilters,\n ListingsPagination,\n ListingsSkeleton\n} from './components';\n\ninterface MatchParams {\n location: string;\n}\n\nconst { Content } = Layout;\nconst { Paragraph, Text, Title } = Typography;\n\nconst PAGE_LIMIT = 8;\n\nexport const Listings = ({ match }: RouteComponentProps\n \n \n (\n \n \n )}\n />\n
\n ) : (\n \n
\n \n \n It appears that no listings have yet been created for{' '}\n \"{listingsRegion}\" \n \n \n Be the first person to create a{' '}\n listing in this area!\n \n
\n );\n\n const listingsRegionElement = listingsRegion ? (\n \n \n <span role='img' aria-label='wave'>\n 👋\n </span>\n \n \n Log in to TinyHouse!\n \n Sign in with Google to start booking available rentals! \n
\n NotFound
;\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { User } from '../../../../lib/graphql/queries/User/__generated__/User';\n\ninterface Props {\n userBookings: User['user']['bookings'];\n bookingsPage: number;\n limit: number;\n setBookingsPage: (page: number) => void;\n}\n\nconst { Paragraph, Text, Title } = Typography;\n\nexport const UserBookings = ({\n userBookings,\n bookingsPage,\n limit,\n setBookingsPage\n}: Props) => {\n const total = userBookings ? userBookings.total : null;\n const result = userBookings ? userBookings.result : null;\n\n const userBookingsList = userBookings ? (\n\n
\n );\n\n return (\n \n Check in: {userBooking.checkIn} \n
\n \n Check out: {userBooking.checkOut} \n
\n \n \n Bookings\n \n \n This section highlights the bookings you've made, and the\n check-in/check-out dates associated with said bookings.\n \n {userBookingsList}\n
\n ) : null;\n\n return userBookingsElement;\n};\n","import React from 'react';\nimport { List, Typography } from 'antd';\nimport { ListingCard } from '../../../../lib/components';\nimport { User } from '../../../../lib/graphql/queries/User/__generated__/User';\n\ninterface Props {\n userListings: User['user']['listings'];\n listingsPage: number;\n limit: number;\n setListingsPage: (page: number) => void;\n}\n\nconst { Paragraph, Title } = Typography;\n\nexport const UserListings = ({\n userListings,\n listingsPage,\n limit,\n setListingsPage\n}: Props) => {\n const { total, result } = userListings;\n\n const userListingsList = (\n \n \n Listings\n \n \n This section highlights the listings this user currently hosts and has\n made available for bookings.\n \n {userListingsList}\n
\n );\n};\n","import React, { Fragment } from 'react';\nimport { useMutation } from '@apollo/react-hooks';\nimport { Avatar, Button, Card, Divider, Tag, Typography } from 'antd';\nimport {\n formatListingPrice,\n displaySuccessNotification,\n displayErrorMessage\n} from '../../../../lib/utils';\nimport { DISCONNECT_STRIPE } from '../../../../lib/graphql/mutations';\nimport { DisconnectStripe as DisconnectStripeData } from '../../../../lib/graphql/mutations/DisconnectStripe/__generated__/DisconnectStripe';\nimport { User as UserData } from '../../../../lib/graphql/queries/User/__generated__/User';\nimport { Viewer } from '../../../../lib/types';\n\ninterface Props {\n user: UserData['user'];\n viewer: Viewer;\n viewerIsUser: boolean;\n setViewer: (viewer: Viewer) => void;\n handleUserRefetch: () => void;\n}\n\nconst stripeAuthUrl = `https://connect.stripe.com/oauth/authorize?response_type=code&client_id=${process.env.REACT_APP_STRIPE_CLIENT_ID}&scope=read_write`;\nconst { Paragraph, Text, Title } = Typography;\n\nexport const UserProfile = ({\n user,\n viewer,\n viewerIsUser,\n setViewer,\n handleUserRefetch\n}: Props) => {\n const [disconnectStripe, { loading }] = useMutation\n Additional Details \n {additionalDetails}\n
\n \n \n \n
\n );\n};\n","import React, { useState } from 'react';\nimport { RouteComponentProps } from 'react-router-dom';\nimport { useQuery } from '@apollo/react-hooks';\nimport { Col, Layout, Row } from 'antd';\nimport { USER } from '../../lib/graphql/queries';\nimport {\n User as UserData,\n UserVariables\n} from '../../lib/graphql/queries/User/__generated__/User';\nimport { ErrorBanner, PageSkeleton } from '../../lib/components';\nimport { Viewer } from '../../lib/types';\nimport { UserBookings, UserListings, UserProfile } from './components';\n\ninterface Props {\n viewer: Viewer;\n setViewer: (viewer: Viewer) => void;\n}\n\ninterface MatchParams {\n id: string;\n}\n\nconst { Content } = Layout;\nconst PAGE_LIMIT = 4;\n\nexport const User = ({\n viewer,\n setViewer,\n match\n}: Props & RouteComponentProps\n
\n \n Details \n \n Name: {user.name} \n \n \n Contact: {user.contact} \n \n
\n {additionalDetailsSection}\n \n
\n