Add wind speed

Update types Use type checking Clean up
rafistrauss · Mar 10, 2023 · 06b9c0f · 06b9c0f
1 parent 9c3465c
commit 06b9c0f
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 131 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -2,8 +2,18 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {
-			"$lib/*": ["src/lib/*"]
-		}
+			"$lib/*": [
+				"src/lib/*"
+			]
+		},
+		"checkJs": true,
+		"allowJs": true,
+		"resolveJsonModule": true
 	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
-}
+	"include": [
+		"src/**/*.d.ts",
+		"src/**/*.js",
+		"src/**/*.svelte",
+		"types.js"
+	]
+}
diff --git a/src/lib/CurrentWeather.svelte b/src/lib/CurrentWeather.svelte
@@ -1,36 +1,29 @@
 <script>
-  import {
-    getIcon,
-    convertKelvinToFahrenheit,
-  } from "./utils.svelte";
-  import { formatDistanceToNow, lightFormat } from "date-fns";
+	import { lightFormat } from 'date-fns';
 
-  /**
-   * @type {CurrentWeather}
-   */
-  export let current;
-  const { feels_like: temp, dt: timestamp, weather, humidity } = current;
+	/**
+	 * @type {current}
+	 */
+	export let current;
+	const { feels_like, dt: timestamp, weather, humidity, wind_speed } = current;
 
-  const { icon, id } = weather[0];
+	const { icon, id } = weather[0];
 
-  const timeOfDay = icon.endsWith("n") ? "night" : "day";
+	const timeOfDay = icon.endsWith('n') ? 'night' : 'day';
 
-  const myTemp = `${convertKelvinToFahrenheit(temp)} \xB0F`;
+	const myTemp = `${Math.round(feels_like)} \xB0F`;
 
-  const imgSrc = getIcon(icon);
-
-  const date = new Date();
-  const formattedTime = lightFormat(timestamp * 1000, "h:mm aaa");
+	const formattedTime = lightFormat(timestamp * 1000, 'h:mm aaa');
 </script>
 
-<!-- <WeatherDisplay temp={temp} timestamp={timestamp} icon={icon} /> -->
 <div>
-  <!-- <img src={imgSrc} alt="" style="vertical-align: middle; width: 100px; height: 100px;" /> -->
-  <span class={`wi wi-owm-${timeOfDay}-${id}`} style="font-size: 48px;" />
-  <span style="font-size: 48px; margin-right: 1em;">{myTemp}</span>
-  <p style="display: inline-block;">
-    {formattedTime}
+	<span class={`wi wi-owm-${timeOfDay}-${id}`} style="font-size: 48px;" />
+	<span style="font-size: 48px; margin-inline-end: 1em;">{myTemp}</span>
+	<p style="display: inline-block;">
+		{formattedTime}
+		<br />
+		Humidity: {humidity}%
     <br />
-    Humidity: {humidity}%
-  </p>
+    Wind: {Math.round(wind_speed)}mph
+	</p>
 </div>
diff --git a/src/lib/DailyWeather.svelte b/src/lib/DailyWeather.svelte
@@ -1,48 +1,32 @@
 <script>
-  import { format } from "date-fns";
-  import {
-    getIcon,
-    convertKelvinToFahrenheit,
-  } from "./utils.svelte";
+	import { format } from 'date-fns';
 
-  /**
-   * @type {WeatherData}
-   */
-  export let weatherDataInstance;
-  // export let temp, timestamp, icon;
+	/**
+	 * @type {daily}
+	 */
+	export let weatherDataInstance;
 
-  const {
-    dt: timestamp,
-    temp,
-    feels_like,
-    weather,
-    humidity,
-    rain,
-    pop,
-  } = weatherDataInstance;
+	const { dt: timestamp, feels_like, weather, humidity, pop, wind_speed } = weatherDataInstance;
 
-  const { icon, id } = weather[0];
+	const { icon, id } = weather[0];
 
-  const timeOfDay = icon.endsWith("n") ? "night" : "day";
+	const timeOfDay = icon.endsWith('n') ? 'night' : 'day';
 
-  const { day: day_feels_like } = feels_like;
+	const { day: day_feels_like } = feels_like;
 
-  // const { main: { feels_like }, weather } = data;
-  // return JSON.stringify(json);
-  const myTemp = `${convertKelvinToFahrenheit(day_feels_like)} \xB0F`;
-
-  const imgSrc = getIcon(icon);
+	const myTemp = `${Math.round(day_feels_like)} \xB0F`;
 </script>
 
 <div>
-  <!-- <img src={imgSrc} alt="" style="vertical-align: middle; width: 100px; height: 100px;" /> -->
-  <span class={`wi wi-owm-${timeOfDay}-${id}`} style="font-size: 48px;" />
-  <span style="font-size: 24px;">{myTemp}</span>
-  <p>
-    {format(new Date(timestamp * 1000), 'EEEE')}
-    <br />
-    Humidity: {humidity}%
-    <br />
-    Chance of Rain: {pop * 100}%
-  </p>
+	<span class={`wi wi-owm-${timeOfDay}-${id}`} style="font-size: 48px;" />
+	<span style="font-size: 24px;">{myTemp}</span>
+	<p>
+		{format(new Date(timestamp * 1000), 'EEEE')}
+		<br />
+		Humidity: {humidity}%
+		<br />
+		Chance of Rain: {pop * 100}%
+		<br />
+		Wind: {Math.round(wind_speed)}mph
+	</p>
 </div>
