From 94642bac3a06aa49f24dd57368e97a47166d2052 Mon Sep 17 00:00:00 2001
From: sharpshark28 <sharpshark28@gmail.com>
Date: Tue, 23 May 2017 18:29:02 -0500
Subject: [PATCH] Empty state is now component on both pages

---
 src/components/Empty.vue    | 31 +++++++++++++++++++++++++++++++
 src/components/Index.vue    | 14 ++++++++++++++
 src/components/Myspells.vue | 19 +++++++------------
 src/components/Spell.vue    |  3 +++
 4 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Empty.vue

diff --git a/src/components/Empty.vue b/src/components/Empty.vue
new file mode 100644
index 0000000..6983335
--- /dev/null
+++ b/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>
diff --git a/src/components/Index.vue b/src/components/Index.vue
index d516d4a..afb7395 100644
--- a/src/components/Index.vue
+++ b/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>
diff --git a/src/components/Myspells.vue b/src/components/Myspells.vue
index ca8dc65..e839025 100644
--- a/src/components/Myspells.vue
+++ b/src/components/Myspells.vue
@@ -4,25 +4,23 @@
       v-if="mySpells.length"
       :spells="mySpells"
     ></spell-list>
-    <div
-      class="empty text-center"
+    <page-empty
       v-else
+      title="You haven't chosen any spells"
     >
-      <h1>
-        You haven't chosen any spells
-      </h1>
-      <p>
-        You must <i>bookmark</i> bookmark spells from the <router-link to="/">All Spells</router-link> page.
-      </p>
-    </div>
+      Try <i>bookmark</i> bookmarking spells from the
+      <router-link to="/">all spells page</router-link> to add to your spellbook.
+    </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 {
@@ -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>
diff --git a/src/components/Spell.vue b/src/components/Spell.vue
index 5c612be..1ec28d9 100644
--- a/src/components/Spell.vue
+++ b/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)