Commit eed0ed6b authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

simplify data source logic

parent 473b9044
......@@ -25,8 +25,8 @@
export default {
props: {
collectionQuery: {
type: Function,
collection: {
type: Object,
required: true
},
behavior: {
......@@ -110,7 +110,7 @@
? this.$refs.items.getBoundingClientRect().height
: this.minHeight || null
this.isLoading = true
return this.collectionQuery(query, { signal: abortController.signal })
return this.collection.list(query, { signal: abortController.signal })
.then(data => {
this.items = forceReplace || this.behavior === 'replace'
? data.results
......
......@@ -3,7 +3,7 @@ import mem from 'mem'
const { Map } = window
const globalCache = new Map()
const createCache = (ttl) => {
const createCache = ttl => {
const fetcher = url => fetch(url).then(res => res.json())
return mem(fetcher, {
cache: globalCache,
......@@ -12,10 +12,21 @@ const createCache = (ttl) => {
})
}
const broadcastCache = createCache(300)
const recordingCache = createCache(120)
const seriesCache = createCache(600)
const tagCache = createCache(300)
class Collection {
constructor (path, cache) {
this.basePath = path
this.cache = cache
}
list (filterQuery, options) {
return this.cache(`${this.basePath}?${filterQuery}`, options)
}
get (id) {
return this.cache(`${this.basePath}/${id}`)
}
clearCache () {
mem.clear(this.cache)
}
}
export default function createDataSources (env) {
const createUrl = subPath => `${env.apiPath}${subPath}`
......@@ -25,31 +36,16 @@ export default function createDataSources (env) {
return createUrl(`/images/${imageId}/render`)
}
const broadcastBase = createUrl(`/broadcasts`)
const queryBroadcast = id => broadcastCache(`${broadcastBase}/${id}`)
const queryBroadcastCollection = (filterQuery, opts) => broadcastCache(`${broadcastBase}?${filterQuery}`, opts)
const recordingBase = createUrl(`/recordings`)
const queryRecording = id => recordingCache(`${recordingBase}/${id}`)
const queryRecordingCollection = (filterQuery, opts) => recordingCache(`${recordingBase}?${filterQuery}`, opts)
const seriesBase = createUrl(`/series`)
const querySeries = id => seriesCache(`${seriesBase}/${id}`)
const querySeriesCollection = (filterQuery, opts) => seriesCache(`${seriesBase}?${filterQuery}`, opts)
const tagBase = createUrl(`/tags`)
const queryTag = slug => tagCache(`${tagBase}/${slug}`)
const queryTagCollection = (filterQuery, opts) => tagCache(`${tagBase}?${filterQuery}`, opts)
const broadcasts = new Collection(createUrl(`/broadcasts`), createCache(300))
const recordings = new Collection(createUrl(`/recordings`), createCache(120))
const series = new Collection(createUrl(`/series`), createCache(600))
const tags = new Collection(createUrl('/tags'), createCache(300))
return {
createImageUrl,
queryBroadcast,
queryBroadcastCollection,
queryRecording,
queryRecordingCollection,
querySeries,
querySeriesCollection,
queryTag,
queryTagCollection
broadcasts,
recordings,
series,
tags
}
}
......@@ -20,7 +20,7 @@ const router = new Router({
props: true,
component: () => createCollectionLoader({
component: import(/* webpackChunkName: "series" */ './views/SeriesPage.vue'),
source: 'querySeries',
source: 'series',
injectAs: 'series'
})
},
......@@ -30,7 +30,7 @@ const router = new Router({
props: true,
component: () => createCollectionLoader({
component: import(/* webpackChunkName: "recording" */ './views/RecordingPage.vue'),
source: 'queryRecording',
source: 'recordings',
injectAs: 'recording'
})
},
......
......@@ -21,7 +21,7 @@ export async function createCollectionLoader ({ source, injectAs, component, not
},
inject: ['dataSources'],
async created () {
this.data = await this.dataSources[source](this.$route.params[routeParam])
this.data = await this.dataSources[source].get(this.$route.params[routeParam])
this.hasLoaded = true
},
render (createElement) {
......
......@@ -7,7 +7,7 @@
<app-section>
<app-auto-grid :sizes="{ md: [2, 1], lg: [2, 1], xl: [2, 1] }" :gap-modifier="2">
<div>
<app-paginator :collection-query="dataSources.queryRecordingCollection" :min-height="300"
<app-paginator :collection="dataSources.recordings" :min-height="300"
:page-size="recordingPageSize" :filters="{ is_available: 1 }" :page-limit="6"
id="recent_recordings">
<template v-slot:header>
......@@ -42,7 +42,7 @@
</app-section>
<app-section>
<app-paginator :collection-query="dataSources.querySeriesCollection" :min-height="300"
<app-paginator :collection="dataSources.series" :min-height="300"
:page-size="seriesPageSize" :cacheTime="120" id="series">
<template v-slot:header>
<app-header :title="$t('home_page_series')" :level="2" class="mb-3">
......
......@@ -36,7 +36,7 @@
</app-field>
</div>
<div>
<app-paginator :collection-query="dataSources.queryRecordingCollection" id="similar_recordings"
<app-paginator :collection="dataSources.recordings" id="similar_recordings"
:page-size="3" :filters="similarRecordingFilters" :min-height="100"
:empty-message="$t('recording_page.no_similar_recordings')">
<template v-slot:header>
......
......@@ -5,7 +5,7 @@
<app-header :title="$t('search_page.title')" always-show-title class="mb-5">
<app-search @search="updateSearchData"/>
</app-header>
<app-paginator :collection-query="dataSources.queryRecordingCollection" behavior="append"
<app-paginator :collection="dataSources.recordings" behavior="append"
no-loader :min-height="0" :page-size="recordingCollection.count"
:filters="recordingFilters" id="recordings">
<template v-slot:default="{ items, isLoading }">
......
......@@ -2,7 +2,7 @@
<app-page :title="`#${slug}`">
<app-container class="my-5">
<app-section>
<app-paginator :collection-query="dataSources.queryRecordingCollection" :page-size="20"
<app-paginator :collection="dataSources.recordings" :page-size="20"
:filters="{ tags: this.slug, is_available: 1 }">
<template v-slot:header>
<app-header :title="slug" class="mb-3">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment