Filtering listings in home page

Author: albertodev7

client/src/Graphql/SearchListings/index.tsx

@@ -49,15 +49,6 @@ interface Props {
 }
 
 export class SearchListingsQuery extends React.PureComponent<Props> {
-    // public shouldComponentUpdate(nextProps: Props) {
-    //     const { address, guests, priceMin, priceMax } = this.props
-    //     if (this.props.address !== nextProps.address) {
-    //         return true
-    //     }
-
-    //     return false
-    // }
-
     public render() {
         const { address, guests, priceMin, priceMax } = this.props
 

client/src/Pages/Home/Components/Form/Form.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+
+import { GeoSuggest } from 'src/Components/GeoSuggest'
+import { Input } from 'src/Components/Input'
+import { Button } from 'src/Components/Button'
+import { Label } from 'src/Components/Input/style'
+import { Container, Wrapper, Title, Right } from './style'
+
+interface Props {
+    updateState: (newState: object) => void
+}
+
+export const FormUI: React.SFC<Props> = ({ updateState }) => (
+    <Container>
+        <Wrapper>
+            <Title>Book unique homes and experiences.</Title>
+
+            <Label>Lokalizacja</Label>
+
+            <GeoSuggest />
+
+            <Input
+                onChange={(value: string) =>
+                    updateState({ guests: parseInt(value, 10) })
+                }
+                label="Goscie"
+                placeholder="1 gość"
+                type="number"
+            />
+
+            <Right>
+                <Link to="/listings" style={{ textDecoration: 'none' }}>
+                    <Button>Szukaj</Button>
+                </Link>
+            </Right>
+        </Wrapper>
+    </Container>
+)

client/src/Pages/Home/Components/Form/index.tsx

@@ -1,27 +1,11 @@
 import * as React from 'react'
+import { Subscribe } from 'unstated'
 
-import { Input } from 'src/Components/Input'
-import { Button } from 'src/Components/Button'
-import { Container, Wrapper, Title, Right } from './style'
+import { Filter } from 'src/Containers/Filter'
+import { FormUI } from './Form'
 
 export const Form: React.SFC<{}> = () => (
-    <Container>
-        <Wrapper>
-            <Title>Book unique homes and experiences.</Title>
-
-            <Input label="GDZIE?" placeholder="Warszaw" onChange={() => null} />
-
-            <Input
-                onChange={() => null}
-                label="PRZYJAZD"
-                placeholder="dd-mm-rrrr"
-            />
-
-            <Input label="GOSĆIE" placeholder="1 gość" onChange={() => null} />
-
-            <Right>
-                <Button>Szukaj</Button>
-            </Right>
-        </Wrapper>
-    </Container>
+    <Subscribe to={[Filter]}>
+        {({ updateState }: Filter) => <FormUI updateState={updateState} />}
+    </Subscribe>
 )

client/src/Pages/Listings/Components/ListingsList/Components/ListingItem/index.tsx

@@ -31,53 +31,6 @@ interface Props {
 
 const getRoute = (id: number) => `/listing/${id}`
 
-// export const ListingItem: React.SFC<Props> = ({
-//     id,
-//     name,
-//     category,
-//     description,
-//     price,
-//     beds,
-//     guests,
-//     lat,
-//     lng,
-//     amenities,
-//     setPostion
-// }) => (
-//     <Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
-//         <Container onMouseEnter={() => setPostion(lat, lng)}>
-//             <Image src="https://a0.muscache.com/im/pictures/126e41c4-2a1b-4251-b516-d239351126f7.jpg?aki_policy=large" />
-
-//             <Row>
-//                 <Details>
-//                     <Subtitle>CAŁY APARTAMENT</Subtitle>
-//                     <Title>{name}</Title>
-
-//                     <RoomsDetails>
-//                         <SmallText>{guests} goście •</SmallText>
-//                         <SmallText>1 sypialnia •</SmallText>
-//                         <SmallText>{beds} Łóżko •</SmallText>
-//                         <SmallText>1 Łazienka</SmallText>
-//                     </RoomsDetails>
-
-//                     <RoomsDetails>
-//                         {amenities.map((amenitie, i) => (
-//                             <SmallText key={i}>{amenitie} •</SmallText>
-//                         ))}
-//                     </RoomsDetails>
-//                 </Details>
-
-//                 <Pricing>
-//                     <Title>{price} zł</Title>
-//                     <VerySmallText>za dzien</VerySmallText>
-
-//                     <Stars />
-//                 </Pricing>
-//             </Row>
-//         </Container>
-//     </Link>
-// )
-
 export class ListingItem extends React.PureComponent<Props> {
     public render() {
         const {
@@ -93,7 +46,6 @@ export class ListingItem extends React.PureComponent<Props> {
             amenities,
             setPostion
         } = this.props
-        console.log('RERENDER LISTING ITEM')
         return (
             <Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
                 <Container onMouseEnter={() => setPostion(lat, lng)}>

client/src/Pages/Listings/Components/ListingsList/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react'
 import { Subscribe } from 'unstated'
 
 import { SearchListingsQuery } from 'src/Graphql/SearchListings'
-import { ListingItem } from './Components/ListingItem'
 import { Location } from 'src/Containers/Location'
 import { Filter } from 'src/Containers/Filter'
+import { ListingItem } from './Components/ListingItem'
 
 import { Container } from './style'