nws/nws-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add routing

Browse source
This commit is contained in:
Nicholas Orlowsky 2022-10-23 12:08:48 -05:00
parent 8456552f5a
commit b9e96ebf9c
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
7 changed files with 276 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/App.tsx
View file

@ -1,97 +1,15 @@
import React, {useEffect, useState} from 'react';
import NWSLogo from './static/images/NWS_Logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Incident, UptimeResponse} from "./nws-api/types";
import {getIncidents, getUptime} from "./nws-api/calls";
import ReactTooltip from 'react-tooltip';
import UptimeCard from "./components/UptimeCard";
import IncidentCard from "./components/IncidentCard";
import StatusPage from "./components/StatusPage";
import Footer from "./components/Footer";
import { BrowserRouter, Route, Outlet, Link } from "react-router-dom";
function App() {
const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
const [incidents, setIncidents] = useState<Incident[]>([]);
const fetchUptime = async () => {
let resp: UptimeResponse = await getUptime();
setUptime(resp);
}
const fetchIncidents = async () => {
let resp: Incident[] = await getIncidents();
setIncidents(resp);
}
useEffect(() => {
fetchUptime();
fetchIncidents();
}, []);
// @ts-ignore
return (
<div className="App">
<div className={"w-100 row"}>
<div className={"col-md-6 d-flex justify-content-center flex-column align-items-center"}>
<img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
</div>
<div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
<h1>Nick Web Services</h1>
<p style={{ maxWidth: 500 }} className={"col-md-6 text-center"}>
Nick Web Services is a hosting service based out of
Austin, Texas. It is committed
to achieving maximum uptime with better performance and a lower cost than any of the major cloud
services.
</p>
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div className={"text-left row"} style={{width: '75vw'}}>
<h2>NWS System Status</h2>
<p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
<div className={"col-md-6 col-12"}>
<h3>Service Status</h3>
{uptime.services.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
<div className={"col-md-6 col-12"}>
<h3>Datacenter Status</h3>
{uptime.datacenters.map((e) => {
return (
<UptimeCard uptime={e}/>
);
})}
</div>
</div>
<div style={{width: '75vw'}}>
<hr/>
</div>
<div>
<h3>Service Alerts</h3>
{incidents.map((e) => {
return (
<IncidentCard incident={e}/>
);
})}
{incidents.length == 0 && <div className={`row text-center`} style={{width: '75vw'}}>
<h5 className={"col-12"}>No service alerts.</h5>
</div>}
</div>
<footer style={{margin: 25}}>
NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
</footer>
</div>
<div/>
);
}