Merge pull request #4 from catdad-experiments/manual-location-selection

doing a bunch of refactoring

src/hooks/location.js

@@ -0,0 +1,26 @@
+import { createContext, useContext, useEffect, html, useSignal } from '../preact.js';
+import { getPosition } from '../sources/position.js';
+
+const Location = createContext({});
+
+export const withLocation = Component => ({ children, ...props }) => {
+  const location = useSignal(null);
+
+  useEffect(() => {
+    getPosition().then(position => {
+      console.log('got new location', position);
+      location.value = { ...position };
+    }).catch(err => {
+      // TODO
+      console.error('failed to get position:', err);
+    });
+  }, []);
+
+  return html`
+    <${Location.Provider} value=${{ location }}>
+      <${Component} ...${props}>${children}<//>
+    <//>
+  `;
+};
+
+export const useLocation = () => useContext(Location);

src/hooks/routes.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, html, useSignal } from '../preact.js';
+
+const Routes = createContext({});
+
+export const withRoutes = Component => ({ children, ...props }) => {
+  const route = useSignal('forecast');
+  const routeData = useSignal(null);
+
+  return html`
+    <${Routes.Provider} value=${{ route, routeData }}>
+      <${Component} ...${props}>${children}<//>
+    <//>
+  `;
+};
+
+export const useRoutes = () => useContext(Routes);

src/style.js → src/hooks/style.js

@@ -1,4 +1,4 @@
-import { useSignal, useComputed, useEffect } from "./preact.js";
+import { useSignal, useComputed, useEffect } from "../preact.js";
 
 const random = () => `x${Math.random().toString(36).slice(2)}`;
 

src/weather.js → src/hooks/weather.js

@@ -1,11 +1,12 @@
-import { createContext, useContext, useEffect, html, signal, effect, useSignal } from './preact.js';
-import { getForecast } from './sources/forecast.js';
-import { getPosition } from './sources/position.js';
+import { createContext, useContext, html, effect, useSignal } from '../preact.js';
+import { getForecast } from '../sources/forecast.js';
+
+import { useLocation } from './location.js';
 
 const Weather = createContext({});
 
 export const withWeather = Component => ({ children, ...props }) => {
-  const location = useSignal(null);
+  const { location } = useLocation();
   const weather = useSignal(null);
   const temperatureUnit = useSignal('fahrenheit'); // celsius, fahrenheit
   const windspeedUnit = useSignal('mph'); // kmh, ms, mph, kn,
@@ -35,17 +36,8 @@ export const withWeather = Component => ({ children, ...props }) => {
     });
   });
 
-  useEffect(() => {
-    getPosition().then(position => {
-      location.value = { ...position };
-    }).catch(err => {
-      // TODO
-      console.error('failed to get position:', err);
-    });
-  }, []);
-
   return html`
-    <${Weather.Provider} value=${{ location, weather }}>
+    <${Weather.Provider} value=${{ weather }}>
       <${Component} ...${props}>${children}<//>
     <//>
   `;

src/pages/forecast.js

@@ -0,0 +1,31 @@
+import { html } from '../preact.js';
+import { useWeather } from "../hooks/weather.js";
+import { useLocation } from '../hooks/location.js';
+import { getDateTime } from "../utils.js";
+
+import { CurrentLocation } from "../ui/current-location.js";
+import { CurrentWeather } from "../ui/current-weather.js";
+import { DailyForecast } from "../ui/daily-forecast.js";
+
+export const Forecast = () => {
+  const { location } = useLocation();
+  const { weather } = useWeather();
+
+  if (!location.value || !weather.value) {
+    return html`<div>Working on it...</div>`;
+  }
+
+  return html`
+    <${CurrentLocation} />
+    <${CurrentWeather} />
+    <div>
+      refreshed: ${getDateTime(weather.value.date)}
+      <span> <//>
+      <button onclick=${() => {
+        location.value = {...location.value};
+      }}>refresh now<//>
+    <//>
+    <${DailyForecast} />
+    <div><a href="https://open-meteo.com/">Weather data by Open-Meteo.com</a><//>
+  `;
+};

src/renderer.js

@@ -1,37 +1,22 @@
 import { html, render } from './preact.js';
-import { useWeather, withWeather } from './weather.js';
-import { getDateTime } from './utils.js';
+import { withLocation } from './hooks/location.js';
+import { withWeather } from './hooks/weather.js';
+import { useRoutes, withRoutes } from './hooks/routes.js';
 
-import { Location } from './ui/location.js';
-import { CurrentWeather } from './ui/current-weather.js';
-import { DailyForecast } from './ui/daily-forecast.js';
+import { Forecast } from './pages/forecast.js';
 
-const App = withWeather(() => {
-  const { location, weather,  } = useWeather();
+const Router = () => {
+  const { route } = useRoutes();
 
-  if (weather.value) {
-    return html`
-      <${Location} />
-      <${CurrentWeather} />
-      <div>
-        refreshed: ${getDateTime(weather.value.date)}
-        <span> <//>
-        <button onclick=${() => {
-          location.value = {...location.value};
-        }}>refresh now<//>
-      <//>
-      <${DailyForecast} />
-      <div><a href="https://open-meteo.com/">Weather data by Open-Meteo.com</a><//>
-    `;
-  }
-
-  if (location.value) {
-    return html`<${Location} />`;
+  switch (route.value) {
+    case 'forecast':
+      return html`<${Forecast} />`;
+    default:
+      return html`<div>Loading...</div>`;
   }
+};
 
-  // TODO allow user to manually trigger location fetching or type a location name
-  return html`<div>Working on it...</div>`;
-});
+const App = withRoutes(withLocation(withWeather(() => html`<${Router} />`)));
 
 export default () => {
   render(html`<${App} />`, document.querySelector('#main'));

src/ui/location.js → src/ui/current-location.js

@@ -1,9 +1,11 @@
 import { html } from '../preact.js';
-import { useWeather } from '../weather.js';
-import { useStyle } from '../style.js';
+import { useLocation } from '../hooks/location.js';
+import { useWeather } from '../hooks/weather.js';
+import { useStyle } from '../hooks/style.js';
 
-export const Location = () => {
-  const { location, weather } = useWeather();
+export const CurrentLocation = () => {
+  const { location } = useLocation();
+  const { weather } = useWeather();
 
   const classname = useStyle(`
     $ {

src/ui/current-weather.js

@@ -1,7 +1,7 @@
 import { html } from '../preact.js';
-import { useWeather } from '../weather.js';
+import { useWeather } from '../hooks/weather.js';
 import { Emoji } from './emoji.js';
-import { useStyle } from '../style.js';
+import { useStyle } from '../hooks/style.js';
 
 export const CurrentWeather = () => {
   const { weather } = useWeather();

src/ui/daily-forecast.js

@@ -1,9 +1,9 @@
 import { html, useSignal } from '../preact.js';
-import { useWeather } from '../weather.js';
+import { useWeather } from '../hooks/weather.js';
 import { getDayName, getDate, getTime } from '../utils.js';
 import { Emoji } from './emoji.js';
 import { HourlyForecast } from './hourly-forecast.js';
-import { useStyle } from '../style.js';
+import { useStyle } from '../hooks/style.js';
 
 const Day = ({ data }) => {
   const {

src/ui/hourly-forecast.js

@@ -1,8 +1,8 @@
 import { html } from '../preact.js';
-import { useWeather } from '../weather.js';
+import { useWeather } from '../hooks/weather.js';
 import { getHour } from '../utils.js';
 import { Emoji } from './emoji.js';
-import { useStyle } from '../style.js';
+import { useStyle } from '../hooks/style.js';
 
 const nbsp = '\xa0';
 const noWrap = str => str.replace(/ /g, nbsp);