Merge branch 'refactoring' into development

# Conflicts:
#	client/src/pages/game.page.tsx

client/src/events.ts

@@ -23,9 +23,9 @@ export interface SfxData {
     pan?: number
 }
 
-export interface PlaySfxData extends SfxData {}
+export type PlaySfxData = SfxData
 
-export interface SfxEndedData extends SfxData {}
+export type SfxEndedData = SfxData
 
 export interface GuessedData {
     player: Player

client/src/hooks.ts

@@ -27,15 +27,15 @@ export const useRevalidateOnInterval = ({
             const intervalId = setInterval(revalidate, interval)
             return () => clearInterval(intervalId)
         },
-        [revalidate],
+        [enabled, interval, revalidate],
     )
 }
 
 export const useModalShown = (): boolean => {
-    let [shown, setShown] = useState(false)
+    const [shown, setShown] = useState(false)
 
     useEffect(() => {
-        let id = setInterval(() => {
+        const id = setInterval(() => {
             setShown(document.querySelector(".modal") !== null)
         }, 50)
 

client/src/layout.tsx

@@ -24,17 +24,17 @@ const updateUserAuth = async () => {
 }
 
 export default function Layout() {
-    let {
+    const {
         t,
         i18n: { language },
     } = useTranslation()
-    let [cookies] = useCookies(["user"])
-    let [user, setUser] = useState<User | null>(null)
-    let [loading, setLoading] = useState(true)
-    let [colorScheme] = useLocalStorage("colorScheme", "auto")
-    let [welcome, setWelcome] = useLocalStorage("welcome")
-    let prefersColorScheme = usePrefersColorScheme()
-    let [error, setError] = useState<string | undefined>(undefined)
+    const [cookies] = useCookies(["user"])
+    const [user, setUser] = useState<User | null>(null)
+    const [loading, setLoading] = useState(true)
+    const [colorScheme] = useLocalStorage("colorScheme", "auto")
+    const [welcome, setWelcome] = useLocalStorage("welcome")
+    const prefersColorScheme = usePrefersColorScheme()
+    const [error, setError] = useState<string | undefined>(undefined)
 
     useEffect(() => {
         let timer: ReturnType<typeof setTimeout> | null = null
@@ -43,7 +43,7 @@ export default function Layout() {
             if (timer !== null) clearTimeout(timer)
 
             try {
-                let user = User.parse({
+                const user = User.parse({
                     name: cookies.user.name,
                     id: cookies.user.id,
                     virtual: cookies.user.virtual,
@@ -73,7 +73,7 @@ export default function Layout() {
         return () => {
             if (timer !== null) clearTimeout(timer)
         }
-    }, [cookies])
+    }, [cookies, loading])
 
     useEffect(() => {
         document.documentElement.lang = language

client/src/main.tsx

@@ -9,42 +9,50 @@ import "./i18n"
 import "./index.css"
 import Layout from "./layout"
 import ErrorPage from "./pages/error-page"
-import { Game, loader as GameLoader } from "./pages/game"
-import { Lobby, loader as LobbyLoader } from "./pages/lobby"
-import { Login, action as LoginAction } from "./pages/login"
-import {
-    Registration,
-    action as RegistrationAction,
-} from "./pages/registration"
+import GameLoader from "./pages/game.loader"
+import Game from "./pages/game.page"
+import LobbyLoader from "./pages/lobby.loader"
+import Lobby from "./pages/lobby.page"
+import LoginAction from "./pages/login.action"
+import Login from "./pages/login.page"
+import RegistrationAction from "./pages/registration.action"
+import Registration from "./pages/registration.page"
 
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+    [
+        {
+            element: <Layout />,
+            children: [
+                {
+                    element: <Lobby />,
+                    path: "/",
+                    loader: LobbyLoader,
+                },
+                {
+                    element: <Registration />,
+                    path: "/register",
+                    action: RegistrationAction,
+                },
+                {
+                    element: <Login />,
+                    path: "/login",
+                    action: LoginAction,
+                },
+                {
+                    element: <Game />,
+                    path: "/game/:gameId",
+                    loader: GameLoader,
+                },
+            ],
+            errorElement: <ErrorPage />,
+        },
+    ],
     {
-        element: <Layout />,
-        children: [
-            {
-                element: <Lobby />,
-                path: "/",
-                loader: LobbyLoader,
-            },
-            {
-                element: <Registration />,
-                path: "/register",
-                action: RegistrationAction,
-            },
-            {
-                element: <Login />,
-                path: "/login",
-                action: LoginAction,
-            },
-            {
-                element: <Game />,
-                path: "/game/:gameId",
-                loader: GameLoader,
-            },
-        ],
-        errorElement: <ErrorPage />,
+        future: {
+            v7_relativeSplatPath: true,
+        },
     },
-])
+)
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
@@ -57,7 +65,10 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
                         "aria-hidden": true,
                     }}
                 >
-                    <RouterProvider router={router} />
+                    <RouterProvider
+                        future={{ v7_startTransition: true }}
+                        router={router}
+                    />
                 </ToastsProvider>
             </CookiesProvider>
         </HelmetProvider>

client/src/modals/error.tsx

@@ -8,7 +8,7 @@ export default function ErrorModal({
     error?: string
     onHide: () => void
 }) {
-    let { t } = useTranslation()
+    const { t } = useTranslation()
 
     return (
         <Modal show={error !== undefined} onHide={onHide}>

client/src/modals/settings.tsx

@@ -13,22 +13,22 @@ export default function SettingsModal({
     show: boolean
     onHide: () => void
 }) {
-    let {
+    const {
         t,
         i18n: { changeLanguage, language, services },
     } = useTranslation()
-    let [colorScheme, setColorScheme] = useLocalStorage("colorScheme", "auto")
-    let [musicVolume, setMusicVolume] = useLocalStorage("musicVolume", "1.0")
-    let [sfxVolume, setSfxVolume] = useLocalStorage("sfxVolume", "1.0")
+    const [colorScheme, setColorScheme] = useLocalStorage("colorScheme", "auto")
+    const [musicVolume, setMusicVolume] = useLocalStorage("musicVolume", "1.0")
+    const [sfxVolume, setSfxVolume] = useLocalStorage("sfxVolume", "1.0")
 
     useEffect(() => {
         if (!Object.keys(services.resourceStore.data).includes(language)) {
-            let lang = Object.keys(services.resourceStore.data).find(
+            const lang = Object.keys(services.resourceStore.data).find(
                 (langcode) => language.startsWith(langcode),
             )
             if (lang !== undefined) changeLanguage(lang)
         }
-    }, [language])
+    }, [changeLanguage, language, services])
 
     return (
         <Modal show={show} onHide={onHide}>
@@ -88,13 +88,13 @@ export default function SettingsModal({
                     >
                         {Object.keys(services.resourceStore.data).map(
                             (langcode) => {
-                                let nameGenerator = new Intl.DisplayNames(
+                                const nameGenerator = new Intl.DisplayNames(
                                     langcode,
                                     {
                                         type: "language",
                                     },
                                 )
-                                let displayName = nameGenerator.of(langcode)
+                                const displayName = nameGenerator.of(langcode)
                                 return (
                                     <ToggleButton
                                         className="me-2"

client/src/modals/shortcuts.tsx

@@ -9,7 +9,7 @@ export default function ShortcutsModal({
     show: boolean
     onHide: () => void
 }) {
-    let { t } = useTranslation()
+    const { t } = useTranslation()
 
     return (
         <Modal show={show} onHide={onHide}>

client/src/modals/welcome.tsx

@@ -16,14 +16,14 @@ export default function WelcomModale({
     show: boolean
     onHide: () => void
 }) {
-    let { t } = useTranslation()
-    let [packs, setPacks] = useState<Record<string, number>>({})
+    const { t } = useTranslation()
+    const [packs, setPacks] = useState<Record<string, number>>({})
 
     useEffect(() => {
         if (show) {
             ;(async () => {
-                let hs = new HitService()
-                let availablePacks = await hs.getAllPacks()
+                const hs = new HitService()
+                const availablePacks = await hs.getAllPacks()
                 setPacks(availablePacks)
             })()
             EventManager.publish(Events.popup)

client/src/navigation.tsx

@@ -12,11 +12,11 @@ import SettingsModal from "./modals/settings"
 import ShortcutsModal from "./modals/shortcuts"
 
 export default function Navigation({ user }: { user: User | null }) {
-    let navigate = useNavigate()
+    const navigate = useNavigate()
     const { t } = useTranslation()
-    let [showSettings, setShowSettings] = useState(false)
-    let [showShortcuts, setShowShortcuts] = useState(false)
-    let [_, setWelcome] = useLocalStorage("welcome")
+    const [showSettings, setShowSettings] = useState(false)
+    const [showShortcuts, setShowShortcuts] = useState(false)
+    const [, setWelcome] = useLocalStorage("welcome")
 
     return (
         <>
@@ -131,7 +131,7 @@ export default function Navigation({ user }: { user: User | null }) {
                                     <NavDropdown.Item as="div" className="me-2">
                                         <Nav.Link
                                             onClick={async () => {
-                                                let res = await fetch(
+                                                const res = await fetch(
                                                     "/api/users/logout",
                                                     {
                                                         method: "POST",

client/src/notification-player.tsx

@@ -1,5 +1,5 @@
 import EventManager from "@lomray/event-manager"
-import { ReactNode, useEffect, useRef, useState } from "react"
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react"
 import { useToasts } from "react-bootstrap-toasts"
 import { flushSync } from "react-dom"
 import { createRoot } from "react-dom/client"
@@ -24,11 +24,13 @@ interface SpeechEvent {
 const TIMER_DURATION: number = 150
 
 export default function NotificationPlayer({ user }: { user: User | null }) {
-    let { t } = useTranslation()
-    let [politeness, setPoliteness] = useState<"polite" | "assertive">("polite")
-    let output = useRef<HTMLParagraphElement | null>(null)
-    let events = useRef<SpeechEvent[]>([])
-    let timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const { t } = useTranslation()
+    const [politeness, setPoliteness] = useState<"polite" | "assertive">(
+        "polite",
+    )
+    const output = useRef<HTMLParagraphElement | null>(null)
+    const events = useRef<SpeechEvent[]>([])
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
     const toasts = useToasts()
 
     const nodeToString = (node: ReactNode) => {
@@ -38,7 +40,7 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
         return div.innerText // or innerHTML or textContent
     }
 
-    const handleSpeechEvent = () => {
+    const handleSpeechEvent = useCallback(() => {
         if (events.current.length === 0) {
             if (output.current) output.current.innerHTML = ""
             timer.current = null
@@ -48,7 +50,7 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
         if (output.current) output.current.innerHTML = events.current[0].text
         events.current.shift()
         timer.current = setTimeout(handleSpeechEvent, TIMER_DURATION)
-    }
+    }, [])
 
     useEffect(() => {
         const unsubscribeNotification = EventManager.subscribe(
@@ -346,7 +348,7 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
             unsubscribeSkippedHit()
             unsubscribeTokenReceived()
         }
-    }, [])
+    }, [handleSpeechEvent, t, toasts, user])
 
     return (
         <p

client/src/pages/game.loader.ts

@@ -0,0 +1,18 @@
+import type { LoaderFunction } from "react-router"
+import { json } from "react-router-dom"
+import { Game } from "../entities"
+import GameService from "../services/games.service"
+
+const loader: LoaderFunction = async ({ params }): Promise<Game> => {
+    const gs = new GameService()
+
+    if (params.gameId !== undefined) {
+        const game = await gs.get(params.gameId)
+
+        if (game !== undefined) return game
+        throw json({ message: "game id not found", status: 404 })
+    }
+    throw json({ message: "internal api error", status: 500 })
+}
+
+export default loader