simplifies the API design

Author: mrmegatelo

feed/urls.py

@@ -14,21 +14,11 @@
         views.api.CollectionUpdateView.as_view(),
         name="api_collection_update",
     ),
-    path(
-        "api/v1/collections/<int:pk>/feed/",
-        views.api.CollectionFeedListView.as_view(),
-        name="api_collection_feed_list",
-    ),
     path(
         "api/v1/subscriptions/",
         views.api.SubscriptionsListView.as_view(),
         name="api_subscriptions_list",
     ),
-    path(
-        "api/v1/subscriptions/<int:pk>/feed/",
-        views.api.SubscriptionsFeedListView.as_view(),
-        name="api_subscription_feed_list",
-    ),
     path(
         "api/v1/subscriptions/<int:pk>/subscription/",
         views.api.Subscription.as_view(),

feed/views/api/__init__.py

@@ -2,8 +2,6 @@
     SubscriptionsListView,
     CollectionListView,
     FeedListView,
-    SubscriptionsFeedListView,
-    CollectionFeedListView,
     FeedItemUpdateView,
     FeedItemActionView,
     CollectionUpdateView,
@@ -15,8 +13,6 @@
     "SubscriptionsListView",
     "CollectionListView",
     "FeedListView",
-    "SubscriptionsFeedListView",
-    "CollectionFeedListView",
     "FeedItemUpdateView",
     "FeedItemActionView",
     "CollectionUpdateView",

feed/views/api/feed.py

@@ -116,6 +116,8 @@ def get_queryset(self):
         queryset = self.apply_type_filters(queryset)
         queryset = self.apply_exclude_filters(queryset)
         queryset = self.apply_search_filter(queryset)
+        queryset = self.apply_collection_filter(queryset)
+        queryset = self.apply_subscription_filter(queryset)
         return queryset
 
     def apply_exclude_filters(self, queryset):
@@ -163,15 +165,17 @@ def apply_search_filter(self, queryset):
             | Q(description__icontains=self.request.GET.get("search"))
         )
 
+    def apply_collection_filter(self, queryset):
+        collection_id = self.request.GET.get("collection_id")
+        if collection_id is None:
+            return queryset
+        return queryset.filter(feed__collections=collection_id)
 
-class CollectionFeedListView(FeedListView):
-    def get_queryset(self):
-        return super().get_queryset().filter(feed__collections=self.kwargs.get("pk"))
-
-
-class SubscriptionsFeedListView(FeedListView):
-    def get_queryset(self):
-        return super().get_queryset().filter(feed=self.kwargs.get("pk"))
+    def apply_subscription_filter(self, queryset):
+        subscription_id = self.request.GET.get("subscription_id")
+        if subscription_id is None:
+            return queryset
+        return queryset.filter(feed=subscription_id)
 
 
 class FeedItemUpdateView(UpdateAPIView):

frontend/src/components/feed/Filters.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineEmits } from 'vue'
+import { computed } from 'vue'
 import { useFeedStore } from '@/stores/feed.ts'
 import IconThumbDown from '@/components/icons/IconThumbDown.vue'
 import IconTaskAlt from '@/components/icons/IconTaskAlt.vue'

frontend/src/components/feed/List.vue

