Map update! 🌎

src/App.js

@@ -1,6 +1,7 @@
-// import logo from "../logo.svg";
 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";
 
@@ -15,38 +16,27 @@ function App() {
 			"https://api.wheretheiss.at/v1/satellites/25544"
 		);
 		const data = await resp.json();
-		await setLongitude(String(data.longitude).slice(0, 7));
-		await setLatitude(String(data.latitude).slice(0, 7));
+		setLongitude(String(data.longitude));
+		setLatitude(String(data.latitude));
 		setProgress(0);
 	}
 
 	useEffect(() => {
 		fetchISSData();
-		setInterval(fetchISSData, 10000);
+		setInterval(fetchISSData, 2000);
 		setInterval(() => {
-			setProgress((prev) => prev + 1);
+			setProgress((prev) => prev + 5);
 		}, 100);
 	}, []);
 
 	return (
 		<div className="App">
 			<header className="App-header">
-				{/* <img src={logo} className="App-logo" alt="logo" /> */}
 				<h1 className="text-4xl sm:text-6xl">
 					International Space Station Position
 				</h1>
-				<table className="my-8 text-3xl sm:text-4xl">
-					<tbody>
-						<tr>
-							<td className="text-left">Latitude:</td>
-							<td className="text-right">{latitude}</td>
-						</tr>
-						<tr>
-							<td className="text-left">Longitude:</td>
-							<td className="text-right pl-10">{longitude}</td>
-						</tr>
-					</tbody>
-				</table>
+				<Map latitude={latitude} longitude={longitude} />
+				<Coordinates latitude={latitude} longitude={longitude} />
 				<ProgressBar progress={progress} />
 				<a
 					href="https://github.com/rzmk/iss-position-spa"