Update to v2 api

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `vuebbble` will be documented in this file.
 
+## [2.6.0] - TBA
+
+### Changed
+- Updated to dribbble `v2` API (v1 deprecated).
+
+### Removed
+- Removed prop: `user`, no longer used in `v2` API.
+
 ## [2.5.0] - 2018-03-20
 
 ### Changed

README.md

@@ -4,7 +4,7 @@
 [![Build Status](https://img.shields.io/travis/robbinfellow/vuebbble/master.svg?style=flat-square)](https://travis-ci.org/robbinfellow/vuebbble)
 
 # Vuebbble
-Vue component to easily display dribbble shots from a user.
+Vue component to easily display dribbble shots from a user using the `v2` API.
 
 ## Demo
 
@@ -40,20 +40,21 @@ Display the component using [scoped slots.](https://vuejs.org/v2/guide/component
 
 ```html
 <template>
-    <vuebbble token="CLIENT_ACCESS_TOKEN" user="USERNAME" :count="10">
+    <vuebbble token="ACCESS_TOKEN" :count="10">
         <template slot="shots" slot-scope="props">
             <img :src="props.shot.images.hidpi" :alt="props.shot.title">
         </template>
     </vuebbble>
 </template>
 ```
 
+> :mag: Inspect the component using Vue devtools to see all available data from the response.
+
 ## Available properties
 
 Prop           | Data Type  | Required  | Default   | Description
 -------------- | ---------- | --------- | -------   | -----------
-`token`        | String     | `true`    |           | Application client access token
-`user`         | String     | `true`    |           | User to display shots from
+`token`        | String     | `true`    |           | Application access token
 `count`        | Number     | `false`   | 5         | Number of shots to fetch
 
 ## Changelog

__tests__/vuebbbleComponent.test.js

@@ -7,7 +7,7 @@ describe('Vuebbble', () => {
     beforeEach(() => {
         document.body.innerHTML = `
             <div id="app">
-                <vuebbble token="8828b898f4e2cec33f65f5342ba736b5e35e70f03681aa7435ad26c3b1830847" user="robbinfellow"></vuebbble>
+                <vuebbble token="dff1b22ab880e411730dcb2c892e3db42411b8cd58dd4ed5b8078c9ef21640ee"></vuebbble>
             </div>
         `;
     });

dist/index.js

@@ -1864,7 +1864,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
     exports.default = {
         name: 'vuebbble',
-
         mounted: function mounted() {
             this.get();
         },
@@ -1881,10 +1880,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 type: String,
                 required: true
             },
-            user: {
-                type: String,
-                required: true
-            },
             count: {
                 type: Number,
                 default: 5,
@@ -1895,7 +1890,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             get: function get() {
                 var _this = this;
 
-                this.url = 'https://api.dribbble.com/v1/users/' + this.user + '/shots/?access_token=' + this.token + '&per_page=' + this.count;
+                this.url = 'https://api.dribbble.com/v2/user/shots?access_token=' + this.token + '&per_page=' + this.count;
                 _axios2.default.get(this.url).then(function (response) {
                     _this.shots = response.data;
                 }).catch(function (error) {

docs/build/app.js

@@ -12895,7 +12895,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
     exports.default = {
         name: 'vuebbble',
-
         mounted: function mounted() {
             this.get();
         },
@@ -12912,10 +12911,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 type: String,
                 required: true
             },
-            user: {
-                type: String,
-                required: true
-            },
             count: {
                 type: Number,
                 default: 5,
@@ -12926,7 +12921,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             get: function get() {
                 var _this = this;
 
-                this.url = 'https://api.dribbble.com/v1/users/' + this.user + '/shots/?access_token=' + this.token + '&per_page=' + this.count;
+                this.url = 'https://api.dribbble.com/v2/user/shots?access_token=' + this.token + '&per_page=' + this.count;
                 _axios2.default.get(this.url).then(function (response) {
                     _this.shots = response.data;
                 }).catch(function (error) {

docs/index.html

@@ -12,8 +12,7 @@
             <div class="columns is-centered">
                 <div class="column is-two-thirds">
                     <vuebbble
-                        token="8828b898f4e2cec33f65f5342ba736b5e35e70f03681aa7435ad26c3b1830847"
-                        user="robbinfellow"
+                        token="dff1b22ab880e411730dcb2c892e3db42411b8cd58dd4ed5b8078c9ef21640ee"
                         :count="9"
                         class="columns is-multiline"
                     >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuebbble",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Vue component to easily display dribbble shots from a user",
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",

src/components/Vuebbble.vue

@@ -12,7 +12,6 @@ import axios from 'axios';
 
 export default {
     name: 'vuebbble',
-
     mounted() {
         this.get();
     },
@@ -28,10 +27,6 @@ export default {
             type: String,
             required: true,
         },
-        user: {
-            type: String,
-            required: true,
-        },
         count: {
             type: Number,
             default: 5,
@@ -40,7 +35,7 @@ export default {
     },
     methods: {
         get() {
-            this.url = 'https://api.dribbble.com/v1/users/' + this.user + '/shots/?access_token=' + this.token + '&per_page=' + this.count;
+            this.url = 'https://api.dribbble.com/v2/user/shots?access_token=' + this.token + '&per_page=' + this.count;
             axios.get(this.url)
                 .then(response => {
                     this.shots = response.data;