Merge branch 'release/3.0.2'

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 3.0.2
+## @hakit/components
+- BREAKING - WeatherCard - details prop has been converted to accept a WeatherCardDetail component rather than an array of objects, this allows better typescript intellisense for services if you want to add your own custom details / actions.
+- NEW - WeatherCard now subscribes to websocket updates with the weather rather than the attribute updates as this has been marked as deprecated in future versions.
+- BUGFIX - Animations in the last version were a little broken due to the scale of changes, i simply missed this, i believe these should be fixed now
+- NEW - long press on weather card will open the popup with a larger version of the card showing additional information
+- NEW - Popup when long pressing a card now has a springy animation
+
+## @hakit/core
+- BREAKING - useHash - hook as been removed, and now moved to the store, both the hash and setHash value are available from useHass()
+  ```
+    const { useStore } = useHass();
+    const setHash = useStore(store => store.setHash);
+    const hash = useStore(store => store.hash);
+  ```
+- NEW - useWeather - a hook to return the weather entity which is subscribed to weather updates, this will add an additional property called "forecast" to the entity.
+- BUGFIX - Previously, certain scenarios would allow multiple web socket connections instead of re-using the same connection, this has been fixed and should improve performance.
+- BUGFIX - routes weren't being activated properly which prompted the removal of the useHash hook, now the activation of the hash as well as the routes are in sync and working as expected.
+
 # 3.0.0
 ## Storybook
 - BUGFIX - bug was preventing some props from being displayed in the props table, this has been fixed

hass-connect-fake/index.tsx

@@ -21,7 +21,7 @@ import type {
   Store,
 } from "@hakit/core";
 import { isArray } from "lodash";
-import { HassContext, useHash } from '@hakit/core';
+import { HassContext } from '@hakit/core';
 import { entities as ENTITIES } from './mocks/mockEntities';
 import fakeApi from './mocks/fake-call-service';
 import { create } from "zustand";
@@ -30,6 +30,7 @@ import mockHistory from './mock-history';
 import { mockCallApi } from './mocks/fake-call-api';
 import reolinkSnapshot from './assets/reolink-snapshot.jpg';
 import { logs } from './mocks/mockLogs';
+import {dailyForecast, hourlyForecast} from './mocks/mockWeather';
 
 interface CallServiceArgs<T extends SnakeOrCamelDomains, M extends DomainService<T>> {
   domain: T;
@@ -140,11 +141,13 @@ class MockConnection extends Connection {
   }
 
   async subscribeMessage<Result>(callback: (result: Result) => void, params?: {
-    type: string,
-    entity_ids?: string[],
-    start_time?: string,
-    end_time?: string,
+    type: string;
+    entity_ids?: string[];
+    start_time?: string;
+    forecast_type?: string;
+    end_time?: string;
   }): Promise<() => Promise<void>> {
+
     if (params && params.type === 'logbook/event_stream' && params.start_time && params.end_time) {
       const isoStartTime = new Date(params.start_time);
       const isoEndTime = new Date(params.end_time);
@@ -162,6 +165,13 @@ class MockConnection extends Connection {
         }))
       };
       callback(newEvents as Result);
+    } else if (params && params.type === 'weather/subscribe_forecast') {
+      if (params.forecast_type === 'daily') {
+        callback(dailyForecast as Result);
+      }
+      if (params.forecast_type === 'hourly') {
+        callback(hourlyForecast as Result);
+      }
     } else {
       callback(mockHistory as Result);
     }
