Feature: Add pins for user and pins for tag

pinry-spa/src/App.vue

@@ -16,7 +16,7 @@ export default {
   // Import Bulma and Buefy styles
   @import "~bulma";
   @import "~buefy/src/scss/buefy";
-  #app {
+  html {
     background-color: #F5F5EB;
   }
   .body {

pinry-spa/src/components/Pins.vue

@@ -25,13 +25,18 @@
                       <img class="avatar" :src="item.avatar" alt="">
                     </div>
                     <div class="pin-info">
-                      <span class="dim">pined by&nbsp;<span><router-link to="/">{{ item.author }}</router-link></span>
+                      <span class="dim">pined by&nbsp;
+                        <span>
+                          <router-link
+                            :to="{ name: 'user', params: {user: item.author} }">
+                            {{ item.author }}
+                          </router-link>
+                        </span>
                         <template v-if="item.tags.length > 0">
                           &nbsp;in&nbsp;
                           <template v-for="tag in item.tags">
                             <span v-bind:key="tag" class="pin-tag">
-                              &nbsp;
-                              <router-link to="/tags/">{{ tag }}</router-link>
+                              <router-link :to="{ name: 'tag', params: {tag: tag} }" params="{tag: tag}">{{ tag }}</router-link>
                             </span>
                           </template>
                         </template>
@@ -73,8 +78,20 @@ export default {
   data() {
     return {
       blocks: [],
+      offset: 0,
     };
   },
+  props: {
+    pinFilters: {
+      type: Object,
+      default() {
+        return {
+          tagFilter: null,
+          userFilter: null,
+        };
+      },
+    },
+  },
   methods: {
     buildBlocks(results) {
       const blocks = [];
@@ -100,13 +117,24 @@ export default {
         },
       );
     },
+    fetchMore() {
+      let promise;
+      if (this.pinFilters.tagFilter) {
+        promise = API.fetchPins(this.offset, this.pinFilters.tagFilter);
+      } else if (this.pinFilters.userFilter) {
+        promise = API.fetchPins(this.offset, null, this.pinFilters.userFilter);
+      } else {
+        promise = API.fetchPins(this.offset);
+      }
+      promise.then(
+        (resp) => {
+          this.blocks = this.buildBlocks(resp.data.results);
+        },
+      );
+    },
   },
   created() {
-    API.fetchPins(0).then(
-      (resp) => {
-        this.blocks = this.buildBlocks(resp.data.results);
-      },
-    );
+    this.fetchMore();
   },
 };
 </script>
@@ -153,6 +181,9 @@ $avatar-height: 30px;
     width: $avatar-width;
     border-radius: 3px;
   }
+  .pin-tag {
+    margin-right: 0.2rem;
+  }
 }
 .pin-footer {
   position: relative;

pinry-spa/src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from '../views/Home.vue';
+import Pins4Tag from '../views/Pins4Tag.vue';
+import Pins4User from '../views/Pins4User.vue';
 
 Vue.use(VueRouter);
 
@@ -10,6 +12,16 @@ const routes = [
     name: 'home',
     component: Home,
   },
+  {
+    path: '/pins/tags/:tag',
+    name: 'tag',
+    component: Pins4Tag,
+  },
+  {
+    path: '/pins/users/:user',
+    name: 'user',
+    component: Pins4User,
+  },
 ];
 
 const router = new VueRouter({

pinry-spa/src/views/Pins4Tag.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="home">
+    <PHeader></PHeader>
+    <Pins :pin-filters="filters"></Pins>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+import Pins from '../components/Pins.vue';
+
+export default {
+  name: 'p-header',
+  data() {
+    return {
+      filters: { tagFilter: null },
+    };
+  },
+  components: {
+    PHeader,
+    Pins,
+  },
+  created() {
+    this.initializeTag();
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.initializeTag();
+    next();
+  },
+  methods: {
+    initializeTag() {
+      this.filters.tagFilter = this.$route.params.tag;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>

pinry-spa/src/views/Pins4User.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="home">
+    <PHeader></PHeader>
+    <Pins :pin-filters="filters"></Pins>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+import Pins from '../components/Pins.vue';
+
+export default {
+  name: 'p-header',
+  data() {
+    return {
+      filters: { userFilter: null },
+    };
+  },
+  components: {
+    PHeader,
+    Pins,
+  },
+  created() {
+    this.initializeUser();
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.initializeUser();
+    next();
+  },
+  methods: {
+    initializeUser() {
+      this.filters.userFilter = this.$route.params.user;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>