feat: add photo to bar

growlerapp · May 18, 2019 · a11af02 · a11af02
1 parent 089fb2c
commit a11af02
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/components/StoreItem.vue b/src/components/StoreItem.vue
@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <div class="StoreItem-image" :style="{ 'background-image': 'url(' + imagePlaceholder + ')' }"></div>
+      <div class="StoreItem-image" :style="{ 'background-image': 'url(' + getPhoto(photo) + ')' }"></div>
     </div>
   </router-link>
 </template>
@@ -34,7 +34,7 @@ export default {
       type: String,
       required: true
     },
-    image: {
+    photo: {
       type: String
     },
     name: {
@@ -51,11 +51,11 @@ export default {
     }
   },
 
-  data: () => ({
-    imagePlaceholder: '/img/img-bar.jpg'
-  }),
-
-  methods: {}
+  methods: {
+    getPhoto (photo) {
+      return photo && photo.length ? photo : '/img/img-bar.jpg'
+    }
+  }
 }
 </script>
 

diff --git a/src/graphql/FindByProximity.gql b/src/graphql/FindByProximity.gql
@@ -1,11 +1,20 @@
-query findByProximity($latitude: Float!, $longitude: Float!) {
+query findByProximity(
+  $latitude: Float!,
+  $longitude: Float!,
+  $googleMapsKey: String!
+) {
   findByProximity(
     latitude: $latitude
     longitude: $longitude
   ) {
     _id
     name
     address
+    place {
+      photo(
+        key: $googleMapsKey
+      )
+    }
     matrix(
       latitude: $latitude
       longitude: $longitude

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -16,7 +16,7 @@
         :name="store.name"
         :address="store.address"
         :distance="store.matrix.distance"
-        :image="store.image"
+        :photo="store.place.photo"
       />
     </transition-group>
   </div>
@@ -41,7 +41,8 @@ export default {
       variables () {
         return {
           latitude: this.$store.state.userData.lat,
-          longitude: this.$store.state.userData.long
+          longitude: this.$store.state.userData.long,
+          googleMapsKey: process.env.VUE_APP_GOOGLE_MAPS_KEY
         }
       },
       update ({ findByProximity }) {