53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { AiFillGithub } from "react-icons/ai";
|
|
import Map from "./components/Map";
|
|
import Coordinates from "./components/Coordinates";
|
|
import ProgressBar from "./components/ProgressBar";
|
|
import "./App.css";
|
|
|
|
function App() {
|
|
const [longitude, setLongitude] = useState(0);
|
|
const [latitude, setLatitude] = useState(0);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
async function fetchISSData() {
|
|
// const resp = await fetch("#"); // debugging
|
|
const resp = await fetch(
|
|
"https://api.wheretheiss.at/v1/satellites/25544"
|
|
);
|
|
const data = await resp.json();
|
|
setLongitude(String(data.longitude));
|
|
setLatitude(String(data.latitude));
|
|
setProgress(0);
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchISSData();
|
|
setInterval(fetchISSData, 2000);
|
|
setInterval(() => {
|
|
setProgress((prev) => prev + 5);
|
|
}, 100);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<h1 className="text-4xl sm:text-6xl">
|
|
International Space Station Position
|
|
</h1>
|
|
<Map latitude={latitude} longitude={longitude} />
|
|
<Coordinates latitude={latitude} longitude={longitude} />
|
|
<ProgressBar progress={progress} />
|
|
<a
|
|
href="https://github.com/rzmk/iss-position-spa"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<AiFillGithub className="mt-8 w-12 h-12 hover:scale-125 transition ease-in-out" />
|
|
</a>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|