@@ -184,6 +194,8 @@ class MockConnection extends Connection {
 const useStore = create<Store>((set) => ({
   routes: [],
   setRoutes: (routes) => set(() => ({ routes })),
+  hash: '',
+  setHash: (hash) => set({ hash }),
   entities: ENTITIES,
   setEntities: (newEntities) => set(state => {
     const entitiesCopy = { ...state.entities };
@@ -241,11 +253,13 @@ const useStore = create<Store>((set) => ({
 function HassProvider({
   children,
 }: HassProviderProps) {
-  const [_hash] = useHash();
+
   const routes = useStore(store => store.routes);
   const setRoutes = useStore(store => store.setRoutes);
   const entities = useStore(store => store.entities);
   const setEntities = useStore(store => store.setEntities);
+  const setHash = useStore(store => store.setHash);
+  const _hash = useStore(store => store.hash);
   const ready = useStore(store => store.ready);
   const clock = useRef<NodeJS.Timeout | null>(null);
   const getStates = async () => null;
@@ -365,9 +379,8 @@ function HassProvider({
       const exists = routes.find((_route) => _route.hash === route.hash) !== undefined;
       if (!exists) {
         // if the current has value is the same as the hash, we're active
-        const hashWithoutPound = _hash.replace("#", "");
-        const active =
-          hashWithoutPound !== "" && hashWithoutPound === route.hash;
+        const hashWithoutPound = window.location.hash.replace("#", "");
+        const active = hashWithoutPound !== "" && hashWithoutPound === route.hash;
         setRoutes([
           ...routes,
           {
@@ -377,9 +390,39 @@ function HassProvider({
         ]);
       }
     },
-    [_hash, routes, setRoutes],
+    [routes, setRoutes],
   );
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (location.hash === '') return;
+    if (location.hash.replace('#', '') === _hash) return;
+    setHash(location.hash)
+  }, [setHash, _hash]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    function onHashChange() {
+      setRoutes(routes.map(route => {
+        if (route.hash === location.hash.replace('#', '')) {
+          return {
+            ...route,
+            active: true,
+          }
+        }
+        return {
+          ...route,
+          active: false,
+        }
+      }));
+      setHash(location.hash);
+    }
+    window.addEventListener("hashchange", onHashChange);
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, [routes, setHash, setRoutes]);
+
   const joinHassUrl = useCallback((path: string) => path, []);
 
   const getRoute = useCallback(

hass-connect-fake/mocks/createWeather.ts

@@ -18,68 +18,7 @@ const defaults = {
     wind_speed_unit: "km/h",
     visibility_unit: "km",
     precipitation_unit: "mm",
-    forecast: [
-      {
-        condition: "partlycloudy",
-        datetime: "2023-07-18T02:00:00+00:00",
-        wind_bearing: 15,
-        temperature: 20.8,
-        templow: 12.7,
-        wind_speed: 20.9,
-        precipitation: 0,
-        humidity: 64,
-      },
-      {
-        condition: "sunny",
-        datetime: "2023-07-19T02:00:00+00:00",
-        wind_bearing: 199.3,
-        temperature: 16.2,
-        templow: 8.2,
-        wind_speed: 34.6,
-        precipitation: 0,
-        humidity: 32,
-      },
-      {
-        condition: "sunny",
-        datetime: "2023-07-20T02:00:00+00:00",
-        wind_bearing: 6.7,
-        temperature: 18.7,
-        templow: 5,
-        wind_speed: 22,
-        precipitation: 0,
-        humidity: 43,
-      },
-      {
-        condition: "partlycloudy",
-        datetime: "2023-07-21T02:00:00+00:00",
-        wind_bearing: 178.8,
-        temperature: 14.4,
-        templow: 10.3,
-        wind_speed: 19.1,
-        precipitation: 2,
-        humidity: 71,
-      },
-      {
-        condition: "sunny",
-        datetime: "2023-07-22T02:00:00+00:00",
-        wind_bearing: 156.6,
-        temperature: 15.4,
-        templow: 6.2,
-        wind_speed: 15.1,
-        precipitation: 0,
-        humidity: 40,
-      },
-      {
-        condition: "rainy",
-        datetime: "2023-07-23T02:00:00+00:00",
-        wind_bearing: 217.2,
-        temperature: 12.5,
-        templow: 6.7,
-        wind_speed: 19.8,
-        precipitation: 8.7,
-        humidity: 88,
-      },
-    ],
+    supported_features: 3,
     attribution:
       "Weather forecast from met.no, delivered by the Norwegian Meteorological Institute.",
     friendly_name: "Forecast <City>",