Merge pull request #7 from gk4m/develop

Develop
gk4m · Nov 13, 2018 · 6430417 · 6430417
2 parents 3ad8fd8 + b7337e1
commit 6430417
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 108 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
diff --git a/public/favicons/favicon-96x96.png b/public/favicons/favicon-96x96.png
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="<%= BASE_URL %>favicons/favicon-96x96.png">
+    <link rel="shortcut icon" href="<%= BASE_URL %>favicons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
     <title>vue-spotify</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,6 @@
 <template>
   <div id="app" class="app">
-    <notification
-      v-for="notification in notifications"
-      :key="notification.id"
-      :message="notification.message"
-      :type="notification.type"
-      :duration="notification.duration"
-      v-on:close-notification="removeNotification(notification)">
-    </notification>
-
+    <notification />
     <app-layout v-if="!notFound" />
     <not-found-view v-if="notFound" />
   </div>

diff --git a/src/api/spotify/plugin.js b/src/api/spotify/plugin.js
@@ -11,7 +11,7 @@ const plugin = store => {
   }, null);
 
   request.interceptors.response.use(null, (error) => {
-    const {status} = error.response;
+    const {status, data} = error.response;
 
     if (store.getters['auth/getAccessToken'] && status === 401 && !isFetchingToken) {
       isFetchingToken = true;
@@ -22,7 +22,12 @@ const plugin = store => {
     } else if (status === 404) {
       throw error.response;
     } else if (status === 403) {
-      console.warn('403 - You need to have premium account')
+      if( data.error.reason === 'PREMIUM_REQUIRED') {
+        store.dispatch('notification/add', {
+          type: 'warning',
+          message: 'You need to have premium account.',
+        })
+      }
     } else {
       store.dispatch('auth/login');
     }

diff --git a/src/components/Notification/Notify.vue b/src/components/Notification/Notify.vue
@@ -0,0 +1,92 @@
+<template>
+  <div :class="classes">
+    <span v-html="message"></span>
+    <button
+      class="notify__close-btn"
+      @click="close()"
+      type="button"
+      aria-label="Close alert"
+    >
+      <icon name="times-circle" />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notify',
+
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    duration: {
+      type: Number,
+      default: 4000,
+    },
+  },
+
+  computed: {
+    classes() {
+      return ['notify', this.type ? `notify--${this.type}` : ''];
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+
+  $bg: $c-black
+  $color: $c-white
+  $success: #7cbd71
+  $info: #35a5e9
+  $error: #e93735
+  $warning: #dfa941
+
+  .notify
+    position: fixed
+    width: 100%
+    margin-bottom: 1px
+    padding: 8px 35px
+    color: $color
+    font:
+      size: 11px
+      weight: 500
+    line-height: 16px
+    text-align: center
+    z-index: 1111
+    background: $bg
+
+    &--success
+      background: $success
+
+    &--info
+      background: $info
+
+    &--error
+      background: $error
+
+    &--warning
+      background: $warning
+
+    &__close-btn
+      +vertical-center
+      right: 10px
+      color: $color
+      font-size: 16px
+      line-height: 0
+      outline: 0
+      cursor: pointer
+
+</style>
diff --git a/src/components/Notification/index.vue b/src/components/Notification/index.vue
@@ -1,102 +1,37 @@
 <template>
-  <div :class="elClass" v-show="show">
-    <span v-html="message"></span>
-    <button class="notification__close-btn" @click="close()" type="button" aria-label="Close alert">
-      <icon name="times-circle"></icon>
-    </button>
+  <div>
+    <notify
+      v-for="(notification, index) in notifications"
+      :key="`notification-${index}`"
+      :message="notification.message"
+      :type="notification.type"
+      :duration="notification.duration"
+      v-on:close="removeNotification(notification)">
+    </notify>
   </div>
 </template>
 
 <script>
+  import { mapGetters, mapActions } from 'vuex';
+  import Notify from './Notify';
+
   export default {
     name: 'notification',
 
-    props: {
-      type: {
-        type: String,
-        default: 'info'
-      },
-      message: {
-        type: String,
-        required: true
-      },
-      duration: {
-        type: Number,
-        default: 4500
-      }
-    },
-
-    data() {
-      return {
-        show: true,
-        timer: null
-      }
+    components: {
+      Notify,
     },
 
     computed: {
-      elClass() {
-        return ['notification', this.type ? `notification--${this.type}` : '']
-      }
+      ...mapGetters({
+        notifications: 'notification/getNotifications',
+      }),
     },
 
     methods: {
-      close: function () {
-        clearTimeout(this.timer);
-
-        this.show = false;
-        this.$emit('close-notification');
-      }
+      ...mapActions({
+        removeNotification: 'notification/remove',
+      }),
     },
-
-    mounted() {
-      if (this.duration > 0) {
-        this.timer = setTimeout(() => this.close(), this.duration)
-      }
-    }
-  }
+  };
 </script>
-
-<style lang="sass" scoped>
-
-  $bg: $c-black
-  $color: $c-white
-  $success: #7cbd71
-  $info: #35a5e9
-  $error: #e93735
-  $warning: #dfa941
-
-  .notification
-    position: fixed
-    width: 100%
-    padding: 8px 35px
-    color: $color
-    font:
-      size: 11px
-      weight: 500
-    line-height: 16px
-    text-align: center
-    z-index: 1111
-    background: $bg
-
-    &--success
-      background: $success
-
-    &--info
-      background: $info
-
-    &--error
-      background: $error
-
-    &--warning
-      background: $warning
-
-    &__close-btn
-      +vertical-center
-      right: 10px
-      color: $color
-      font-size: 16px
-      line-height: 0
-      outline: 0
-      cursor: pointer
-
-</style>
diff --git a/src/components/PlaylistCreateModal/index.vue b/src/components/PlaylistCreateModal/index.vue
@@ -54,7 +54,7 @@
 
     methods: {
       ...mapActions({
-        addNotification: 'notification/addNotification',
+        addNotification: 'notification/add',
         getUserPlaylists: 'user/getCurrentUserPlaylists',
         clearUserPlaylists: 'user/clearUserPlaylists',
       }),

diff --git a/src/components/PlaylistUpdateModal/index.vue b/src/components/PlaylistUpdateModal/index.vue
@@ -64,7 +64,7 @@
 
     methods: {
       ...mapActions({
-        addNotification: 'notification/addNotification',
+        addNotification: 'notification/add',
         getUserPlaylists: 'user/getCurrentUserPlaylists',
         clearUserPlaylists: 'user/clearUserPlaylists',
         fetchPlaylist: 'playlist/fetchPlaylist',
@@ -101,6 +101,16 @@
           return false;
         }
 
+        if (!this.description) {
+          this.addNotification({
+            type: 'error',
+            message: 'You must give your playlist a description.',
+            duration: 3000
+          });
+
+          return false;
+        }
+
         return valid;
       },
 
@@ -127,7 +137,6 @@
             await api.spotify.playlists.updatePlaylist(this.user.id, playlistID, this.name, this.description);
 
             this.fetchPlaylist({userID: this.userID, playlistID});
-
             this.clearUserPlaylists();
             this.getUserPlaylists();
 
@@ -138,7 +147,7 @@
             });
 
           } catch (e) {
-            console.log(e);
+            console.error(e);
           }
 
           this.hide();

diff --git a/src/store/modules/notification.js b/src/store/modules/notification.js
@@ -1,9 +1,9 @@
 const state = {
-  notifications: []
+  notifications: [],
 };
 
 const getters = {
-  getNotifications: state => state.notifications
+  getNotifications: state => state.notifications,
 };
 
 const mutations = {
@@ -17,20 +17,27 @@ const mutations = {
 };
 
 const actions = {
-  addNotification({commit}, notification) {
+  add({ commit, dispatch }, notification) {
     commit('NOTIFICATION_ADD', notification);
+
+    if (notification.duration > 0) {
+      setTimeout(() => {
+        dispatch('remove', notification);
+      }, notification.duration);
+    }
   },
-  removeNotification({commit}, notification) {
+
+  remove({ commit }, notification) {
     commit('NOTIFICATION_REMOVE', notification);
-  }
+  },
 };
 
 const module = {
   namespaced: true,
   state,
   getters,
   mutations,
-  actions
+  actions,
 };
 
 export default module;