From a8799cf5408410389181cf3c9ef99443710e155d Mon Sep 17 00:00:00 2001
From: "Alexis Jr. Banaag" <aabanaag@gmail.com>
Date: Thu, 23 Apr 2020 00:24:47 +0800
Subject: [PATCH 1/5] feat: implement modules

---
 src/store/index.js             | 36 ++++++----------------------------
 src/store/modules/countries.js | 23 ++++++++++++++++++++++
 src/store/modules/stats.js     | 23 ++++++++++++++++++++++
 src/views/Dashboard.vue        | 22 ++++++++++++---------
 4 files changed, 65 insertions(+), 39 deletions(-)
 create mode 100644 src/store/modules/countries.js
 create mode 100644 src/store/modules/stats.js

diff --git a/src/store/index.js b/src/store/index.js
index 6dff675..dbee5f6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,37 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import CovidService from '@/services/covid.services'
+import * as countries from './modules/countries'
+import * as stats from './modules/stats'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    countries: [],
-    overviewStats: {}
-  },
-  mutations: {
-    SET_COUNTRIES(state, data) {
-      state.countries = data
-    },
-    SET_OVERVIEW_STATS(state, data) {
-      state.overviewStats = data
-    }
-  },
-  actions: {
-    async fetchCountries({ commit }, filter) {
-      const { data } = await CovidService.fetchCountries(filter)
-
-      if (data != null) {
-        commit('SET_COUNTRIES', data)
-      }
-    },
-    async fetchOverviewStats({ commit }) {
-      const { data } = await CovidService.fetchWorldWide()
-
-      if (data != null) {
-        commit('SET_OVERVIEW_STATS', data)
-      }
-    }
-  },
-  modules: {}
+  modules: {
+    countries,
+    stats
+  }
 })
diff --git a/src/store/modules/countries.js b/src/store/modules/countries.js
new file mode 100644
index 0000000..df03d31
--- /dev/null
+++ b/src/store/modules/countries.js
@@ -0,0 +1,23 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  countries: []
+}
+
+export const mutations = {
+  SET_COUNTRIES(state, data) {
+    state.countries = data
+  }
+}
+
+export const actions = {
+  async fetchCountries({ commit }, filter) {
+    const { data } = await CovidService.fetchCountries(filter)
+
+    if (data != null) {
+      commit('SET_COUNTRIES', data)
+    }
+  }
+}
diff --git a/src/store/modules/stats.js b/src/store/modules/stats.js
new file mode 100644
index 0000000..0bddbd2
--- /dev/null
+++ b/src/store/modules/stats.js
@@ -0,0 +1,23 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  overview: {}
+}
+
+export const mutations = {
+  SET_OVERVIEW_STATS(state, data) {
+    state.overview = data
+  }
+}
+
+export const actions = {
+  async fetchOverviewStats({ commit }) {
+    const { data } = await CovidService.fetchWorldWide()
+
+    if (data != null) {
+      commit('SET_OVERVIEW_STATS', data)
+    }
+  }
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c64ff44..796b00f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -23,7 +23,7 @@
 import OverviewCard from '@/components/OverviewCard.vue'
 import CountriesList from '@/components/CountriesList.vue'
 import { formatNumber } from '@/common/helper.js'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   components: {
@@ -31,15 +31,19 @@ export default {
     CountriesList
   },
   created() {
-    this.$store.dispatch('fetchCountries', 'cases')
-    this.$store.dispatch('fetchOverviewStats')
+    this.fetchCountries('cases')
+    this.fetchOverviewStats()
   },
   computed: mapState({
-    countries: state => state.countries.slice(0, 10),
-    totalCases: state => formatNumber(state.overviewStats.cases),
-    newCases: state => formatNumber(state.overviewStats.todayCases),
-    totalRecoveries: state => formatNumber(state.overviewStats.recovered),
-    totalDeaths: state => formatNumber(state.overviewStats.deaths)
-  })
+    countries: state => state.countries.countries.slice(0, 10),
+    totalCases: state => formatNumber(state.stats.overview.cases),
+    newCases: state => formatNumber(state.stats.overview.todayCases),
+    totalRecoveries: state => formatNumber(state.stats.overview.recovered),
+    totalDeaths: state => formatNumber(state.stats.overview.deaths)
+  }),
+  methods: {
+    ...mapActions('countries', ['fetchCountries']),
+    ...mapActions('stats', ['fetchOverviewStats'])
+  }
 }
 </script>