@@ -5,6 +5,7 @@ import { computed, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import IconInboxEmpty from '@/components/icons/IconInboxEmpty.vue'
 import Loader from '@/components/feed/Loader.vue'
+import { buildUrlWithParams } from '@/utils/helpers.ts'
 
 const { fetchUrl } = defineProps({ fetchUrl: String })
 const nextLink = ref(null)
@@ -15,47 +16,27 @@ const requestUrl = computed(() => {
   if (!fetchUrl) {
     return
   }
-  const url = new URL(fetchUrl, window.location.origin)
-  const filtersKey = route.matched[0]?.name || route.name
-  for (const [filter, values] of Object.entries(feedStore.getFilters(filtersKey as string))) {
-    if (Array.isArray(values)) {
-      values.forEach((value) => {
-        url.searchParams.append(filter, value)
-      })
-    } else {
-      url.searchParams.append(filter, values)
-    }
-  }
 
-  return url.href
+  const filtersKey = route.matched[0]?.name || route.name
+  return buildUrlWithParams(fetchUrl, feedStore.getFilters(filtersKey as string))
 })
 
 function handleScroll(idx: number) {
   if (idx === feedStore.items.length - 1) {
     if (nextLink.value) {
-      fetchFeed(nextLink.value)
+      feedStore.fetchByUrl(nextLink.value, false).then((response) => {
+          nextLink.value = response.next
+      })
     }
   }
 }
 
-async function fetchFeed(url: string | URL) {
-  return fetch(url)
-    .then((res) => res.json())
-    .then((res) => {
-      feedStore.appendItems(res.results)
-      nextLink.value = res.next
-      feedStore.isLoading = false
-    })
-}
-
 watchEffect(async () => {
   if (!requestUrl.value) {
     return
   }
-
-  feedStore.isLoading = true
-  feedStore.setItems([]);
-  await fetchFeed(requestUrl.value)
+  const response = await feedStore.fetchByUrl(requestUrl.value)
+  nextLink.value = response.next
 })
 
 </script>

frontend/src/router/index.ts

@@ -9,7 +9,7 @@ const router = createRouter({
       path: '/',
       name: 'feed',
       component: FeedView,
-      props: { feed_type: 'default' },
+      props: { feedType: 'generic' },
       children: [
         {
           path: 'items/:id',
@@ -22,7 +22,7 @@ const router = createRouter({
       path: '/favorites',
       name: 'favorites',
       component: FeedView,
-      props: { feed_type: 'favorites' },
+      props: { feedType: 'favorites' },
       children: [
         {
           path: 'items/:id',
@@ -35,7 +35,7 @@ const router = createRouter({
       path: '/articles',
       name: 'articles',
       component: FeedView,
-      props: { feed_type: 'articles' },
+      props: { feedType: 'articles' },
       children: [
         {
           path: 'items/:id',
@@ -48,7 +48,7 @@ const router = createRouter({
       path: '/podcasts',
       name: 'podcasts',
       component: FeedView,
-      props: { feed_type: 'podcasts' },
+      props: { feedType: 'podcasts' },
       children: [
         {
           path: 'items/:id',
@@ -61,7 +61,7 @@ const router = createRouter({
       path: '/videos',
       name: 'videos',
       component: FeedView,
-      props: { feed_type: 'videos' },
+      props: { feedType: 'videos' },
       children: [
         {
           path: 'items/:id',
@@ -74,7 +74,7 @@ const router = createRouter({
       path: '/collection/:slug',
       name: 'collection_feed_list',
       component: FeedView,
-      props: { feed_type: 'collection' },
+      props: { feedType: 'collection' },
       children: [
         {
           path: 'items/:id',
@@ -87,7 +87,7 @@ const router = createRouter({
       path: '/:slug',
       name: 'feed_list',
       component: FeedView,
-      props: { feed_type: 'feed' },
+      props: { feedType: 'subscription' },
       children: [
         {
           path: 'items/:id',

frontend/src/stores/feed.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import type { FeedType } from '@/utils/types.ts'
+import { getFeedBaseUrl } from '@/utils/helpers.ts'
 
 interface Attachment {
   url: string;
@@ -26,7 +28,9 @@ interface FeedState {
   items: FeedItem[]
   total: number
   filters: Record<'default' | string, FilterRecord>
-  isLoading: boolean
+  isLoading: boolean,
+  type: FeedType,
+  url: string,
 }
 
 export const useFeedStore = defineStore('feed', {
@@ -35,6 +39,8 @@ export const useFeedStore = defineStore('feed', {
       items: [],
       total: 0,
       isLoading: false,
+      type: 'generic',
+      url: getFeedBaseUrl('generic'),
       filters: {
         default: { exclude: ['viewed', 'not_interesting'] },
         favorites: { exclude: ['not_interesting'] },
@@ -60,19 +66,18 @@ export const useFeedStore = defineStore('feed', {
 
       if (!this.filters[category]) {
         this.filters[category] = {
-          ...this.filters.default,
-          ...filters as FilterRecord,
+          ...this.filters.default
         }
-      } else {
-        for (const key of Object.keys(filters)) {
-          if (filters[key] !== null) {
-            this.filters[category] = {
-              ...this.filters[category],
-              [key]: filters[key],
-            }
-          } else {
-            delete this.filters[category][key]
+      }
+
+      for (const key of Object.keys(filters)) {
+        if (filters[key] !== null) {
+          this.filters[category] = {
+            ...this.filters[category],
+            [key]: filters[key]
           }
+        } else {
+          delete this.filters[category][key]
         }
       }
     },
@@ -90,6 +95,27 @@ export const useFeedStore = defineStore('feed', {
     },
     appendItems(items: FeedItem[]) {
       this.items = this.items.concat(items)
+    },
+    async fetchByUrl(url: string, initial: boolean = true) {
+      if (initial) {
+        this.isLoading = true
+        this.items = []
+      }
+
+      const response = await fetch(url)
+        .then(response => response.json())
+
+      if (initial) {
+        this.items = response.results
+      } else {
+        this.items = this.items.concat(response.results)
+      }
+
+      if (initial) {
+        this.isLoading = false
+      }
+
+      return response
     }
   }
 })

frontend/src/utils/helpers.ts

@@ -1,6 +1,8 @@
+import type { FeedType, GenericFeedType, IdentifiableFeedType } from '@/utils/types.ts'
+
 export function debounce<F extends (...args: Parameters<F>) => unknown>(fn: F, delay: number) {
   let timeoutId: number
-  return function (this: unknown, ...args: Parameters<F>) {
+  return function(this: unknown, ...args: Parameters<F>) {
     clearTimeout(timeoutId)
     timeoutId = setTimeout(() => {
       fn.apply(this, args)
@@ -23,3 +25,43 @@ export function getCookie(name: string): string {
 
   return lastPart.split(';').shift() as string
 }
+
+type ParamsKey = keyof unknown;
+type ParamsValue = string | Array<string>
+
+export function buildUrlWithParams<K extends ParamsKey, V extends ParamsValue>(baseURL: string, params: Record<K, V> = {}): string {
+  const url = new URL(baseURL, window.location.origin)
+
+  for (const [key, value] of Object.entries<V>(params)) {
+    if (Array.isArray(value)) {
+      value.forEach((value) => {
+        url.searchParams.append(key, value)
+      })
+    } else {
+      url.searchParams.append(key, value)
+    }
+  }
+
+  return url.href
+}
+
+export function getFeedBaseUrl(type: GenericFeedType): string;
+export function getFeedBaseUrl(type: FeedType, id?: string): string;
+export function getFeedBaseUrl(type: FeedType, id?: string): string {
+  switch (type) {
+    // case 'subscription':
+    //   return `/api/v1/feed/?subscription_id=${id}`
+    // case 'collection':
+    //   return `/api/v1/feed/?collection_id=${id}`
+    case 'favorites':
+      return '/api/v1/feed/?type=favorite'
+    case 'articles':
+      return '/api/v1/feed/?type=article'
+    case 'podcasts':
+      return '/api/v1/feed/?type=podcast'
+    case 'videos':
+      return '/api/v1/feed/?type=video'
+    default:
+      return '/api/v1/feed/'
+  }
+}

frontend/src/utils/types.ts

@@ -0,0 +1,3 @@
+export type GenericFeedType = 'generic' | 'favorites' | 'articles' | 'videos' | 'podcasts'
+export type IdentifiableFeedType = 'subscription' | 'collection'
+export type FeedType = GenericFeedType | IdentifiableFeedType