Searching listings for guests and price

Author: albertodev7

client/src/Graphql/SearchListings/index.tsx

@@ -5,8 +5,20 @@ import gql from 'graphql-tag'
 import { Listing } from 'src/graphql.schema'
 
 export const searchListingsQuery = gql`
-    query SearchListings($address: [String]) {
-        searchListings(input: { address: $address }) {
+    query SearchListings(
+        $address: [String]
+        $guests: Int
+        $priceMin: Int
+        $priceMax: Int
+    ) {
+        searchListings(
+            input: {
+                address: $address
+                guests: $guests
+                priceMin: $priceMin
+                priceMax: $priceMax
+            }
+        ) {
             id
             name
             category
@@ -30,23 +42,30 @@ interface WithListings {
 
 interface Props {
     address: string[]
+    guests?: number
+    priceMin?: number
+    priceMax?: number
     children: (values: WithListings) => React.ReactNode
 }
 
-export class SearchListingsQuery extends React.Component<Props> {
-    public shouldComponentUpdate(nextProps: Props) {
-        if (this.props.address !== nextProps.address) {
-            return true
-        }
+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
-    }
+    //     return false
+    // }
 
     public render() {
-        const { address } = this.props
+        const { address, guests, priceMin, priceMax } = this.props
 
         return (
-            <Query query={searchListingsQuery} variables={{ address }}>
+            <Query
+                query={searchListingsQuery}
+                variables={{ address, guests, priceMin, priceMax }}
+            >
                 {({ data, loading }) => {
                     let listings: Listing[] = []
 

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

@@ -4,14 +4,18 @@ 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 { Container } from './style'
 
 export const ListingsList: React.SFC<{}> = () => (
     <Container>
-        <Subscribe to={[Location]}>
-            {({ state: { place }, setPostion }: Location) => (
-                <SearchListingsQuery address={place}>
+        <Subscribe to={[Location, Filter]}>
+            {(
+                { state: { place }, setPostion }: Location,
+                { state: { ...filters } }: Filter
+            ) => (
+                <SearchListingsQuery address={place} {...filters}>
                     {({ listings, loading }) =>
                         listings.map(listing => (
                             <ListingItem

client/src/apollo.ts

@@ -6,8 +6,8 @@ import { ApolloLink } from 'apollo-link'
 import { onError } from 'apollo-link-error'
 
 const httpLink = createHttpLink({
-    uri: 'https://airbnb-clone-mm.herokuapp.com'
-    // uri: 'http://localhost:4000/'
+    // uri: 'https://airbnb-clone-mm.herokuapp.com'
+    uri: 'http://localhost:4000/'
 })
 
 const authLink = setContext((_, { headers }) => {