Merge remote-tracking branch 'upstream/pr/26'

src/components/Header.vue

@@ -25,6 +25,10 @@
             <i class="fa fa-history v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">History</span>
           </router-link>
+          <router-link to="/browse" class="dark-gray no-underline">
+            <i class="fa fa-search v-mid mr2" aria-hidden="true"></i>
+            <span class="fw6">Browse</span>
+          </router-link>
           <!-- <router-link to="/future-of-umi" class="dark-gray no-underline relative">
             <i class="fa fa-paper-plane-o v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">The Future of Umi</span>

src/pages/Browse.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mt2">
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'popular') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('popular')">Popular</button>
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'alpha') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('alpha')">Alphabetical</button>
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'featured') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('featured')">Featured</button>
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'newest') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('newest')">Newest</button>
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'simulcast') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('simulcast')">Simulcast</button>
+    <button class="f6 mt1 mb4 fw6 ba b--black-20 bg-white bg-animate hover-bg-light-gray black br1 pointer ph3 pv2 tc br2 box-shadow-umi" :class="(filter == 'updated') && 'white bg-dark-blue hover-bg-light-blue'" @click="updateFilter('updated')">Updated</button>
+
+    <div v-if="allData.length > 0" class="center container-width">
+      <series-item v-for="d in allData" :key="d.series_id" :id="d.series_id" :noMargin="true" />
+      <div class="f5 fw6 db ba b--black-20 bg-animate hover-bg-light-gray black br1 pointer pa3 tc more-btn box-shadow-umi" :class="[paginationLoading ? 'bg-light-gray' : 'bg-white']" @click="handlePagination">
+        {{paginationLoading ? 'Loading...' : 'Load more'}}
+      </div>
+    </div>
+    <div v-else class="center container-width">
+      <loading-media-item v-for="n in 15" :key="n" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import SeriesItem from 'components/SeriesItem'
+  import LoadingMediaItem from 'components/LoadingMediaItem'
+
+  export default {
+    name: 'browse',
+    metaInfo: {
+      title: 'Browse'
+    },
+    data: () => ({
+      paginationLoading: false,
+      offset: 0,
+      filter: 'popular'
+    }),
+    computed: {
+      allData () {
+        return this.$store.state.seriesList
+      }
+    },
+    components: {SeriesItem, LoadingMediaItem},
+    methods: {
+      async handlePagination () {
+        this.paginationLoading = true
+        this.offset += 50
+        await this.$store.dispatch('getSeriesList', {filter: this.filter, offset: this.offset})
+        this.paginationLoading = false
+      },
+
+      async updateFilter(filter) {
+        this.filter = filter
+        this.offset = 0
+
+        this.$store.dispatch('clearSeriesList')
+
+        await this.$store.dispatch('getSeriesList', {filter: this.filter, offset: this.offset})
+      }
+    },
+    created () {
+      this.$store.dispatch('getSeriesList', {filter: 'popular'})
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -11,6 +11,7 @@ import Migrate from 'pages/Migrate'
 import Queue from 'pages/Queue'
 import Settings from 'pages/Settings'
 import History from 'pages/History'
+import Browse from 'pages/Browse'
 import Search from 'pages/Search'
 import Login from 'pages/Login'
 import Series from 'pages/Series'
@@ -61,6 +62,12 @@ const router = new Router({
       component: History,
       beforeEnter: authGuard
     },
+    {
+      path: '/browse',
+      name: 'browse',
+      component: Browse,
+      beforeEnter: authGuard
+    },
     {
       path: '/login',
       name: 'login',

src/store/index.js

@@ -64,7 +64,8 @@ const store = new Vuex.Store({
     error: false,
     expiredSession: '',
     guestMessage: false,
-    readExtension: localStorage.getItem('readExtension') ? true : false
+    readExtension: localStorage.getItem('readExtension') ? true : false,
+    seriesList: []
   },
 
   actions: {
@@ -539,6 +540,42 @@ const store = new Vuex.Store({
       setTimeout(() => {
         commit('UPDATE_GUEST_MESSAGE', false)
       }, 5000)
+    },
+
+    getSeriesList ({state, commit}, {filter = 'popular', offset = 0} = {}) {
+      const params = {
+        session_id: state.auth.session_id,
+        media_type: 'anime',
+        limit: 50,
+        offset: offset,
+        filter: filter
+      }
+
+      return new Promise(async (resolve, reject) => {
+        try {
+          const resp = await api({route: 'list_series', params})
+          if (resp.data.error) throw resp
+
+          const data = resp.data.data
+          data.forEach((series) => {
+            commit('ADD_SERIES', series)
+          })
+
+          if (offset == 0) {
+            commit('SET_SERIES_LIST', data)
+          } else {
+            commit('UPDATE_SERIES_LIST', data)
+          }
+
+          resolve(data)
+        } catch (err) {
+          handleError(err, reject)
+        }
+      })
+    },
+
+    clearSeriesList ({state, commit}) {
+      commit('SET_SERIES_LIST', [])
     }
   },
 
@@ -663,6 +700,14 @@ const store = new Vuex.Store({
     SET_READ_EXTENSION (state) {
       localStorage.setItem('readExtension', 'true')
       state.readExtension = true
+    },
+
+    SET_SERIES_LIST (state, obj) {
+      state.seriesList = obj;
+    },
+
+    UPDATE_SERIES_LIST (state, obj) {
+      state.seriesList.concat(obj);
     }
   },