Refactoring containers and zooming map when place is submited

Author: albertodev7

client/src/Components/GeoSuggest/index.tsx

@@ -2,15 +2,14 @@ import * as React from 'react'
 import Geosuggest from 'react-geosuggest'
 import { Subscribe } from 'unstated'
 
-import { SearchLocation } from 'src/Containers/SearchLocation'
-
+import { Location } from 'src/Containers/Location'
 import './geoInput.css'
 
 export class GeoSuggest extends React.PureComponent {
     public render() {
         return (
-            <Subscribe to={[SearchLocation]}>
-                {({ setPlace }: SearchLocation) => (
+            <Subscribe to={[Location]}>
+                {({ setPlace }: Location) => (
                     <Geosuggest
                         placeholder="Enter a location"
                         onSuggestSelect={place => setPlace(place)}

client/src/Containers/Location/index.ts

@@ -0,0 +1,46 @@
+import { Container } from 'unstated'
+import { Suggest } from 'react-geosuggest'
+
+interface State {
+    center: {
+        lat: number
+        lng: number
+    }
+    marker: {
+        lat: number | null
+        lng: number | null
+    }
+    place: string[]
+}
+
+export class Location extends Container<State> {
+    public readonly state = {
+        center: {
+            lat: 52.0685,
+            lng: 19.9475
+        },
+        marker: {
+            lat: 52.0685,
+            lng: 52.0685
+        },
+        place: ['']
+    }
+
+    public setPostion = (lat: number, lng: number) =>
+        this.setState({ marker: { lat, lng } })
+
+    public setPlace = async (place: Suggest) => {
+        if (place) {
+            const {
+                label,
+                location: { lat, lng }
+            } = place
+            const splitAddress = label.split(', ')
+
+            await this.setState({
+                place: splitAddress,
+                center: { lat: parseFloat(lat), lng: parseFloat(lng) }
+            })
+        }
+    }
+}

client/src/Containers/Position/index.ts

@@ -36,7 +36,7 @@ interface Props {
 export class SearchListingsQuery extends React.PureComponent<Props> {
     public render() {
         const { address } = this.props
-
+        console.log(address)
         return (
             <Query query={searchListingsQuery} variables={{ address }}>
                 {({ data, loading }) => {

client/src/Containers/SearchLocation/index.ts

@@ -1,20 +1,16 @@
 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 { Container } from './style'
-import { Subscribe } from 'unstated'
-import { SearchLocation } from 'src/Containers/SearchLocation'
-import { Postion } from 'src/Containers/Position'
 
 export const ListingsList: React.SFC<{}> = () => (
     <Container>
-        <Subscribe to={[SearchLocation, Postion]}>
-            {(
-                { state: { place } }: SearchLocation,
-                { setPostion }: Postion
-            ) => (
+        <Subscribe to={[Location]}>
+            {({ state: { place }, setPostion }: Location) => (
                 <SearchListingsQuery address={place}>
                     {({ listings, loading }) =>
                         listings.map(listing => (

client/src/Graphql/SearchListings/index.tsx

@@ -1,20 +1,17 @@
 import * as React from 'react'
 import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
 import { Subscribe } from 'unstated'
-import { Postion } from 'src/Containers/Position'
+
+import { Location } from 'src/Containers/Location'
 
 export const Map = withGoogleMap(() => (
-    <Subscribe to={[Postion]}>
-        {({ state: { lat, lng } }) => (
-            <GoogleMap
-                defaultZoom={7}
-                defaultCenter={{
-                    lat: 52.0685,
-                    lng: 19.9475
-                }}
-            >
-                <Marker position={{ lat, lng }} />
-            </GoogleMap>
-        )}
+    <Subscribe to={[Location]}>
+        {({ state: { center, marker, place } }: Location) =>
+            (console.log(place.length, 'LENG') as any) || (
+                <GoogleMap zoom={place.length > 1 ? 13 : 6} center={center}>
+                    {marker.lat && <Marker position={marker} />}
+                </GoogleMap>
+            )
+        }
     </Subscribe>
 ))