59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { useState, useCallback } from 'react'
|
|
import { ThemeProvider } from './contexts/ThemeContext'
|
|
import ThemeSwitcher from './components/ThemeSwitcher'
|
|
import IpInput from './components/IpInput'
|
|
import LatencyMap from './components/LatencyMap'
|
|
import ResultsPanel from './components/ResultsPanel'
|
|
import { testAllNodes } from './api/latency'
|
|
import { LatencyResult } from '@shared/types'
|
|
import './styles/index.css'
|
|
|
|
function AppContent() {
|
|
const [results, setResults] = useState<Map<string, LatencyResult>>(new Map())
|
|
const [testing, setTesting] = useState(false)
|
|
|
|
const handleTest = useCallback(async (ip: string) => {
|
|
setTesting(true)
|
|
setResults(new Map())
|
|
|
|
await testAllNodes(ip, (result) => {
|
|
setResults((prev) => new Map(prev).set(result.nodeId, result))
|
|
})
|
|
|
|
setTesting(false)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="app">
|
|
<header className="app-header">
|
|
<h1 className="app-title">
|
|
<span className="title-icon">🌐</span>
|
|
Latency Test
|
|
</h1>
|
|
<ThemeSwitcher />
|
|
</header>
|
|
|
|
<main className="app-main">
|
|
<p className="app-description">
|
|
Test network latency from global locations to any IP address
|
|
</p>
|
|
<IpInput onTest={handleTest} testing={testing} />
|
|
<LatencyMap results={results} />
|
|
<ResultsPanel results={results} />
|
|
</main>
|
|
|
|
<footer className="app-footer">
|
|
<p>Latency thresholds: <span className="excellent">●</span> <50ms <span className="good">●</span> 50-150ms <span className="poor">●</span> >150ms</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<ThemeProvider>
|
|
<AppContent />
|
|
</ThemeProvider>
|
|
)
|
|
}
|