Hide header meetup block if no data

Author: baumannzone

src/components/HomeHeader/HomeHeaderMeetup.vue

@@ -17,8 +17,8 @@
         >
           <section class="d-flex">
             <span class="date-display">
-              <span class="day">27</span>
-              <span class="month">Oct</span>
+              <span class="day">{{ ev.daySimple }}</span>
+              <span class="month">{{ ev.monthSimple }}</span>
             </span>
             <div class="ml-4">
               <div class="body-1 blue-grey--text mb-1">{{ ev.fullDate }}</div>
@@ -50,30 +50,23 @@
 
 <script>
   import moment from 'moment'
-  import { mapGetters } from 'vuex'
 
   export default {
     name: 'HomeHeaderMeetup',
-    data() {
-      return {
-        ev: null,
-      }
-    },
-    computed: {
-      ...mapGetters( [ 'getMeetupData' ] ),
-      // fullDate () {
-      //   return this.getMeetupData.length
-      // }
+    props: {
+      ev: {
+        required: true,
+        type: Object,
+      },
     },
     created() {
       moment.locale( 'es' )
-      if ( this.getMeetupData.length > 0 ) {
-        const format = 'YYYY-MM-DD'
-        this.ev = this.getMeetupData[ 0 ]
-        const hour = moment( this.ev.local_time, 'hh:mm' ).format( 'hh' )
-        const minutes = moment( this.ev.local_time, 'hh:mm' ).format( 'mm' )
-        this.ev.fullDate = moment( this.ev.local_date, format ).hour( hour ).minutes( minutes ).format( 'LLL' )
-      }
+      const format = 'YYYY-MM-DD'
+      const hour = moment( this.ev.local_time, 'hh:mm' ).format( 'hh' )
+      const minutes = moment( this.ev.local_time, 'hh:mm' ).format( 'mm' )
+      this.ev.fullDate = moment( this.ev.local_date, format ).hour( hour ).minutes( minutes ).format( 'LLL' )
+      this.ev.daySimple = moment(this.ev.local_date, format).format('DD') // 02
+      this.ev.monthSimple = moment(this.ev.local_date, format).format('MMM')  // dic
     },
     methods: {
       goToEvent() {
@@ -111,6 +104,8 @@
           display block
           font-weight bolder
           line-height 1.1
+        .month
+          text-transform capitalize
 
       .name
         position relative

src/components/HomeHeader/HomeHeaderTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <v-flex
-    md7
+    :class="flexClass"
     sm12>
     <h1 class="hero-title display-3 text-xs-center mb-3">
       {{ msg }}
@@ -16,6 +16,15 @@
         type: String,
         default: 'La comunidad más molona de todas ;)',
       },
+      "is-full-width": {
+        required: true,
+        type: Boolean,
+      },
+    },
+    computed: {
+      flexClass() {
+        return this.isFullWidth ? 'md12' : 'md7'
+      },
     },
   }
 </script>

src/components/HomeHeader/Index.vue

@@ -5,26 +5,40 @@
         <v-layout
           row
           wrap>
-          <HomeHeaderTitle msg="La comunidad de software libre que hace cosas 🦄"/>
-          <HomeHeaderMeetup/>
+          <HomeHeaderTitle
+            :is-full-width="!hasMeetupData"
+            msg="La comunidad de software libre que hace cosas 🦄"/>
+          <template v-if="hasMeetupData">
+            <HomeHeaderMeetup :ev="ev"/>
+          </template>
         </v-layout>
       </v-container>
     </v-content>
   </header>
 </template>
 
 <script>
+  import { mapGetters } from 'vuex'
   import HomeHeaderTitle from './HomeHeaderTitle'
   import HomeHeaderMeetup from './HomeHeaderMeetup'
 
   export default {
     components: { HomeHeaderMeetup, HomeHeaderTitle },
+    computed: {
+      ...mapGetters( [ 'getMeetupData' ] ),
+      hasMeetupData() {
+        return this.getMeetupData.length > 0
+      },
+      ev() {
+        return this.getMeetupData[ 1 ]
+      },
+    },
   }
 </script>
 
 <style scoped lang="stylus">
   .header-hero
-    min-height 80vh
+    min-height 450px
     position relative
     background-image url("/img/main.jpg")
     background-position center center

src/store/actions.js

@@ -3,16 +3,20 @@ import axios from 'axios'
 const actions = {
   async getMeetupData( context ) {
     const key = '765c716753752b6f42355a45103155'
-    const url = `https://api.meetup.com/Open-Source-Weekends/events?key=${key}&status=upcoming`
+    const status = {
+      past: 'past',
+      upcoming: 'upcoming',
+    }
+    const url = `https://api.meetup.com/Open-Source-Weekends/events?key=${key}&status=${status.upcoming}`
     try {
       let res = await axios.get( url )
       let data = res.data
       context.commit( 'setMeetupData', data )
-    } catch (error) {
+    } catch ( error ) {
       console.log( '😰 Err: [getMeetupData]' )
       console.log( { error } )
     }
-  }   
+  },
 }
 
 export default actions

src/store/index.js

@@ -1,5 +1,4 @@
 import Vuex from 'vuex'
-import axios from 'axios'
 
 import state from './state'
 import getters from './getters'
@@ -11,7 +10,7 @@ const createStore = () => {
     state,
     getters,
     actions,
-    mutations 
+    mutations
   })
 }