#428

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
 import { Fragment, useEffect, useMemo, useState } from 'react'
 import { createBrowserRouter,
@@ -14,7 +15,8 @@ import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
-import { isLocaleCode, legacyLocalePath, switchLocalePath } from '@/lib/locales'
+import { fetchLocales, isLocaleCode, legacyLocalePath, switchLocalePath } from '@/lib/locales'
+import { localesKeys } from '@/lib/queryKeys'
 import { useLocale } from '@/lib/useLocale'
 import { applyClientAnimationMode,
 	 applyClientAppearance,
@@ -65,6 +67,7 @@ import WikiSearchPage from '@/pages/wiki/WikiSearchPage'
 import type { Dispatch, FC, SetStateAction } from 'react'
 
 import type { ClientAnimationMode } from '@/lib/settings'
+import type { AvailableLocale } from '@/lib/locales'
 import type { User } from '@/types'
 
 
@@ -131,7 +134,7 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 }
 
 
-const RoutedApp: FC = () => {
+const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
   const behaviourSettings = useClientBehaviourSettings ()
@@ -246,7 +249,7 @@ const RoutedApp: FC = () => {
 		  layout={animationMode === 'off' ? false : 'position'}
 		  transition={{ layout: appLayoutTransition }}
 		  className="relative flex h-dvh w-full flex-col overflow-y-hidden">
-		<TopNav user={user}/>
+		<TopNav user={user} locales={locales}/>
 		<RouteTransitionWrapper
 		    animationMode={animationMode}
 		    user={user}
@@ -265,10 +268,32 @@ const RoutedApp: FC = () => {
 const LocaleRoute: FC = () => {
   const { locale } = useParams ()
   const location = useLocation ()
-  if (isLocaleCode (locale))
-    return <RoutedApp/>
+  const { data, isPending, isError, refetch } = useQuery ({
+      queryKey: localesKeys.index,
+      queryFn: fetchLocales,
+      staleTime: 0,
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: 'always',
+      refetchOnReconnect: 'always' })
+
+  useEffect (() => {
+    void refetch ()
+  }, [location.key, refetch])
 
   const redirect = legacyLocalePath (location)
+  if (!(isLocaleCode (locale)) && redirect == null)
+    return <NotFound/>
+  if (isError)
+    return <ServiceUnavailable/>
+  if (isPending)
+    return null
+  if (isLocaleCode (locale))
+  {
+    return data.locales.some (entry => entry.code === locale)
+        ? <RoutedApp locales={data.locales}/>
+        : <NotFound/>
+  }
+
   return redirect == null ? <NotFound/> : <Navigate to={redirect} replace/>
 }