feat: Env vars from query

src/config.ts

@@ -1,14 +1,56 @@
-const config = {
-  baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL ?? '',
+const envVars = {
+  apiBaseUrl: process.env.NEXT_PUBLIC_API_BASE_URL ?? '',
   eventAbbr: process.env.NEXT_PUBLIC_EVENT_ABBR ?? '',
-  transTimePage1: parseInt(process.env.NEXT_PUBLIC_TRANS_TIME_PAGE1 ?? '24'),
-  transTimePage2: parseInt(process.env.NEXT_PUBLIC_TRANS_TIME_PAGE2 ?? '24'),
-  transTimePage3: parseInt(process.env.NEXT_PUBLIC_TRANS_TIME_PAGE3 ?? '24'),
-  debug: !!process.env.NEXT_PUBLIC_DEBUG,
-  excludedTalks:
-    process.env.NEXT_PUBLIC_EXCLUDED_TALKS?.split(',').map((t) =>
-      parseInt(t)
-    ) || [],
-} as const
+  transTimePage1: process.env.NEXT_PUBLIC_TRANS_TIME_PAGE1 ?? '24',
+  transTimePage2: process.env.NEXT_PUBLIC_TRANS_TIME_PAGE2 ?? '24',
+  transTimePage3: process.env.NEXT_PUBLIC_TRANS_TIME_PAGE3 ?? '24',
+  debug: process.env.NEXT_PUBLIC_DEBUG ?? '',
+  excludedTalks: process.env.NEXT_PUBLIC_EXCLUDED_TALKS ?? '',
+}
+
+export type EnvVars = typeof envVars
+
+export type Config = {
+  apiBaseUrl: string
+  eventAbbr: string
+  transTimePage1: number
+  transTimePage2: number
+  transTimePage3: number
+  debug: boolean
+  excludedTalks: number[]
+}
+
+const config = makeConfig(envVars) as Config
+
+function makeConfig(vars: Partial<EnvVars>): Partial<Config> {
+  const conf: Partial<Config> = {}
+  if (vars.apiBaseUrl) {
+    conf.apiBaseUrl = vars.apiBaseUrl
+  }
+  if (vars.eventAbbr) {
+    conf.eventAbbr = vars.eventAbbr
+  }
+  if (vars.transTimePage1) {
+    conf.transTimePage1 = parseFloat(vars.transTimePage1)
+  }
+  if (vars.transTimePage2) {
+    conf.transTimePage2 = parseFloat(vars.transTimePage2)
+  }
+  if (vars.transTimePage3) {
+    conf.transTimePage3 = parseFloat(vars.transTimePage3)
+  }
+  if (vars.debug) {
+    conf.debug = !!vars.debug
+  }
+  if (vars.excludedTalks) {
+    conf.excludedTalks =
+      vars.excludedTalks.split(',').map((t) => parseInt(t)) || []
+  }
+  return conf
+}
+
+export function extendConfig(query: Record<string, string>) {
+  Object.assign(config, makeConfig(query))
+}
 
 export default config

src/pages/break/menu/[confDay].tsx

@@ -1,15 +1,19 @@
 import { useGetTalksAndTracksForMenu } from '@/components/hooks/useGetTalksAndTracks'
 import { MenuView } from '@/components/models/talkView'
-import config from '@/config'
+import config, { extendConfig } from '@/config'
 import { Talk } from '@/generated/dreamkast-api.generated'
 import { getTimeStr } from '@/utils/time'
 import { Optional } from '@/utils/types'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 export default function Index() {
   const router = useRouter()
   const { confDay } = router.query
+  useEffect(() => {
+    extendConfig(router.query as Record<string, string>)
+  }, [router.query])
   const { eventAbbr } = config
 
   const { isLoading, view } = useGetTalksAndTracksForMenu(
@@ -67,13 +71,18 @@ function TalkMenu({ view }: { view: Optional<MenuView> }) {
 }
 
 function TalkMenuItem({ talk }: { talk: Optional<Talk> }) {
+  const { query } = useRouter()
+  delete query.confDay
   if (!talk) {
     return <div />
   }
   return (
     <Link
       className="col-span-1 hover:underline"
-      href={`/break/talks/${talk.id}`}
+      href={{
+        pathname: `/break/talks/${talk.id}`,
+        query,
+      }}
     >
       <div>{talk.id}</div>
       <div>{talk.title}</div>

src/pages/break/talks/[talkId].tsx

@@ -5,13 +5,16 @@ import Page3 from '@/components/Page3'
 import Page4 from '@/components/Page4'
 import { useGetTalksAndTracks } from '@/components/hooks/useGetTalksAndTracks'
 import { PageCtx, PageCtxProvider } from '@/components/models/pageContext'
-import config from '@/config'
+import config, { extendConfig } from '@/config'
 import { useRouter } from 'next/router'
 import { useContext, useEffect } from 'react'
 
 function Pages() {
   const router = useRouter()
   const { talkId } = router.query
+  useEffect(() => {
+    extendConfig(router.query as Record<string, string>)
+  }, [router.query])
 
   const { current, setTotalPage, goNextPage } = useContext(PageCtx)
   const { isLoading, view } = useGetTalksAndTracks(talkId as string | null)

src/store/baseApi.ts

@@ -2,6 +2,6 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 import config from '@/config'
 
 export const baseApi = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: config.baseUrl }),
+  baseQuery: fetchBaseQuery({ baseUrl: config.apiBaseUrl }),
   endpoints: () => ({}),
 })