Make DebugModal available in search and timeline

src/components/DebugModal.vue

@@ -25,7 +25,7 @@
     },
     methods: {
       close() {
-        this.$emit('close')
+        this.$store.dispatch('closeDebug')
       }
     }
   }

src/components/SearchPopup.vue

@@ -17,7 +17,7 @@
         </div>
         
         <div class="timeline--item" v-for="item in searchItems" :key="item.id">
-          <TimelineEntry :item="item" :is-main-entry="true" />
+          <TimelineEntry :item="item" :is-main-entry="true" @debug="debug" />
         </div>
       </div>
     </div>
@@ -65,6 +65,9 @@ export default {
     close () {
       this.$store.dispatch('closeSearch')
       this.query = ''
+    },
+    debug (item) {
+      this.$store.dispatch('openDebug', item)
     }
   }
 }

src/components/Timeline.vue

@@ -12,23 +12,19 @@
         <button class="button" @click="nextPage" v-if="timeline.paging.after">Next Page</button>
       </div>
     </div>
-    <DebugModal :active="showDebug" :item="debugItem" @close="showDebug = false"></DebugModal>
   </div>
 </template>
 
 <script>
   import TimelineEntry from '../components/Entry'
-  import DebugModal from '../components/DebugModal'
 
   export default {
     name: "Timeline",
     props: ['className', 'channel', 'timeline'],
-    components: {TimelineEntry, DebugModal},
+    components: {TimelineEntry},
 
     data() {
       return {
-        showDebug: false,
-        debugItem: null,
         state: 'new'
       }
     },
@@ -43,8 +39,7 @@
 
     methods: {
       debug(item) {
-        this.debugItem = item
+        this.$store.dispatch('openDebug', item)
-        this.showDebug = true
       },
       nextPage() {
         if (this.timeline.paging.after) {

src/store.js

@@ -12,7 +12,6 @@ export default new Vuex.Store({
       channels: [],
       timeline: {items: [], paging: {}},
       channel: {},
-      debug: false,
       logged_in: false,
       micropubEndpoint: '',
       microsubEndpoint: '/microsub',
@@ -20,7 +19,10 @@ export default new Vuex.Store({
       searchPopupIsOpen: false,
       searchItems: [],
       eventSource: null,
-      globalTimeline: {items: [{name: 'Testing the global timeline'}]}
+      globalTimeline: {items: [{name: 'Testing the global timeline'}]},
+      debug: false,
+      debugItem: {},
+      debugVisible: false
     };
     let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
@@ -147,6 +149,13 @@ export default new Vuex.Store({
     },
     newSearchResults(state, items) {
       state.searchItems = items
+    },
+    openDebugPopup(state, item) {
+      state.debugItem = item
+      state.debugVisible = true
+    },
+    closeDebugPopup(state) {
+      state.debugVisible = false
     }
   },
 
@@ -295,6 +304,12 @@ export default new Vuex.Store({
     },
     startEventListening({commit}, url) {
       commit('createEventSource', url)
-    }
+    },
+    openDebug({commit}, item) {
+      return commit('openDebugPopup', item)
+    },
+    closeDebug({commit}) {
+      return commit('closeDebugPopup')
+    },
   }
 })

src/views/Home.vue

@@ -34,6 +34,8 @@
     <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
     <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :initial-channel="channel" :initial-query="feedFollowerQuery"></feed-follower>
     <search-popup :is-open="searchPopupIsOpen"></search-popup>
+    <DebugModal :active="this.$store.state.debugVisible"
+                :item="this.$store.state.debugItem"></DebugModal>
   </div>
 </template>
 
@@ -46,6 +48,7 @@
   import NewPost from "../components/NewPost"
   import ShortTimeline from "../components/ShortTimeline";
   import SearchPopup from "../components/SearchPopup";
+  import DebugModal from "../components/DebugModal";
 
   export default {
     name: 'home',
@@ -57,7 +60,8 @@
       ChannelCreator,
       NewPost,
       ShortTimeline,
-      SearchPopup
+      SearchPopup,
+      DebugModal
     },
 
     data() {