ISS Position SPA launched! 🚀

2021-12-23 06:18:39 -05:00 · 2021-12-23 06:18:39 -05:00 · a697812315
commit a697812315
parent 0ca5ddc97d
14 changed files with 28082 additions and 27719 deletions
--- a/src/App.css
+++ b/src/App.css
@ -1,38 +1,37 @@
 .App {
-  text-align: center;
+	text-align: center;
 }

 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }

@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }

 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }

 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }

@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
--- a/src/App.js
+++ b/src/App.js
@ -1,25 +1,60 @@
-import logo from './logo.svg';
-import './App.css';
+// import logo from "../logo.svg";
+import React, { useState, useEffect } from "react";
+import { AiFillGithub } from "react-icons/ai";
+import ProgressBar from "./components/ProgressBar";
+import "./App.css";

 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	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("http://api.open-notify.org/iss-now.json");
+		const data = await resp.json();
+		await setLongitude(data.iss_position.longitude);
+		await setLatitude(data.iss_position.latitude);
+		setProgress(0);
+	}
+
+	useEffect(() => {
+		fetchISSData();
+		setInterval(fetchISSData, 10000);
+		setInterval(() => {
+			setProgress((prev) => prev + 1);
+		}, 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>
+				<ProgressBar progress={progress} />
+				<a
+					href="https://github.com/rzmk/iss-location-spa"
+					target="_blank"
+				>
+					<AiFillGithub className="mt-8 w-12 h-12 hover:scale-125 transition ease-in-out" />
+				</a>
+			</header>
+		</div>
+	);
 }

 export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/background.svg
+++ b/src/background.svg
@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560">
+    <g mask="url(&quot;#SvgjsMask1002&quot;)" fill="none">
+        <rect width="1440" height="560" x="0" y="0" fill="url(#SvgjsLinearGradient1003)"></rect>
+        <path d="M1440 0L1169.67 0L1440 127.71z" fill="rgba(255, 255, 255, .1)"></path>
+        <path d="M1169.67 0L1440 127.71L1440 165.54L958.5600000000001 0z" fill="rgba(255, 255, 255, .075)"></path>
+        <path d="M958.56 0L1440 165.54L1440 365.90999999999997L362.28999999999996 0z" fill="rgba(255, 255, 255, .05)"></path>
+        <path d="M362.28999999999996 0L1440 365.90999999999997L1440 372.4L230.05999999999997 0z" fill="rgba(255, 255, 255, .025)"></path>
+        <path d="M0 560L689.41 560L0 469.35z" fill="rgba(0, 0, 0, .1)"></path>
+        <path d="M0 469.35L689.41 560L931.0899999999999 560L0 213.34000000000003z" fill="rgba(0, 0, 0, .075)"></path>
+        <path d="M0 213.34000000000003L931.0899999999999 560L1146.3 560L0 170.77000000000004z" fill="rgba(0, 0, 0, .05)"></path>
+        <path d="M0 170.77000000000004L1146.3 560L1251.08 560L0 92.22000000000004z" fill="rgba(0, 0, 0, .025)"></path>
+    </g>
+    <defs>
+        <mask id="SvgjsMask1002">
+            <rect width="1440" height="560" fill="#ffffff"></rect>
+        </mask>
+        <linearGradient x1="15.28%" y1="-39.29%" x2="84.72%" y2="139.29%" gradientUnits="userSpaceOnUse" id="SvgjsLinearGradient1003">
+            <stop stop-color="#0e2a47" offset="0"></stop>
+            <stop stop-color="#00459e" offset="1"></stop>
+        </linearGradient>
+    </defs>
+</svg>
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@ -0,0 +1,14 @@
+const ProgressBar = ({ progress }) => {
+	return (
+		<div className="w-1/4">
+			<div className="w-full bg-gray-600 rounded-full h-4 dark:bg-gray-500">
+				<div
+					className="bg-gray-200 h-4 rounded-full transition-all ease-in-out"
+					style={{ width: `${progress}%`, maxWidth: "100%" }}
+				></div>
+			</div>
+		</div>
+	);
+};
+
+export default ProgressBar;
--- a/src/index.css
+++ b/src/index.css
@ -1,13 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+		"Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background: #000046; /* fallback for old browsers */
+	background: #000046; /* fallback for old browsers */
+	background: -webkit-linear-gradient(
+		to right,
+		#1cb5e0,
+		#000046
+	); /* Chrome 10-25, Safari 5.1-6 */
+	background: linear-gradient(
+		to right,
+		#1cb5e0,
+		#000046
+	); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
 }
--- a/src/index.js
+++ b/src/index.js
@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";

 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById("root")
 );

 // If you want to start measuring performance in your app, pass a function