From 19114fa0156c8bd4515b14d022f0df3af9ec89bf Mon Sep 17 00:00:00 2001
From: "Alexis Jr. Banaag" <aabanaag@gmail.com>
Date: Sat, 25 Apr 2020 02:12:02 +0800
Subject: [PATCH 2/5] feat: integrate vuetify, add reusable header

---
 package.json              |  1 +
 src/App.vue               | 23 ++++++++++++++---------
 src/components/Header.vue | 12 ++++++++++++
 src/plugins/vuetify.js    |  7 ++++++-
 src/views/Countries.vue   | 13 ++++++++-----
 src/views/Dashboard.vue   | 20 +++++++++++---------
 yarn.lock                 |  5 +++++
 7 files changed, 57 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Header.vue

diff --git a/package.json b/package.json
index f7bbf27..3fabee1 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
diff --git a/src/App.vue b/src/App.vue
index c35d9f8..57306a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <v-app>
+    <Header />
+    <v-content>
+      <router-view />
+    </v-content>
+  </v-app>
 </template>
-
+<script>
+import Header from '@/components/Header.vue'
+export default {
+  components: {
+    Header
+  }
+}
+</script>
 <style>
 html {
   -webkit-text-size-adjust: 100%;
@@ -16,11 +26,6 @@ body {
   font-size: 16px;
   line-height: 1.5;
 }
-#app {
-  box-sizing: border-box;
-  padding: 0 20px 20px;
-  margin: 0 auto;
-}
 hr {
   box-sizing: content-box;
   height: 0;
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..3d5ccf3
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-app-bar dark>
+    <v-toolbar-title>COVIDvue</v-toolbar-title>
+    <v-spacer />
+    <v-btn icon to="/">
+      <v-icon small>fas fa-home</v-icon>
+    </v-btn>
+    <v-btn icon to="/countries">
+      <v-icon small>fas fa-flag</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 1bbe20f..263a57f 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,6 +1,11 @@
+import '@fortawesome/fontawesome-free/css/all.css'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
 
 Vue.use(Vuetify)
 
-export default new Vuetify({})
+export default new Vuetify({
+  icons: {
+    iconfont: 'fa'
+  }
+})
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index 6541515..ba74ab0 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -1,21 +1,24 @@
 <template>
-  <div>
+  <v-col cols="12" md="10" offset-md="1">
     <h1 class="text--primary">Countries</h1>
     <CountriesList :countries="countries" isPaginationEnabled />
-  </div>
+  </v-col>
 </template>
 
 <script>
 import CountriesList from '@/components/CountriesList.vue'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
     CountriesList
   },
   created() {
-    this.$store.dispatch('fetchCountries', '')
+    this.fetchCountries()
   },
-  computed: mapState(['countries'])
+  computed: mapState({
+    countries: state => state.countries.countries
+  }),
+  methods: mapActions('countries', ['fetchCountries'])
 }
 </script>
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 796b00f..63f178b 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-col cols="12" md="10" offset-md="1">
     <h1>Overview</h1>
     <v-container>
       <v-row>
@@ -9,14 +9,16 @@
         <OverviewCard title="Deaths" :value="totalDeaths" />
       </v-row>
     </v-container>
-    <v-card>
-      <v-card-title>
-        Top 10 Countries (Infection)
-        <v-spacer></v-spacer>
-      </v-card-title>
-      <CountriesList :countries="countries" />
-    </v-card>
-  </div>
+    <v-col cols="12">
+      <v-card>
+        <v-card-title>
+          Top 10 Countries (Infection)
+          <v-spacer></v-spacer>
+        </v-card-title>
+        <CountriesList :countries="countries" />
+      </v-card>
+    </v-col>
+  </v-col>
 </template>
 
 <script>
diff --git a/yarn.lock b/yarn.lock
index 2e06d3b..016568c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -804,6 +804,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@fortawesome/fontawesome-free@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
+  integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz?cache=0&sync_timestamp=1584144369412&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"

