Add debug screen and mark as read

src/components/Entry.vue

@@ -33,6 +33,12 @@
         </div>
       </div>
     </div>
+    <footer class="card-footer">
+      <a class="card-footer-item" @click="debug">Debug</a>
+      <a class="card-footer-item" @click="like">Like</a>
+      <a class="card-footer-item" @click="repost">Repost</a>
+      <a class="card-footer-item" @click.prevent="reply">Reply</a>
+    </footer>
   </div>
 </template>
 
@@ -41,6 +47,18 @@
     name: "Entry",
     props: ['item'],
 
+    methods: {
+      debug() {
+        this.$emit('debug', this.item)
+      },
+      like() {
+        this.$emit('like', this.item)
+      },
+      repost() {
+        this.$emit('repost', this.item)
+      }
+    },
+
     computed: {
       classes() {
         return {'entry': true, 'card': true, 'unread': !this.item._is_read}

src/components/Timeline.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="this.className">
     <div class="timeline--item" v-for="item in items" :key="item.id">
-      <TimelineEntry :item="item"/>
+      <TimelineEntry :item="item" @debug="debug"/>
     </div>
     <div class="level">
       <div class="level-item">
@@ -11,16 +11,25 @@
         <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},
+    components: {TimelineEntry, DebugModal},
+
+    data() {
+      return {
+        showDebug: false,
+        debugItem: null
+      }
+    },
 
     computed: {
       items() {
@@ -31,6 +40,10 @@
     },
 
     methods: {
+      debug(item) {
+        this.debugItem = item
+        this.showDebug = true
+      },
       nextPage() {
         if (this.timeline.paging.after) {
           this.$emit('getPage', {uid: this.channel.uid, after: this.timeline.paging.after})
@@ -47,14 +60,22 @@
         let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === this.$el.offsetHeight + document.documentElement.offsetHeight + 20;
         if (bottomOfWindow) {
           this.$children.forEach((child) => {
+            if (child.$props.item && !child.$props.item._is_read) {
               child.$props.item._is_read = true
+              this.$store.dispatch('markRead', child.$props.item.uid)
+            }
           })
         }
 
         this.$children.forEach((child) => {
           let rect = child.$el.getBoundingClientRect()
-          if (rect.top+rect.height < 100) {
+          if (rect.top + rect.height < 100) {
+            if (child.$props.item && !child.$props.item._is_read) {
               child.$props.item._is_read = true
+              this.$store.dispatch('markRead', {channel:this.channel.uid, entry: child.$props.item._id }).then(() => {
+                this.$store.dispatch('fetchChannels')
+              })
+            }
           }
         })
       }

src/store.js

@@ -81,6 +81,17 @@ export default new Vuex.Store({
       // eslint-disable-next-line
       console.log(response)
       commit('newAccessToken', response)
+    },
+    markRead(x, {channel, entry}) {
+      // eslint-disable-next-line
+      console.log(channel, entry)
+      let url = 'https://microsub.stuifzandapp.com/microsub?action=timeline&method=mark_read&channel=' + encodeURIComponent(channel) + '&entry=' + encodeURIComponent(entry);
+      return fetch(url, {
+        method: 'POST',
+        headers: {
+          'Authorization': 'Bearer ' + this.state.access_token
+        }
+      })
     }
   }
 })