From 7b15b39d5fa6cb6731f4f9927b5c0a77b428d21f Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 16 Jul 2024 02:02:55 +0000
Subject: [PATCH] Simplify components, add sha256() for later

---
 mapper/src/App.js | 64 ++++++++++++++++++++++-------------------------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/mapper/src/App.js b/mapper/src/App.js
index 59132f4..29ad177 100644
--- a/mapper/src/App.js
+++ b/mapper/src/App.js
@@ -11,8 +11,6 @@ import 'leaflet/dist/leaflet.css';
 import 'react-range-slider-input/dist/style.css';
 
 
-let tzcache = {};
-
 // num: number of steps per duration
 // secs: number of seconds per step
 const durations = [
@@ -38,6 +36,13 @@ const parseSlider = (end, duration, slider) => {
 	return [lowStr, highStr];
 };
 
+//async function sha256(source) {
+//	const sourceBytes = new TextEncoder().encode(source);
+//	const digest = await crypto.subtle.digest('SHA-256', sourceBytes);
+//	const resultBytes = [...new Uint8Array(digest)];
+//	return resultBytes.map(x => x.toString(16).padStart(2, '0')).join('');
+//}
+
 function useSensor(measurement, name, end, duration) {
 	const [data, setData] = useState(false);
 	const [loading, setLoading] = useState(false);
@@ -67,7 +72,7 @@ function useSensor(measurement, name, end, duration) {
 
 
 
-function Owntracks({end, duration, slider}) {
+function Map({end, duration, slider}) {
 	const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
 
 	const range = parseSlider(end, duration, slider);
@@ -80,38 +85,29 @@ function Owntracks({end, duration, slider}) {
 		localStorage.setItem('api_key', api_key);
 	}
 
-	return (
-		<>
-		{loading ?
-			<p>Loading...</p>
-		:
-			coords.length ?
-				<MapContainer center={coords[coords.length-1]} zoom={13} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
-					<TileLayer
-						attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-						url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
-					/>
-					<Polyline pathOptions={{color: 'blue'}} positions={coords} />
-				</MapContainer>
-			:
-				<>
-					<p>No data</p>
-					<form onSubmit={handleSubmit}>
-						<p>
-							<input placeholder='API key' />
-						</p>
-					</form>
-				</>
-		}
-		</>
-	);
-}
-
-
-function Graphs({end, duration, slider}) {
 	return (
 		<div className='container'>
-			<Owntracks end={end} duration={duration} slider={slider} />
+			{loading ?
+				<p>Loading...</p>
+			:
+				coords.length ?
+					<MapContainer center={coords[coords.length-1]} zoom={13} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
+						<TileLayer
+							attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+							url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
+						/>
+						<Polyline pathOptions={{color: 'blue'}} positions={coords} />
+					</MapContainer>
+				:
+					<>
+						<p>No data</p>
+						<form onSubmit={handleSubmit}>
+							<p>
+								<input placeholder='API key' />
+							</p>
+						</form>
+					</>
+			}
 		</div>
 	);
 }
@@ -267,7 +263,7 @@ function App() {
 				setSlider={setSlider}
 			/>
 
-			<Graphs
+			<Map
 				end={end}
 				duration={duration}
 				slider={slider}