From b023994a524432b597b6050158a8ab36e0bf61a4 Mon Sep 17 00:00:00 2001
From: "Alexis Jr. Banaag" <aabanaag@gmail.com>
Date: Sun, 26 Apr 2020 02:08:30 +0800
Subject: [PATCH 3/5] wip: country details

---
 src/components/CountriesList.vue |  6 +++
 src/components/CountryInfo.vue   | 77 ++++++++++++++++++++++++++++++++
 src/store/modules/countries.js   |  9 +++-
 src/views/Countries.vue          | 37 +++++++++++++--
 4 files changed, 124 insertions(+), 5 deletions(-)
 create mode 100644 src/components/CountryInfo.vue

diff --git a/src/components/CountriesList.vue b/src/components/CountriesList.vue
index d2d3f21..ad941a0 100644
--- a/src/components/CountriesList.vue
+++ b/src/components/CountriesList.vue
@@ -5,6 +5,7 @@
     hide-default-footer
     disable-pagination
     class="elevation-1"
+    @click:row="getSelected"
   ></v-data-table>
 </template>
 
@@ -32,6 +33,11 @@ export default {
       type: Array,
       required: true
     }
+  },
+  methods: {
+    getSelected(data) {
+      this.$emit('setSelected', data)
+    }
   }
 }
 </script>
diff --git a/src/components/CountryInfo.vue b/src/components/CountryInfo.vue
new file mode 100644
index 0000000..cd0f580
--- /dev/null
+++ b/src/components/CountryInfo.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-container>
+    <div class="d-flex">
+      <h3>{{ country.country }}</h3>
+    </div>
+    <v-spacer />
+    <v-form class="overflow-y-auto">
+      <v-text-field label="Total Cases" :value="cases"></v-text-field>
+      <v-text-field label="Total Recoveries" :value="recoveries"></v-text-field>
+      <v-text-field label="Total Deaths" :value="deaths"></v-text-field>
+      <v-text-field label="New Cases" :value="newCases"></v-text-field>
+      <v-text-field label="New Deaths" :value="newDeaths"></v-text-field>
+      <v-text-field label="Critical" :value="critical"></v-text-field>
+      <v-text-field label="Active" :value="active"></v-text-field>
+      <v-text-field label="Tests" :value="tests"></v-text-field>
+      <v-text-field
+        label="Cases per Million"
+        :value="casesPerMillion"
+      ></v-text-field>
+      <v-text-field
+        label="Deaths per Million"
+        :value="deathsPerMillion"
+      ></v-text-field>
+      <v-text-field
+        label="Tests per Million"
+        v-model="testPerMillion"
+      ></v-text-field>
+    </v-form>
+  </v-container>
+</template>
+
+<script>
+import { formatNumber } from '@/common/helper.js'
+export default {
+  props: {
+    country: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    cases() {
+      return formatNumber(this.country.cases)
+    },
+    recoveries() {
+      return formatNumber(this.country.recovered)
+    },
+    deaths() {
+      return formatNumber(this.country.deaths)
+    },
+    newCases() {
+      return formatNumber(this.country.todayCases)
+    },
+    newDeaths() {
+      return formatNumber(this.country.todayDeaths)
+    },
+    critical() {
+      return formatNumber(this.country.critical)
+    },
+    active() {
+      return formatNumber(this.country.active)
+    },
+    tests() {
+      return formatNumber(this.country.tests)
+    },
+    casesPerMillion() {
+      return formatNumber(this.country.casesPerMillion)
+    },
+    deathsPerMillion() {
+      return formatNumber(this.country.deathsPerMillion)
+    },
+    testPerMillion() {
+      return formatNumber(this.country.testPerMillion)
+    }
+  }
+}
+</script>
diff --git a/src/store/modules/countries.js b/src/store/modules/countries.js
index df03d31..1669d6a 100644
--- a/src/store/modules/countries.js
+++ b/src/store/modules/countries.js
@@ -3,12 +3,16 @@ import CovidService from '@/services/covid.services'
 export const namespaced = true
 
 export const state = {
-  countries: []
+  countries: [],
+  selected: {}
 }
 
 export const mutations = {
   SET_COUNTRIES(state, data) {
     state.countries = data
+  },
+  SET_SELECTED_COUNTRY(state, data) {
+    state.selected = data
   }
 }
 
