feat: update rom route path

Author: arianrhodsandlot

src/controllers/get-rom.ts

@@ -1,6 +1,18 @@
+import { and, eq } from 'drizzle-orm'
+import { getContextData } from 'waku/middleware/context'
+import { rom } from '@/databases/library/schema.ts'
 import { getRoms } from './get-roms.ts'
 
-export async function getRom(id: string) {
-  const roms = await getRoms({ id })
-  return roms.at(0)
+export async function getRom({ fileName, platform }: { fileName: string; platform: string }) {
+  const { currentUser, db } = getContextData()
+  const [result] = await db.library
+    .select()
+    .from(rom)
+    .orderBy(rom.file_name)
+    .where(and(eq(rom.file_name, fileName), eq(rom.platform, platform), eq(rom.user_id, currentUser.id)))
+
+  if (result) {
+    const [r] = await getRoms({ id: result.id })
+    return r
+  }
 }

src/entries.ts

@@ -4,7 +4,7 @@ import type { PathsForPages } from 'waku/router'
 import { api } from '@/api/index.ts'
 import { LibraryPage } from '@/pages/library/page.tsx'
 import { PlatformPage } from '@/pages/library/platform/page.tsx'
-import { RomPage } from '@/pages/library/rom/page.tsx'
+import { RomPage } from '@/pages/library/platform/rom/page.tsx'
 import { LoginPage } from '@/pages/login/page.tsx'
 import { HomePage } from '@/pages/page.tsx'
 import { Root } from '@/pages/root.tsx'
@@ -17,7 +17,7 @@ const pages: ReturnType<typeof createPages> = createPages(({ createApi, createPa
     createPage({ component: LoginPage, path: '/login', render: 'dynamic' }),
     createPage({ component: LibraryPage, path: '/library', render: 'dynamic' }),
     createPage({ component: PlatformPage, path: '/library/platform/[platform]', render: 'dynamic' }),
-    createPage({ component: RomPage, path: '/library/rom/[id]', render: 'dynamic' }),
+    createPage({ component: RomPage, path: '/library/platform/[platform]/rom/[fileName]', render: 'dynamic' }),
 
     createApi({
       handlers: { DELETE: apiHandler, GET: apiHandler, PATCH: apiHandler, POST: apiHandler, PUT: apiHandler },

src/pages/library/components/game-entry.tsx

@@ -13,7 +13,7 @@ export function GameEntry({ rom, width }) {
       <Link
         className='block'
         style={{ width: width || 'auto' }}
-        to={`/library/rom/${rom.id}`}
+        to={`/library/platform/${encodeURIComponent(rom.platform)}/rom/${encodeURIComponent(rom.file_name)}`}
         unstable_pending={
           <div className='z-1 absolute inset-0'>
             <div className='grid h-4/5 w-full place-items-center'>

src/pages/library/rom/atoms.ts src/pages/library/platform/rom/atoms.ts

@@ -1,6 +1,6 @@
 'use client'
-import { MainBackground } from '../../components/main-background.tsx'
-import { useRomCover } from '../../hooks/use-rom-cover.ts'
+import { MainBackground } from '../../../components/main-background.tsx'
+import { useRomCover } from '../../../hooks/use-rom-cover.ts'
 
 export function GameBackground({ rom }) {
   const { data: cover, isLoading } = useRomCover(rom)

src/pages/library/rom/components/game-background.tsx src/pages/library/platform/rom/components/game-background.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useRomCover } from '../../hooks/use-rom-cover.ts'
+import { useRomCover } from '../../../hooks/use-rom-cover.ts'
 
 export function GameCover({ rom }) {
   const { data: cover, isLoading } = useRomCover(rom)

src/pages/library/rom/components/game-cover.tsx src/pages/library/platform/rom/components/game-cover.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { AnimatePresence, motion } from 'motion/react'
 import { type ReactNode, type UIEventHandler, useState } from 'react'
-import AppLayout from '../../components/app-layout.tsx'
+import AppLayout from '../../../components/app-layout.tsx'
 import { useEmulator } from '../hooks/use-emulator.ts'
 
 interface RomAppLayoutProps {

src/pages/library/rom/components/game-info.tsx src/pages/library/platform/rom/components/game-info.tsx

@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai'
 import { Nostalgist } from 'nostalgist'
 import useSWRImmutable from 'swr/immutable'
-import { usePreference } from '../../hooks/use-preference.ts'
+import { usePreference } from '../../../hooks/use-preference.ts'
 import { emulatorLaunchedAtom } from '../atoms.ts'
 import { useRom } from './use-rom.ts'
 

src/pages/library/rom/components/game-medias.tsx src/pages/library/platform/rom/components/game-medias.tsx

@@ -1,4 +1,4 @@
-import { useServerData } from '../../hooks/use-server-data.ts'
+import { useServerData } from '../../../hooks/use-server-data.ts'
 
 export function useRom() {
   const { rom } = useServerData()

src/pages/library/rom/components/game-overlay/game-overlay-button.tsx src/pages/library/platform/rom/components/game-overlay/game-overlay-button.tsx

@@ -1,8 +1,8 @@
 import { getRom } from '@/controllers/get-rom.ts'
 import { Portal, Theme } from '@/pages/components/radix-themes.ts'
 import { getRomTitle } from '@/utils/rom.ts'
-import AppLayout from '../components/app-layout.tsx'
-import { SidebarLinks } from '../components/sidebar-links.tsx'
+import AppLayout from '../../components/app-layout.tsx'
+import { SidebarLinks } from '../../components/sidebar-links.tsx'
 import { GameBackground } from './components/game-background.tsx'
 import { GameCover } from './components/game-cover.tsx'
 import { GameInfo } from './components/game-info.tsx'
@@ -11,8 +11,8 @@ import { GameOverlay } from './components/game-overlay/game-overlay.tsx'
 import { LaunchButton } from './components/launch-button.tsx'
 import { MainScrollArea } from './components/main-scroll-area.tsx'
 
-export async function RomPage({ id }) {
-  const rom = await getRom(id)
+export async function RomPage({ fileName, platform }) {
+  const rom = await getRom({ fileName: decodeURIComponent(fileName), platform: decodeURIComponent(platform) })
   if (!rom) {
     return '404'
   }

src/pages/library/rom/components/game-overlay/game-overlay-buttons.tsx src/pages/library/platform/rom/components/game-overlay/game-overlay-buttons.tsx

@@ -48,7 +48,7 @@ export function getPlatformGameIcon(platform: string, type = 'game') {
 }
 
 export function getRomTitle(rom) {
-  return rom.launchboxGame?.name || rom.libretroGame?.name || path.parse(rom.file_name).name
+  return path.parse(rom.file_name).name
 }
 
 export function getCompactName(name: string) {