feat: read server data from the preference dialog

Author: arianrhodsandlot

src/constants/preference.ts

@@ -9,10 +9,12 @@ export interface Preference {
     core: Partial<Record<CoreName, Record<string, string>>>
     platform: Record<PlatformName, { core: CoreName; shader?: string }>
   }
-  libraryCoverType: 'boxart'
-  platformInfoDisplayType: 0
-  platforms: PlatformName[]
-  theme: 'rose'
+  ui: {
+    libraryCoverType: 'boxart'
+    platformInfoDisplayType: 0
+    platforms: PlatformName[]
+    theme: 'rose'
+  }
 }
 
 export const defaultPreference: Preference = {
@@ -50,29 +52,31 @@ export const defaultPreference: Preference = {
       wonderswancolor: { core: 'mednafen_wswan' },
     },
   },
-  libraryCoverType: 'boxart',
-  platformInfoDisplayType: 0,
-  platforms: [
-    'arcade',
-    'atari2600',
-    'gb',
-    'gba',
-    'gbc',
-    'megadrive',
-    'nes',
-    'snes',
-    'vb',
-    'wonderswan',
-    'wonderswancolor',
-    'sms',
-    'ngp',
-    'ngpc',
-    'gamegear',
-    'atari5200',
-    'atari7800',
-    'atarilynx',
-    'sega32x',
-    'sg-1000',
-  ],
-  theme: 'rose',
+  ui: {
+    libraryCoverType: 'boxart',
+    platformInfoDisplayType: 0,
+    platforms: [
+      'arcade',
+      'atari2600',
+      'gb',
+      'gba',
+      'gbc',
+      'megadrive',
+      'nes',
+      'snes',
+      'vb',
+      'wonderswan',
+      'wonderswancolor',
+      'sms',
+      'ngp',
+      'ngpc',
+      'gamegear',
+      'atari5200',
+      'atari7800',
+      'atarilynx',
+      'sega32x',
+      'sg-1000',
+    ],
+    theme: 'rose',
+  },
 }

src/controllers/get-preference.ts

@@ -8,9 +8,12 @@ export async function getPreference() {
   const { currentUser, db } = getContextData()
 
   const where = eq(userPreferenceTable.user_id, currentUser.id)
-  const results = await db.library.select().from(userPreferenceTable).where(where)
+  const results = await db.library
+    .select({ emulator: userPreferenceTable.emulator, ui: userPreferenceTable.ui })
+    .from(userPreferenceTable)
+    .where(where)
   const preference = structuredClone(defaultPreference)
-  const userPreference = results[0].content
-  merge(preference, userPreference as any)
+  const userPreference = results[0]
+  merge(preference, (userPreference as any) || {})
   return preference
 }

src/middlewares/waku/globals.ts

@@ -1,8 +1,6 @@
-import { eq } from 'drizzle-orm'
-import { merge } from 'es-toolkit'
 import type { Middleware } from 'waku/config'
-import { defaultPreference } from '../../constants/preference.ts'
-import { userPreferenceTable } from '../../databases/library/schema.ts'
+import type { defaultPreference } from '../../constants/preference.ts'
+import { getPreference } from '../../controllers/get-preference.ts'
 import { createDrizzle } from '../../utils/drizzle.ts'
 import { createStorage } from '../../utils/storage.ts'
 import { createSupabase } from '../../utils/supabase.ts'
@@ -33,22 +31,18 @@ export default (function globalsMiddleware() {
     // const { data } = await ctx.data.supabase.auth.getUser()
     // const currentUser = data?.user
     const currentUser = { id: '567a53eb-c109-4142-8700-00f58db9853f' }
-    const customPreference = await db.library
-      .select()
-      .from(userPreferenceTable)
-      .where(eq(userPreferenceTable.user_id, currentUser.id))
-    const preference = merge(defaultPreference, customPreference)
 
     function redirect(location: string, status?: number) {
       ctx.res.status = status ?? 302
       ctx.res.headers ??= {}
       ctx.res.headers.location = location
     }
 
-    const contextData: ContextData = { currentUser, db, preference, redirect, storage, supabase }
+    const contextData: Omit<ContextData, 'preference'> = { currentUser, db, redirect, storage, supabase }
 
     Object.assign(ctx.data, contextData)
-
+    const preference = await getPreference()
+    Object.assign(ctx.data, { preference })
     await next()
   }
 } as Middleware)

src/pages/library/actions.ts

@@ -0,0 +1,5 @@
+'use server'
+
+export function handleChange(e) {
+  console.log(process)
+}

src/pages/library/components/emulating-settings.tsx

@@ -7,10 +7,9 @@ import { usePreference } from '../hooks/use-preference.ts'
 
 export function EmulatingSettings() {
   const preference = usePreference()
-  const [selectedPlatform, setSelectedPlatform] = useState(preference.platforms?.[0])
-  console.log(preference)
+  const [selectedPlatform, setSelectedPlatform] = useState(preference.ui.platforms?.[0])
 
-  if (!preference.platforms?.length) {
+  if (!preference.ui.platforms?.length) {
     return
   }
 
@@ -31,7 +30,7 @@ export function EmulatingSettings() {
           >
             <Select.Trigger variant='ghost' />
             <Select.Content>
-              {preference.platforms.map((platform) => (
+              {preference.ui.platforms.map((platform) => (
                 <Select.Item key={platformMap[platform].name} value={platformMap[platform].name}>
                   <div className='flex items-center gap-2'>
                     <img

src/pages/library/components/platform-checkbox.tsx

@@ -1,10 +1,14 @@
 import { CheckboxCards } from '@radix-ui/themes'
 import { platforms } from '@/constants/platform.ts'
 import { getPlatformIcon } from '@/utils/rom.ts'
+import { handleChange } from '../actions.ts'
+import { usePreference } from '../hooks/use-preference.ts'
 
 export function PlatformCheckbox() {
+  const { ui } = usePreference()
+
   return (
-    <CheckboxCards.Root columns='4' size='1'>
+    <CheckboxCards.Root columns='4' onValueChange={handleChange} size='1' value={ui?.platforms || []}>
       {platforms.map((platform) => (
         <CheckboxCards.Item key={platform.name} value={platform.name}>
           <div className='flex items-center gap-2'>

src/pages/library/components/sidebar-links.tsx

@@ -6,7 +6,7 @@ import { SidebarLink } from './sidebar-link.tsx'
 export function SidebarLinks() {
   const { preference } = getContextData()
 
-  const platformLinks = preference.platforms.map((platform) => ({
+  const platformLinks = preference.ui.platforms.map((platform) => ({
     href: `/library/platform/${encodeURIComponent(platform)}`,
     icon: getPlatformIcon(platform, ''),
     name: platform,