Feature: Pins for board works well

pinry-spa/src/components/Pins.vue

@@ -123,6 +123,8 @@ export default {
         promise = API.fetchPins(this.offset, this.pinFilters.tagFilter);
       } else if (this.pinFilters.userFilter) {
         promise = API.fetchPins(this.offset, null, this.pinFilters.userFilter);
+      } else if (this.pinFilters.boardFilter) {
+        promise = API.fetchPinsForBoard(this.pinFilters.boardFilter);
       } else {
         promise = API.fetchPins(this.offset);
       }

pinry-spa/src/components/api.js

@@ -18,6 +18,21 @@ function fetchPins(offset, tagFilter, userFilter) {
   );
 }
 
+function fetchPinsForBoard(boardId) {
+  const url = `${API_PREFIX}boards/${boardId}`;
+  return new Promise(
+    (resolve, reject) => {
+      axios.get(url).then(
+        (resp) => {
+          resolve({ data: { results: resp.data.pins_detail } });
+        },
+        error => reject(error),
+      );
+    },
+  );
+}
+
 export default {
   fetchPins,
+  fetchPinsForBoard,
 };

pinry-spa/src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import Home from '../views/Home.vue';
 import Pins4Tag from '../views/Pins4Tag.vue';
 import Pins4User from '../views/Pins4User.vue';
+import Pins4Board from '../views/Pins4Board.vue';
 
 Vue.use(VueRouter);
 
@@ -22,6 +23,11 @@ const routes = [
     name: 'user',
     component: Pins4User,
   },
+  {
+    path: '/pins/boards/:boardId',
+    name: 'board',
+    component: Pins4Board,
+  },
 ];
 
 const router = new VueRouter({

pinry-spa/src/views/Pins4Board.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="pins-for-board">
+    <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: { boardFilter: null },
+    };
+  },
+  components: {
+    PHeader,
+    Pins,
+  },
+  created() {
+    this.initializeBoard();
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.initializeBoard();
+    next();
+  },
+  methods: {
+    initializeBoard() {
+      this.filters.boardFilter = this.$route.params.boardId;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>

pinry-spa/src/views/Pins4Tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="pins-for-tag">
     <PHeader></PHeader>
     <Pins :pin-filters="filters"></Pins>
   </div>

pinry-spa/src/views/Pins4User.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="pins-for-user">
     <PHeader></PHeader>
     <Pins :pin-filters="filters"></Pins>
   </div>
@@ -21,14 +21,14 @@ export default {
     Pins,
   },
   created() {
-    this.initializeUser();
+    this.initializeBoard();
   },
   beforeRouteUpdate(to, from, next) {
-    this.initializeUser();
+    this.initializeBoard();
     next();
   },
   methods: {
-    initializeUser() {
+    initializeBoard() {
       this.filters.userFilter = this.$route.params.user;
     },
   },