Generalized filters bar, added to network page.

assets/components/header/filter-bar.vue

@@ -7,7 +7,7 @@
                     :checked="range === 'all'"
                     type="radio"
                     class="range-input"
-                    @click="$emit('set-range', 'all')"
+                    @click="setRange('all')"
                 >
                 <label
                     :for="`${_uid}-all`"
@@ -21,7 +21,7 @@
                     :checked="range === 'new'"
                     type="radio"
                     class="range-input"
-                    @click="$emit('set-range', 'new')"
+                    @click="setRange('new')"
                 >
                 <label
                     :for="`${_uid}-new`"
@@ -35,7 +35,7 @@
                     :checked="range === 'upcoming'"
                     type="radio"
                     class="range-input"
-                    @click="$emit('set-range', 'upcoming')"
+                    @click="setRange('upcoming')"
                 >
                 <label
                     :for="`${_uid}-upcoming`"
@@ -50,7 +50,7 @@
             <Filters
                 class="filters-container"
                 :filter="filter"
-                @set-filter="filter => $emit('set-filter', filter)"
+                @set-filter="setFilter"
             />
 
             <v-popover class="filters-compact">
@@ -60,7 +60,7 @@
                     <Filters
                         :compact="true"
                         :filter="filter"
-                        @set-filter="filter => $emit('set-filter', filter)"
+                        @set-filter="setFilter"
                     />
                 </div>
             </v-popover>
@@ -69,22 +69,49 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Filters from './filters.vue';
 
+function filter(state) {
+    return state.ui.filter;
+}
+
+function range(state) {
+    return state.ui.range;
+}
+
+async function setFilter(newFilter) {
+    this.$store.dispatch('setFilter', newFilter);
+
+    await this.fetchReleases();
+}
+
+async function setRange(newRange) {
+    this.$store.dispatch('setRange', newRange);
+
+    await this.fetchReleases();
+}
+
 export default {
     components: {
         Filters,
     },
     props: {
-        filter: {
-            type: Array,
-            default: () => [],
-        },
-        range: {
-            type: String,
+        fetchReleases: {
+            type: Function,
             default: null,
         },
     },
+    computed: {
+        ...mapState({
+            filter,
+            range,
+        }),
+    },
+    methods: {
+        setFilter,
+        setRange,
+    },
 };
 </script>
 

assets/components/home/home.vue

@@ -1,11 +1,6 @@
 <template>
     <div class="content">
-        <FilterBar
-            :filter="filter"
-            :range="range"
-            @set-filter="setFilter"
-            @set-range="setRange"
-        />
+        <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="content-inner">
             <ul class="scenes nolist">
@@ -22,30 +17,11 @@
 </template>
 
 <script>
-import FilterBar from './filter-bar.vue';
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 
-import rangeDates from '../../js/range-dates';
-
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchReleases', {
-        filter: this.filter,
-        ...rangeDates(this.range),
-    });
-}
-
-async function setFilter(filter) {
-    this.filter = filter;
-    localStorage.setItem('filter', this.filter);
-
-    await this.fetchReleases();
-}
-
-async function setRange(range) {
-    this.range = range;
-    localStorage.setItem('range', this.range);
-
-    await this.fetchReleases();
+    this.releases = await this.$store.dispatch('fetchReleases');
 }
 
 async function mounted() {
@@ -60,12 +36,7 @@ export default {
         ReleaseTile,
     },
     data() {
-        const storedFilter = localStorage.getItem('filter');
-        const storedRange = localStorage.getItem('range');
-
         return {
-            filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
-            range: storedRange || 'new',
             releases: [],
             networks: [],
             pageTitle: null,
@@ -74,8 +45,6 @@ export default {
     mounted,
     methods: {
         fetchReleases,
-        setFilter,
-        setRange,
     },
 };
 </script>

assets/components/network/network.vue

@@ -3,6 +3,8 @@
         v-if="network"
         class="content network"
     >
+        <FilterBar :fetch-releases="fetchReleases" />
+
         <div class="content-inner">
             <div class="header">
                 <a
@@ -54,12 +56,19 @@
 </template>
 
 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 import SiteTile from '../tile/site.vue';
 
-async function mounted() {
-    [this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
+async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
+}
+
+async function mounted() {
+    [[this.network]] = await Promise.all([
+        this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug),
+        this.fetchReleases(),
+    ]);
 
     this.sites = this.network.sites
         .filter(site => !site.independent)
@@ -70,6 +79,7 @@ async function mounted() {
 
 export default {
     components: {
+        FilterBar,
         ReleaseTile,
         SiteTile,
     },
@@ -82,6 +92,9 @@ export default {
         };
     },
     mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>
 

assets/components/release/release.vue

@@ -207,7 +207,7 @@ function pageTitle() {
 }
 
 async function mounted() {
-    this.release = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
+    this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
 }
 
 export default {