Create distinct view for each category

pages/_type/_page.vue → components/ItemList.vue

@@ -19,36 +19,24 @@
 </template>
 
 <script>
-  import { watchList } from '../../api'
-  import Item from '../../components/Item.vue'
+import { watchList } from '../api'
+import Item from './Item.vue'
 
-  const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
-  const TYPES = ['top', 'new', 'show', 'ask', 'job']
-
-  export default {
+export default {
   name: 'item-list',
-    validate({params: {type, page = 0}}) {
-      return TYPES.includes(type) && /^[0-9]+$/.test(page)
-    },
   components: {
     Item
   },
-    head() {
-      return {
-        title: camelize(this.$route.params.type)
-      }
+  props: {
+    type: String
   },
   data() {
     return {
       transition: 'slide-right',
       displayedPage: Number(this.$route.params.page) || 1,
-        displayedItems: this.$store.getters.activeItems,
-        type: this.$route.params.type
+      displayedItems: this.$store.getters.activeItems
     }
   },
-    fetch({store, params}) {
-      return store.dispatch('FETCH_LIST_DATA', {type: params.type})
-    },
   computed: {
     page() {
       return Number(this.$route.params.page) || 1
@@ -104,18 +92,18 @@
       })
     }
   }
-  }
+}
 </script>
 
 <style lang="stylus">
-  .news-view
+.news-view
   padding-top 45px
 
-  .news-list-nav, .news-list
+.news-list-nav, .news-list
   background-color #fff
   border-radius 2px
 
-  .news-list-nav
+.news-list-nav
   padding 15px 30px
   position fixed
   text-align center
@@ -129,7 +117,7 @@
   .disabled
     color #ccc
 
-  .news-list
+.news-list
   position absolute
   margin 30px 0
   width 100%
@@ -139,27 +127,27 @@
     padding 0
     margin 0
 
-  .slide-left-enter, .slide-right-leave-to
+.slide-left-enter, .slide-right-leave-to
   opacity 0
   transform translate(30px, 0)
 
-  .slide-left-leave-to, .slide-right-enter
+.slide-left-leave-to, .slide-right-enter
   opacity 0
   transform translate(-30px, 0)
 
-  .item-move, .item-enter-active, .item-leave-active
+.item-move, .item-enter-active, .item-leave-active
   transition all .5s cubic-bezier(.55, 0, .1, 1)
 
-  .item-enter
+.item-enter
   opacity 0
   transform translate(30px, 0)
 
-  .item-leave-active
+.item-leave-active
   position absolute
   opacity 0
   transform translate(30px, 0)
 
-  @media (max-width 600px)
+@media (max-width 600px)
   .news-list
     margin 10px 0
 </style>

components/createListView.js

+import ItemList from './ItemList.vue'
+
+const camelize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
+// This is a factory function for dynamically creating root-level list views,
+// since they share most of the logic except for the type of items to display.
+// They are essentially higher order components wrapping ItemList.vue.
+export default function createListView (type) {
+  return {
+    name: `${type}-stories-view`,
+
+    fetch ({ store }) {
+      return store.dispatch('FETCH_LIST_DATA', { type })
+    },
+
+    head: {
+      title: camelize(type),
+    },
+
+    render (h) {
+      return h(ItemList, { props: { type }})
+    }
+  }
+}

pages/ask/_page.vue

+<script>
+import createListView from '~components/createListView'
+
+export default createListView('ask')
+</script>

pages/job/_page.vue

+<script>
+import createListView from '~components/createListView'
+
+export default createListView('job')
+</script>

pages/new/_page.vue

+<script>
+import createListView from '~components/createListView'
+
+export default createListView('new')
+</script>

pages/show/_page.vue

+<script>
+import createListView from '~components/createListView'
+
+export default createListView('show')
+</script>

pages/top/_page.vue

+<script>
+import createListView from '~components/createListView'
+
+export default createListView('top')
+</script>