@@ -19,5 +23,8 @@ export const actions = {
     if (data != null) {
       commit('SET_COUNTRIES', data)
     }
+  },
+  setSelectedCountry({ commit }, country) {
+    commit('SET_SELECTED_COUNTRY', country)
   }
 }
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index ba74ab0..8b46683 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -1,24 +1,53 @@
 <template>
   <v-col cols="12" md="10" offset-md="1">
     <h1 class="text--primary">Countries</h1>
-    <CountriesList :countries="countries" isPaginationEnabled />
+    <CountriesList
+      :countries="countries"
+      isPaginationEnabled
+      @setSelected="handleSelectedCountry"
+    />
+
+    <v-navigation-drawer
+      v-model="isVisible"
+      width="400"
+      absolute
+      temporary
+      right
+      app
+    >
+      <CountryInfo :country="selectedCountry"></CountryInfo>
+    </v-navigation-drawer>
   </v-col>
 </template>
 
 <script>
 import CountriesList from '@/components/CountriesList.vue'
+import CountryInfo from '@/components/CountryInfo.vue'
 import { mapState, mapActions } from 'vuex'
 export default {
+  data() {
+    return {
+      isVisible: false
+    }
+  },
   components: {
-    CountriesList
+    CountriesList,
+    CountryInfo
   },
   created() {
     this.fetchCountries()
   },
   computed: mapState({
-    countries: state => state.countries.countries
+    countries: state => state.countries.countries,
+    selectedCountry: state => state.countries.selected
   }),
-  methods: mapActions('countries', ['fetchCountries'])
+  methods: {
+    handleSelectedCountry(data) {
+      this.isVisible = !this.isVisible
+      this.setSelectedCountry(data)
+    },
+    ...mapActions('countries', ['fetchCountries', 'setSelectedCountry'])
+  }
 }
 </script>
 

From c1659f70c3214d7be0515943b48461b9dc5fe4c7 Mon Sep 17 00:00:00 2001
From: "Alexis Jr. Banaag" <aabanaag@gmail.com>
Date: Sun, 26 Apr 2020 17:15:01 +0800
Subject: [PATCH 4/5] feat: fetch country details

---
 src/components/CountriesList.vue |   8 +-
 src/components/CountryInfo.vue   | 135 +++++++++++++++++++++++++------
 src/store/modules/countries.js   |   9 ++-
 src/views/Countries.vue          |  21 +++--
 4 files changed, 135 insertions(+), 38 deletions(-)

diff --git a/src/components/CountriesList.vue b/src/components/CountriesList.vue
index ad941a0..930d74b 100644
--- a/src/components/CountriesList.vue
+++ b/src/components/CountriesList.vue
@@ -2,8 +2,8 @@
   <v-data-table
     :headers="headers"
     :items="countries"
-    hide-default-footer
-    disable-pagination
+    :hide-default-footer="paginated"
+    :disable-pagination="paginated"
     class="elevation-1"
     @click:row="getSelected"
   ></v-data-table>
@@ -32,6 +32,10 @@ export default {
     countries: {
       type: Array,
       required: true
+    },
+    paginated: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
diff --git a/src/components/CountryInfo.vue b/src/components/CountryInfo.vue
index cd0f580..3bb26bb 100644
--- a/src/components/CountryInfo.vue
+++ b/src/components/CountryInfo.vue
@@ -1,31 +1,108 @@
 <template>
   <v-container>
-    <div class="d-flex">
+    <div class="d-flex align-md-center">
+      <v-img :src="flag" max-width="30" max-height="20"></v-img>
       <h3>{{ country.country }}</h3>
     </div>
     <v-spacer />
-    <v-form class="overflow-y-auto">
-      <v-text-field label="Total Cases" :value="cases"></v-text-field>
-      <v-text-field label="Total Recoveries" :value="recoveries"></v-text-field>
-      <v-text-field label="Total Deaths" :value="deaths"></v-text-field>
-      <v-text-field label="New Cases" :value="newCases"></v-text-field>
-      <v-text-field label="New Deaths" :value="newDeaths"></v-text-field>
-      <v-text-field label="Critical" :value="critical"></v-text-field>
-      <v-text-field label="Active" :value="active"></v-text-field>
-      <v-text-field label="Tests" :value="tests"></v-text-field>
-      <v-text-field
-        label="Cases per Million"
-        :value="casesPerMillion"
-      ></v-text-field>
-      <v-text-field
-        label="Deaths per Million"
-        :value="deathsPerMillion"
-      ></v-text-field>
-      <v-text-field
-        label="Tests per Million"
-        v-model="testPerMillion"
-      ></v-text-field>
-    </v-form>
+    <v-container fluid>
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-text-field
+            label="Total Cases"
+            :value="cases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Recoveries"
+            :value="recoveries"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Deaths"
+            :value="deaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="New Cases"
+            :value="newCases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="New Deaths"
+            :value="newDeaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Critical"
+            :value="critical"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Active"
+            :value="active"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Cases per Million"
+            :value="casesPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Deaths per Million"
+            :value="deathsPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Tests"
+            :value="tests"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Tests per Million"
+            v-model="testPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-container>
 </template>
 
@@ -71,7 +148,19 @@ export default {
     },
     testPerMillion() {
       return formatNumber(this.country.testPerMillion)
+    },
+    flag() {
+      return this.country.countryInfo.flag ?? ''
     }
+  },
+  mounted() {
+    console.log(this.country)
   }
 }
 </script>
