btrc-hub/frontend/src/App.tsx

import axios from 'axios'
import toCamel from 'camelcase-keys'
import { AnimatePresence, LayoutGroup } from 'framer-motion'
import { useEffect, useState } from 'react'
import { BrowserRouter,
	 Navigate,
	 Route,
	 Routes,
	 useLocation } from 'react-router-dom'

import TopNav from '@/components/TopNav'
import { Toaster } from '@/components/ui/toaster'
import { API_BASE_URL } from '@/config'
import NicoTagListPage from '@/pages/tags/NicoTagListPage'
import NotFound from '@/pages/NotFound'
import PostDetailPage from '@/pages/posts/PostDetailPage'
import PostHistoryPage from '@/pages/posts/PostHistoryPage'
import PostListPage from '@/pages/posts/PostListPage'
import PostNewPage from '@/pages/posts/PostNewPage'
import ServiceUnavailable from '@/pages/ServiceUnavailable'
import SettingPage from '@/pages/users/SettingPage'
import WikiDetailPage from '@/pages/wiki/WikiDetailPage'
import WikiDiffPage from '@/pages/wiki/WikiDiffPage'
import WikiEditPage from '@/pages/wiki/WikiEditPage'
import WikiHistoryPage from '@/pages/wiki/WikiHistoryPage'
import WikiNewPage from '@/pages/wiki/WikiNewPage'
import WikiSearchPage from '@/pages/wiki/WikiSearchPage'

import type { Dispatch, FC, SetStateAction } from 'react'

import type { User } from '@/types'


const RouteTransitionWrapper = ({ user, setUser }: {
    user:     User | null
    setUser:  Dispatch<SetStateAction<User | null>> }) => {
  const location = useLocation ()

  return (
      <LayoutGroup id="gallery-shared">
	<AnimatePresence mode="wait">
	  <Routes location={location} key={location.pathname}>
	    <Route path="/" element={<Navigate to="/posts" replace/>}/>
	    <Route path="/posts" element={<PostListPage/>}/>
	    <Route path="/posts/new" element={<PostNewPage user={user}/>}/>
	    <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
	    <Route path="/posts/changes" element={<PostHistoryPage/>}/>
	    <Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
	    <Route path="/wiki" element={<WikiSearchPage/>}/>
	    <Route path="/wiki/:title" element={<WikiDetailPage/>}/>
	    <Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
	    <Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
	    <Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
	    <Route path="*" element={<NotFound/>}/>
	  </Routes>
	</AnimatePresence>
      </LayoutGroup>)
}


export default (() => {
  const [user, setUser] = useState<User | null> (null)
  const [status, setStatus] = useState (200)

  useEffect (() => {
    const createUser = async () => {
      const res = await axios.post (`${ API_BASE_URL }/users`)
      const data = res.data as { code: string; user: any }
      if (data.code)
	{
	  localStorage.setItem ('user_code', data.code)
	  setUser (toCamel (data.user, { deep: true }) as User)
	}
    }

    const code = localStorage.getItem ('user_code')
    if (code)
      {
	void (async () => {
	  try
	  {
	    const res = await axios.post (`${ API_BASE_URL }/users/verify`, { code })
	    const data = res.data as { valid: boolean, user: any }
	    if (data.valid)
	      setUser (toCamel (data.user, { deep: true }))
	    else
	      await createUser ()
	  }
	  catch (err)
	  {
	    if (axios.isAxiosError (err))
	      setStatus (err.status ?? 200)
	  }
	}) ()
      }
    else
      createUser ()
  }, [])

  switch (status)
  {
  case 503:
    return <ServiceUnavailable/>
  }

  return (
      <BrowserRouter>
	<div className="flex flex-col h-screen w-screen">
	  <TopNav user={user}/>
	  <RouteTransitionWrapper user={user} setUser={setUser}/>
	</div>
	<Toaster/>
      </BrowserRouter>)
}) satisfies FC