Merge pull request #33 from aabanaag/feat/vuetify

feat: integrate vuetify, add reusable header

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",

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;

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>

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'
+  }
+})

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>
 

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>

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"