feat(wip): Implement show listing, detail pages, and user subscription management for shows.

Author: guidefari

apps/vps/src/routes/shows/show.handlers.ts

@@ -10,7 +10,6 @@ import type {
   GetAllShowsRoute,
   GetShowBySlugRoute,
   GetShowEpisodesRoute,
-  GetUserSubscriptionsRoute,
   SubscribeToShowRoute,
   UnsubscribeFromShowRoute,
   UpdateShowBySlugRoute
@@ -288,30 +287,3 @@ export const unsubscribeFromShow: AppRouteHandler<
 
   return c.body(null, HttpStatusCodes.NO_CONTENT)
 }
-
-export const getUserSubscriptions: AppRouteHandler<
-  GetUserSubscriptionsRoute
-> = async (c) => {
-  const { limit, offset } = c.req.valid('query')
-  const user = c.get('user')
-
-  const program = Effect.gen(function* () {
-    const showService = yield* ShowService
-    return yield* showService.getUserSubscriptions(user.id, { limit, offset })
-  }).pipe(
-    Effect.catchTag('DatabaseError', (e) =>
-      Effect.succeed({
-        error: e.message,
-        status: HttpStatusCodes.INTERNAL_SERVER_ERROR
-      } as const)
-    )
-  )
-
-  const result = await AppRuntime.runPromise(program)
-
-  if ('error' in result) {
-    return c.json({ error: result.error }, result.status)
-  }
-
-  return c.json(result, HttpStatusCodes.OK)
-}

apps/vps/src/routes/shows/show.index.ts

@@ -12,6 +12,5 @@ const router = createRouter()
   .openapi(routes.getShowEpisodes, handlers.getShowEpisodes)
   .openapi(routes.subscribeToShow, handlers.subscribeToShow)
   .openapi(routes.unsubscribeFromShow, handlers.unsubscribeFromShow)
-  .openapi(routes.getUserSubscriptions, handlers.getUserSubscriptions)
 
 export default router

apps/vps/src/routes/shows/show.routes.ts

