Empty state is now component on both pages

src/components/Empty.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="empty text-center">
+    <h1>
+      {{title}}
+    </h1>
+    <p>
+      <slot>
+        This page is empty.
+      </slot>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  props: [
+    'title'
+  ]
+}
+</script>
+
+<style scoped lang="stylus">
+  .empty
+    height: 100%
+    background-image: url('/statics/wand.svg')
+    background-repeat: no-repeat
+    background-position: top center
+</style>

src/components/Index.vue

@@ -1,16 +1,25 @@
 <template>
   <main>
     <spell-list
+      v-if="state.spells.data.length"
       :spells="state.spells.data"
     ></spell-list>
+    <page-empty
+      v-else
+      title="Writing Spellbook..."
+    >
+      Please wait...
+    </page-empty>
   </main>
 </template>
 
 <script>
 import Vue from 'vue'
+import Empty from './Empty'
 import SpellList from './Spelllist'
 import { state } from '../store'
 
+Vue.component('page-empty', Empty)
 Vue.component('spell-list', SpellList)
 
 export default {
@@ -19,3 +28,8 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="stylus">
+  main
+    height: 90%
+</style>

src/components/Myspells.vue

@@ -4,25 +4,23 @@
       v-if="mySpells.length"
       :spells="mySpells"
     ></spell-list>
-    <div
+    <page-empty
-      class="empty text-center"
       v-else
+      title="You haven't chosen any spells"
     >
-      <h1>
+      Try <i>bookmark</i> bookmarking spells from the
-        You haven't chosen any spells
+      <router-link to="/">all spells page</router-link> to add to your spellbook.
-      </h1>
+    </page-empty>
-      <p>
-        You must <i>bookmark</i> bookmark spells from the <router-link to="/">All Spells</router-link> page.
-      </p>
-    </div>
   </main>
 </template>
 
 <script>
 import Vue from 'vue'
+import Empty from './Empty'
 import SpellList from './Spelllist'
 import { state } from '../store'
 
+Vue.component('page-empty', Empty)
 Vue.component('spell-list', SpellList)
 
 export default {
@@ -48,7 +46,4 @@ export default {
 <style scoped lang="stylus">
   main
     height: 90%
-    background-image: url('/statics/wand.svg')
-    background-repeat: no-repeat
-    background-position: top center
 </style>

src/components/Spell.vue

@@ -76,6 +76,9 @@ export default {
   data () {
     return { state }
   },
+  mounted () {
+    state.lastSpell = this.state.spell.data.name
+  },
   computed: {
     spell () {
       return this.state.spells.data.find(spell => spell.name === this.$route.params.name)