Merge pull request #1436 from hippware/1433

Address data in homestream items
hippware · Oct 24, 2017 · 92cb72c · 92cb72c
2 parents ca7f5ae + 02dde56
commit 92cb72c
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 31 deletions.
diff --git a/src/components/ProfileDetail/Header.js b/src/components/ProfileDetail/Header.js
@@ -48,7 +48,6 @@ class FollowButton extends React.Component {
   };
 
   render() {
-    console.log('& Header', this.pendingFollowChange);
     const {profile} = this.props;
     if (profile.isFollowed) {
       return (

diff --git a/src/components/SignIn.js b/src/components/SignIn.js
@@ -19,7 +19,6 @@ import {parse, format, asYouType} from 'libphonenumber-js';
 
 // const parsed = phoneUtil.parse('202-456-1414', 'US');
 // const isValid = phoneUtil.isValidNumber(parsed);
-// console.log('& phone util', isValid, parsed);
 const CarrierInfo = NativeModules.RNCarrierInfo;
 
 const countryMap = {};

diff --git a/src/components/event-cards/EventBotMetabar.js b/src/components/event-cards/EventBotMetabar.js
@@ -29,7 +29,7 @@ const EventBotMetabar = ({bot}: Props) => {
       <View style={{flexDirection: 'row'}}>
         <Image source={locImg} style={{marginRight: 5 * k}} resizeMode='contain' />
         <RText color={colors.DARK_GREY} size={13} style={{marginRight: 15 * k}}>
-          {dist}
+          {bot.addressData && bot.addressData.locationShort} - {dist}
         </RText>
       </View>
 

diff --git a/src/components/map/BotAddress.js b/src/components/map/BotAddress.js
@@ -97,7 +97,7 @@ class BotAddress extends React.Component {
     // reset bot address to recalculate it
     bot.bot.location = coords;
     bot.bot.address = undefined;
-    bot.bot.addressData = '';
+    bot.bot.addressData = null;
     if (bot.address) {
       bot.address.location = coords;
     }
@@ -112,7 +112,7 @@ class BotAddress extends React.Component {
     }
     return (
       <View style={{flex: 1}}>
-        {this.mounted &&
+        {this.mounted && (
           <Map
             ref='map'
             showOnlyBot
@@ -124,7 +124,8 @@ class BotAddress extends React.Component {
             isDay={location.isDay}
             onBoundsDidChange={this.onBoundsDidChange}
             onPress={({nativeEvent}) => this.redirectToLocation(nativeEvent.coordinate)}
-          />}
+          />
+        )}
         <View style={styles.imageContainer}>
           <Image source={require('../../../images/iconBotLocation.png')} />
           <TextInput
@@ -141,7 +142,7 @@ class BotAddress extends React.Component {
           />
         </View>
         <View pointerEvents='box-none' style={styles.addressListContainer}>
-          {this.state.focused &&
+          {this.state.focused && (
             <View
               style={{
                 height: 45 * k + 10.7 * k + (bot.address.suggestions.length ? 10.7 * k + bot.address.suggestions.length * 43.4 * k : 0),
@@ -153,8 +154,8 @@ class BotAddress extends React.Component {
                 style={{paddingBottom: 10.7 * k}}
                 pointerEvents='box-none'
                 dataSource={ds.cloneWithRows(bot.address.suggestions.map(x => x))}
-                renderRow={row =>
-                  (<TouchableOpacity key={`${row.id}vjew`} onPress={() => this.redirectToPlace(row.place_id)}>
+                renderRow={row => (
+                  <TouchableOpacity key={`${row.id}vjew`} onPress={() => this.redirectToPlace(row.place_id)}>
                     <View
                       style={{
                         flexDirection: 'row',
@@ -178,15 +179,18 @@ class BotAddress extends React.Component {
                       </Text>
                       {/* <Text style={{width:75*k, paddingLeft:12*k}}>{row.distance}</Text>*/}
                     </View>
-                  </TouchableOpacity>)}
-                renderSeparator={(s, r) =>
-                  (<View key={`${r}sep`} style={{backgroundColor: 'rgba(255,255,255,0.9)'}}>
+                  </TouchableOpacity>
+                )}
+                renderSeparator={(s, r) => (
+                  <View key={`${r}sep`} style={{backgroundColor: 'rgba(255,255,255,0.9)'}}>
                     <Separator width={1} />
-                  </View>)}
+                  </View>
+                )}
               />
-            </View>}
+            </View>
+          )}
         </View>
-        {this.props.onSave &&
+        {this.props.onSave && (
           <Button
             buttonStyle={{
               position: 'absolute',
@@ -197,7 +201,8 @@ class BotAddress extends React.Component {
             onPress={() => this.props.onSave(bot.bot)}
           >
             Next
-          </Button>}
+          </Button>
+        )}
       </View>
     );
   }

diff --git a/src/model/Bot.js b/src/model/Bot.js
@@ -13,6 +13,8 @@ import Tag from './Tag';
 import autobind from 'autobind-decorator';
 import moment from 'moment';
 import Utils from '../store/xmpp/utils';
+import BotAddress from './BotAddress';
+import * as log from '../utils/log';
 
 export const LOCATION = 'location';
 export const IMAGE = 'image';
@@ -49,7 +51,6 @@ export default class Bot {
   @observable imageSaving: boolean = false;
   @observable noteSaving: boolean = false;
   @observable tagSaving: boolean = false;
-  @observable addressData: string;
   removedItems = [];
 
   newAffiliates = [];
@@ -71,7 +72,7 @@ export default class Bot {
   @observable location: Location;
   @observable radius: number = 30; // 30.5;
   @observable address: string;
-  @observable addressData: string;
+  @observable addressData: BotAddress = new BotAddress();
   @observable visibility: number = VISIBILITY_OWNER;
 
   set isPublic(value: boolean) {
@@ -137,21 +138,25 @@ export default class Bot {
     const geocoding = require('../store/geocodingStore').default;
     this.handlers.push(
       autorun(() => {
-        if (this.location && (!this.address || !this.addressData)) {
-          geocoding.reverse(this.location).then((d) => {
-            if (d && d.length) {
-              this.address = d[0].place_name;
-              this.addressData = JSON.stringify(d[0].meta);
-            }
-          });
+        if (this.location && !this.addressData.loading && (!this.address || !this.addressData.loaded)) {
+          this.addressData.loading = true;
+          geocoding
+            .reverse(this.location)
+            .then((d) => {
+              if (d && d.length) {
+                this.address = d[0].place_name;
+                this.addressData.load(d[0].meta);
+              }
+            })
+            .finally(() => (this.addressData.loading = false));
         }
       }),
     );
   }
   dispose(): void {
     this.handlers.forEach(handler => handler());
   }
-  load({id, jid, fullId, server, owner, location, thumbnail, image, images, ...data} = {}) {
+  load({id, jid, fullId, server, owner, location, thumbnail, image, images, address_data, ...data} = {}) {
     Object.assign(this, data);
     if (id) {
       this.id = id;
@@ -189,8 +194,12 @@ export default class Bot {
     if (location) {
       this.location = new Location({...location});
     }
-    if (data.address_data) {
-      this.addressData = data.address_data;
+    if (address_data) {
+      try {
+        this.addressData.load(JSON.parse(address_data));
+      } catch (err) {
+        log.log('Address data parse error', err, data);
+      }
     }
   }
 
@@ -271,6 +280,7 @@ createModelSchema(Bot, {
   thumbnail: child(File),
   totalItems: true,
   alerts: true,
+  addressData: child(BotAddress),
 });
 
 Bot.serializeInfo.factory = context => botFactory.create(context.json);
diff --git a/src/model/BotAddress.js b/src/model/BotAddress.js
@@ -0,0 +1,55 @@
+import {observable, computed, action, toJS} from 'mobx';
+import {serializable, primitive} from 'serializr';
+
+export default class BotAddress {
+  @observable
+  @serializable(primitive())
+  city: string = '';
+
+  @observable
+  @serializable(primitive())
+  country: string = '';
+
+  @observable
+  @serializable(primitive())
+  county: string = '';
+
+  @observable
+  @serializable(primitive())
+  neighborhood: string = '';
+
+  @observable
+  @serializable(primitive())
+  route: string = '';
+
+  @observable
+  @serializable(primitive())
+  state: string = '';
+
+  @observable
+  @serializable(primitive())
+  street: string = '';
+
+  @observable loading: boolean = false;
+
+  @computed
+  get locationShort(): string {
+    const {city, state, country, county} = this;
+    return country === 'US' ? `${city || county}, ${state}` : `${city || county}, ${country}`;
+  }
+
+  @computed
+  get loaded(): boolean {
+    return this.country !== '';
+  }
+
+  constructor(data) {
+    this.load(data);
+  }
+
+  @action
+  load(data) {
+    if (!data || !Object.keys(data).length) return;
+    Object.keys(data).forEach(key => (this[key] = data[key]));
+  }
+}
diff --git a/src/store/xmpp/botService.js b/src/store/xmpp/botService.js
@@ -86,8 +86,7 @@ class BotService {
   }
 
   async create(params = {}) {
-    let {title, type, shortname, image, description, address, location, visibility, radius, id, isNew,
-      addressData, newAffiliates, removedAffilates} = params;
+    let {title, type, shortname, image, description, address, location, visibility, radius, id, isNew, addressData, newAffiliates, removedAffilates} = params;
     if (isNew === undefined) {
       isNew = true;
     }
@@ -109,7 +108,7 @@ class BotService {
       id,
       title,
       shortname,
-      address_data: addressData,
+      address_data: JSON.stringify(addressData),
       description,
       radius: Math.round(radius),
       address,