Move Follow button to the header. Fixes #33

client/components/indieHeader.vue

@@ -34,12 +34,20 @@
       </ul>
     </nav>
 
+    <!-- Remote follow modal -->
+    <follow-modal :isActive='followModalActive' @close='followModalActive = false' />
+
   </header>
 </template>
 
 <script>
 
+import followModal from '~/components/followModal'
+
 export default {
+  components: {
+    followModal
+  },
   mounted () {
     // Set the route to Settings if the site is not configured.
     if (!this.configured) {
@@ -66,7 +74,7 @@ export default {
   },
   data () {
     return {
-      currentRoute: null
+      followModalActive: false
     }
   },
   computed: {
@@ -122,7 +130,7 @@ export default {
 
     // Signals that the follow button has been pressed.
     followButtonPress () {
-      this.$emit('followButtonPress')
+      this.followModalActive = true
     }
   }
 }

client/pages/everyone.vue

 <template>
   <div class='page'>
-    <indie-header @followButtonPress='followModalActive = true' />
+    <indie-header />
 
     <main>
       <b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message>

client/pages/index.vue

 <template>
   <div>
     <!-- Site header -->
-    <indie-header @followButtonPress='followModalActive = true' />
+    <indie-header />
 
     <!-- <content-type-filter /> -->
 
@@ -16,9 +16,6 @@
         </div>
       </transition-group>
     </main>
-
-    <!-- Follow modal: TODO move to header -->
-    <follow-modal :isActive='followModalActive' @close='followModalActive = false' />
   </div>
 </template>
 
@@ -27,9 +24,7 @@
 import 'font-awesome/css/font-awesome.min.css'
 
 import indieHeader from '~/components/indieHeader'
-import followModal from '~/components/followModal'
 import contentTypeFilter from '~/components/contentTypeFilter'
-
 import textComposer from '~/components/textComposer'
 
 const Tabs = Object.freeze({
@@ -43,7 +38,6 @@ const Tabs = Object.freeze({
 export default {
   components: {
     indieHeader,
-    followModal,
     contentTypeFilter,
     textComposer
   },
@@ -58,9 +52,7 @@ export default {
 
   data () {
     return {
-      followModalActive: false,
       composerContent: '',
-      activeTab: 0,
       postCounter: 2,
 
       // Mock posts
@@ -91,12 +83,7 @@ export default {
   },
 
   mounted () {
-    console.log(`Index component mounted.`)
-
-    // Decide which tab to show based on whether the site has been
-    // configured yet or not.
-    this.activeTab = this.configured ? Tabs.Me : Tabs.Settings
-    console.log(`Active tab: ${this.activeTab}`)
+    console.log(`Index route mounted.`)
   }
 }
 </script>

client/pages/more.vue

 <template>
   <div class='page'>
-    <indie-header @followButtonPress='followModalActive = true' />
+    <indie-header />
 
     <main>
       <b-message type='is-info' has-icon>

client/pages/search.vue

 <template>
-  <div class='page's>
-    <indie-header @followButtonPress='followModalActive = true' />
+  <div class='page'>
+    <indie-header />
     <main>
       <search />
     </main>

client/pages/settings.vue

 <template>
   <div class='page'>
-    <indie-header @followButtonPress='followModalActive = true' />
+    <indie-header />
 
     <main>
       <settings />

client/store/index.js

@@ -3,8 +3,8 @@
 const siteConfiguration = require('../assets/data.json')
 
 // Mock: sign-in state
-siteConfiguration.signedIn = true
-siteConfiguration.configured = false
+siteConfiguration.configured = true
+siteConfiguration.signedIn = false
 
 export const state = () => (siteConfiguration)