+
+<style lang="scss" scoped>
+h3 {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/store/modules/countries.js b/src/store/modules/countries.js
index 1669d6a..a443e78 100644
--- a/src/store/modules/countries.js
+++ b/src/store/modules/countries.js
@@ -4,7 +4,7 @@ export const namespaced = true
 
 export const state = {
   countries: [],
-  selected: {}
+  selected: null
 }
 
 export const mutations = {
@@ -24,6 +24,13 @@ export const actions = {
       commit('SET_COUNTRIES', data)
     }
   },
+  async fetchByCountry({ commit }, code) {
+    const { data } = await CovidService.fetchByCountry(code)
+
+    if (data != null) {
+      commit('SET_SELECTED_COUNTRY', data)
+    }
+  },
   setSelectedCountry({ commit }, country) {
     commit('SET_SELECTED_COUNTRY', country)
   }
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index 8b46683..268e4af 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -3,19 +3,22 @@
     <h1 class="text--primary">Countries</h1>
     <CountriesList
       :countries="countries"
-      isPaginationEnabled
+      :paginated="false"
       @setSelected="handleSelectedCountry"
     />
 
     <v-navigation-drawer
-      v-model="isVisible"
-      width="400"
+      :value="selectedCountry"
+      width="600"
       absolute
       temporary
       right
       app
     >
-      <CountryInfo :country="selectedCountry"></CountryInfo>
+      <CountryInfo
+        v-if="!!selectedCountry"
+        :country="selectedCountry"
+      ></CountryInfo>
     </v-navigation-drawer>
   </v-col>
 </template>
@@ -25,11 +28,6 @@ import CountriesList from '@/components/CountriesList.vue'
 import CountryInfo from '@/components/CountryInfo.vue'
 import { mapState, mapActions } from 'vuex'
 export default {
-  data() {
-    return {
-      isVisible: false
-    }
-  },
   components: {
     CountriesList,
     CountryInfo
@@ -43,10 +41,9 @@ export default {
   }),
   methods: {
     handleSelectedCountry(data) {
-      this.isVisible = !this.isVisible
-      this.setSelectedCountry(data)
+      this.fetchByCountry(data.countryInfo.iso2)
     },
-    ...mapActions('countries', ['fetchCountries', 'setSelectedCountry'])
+    ...mapActions('countries', ['fetchCountries', 'fetchByCountry'])
   }
 }
 </script>

From 11904a178f4b7d111c4b354dae94fcef89db11d0 Mon Sep 17 00:00:00 2001
From: "Alexis Jr. Banaag" <aabanaag@gmail.com>
Date: Sun, 26 Apr 2020 17:51:54 +0800
Subject: [PATCH 5/5] docs: bump version

---
 .travis.yml  | 3 ++-
 package.json | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index cbd49a9..bb0dece 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,4 +12,5 @@ deploy:
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
-   branch: master
\ No newline at end of file
+   branch: master
+   tags: true
\ No newline at end of file
diff --git a/package.json b/package.json
index 3fabee1..d149b82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-vue",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",