update to the new API

Author: antfu

src/App.vue

@@ -16,11 +16,7 @@ html, body
   padding 0
   margin 0
 
-html
-  background #f1f1f1
-
 body
-  background #fff
   min-height 100vh
 
 #app

src/api.js

@@ -7,9 +7,14 @@ export class API {
     const res = await axios.get(`${API_ROOT}/all`)
     return res.data
   }
+
+  static async getPage(page = 1) {
+    const res = await axios.get(`${API_ROOT}/pages/${page}`)
+    return res.data
+  }
 
-  static async vote(id, increment) {
-    const res = await axios.post(`${API_ROOT}/vote`, { id, increment })
+  static async vote(id, v) {
+    const res = await axios.get(`${API_ROOT}/snippets/${id}/vote/${v}`)
     return res.data
   }
 }

src/components/Home.vue

@@ -1,10 +1,12 @@
 <template>
 <div>
   <div class="nav">
-    <label class="title">文言片語</label>
-    <input class="search" placeholder="Search snippets..." v-model="searchText"/>
-    <span @click="search" class="iconify" data-icon="mdi:search" data-inline="false"></span>
-    <span @click="newSnippet" class="iconify" data-icon="mdi:plus" data-inline="false"></span>
+    <div class="content">
+      <label class="title">文言片語</label>
+      <input class="search" placeholder="Search snippets..." v-model="searchText"/>
+      <span @click="search" class="iconify" data-icon="mdi:search" data-inline="false"></span>
+      <span @click="newSnippet" class="iconify" data-icon="mdi:plus" data-inline="false"></span>
+    </div>
   </div>
   <div class="showcase">
     <snippet-preview 
@@ -21,6 +23,7 @@
     </div>
   </div>
   <spinner v-show="loading"/>
+  <div class="end-of-pages" v-if='endOfPages'>you reached the end :)</div>
 </div>
 </template>
 
@@ -39,18 +42,28 @@ export default {
   },
   data() {
     return {
-      loading: true,
+      loading: false,
       searchText: '',
-      snippets: {},
+      snippets: [],
       page: 0,
-      totalPage: -1,
+      totalPages: 9999,
       editing: null
     }
   },
+  computed: {
+    endOfPages(){
+      return this.page >= this.totalPages
+    }
+  },
   methods: {
-    async fetch() {
+    async fetchNext() {
+      if (this.endOfPages || this.loading)
+        return
       this.loading = true
-      this.snippets = await API.getAll()
+      const { snippets, totalPages, page } = await API.getPage(this.page + 1)
+      this.snippets.push(...snippets)
+      this.totalPages = totalPages
+      this.page = page
       this.loading = false
     },
     async search() {
@@ -63,15 +76,24 @@ export default {
       this.$set(this.snippets, idx, snippet)
     }
   },
-  mounted(){
-    this.fetch()
+  mounted() {
+    this.page = 0
+    this.fetchNext()
+
+    window.onscroll = () => {
+      let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
+
+      if (bottomOfWindow)
+        this.fetchNext()
+    }
   }
 }
 </script>
 
 <style lang="stylus">
+$max-width = 85rem
+
 .nav
-  padding: 5px
   background: #f1f1f1
   border-bottom: 1px solid gainsboro
   position: fixed
@@ -81,8 +103,13 @@ export default {
   z-index: 1
   white-space: nowrap
 
-  *
-    vertical-align: middle
+  .content
+    max-width $max-width
+    margin 0 auto
+    padding 5px
+
+    *
+      vertical-align: middle
 
   .iconify 
     font-size: 1.5em
@@ -101,10 +128,11 @@ export default {
     font-size: 1.1em
 
 .showcase
-  margin-top: 3.6rem
   padding: 1rem
   display: grid
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))
+  max-width $max-width
+  margin 3.6rem auto 1rem auto
 
 .modal
   z-index 2
@@ -121,4 +149,10 @@ export default {
     top 5rem
     bottom 5rem
     right 5rem
+
+.end-of-pages
+  padding 2rem
+  opacity 0.3
+  text-align center
+  font-style italic
 </style>

src/components/IconButton.vue

@@ -26,4 +26,7 @@ export default {
 
   &:hover
     opacity: 1
+
+  &.active 
+    color: #E53
 </style>

src/components/SnippetPreview.vue

@@ -17,8 +17,8 @@
   <div class='footer'>
     <span class='votes'>{{snippet.votes}}</span>
 
-    <icon-button @click.native="voteUp" icon="thumb-up"/>
-    <icon-button @click.native="voteDown" icon="thumb-down"/>
+    <icon-button @click.native="voteUp" :class='{active: snippet.voted === 1}' icon="thumb-up"/>
+    <icon-button @click.native="voteDown" :class='{active: snippet.voted === -1}' icon="thumb-down"/>
 
     <div class='right-aligned'>
       <span class='token'>{{snippet.token}}</span>
@@ -45,11 +45,17 @@ export default {
   },
   methods: {
     async voteUp() {
-      const data = await API.vote(this.snippet.id, +1)
+      const data = await API.vote(
+        this.snippet.id, 
+        this.snippet.voted === 1 ? 'reset' : 'up'
+      )
       this.update(data)
     },
     async voteDown() {
-      const data = await API.vote(this.snippet.id, -1)
+       const data = await API.vote(
+        this.snippet.id, 
+        this.snippet.voted === -1 ? 'reset' : 'down'
+      )
       this.update(data)
     },
     update(data) {
@@ -77,7 +83,7 @@ export default {
 
 <style lang="stylus" scope>
 .snippet-preview
-  margin: 5px
+  margin: 8px
   border-radius: 4px
   border: 1px solid gainsboro
   box-shadow: 1px 1px 1px rgba(0,0,0,0.1)