diff --git a/src/lib/Encapsulator.svelte b/src/lib/Encapsulator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import WeatherDisplay from "./WeatherDisplay.svelte";
+  import HourlyWeather from "./HourlyWeather.svelte";
   import CurrentWeather from "./CurrentWeather.svelte";
   import DailyWeather from "./DailyWeather.svelte";
 
@@ -18,7 +18,7 @@
 <CurrentWeather {current} />
 <div class="hourlyData">
   {#each hourly as weatherDataInstance}
-    <WeatherDisplay {weatherDataInstance} />
+    <HourlyWeather {weatherDataInstance} />
   {/each}
 </div>
 <div class="dailyData">

diff --git a/src/lib/WeatherDisplay.svelte → src/lib/HourlyWeather.svelte b/src/lib/WeatherDisplay.svelte → src/lib/HourlyWeather.svelte
@@ -1,42 +1,38 @@
 <script>
   import { formatDistanceToNow } from "date-fns";
-  import {
-    getIcon,
-    convertKelvinToFahrenheit,
-  } from "./utils.svelte";
-
+  
   /**
-   * @type {WeatherData}
+   * @type {hourly}
    */
   export let weatherDataInstance;
 
   const {
     dt: timestamp,
-    temp,
     feels_like,
     weather,
     humidity,
     pop,
+    wind_speed
   } = weatherDataInstance;
 
   const { icon, id } = weather[0];
 
   const timeOfDay = icon.endsWith("n") ? "night" : "day";
 
-  const myTemp = `${convertKelvinToFahrenheit(feels_like)} \xB0F`;
+  const temperature = `${Math.round(feels_like)} \xB0F`;
 
-  const imgSrc = getIcon(icon);
 </script>
 
 <div>
-  <!-- <img src={imgSrc} alt="" style="vertical-align: middle; width: 100px; height: 100px;" /> -->
   <span class={`wi wi-owm-${timeOfDay}-${id}`} style="font-size: 48px;" />
-  <span style="font-size: 32px;">{myTemp}</span>
+  <span style="font-size: 32px;">{temperature}</span>
   <p>
     {formatDistanceToNow(new Date(timestamp * 1000), { addSuffix: true })}
     <br />
     Humidity: {humidity}%
     <br />
     Chance of Rain: {pop * 100}%
+    <br />
+    Wind: {Math.round(wind_speed)}mph
   </p>
 </div>
diff --git a/src/lib/WeatherData.svelte b/src/lib/WeatherData.svelte
@@ -19,24 +19,22 @@
 	}
 
 	if (typeof fetch !== 'function') {
+		// @ts-ignore
 		fetch = require('node-fetch');
 	}
 
 	import { apiKey } from './utils.svelte';
 
-	// const url = `https://api.openweathermap.org/data/2.5/weather?zip=${zip}&appid=${apiKey}`
-	// const url = `https://api.openweathermap.org/data/2.5/forecast?zip=${zip}&appid=${apiKey}`
-
 	async function getWeatherData() {
 		if (!(latitude && longitude)) {
 			return null;
 		}
 
 		const part = 'minutely';
-		const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=${part}&appid=${apiKey}`;
-		// const url = `https://example.com`;
+		const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=${part}&appid=${apiKey}&units=imperial`;
 
 		const res = await fetch(url);
+		/** @type {one_call_weather_data_response} */
 		const json = await res.json();
 
 		const { current, daily, hourly } = json;
@@ -50,11 +48,6 @@
 		localStorage.setItem('cachedWeather', JSON.stringify(weatherObject));
 
 		return weatherObject;
-
-		// const { main: { feels_like } } = json;
-		// // return json;
-		// // return JSON.stringify(json);
-		// return `${convertKelvinToFahrenheit(feels_like)}\xB0 F`;
 	}
 
 	promise = getWeatherData();
@@ -67,7 +60,7 @@
 
 {#await promise}
 	{#if cachedWeather}
-		<Encapsulator isCached current={cachedCurrent} hourly={cachedHourly} daily={cachedDaily} />
+		<Encapsulator current={cachedCurrent} hourly={cachedHourly} daily={cachedDaily} />
 	{:else}
 		No cached weather data: waiting
 	{/if}
@@ -81,6 +74,6 @@
 	{/if}
 {:catch error}
 	{#if cachedCurrent}
-		<Encapsulator isCached current={cachedCurrent} hourly={cachedHourly} daily={cachedDaily} />
+		<Encapsulator current={cachedCurrent} hourly={cachedHourly} daily={cachedDaily} />
 	{:else}Failed{/if}
 {/await}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -58,7 +58,9 @@
 	function setLatLong(lat, long) {
 		latitude.set(lat);
 		longitude.set(long);
+		// @ts-ignore
 		localStorage.setItem('latitude', lat);
+		// @ts-ignore
 		localStorage.setItem('longitude', long);
 	}