84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { apiBaseUrl, apiFetch } from './api/client'
|
|
import './App.css'
|
|
|
|
type InfoResponse = {
|
|
name: string
|
|
version: string
|
|
environment: string
|
|
timestamp: string
|
|
}
|
|
|
|
function App() {
|
|
const [info, setInfo] = useState<InfoResponse | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
apiFetch<InfoResponse>('/v1/info')
|
|
.then(setInfo)
|
|
.catch((err: unknown) =>
|
|
setError(err instanceof Error ? err.message : 'Unknown error'),
|
|
)
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
return (
|
|
<div className="app">
|
|
<header className="app__header">
|
|
<h1>React + .NET Starter</h1>
|
|
<p>A minimal monorepo skeleton for new projects.</p>
|
|
</header>
|
|
|
|
<section className="app__section">
|
|
<h2>Frontend</h2>
|
|
<p>
|
|
Vite + React + TypeScript running on port 3000. Extend{' '}
|
|
<code>src/App.tsx</code> to begin building your application.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="app__section app__section--api">
|
|
<h2>Backend API</h2>
|
|
<p>
|
|
Requests go to <code>{apiBaseUrl}</code> via{' '}
|
|
<code>VITE_API_BASE_URL</code>.
|
|
</p>
|
|
|
|
{loading && <p className="app__status app__status--loading">Checking API…</p>}
|
|
{error && (
|
|
<p className="app__status app__status--error">
|
|
Unable to reach API: {error}
|
|
</p>
|
|
)}
|
|
{info && (
|
|
<dl className="app__info">
|
|
<div>
|
|
<dt>Status</dt>
|
|
<dd className="app__status app__status--ok">Connected</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Name</dt>
|
|
<dd>{info.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Version</dt>
|
|
<dd>{info.version}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Environment</dt>
|
|
<dd>{info.environment}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Server time (UTC)</dt>
|
|
<dd>{new Date(info.timestamp).toISOString()}</dd>
|
|
</div>
|
|
</dl>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|