kyber

1
import './App.css'
2
import { Route, Routes } from 'react-router'
3
import { DownloadPage } from './pages/download'
4
import { HostPage } from './pages/host'
5
import { AboutPage } from './pages/about'
6
import { ServersPage } from './pages/servers'
7
import { Nav } from './components/Nav'
8
import { SettingsPage } from './pages/settings'
9
import { Header } from './components/Header'
10
import './styles/common.scss'
11
import './styles/grid.scss'
12
import './styles/text.scss'
13
import { initializeTheme } from './contexts/ThemeContext'
14
import { useEffect, useLayoutEffect } from 'react'
15
import { useAppDispatch } from './app/hooks'
16
import { fetchProxiesAsync } from './features/Kyber/Servers/serversSlice'
17
import { KyberStatus } from './features/Status'
18
import { useTranslation } from 'react-i18next'
19

20
function App() {
21
  const dispatch = useAppDispatch()
22
  const { t } = useTranslation()
23

24
  const replaceHtmlCanonical = () => {
25
    const links = document.head.querySelectorAll('link[rel="canonical"]')
26
    if (links.length > 0 && (links[0] as HTMLElement)?.dataset?.rh !== 'true') {
27
      document.head.removeChild(links[0])
28
    }
29
  }
30

31
  useLayoutEffect(() => {
32
    initializeTheme()
33
    replaceHtmlCanonical()
34
  })
35

36
  useEffect(() => {
37
    dispatch(fetchProxiesAsync())
38
  })
39

40
  return (
41
    <div className="App">
42
      <header>
43
        <Header />
44
        <KyberStatus />
45
      </header>
46
      <Nav />
47
      <main>
48
        <Routes>
49
          <Route path='/' element={<ServersPage />} />
50
          <Route path='/download' element={<DownloadPage />} />
51
          <Route path='/host' element={<HostPage />} />
52
          <Route path='/about' element={<AboutPage />} />
53
          <Route path='/settings' element={<SettingsPage />} />
54
        </Routes>
55
      </main>
56
    </div>
57
  )
58
}
59

60
export default App
61