@@ -8,7 +8,6 @@ import {
   selectMdxCompiledShowSchema,
   selectShowSchema,
   selectSubscriptionSchema,
-  subscriptionWithShowSchema,
   updateShowSchema
 } from '@/db/show.schema'
 import {
@@ -33,7 +32,7 @@ const showWithHostsSchema = selectShowSchema
   .openapi('ShowWithHosts')
 
 export const getAllShows = createRoute({
-  path: '/shows',
+  path: '/',
   method: 'get',
   request: {
     query: paginationQuerySchema
@@ -52,7 +51,7 @@ export const getAllShows = createRoute({
 })
 
 export const getShowBySlug = createRoute({
-  path: '/shows/{slug}',
+  path: '/{slug}',
   method: 'get',
   request: {
     params: z.object({
@@ -77,7 +76,7 @@ export const getShowBySlug = createRoute({
 })
 
 export const createShow = createRoute({
-  path: '/shows',
+  path: '/',
   method: 'post',
   middleware: [betterAuthMiddleware],
   request: {
@@ -109,7 +108,7 @@ export const createShow = createRoute({
 })
 
 export const updateShowBySlug = createRoute({
-  path: '/shows/{slug}',
+  path: '/{slug}',
   method: 'patch',
   middleware: [betterAuthMiddleware],
   request: {
@@ -140,7 +139,7 @@ export const updateShowBySlug = createRoute({
 })
 
 export const deleteShowBySlug = createRoute({
-  path: '/shows/{slug}',
+  path: '/{slug}',
   method: 'delete',
   middleware: [betterAuthMiddleware],
   request: {
@@ -169,7 +168,7 @@ export const deleteShowBySlug = createRoute({
 })
 
 export const getShowEpisodes = createRoute({
-  path: '/shows/{slug}/episodes',
+  path: '/{slug}/episodes',
   method: 'get',
   request: {
     params: z.object({
@@ -195,7 +194,7 @@ export const getShowEpisodes = createRoute({
 })
 
 export const subscribeToShow = createRoute({
-  path: '/shows/{id}/subscribe',
+  path: '/{id}/subscribe',
   method: 'post',
   middleware: [betterAuthMiddleware],
   request: {
@@ -225,7 +224,7 @@ export const subscribeToShow = createRoute({
 })
 
 export const unsubscribeFromShow = createRoute({
-  path: '/shows/{id}/unsubscribe',
+  path: '/{id}/unsubscribe',
   method: 'delete',
   middleware: [betterAuthMiddleware],
   request: {
@@ -253,30 +252,6 @@ export const unsubscribeFromShow = createRoute({
   }
 })
 
-export const getUserSubscriptions = createRoute({
-  path: '/user/subscriptions',
-  method: 'get',
-  middleware: [betterAuthMiddleware],
-  request: {
-    query: paginationQuerySchema
-  },
-  tags,
-  responses: {
-    [HttpStatusCodes.OK]: jsonContent(
-      createPaginatedResponseSchema(subscriptionWithShowSchema),
-      'User subscriptions'
-    ),
-    [HttpStatusCodes.UNAUTHORIZED]: jsonContent(
-      z.object({ error: z.string() }),
-      'Unauthorized'
-    ),
-    [HttpStatusCodes.INTERNAL_SERVER_ERROR]: jsonContent(
-      z.object({ error: z.string() }),
-      'Failed to fetch subscriptions'
-    )
-  }
-})
-
 export type GetAllShowsRoute = typeof getAllShows
 export type GetShowBySlugRoute = typeof getShowBySlug
 export type CreateShowRoute = typeof createShow
@@ -285,4 +260,3 @@ export type DeleteShowBySlugRoute = typeof deleteShowBySlug
 export type GetShowEpisodesRoute = typeof getShowEpisodes
 export type SubscribeToShowRoute = typeof subscribeToShow
 export type UnsubscribeFromShowRoute = typeof unsubscribeFromShow
-export type GetUserSubscriptionsRoute = typeof getUserSubscriptions

apps/vps/src/routes/user/user.handlers.ts

@@ -1,12 +1,15 @@
 import { Effect } from 'effect'
 import * as HttpStatusCodes from 'stoker/http-status-codes'
 import type { AppRouteHandler } from '@/lib/types'
+import { AppRuntime } from '@/runtime'
 import { runApp } from '@/runtime'
+import { ShowService } from '@/services/show.service'
 import { UserService } from '@/services/user.service'
 
 import type {
   GetEmailPreferencesRoute,
   GetProfileRoute,
+  GetUserSubscriptionsRoute,
   UpdateEmailPreferencesRoute,
   UpdateProfileRoute
 } from './user.routes'
@@ -163,3 +166,30 @@ export const updateEmailPreferences: AppRouteHandler<
 
   return c.json(result.right, HttpStatusCodes.OK)
 }
+
+export const getUserSubscriptions: AppRouteHandler<
+  GetUserSubscriptionsRoute
+> = async (c) => {
+  const { limit, offset } = c.req.valid('query')
+  const user = c.get('user')
+
+  const program = Effect.gen(function* () {
+    const showService = yield* ShowService
+    return yield* showService.getUserSubscriptions(user.id, { limit, offset })
+  }).pipe(
+    Effect.catchTag('DatabaseError', (e) =>
+      Effect.succeed({
+        error: e.message,
+        status: HttpStatusCodes.INTERNAL_SERVER_ERROR
+      } as const)
+    )
+  )
+
+  const result = await AppRuntime.runPromise(program)
+
+  if ('error' in result) {
+    return c.json({ error: result.error }, result.status)
+  }
+
+  return c.json(result, HttpStatusCodes.OK)
+}

apps/vps/src/routes/user/user.index.ts

@@ -8,5 +8,6 @@ const router = createRouter()
   .openapi(routes.getProfile, handlers.getProfile)
   .openapi(routes.getEmailPreferences, handlers.getEmailPreferences)
   .openapi(routes.updateEmailPreferences, handlers.updateEmailPreferences)
+  .openapi(routes.getUserSubscriptions, handlers.getUserSubscriptions)
 
 export default router

apps/vps/src/routes/user/user.routes.ts

@@ -5,6 +5,11 @@ import {
   selectAuthorEmailPreferencesSchema,
   updateAuthorEmailPreferencesSchema
 } from '@/db/email.schema'
+import { subscriptionWithShowSchema } from '@/db/show.schema'
+import {
+  createPaginatedResponseSchema,
+  paginationQuerySchema
+} from '@/lib/pagination'
 
 // Better Auth compatible schemas
 const selectUserSchema = z.object({
@@ -178,7 +183,32 @@ export const updateEmailPreferences = createRoute({
   }
 })
 
+export const getUserSubscriptions = createRoute({
+  path: '/subscriptions',
+  method: 'get',
+  middleware: [betterAuthMiddleware],
+  request: {
+    query: paginationQuerySchema
+  },
+  tags,
+  responses: {
+    [HttpStatusCodes.OK]: jsonContent(
+      createPaginatedResponseSchema(subscriptionWithShowSchema),
+      'User subscriptions'
+    ),
+    [HttpStatusCodes.UNAUTHORIZED]: jsonContent(
+      z.object({ error: z.string() }),
+      'Unauthorized'
+    ),
+    [HttpStatusCodes.INTERNAL_SERVER_ERROR]: jsonContent(
+      z.object({ error: z.string() }),
+      'Failed to fetch subscriptions'
+    )
+  }
+})
+
 export type UpdateProfileRoute = typeof updateProfile
 export type GetProfileRoute = typeof getProfile
 export type GetEmailPreferencesRoute = typeof getEmailPreferences
 export type UpdateEmailPreferencesRoute = typeof updateEmailPreferences
+export type GetUserSubscriptionsRoute = typeof getUserSubscriptions

apps/www/src/components/shows/EpisodeGrid.tsx

@@ -0,0 +1,127 @@
+import { Link } from '@tanstack/react-router'
+import { GiPauseButton, GiPlayButton } from 'react-icons/gi'
+import { LoadMoreTrigger } from '@/components/LoadMoreTrigger'
+import { DEFAULT_IMAGE_URL } from '@/lib/constants'
+import { useShowEpisodes } from '@/lib/http'
+import { cn } from '@/lib/utils'
+import { useAudioPlayerActions, useAudioPlayerState } from '@/store/audioPlayer'
+
+interface EpisodeGridProps {
+  showSlug: string
+}
+
+export function EpisodeGrid({ showSlug }: EpisodeGridProps) {
+  const {
+    data: episodes,
+    isPending,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useShowEpisodes(showSlug)
+
+  const { isPlaying, nowPlayingContext } = useAudioPlayerState()
+  const { loadTrack } = useAudioPlayerActions()
+
+  if (isPending) {
+    return (
+      <div className='grid gap-2'>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className='flex gap-3 items-start p-2'>
+            <div className='w-14 h-14 rounded-sm bg-muted/50 animate-pulse flex-shrink-0' />
+            <div className='flex-1 space-y-2'>
+              <div className='h-4 w-3/4 rounded bg-muted/50 animate-pulse' />
+              <div className='h-3 w-1/2 rounded bg-muted/50 animate-pulse' />
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className='text-center text-destructive py-8'>
+        Error loading episodes: {error.message}
+      </div>
+    )
+  }
+
+  if (!episodes || episodes.length === 0) {
+    return (
+      <div className='text-center text-muted-foreground py-8'>
+        No episodes yet
+      </div>
+    )
+  }
+
+  return (
+    <div className='space-y-4'>
+      <h2 className='text-xl font-bold'>Episodes</h2>
+      <div className='grid gap-2'>
+        {episodes.map((episode) => {
+          const isActive = nowPlayingContext?.title === episode.title
+
+          return (
+            <article
+              key={episode.id}
+              className={cn(
+                'flex gap-3 items-start p-2 transition-all duration-300 hover:bg-muted/50 rounded-sm group',
+                isActive && 'ring-1 ring-border bg-accent/5 shadow-sm'
+              )}>
+              <button
+                type='button'
+                className='relative flex-shrink-0 focus:outline-none'
+                onClick={() =>
+                  loadTrack(
+                    episode.url,
+                    episode.thumbnailUrl || DEFAULT_IMAGE_URL,
+                    episode.title,
+                    episode.id
+                  )
+                }>
+                <img
+                  src={episode.thumbnailUrl || DEFAULT_IMAGE_URL}
+                  alt={episode.title}
+                  className='object-cover transition-transform duration-300 border rounded-sm w-14 h-14 border-border bg-background group-hover:scale-105'
+                />
+                <span
+                  className={cn(
+                    'absolute inset-0 flex items-center justify-center transition-all duration-300 rounded-sm bg-black/50',
+                    isActive
+                      ? 'opacity-100'
+                      : 'opacity-0 group-hover:opacity-100 group-focus:opacity-100'
+                  )}>
+                  {isActive && isPlaying ? (
+                    <GiPauseButton className='text-2xl text-white drop-shadow' />
+                  ) : (
+                    <GiPlayButton className='text-2xl text-white drop-shadow' />
+                  )}
+                </span>
+              </button>
+              <div className='flex-1 min-w-0'>
+                <Link
+                  to='/mixes/$mixId'
+                  params={{ mixId: episode.slug }}
+                  className='block font-bold leading-none truncate text-foreground hover:underline decoration-foreground/30 underline-offset-4'>
+                  {episode.title}
+                </Link>
+                {episode.description && (
+                  <div className='mt-1 text-sm leading-relaxed text-foreground/60 line-clamp-2'>
+                    {episode.description}
+                  </div>
+                )}
+              </div>
+            </article>
+          )
+        })}
+
+        <LoadMoreTrigger
+          onLoadMore={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+        />
+      </div>
+    </div>
+  )
+}