Refactor connection/authenticatioin with retry functionality (#264)

* Feature/throttle updates and responsive bug (#241)

* Fixing throttle updates and resposnive issue

* Updating package and changelog with locales

* Small refactor

* Updating changelog

* 248 reported delays with card updates (#249)

* Updates with timecard issues

* Fixed bug where ticking function wouldn't update the clock if no entity or other props are provided

* Optimsations with tooltip

* updating log

* Updating changelog

* Reverting time card story changes

* Typo

* Locales, prettier & bumping version

* Trying to simplify / improve on authentication / socket connections

* Will cleanup once we have a working bugfix

* Adjusting fetch so it makes the request when locale is absent

* Removing package prefix

Author: shannonhochkins

hass-connect-fake/index.tsx

@@ -224,6 +224,14 @@ const ignoreForDiffCheck = (
 };
 
 const useStore = create<Store>((set) => ({
+  disconnectCallbacks: [],
+  onDisconnect: (cb) => set((state) => ({ disconnectCallbacks: [...state.disconnectCallbacks, cb] })),
+  triggerOnDisconnect: () => {
+    set((state) => {
+      state.disconnectCallbacks.forEach((callback) => callback());
+      return { disconnectCallbacks: [] };
+    });
+  },
   routes: [],
   setRoutes: (routes) => set(() => ({ routes })),
   hash: '',

package.json

@@ -36,7 +36,7 @@
     "build": "VITE_CJS_TRACE=true npm run build:core && npm run build:components && npm run build:create",
     "postbuild": "npm run type-check",
     "type-check": "tsc --noEmit --project tsconfig-type-check.json && npm run type-check --workspaces --if-present",
-    "build:core": "npm run build --workspace=@hakit/core",
+    "build:core": "npm run build:core --workspace=@hakit/core",
     "build:create": "npm run build --workspace=create-hakit",
     "build:for:storybook": "npm run build:core --workspace=@hakit/core && npm run build --workspace=@hakit/components",
     "build:components": "npm run build --workspace=@hakit/components",

packages/core/src/HassConnect/FetchLocale/index.tsx

@@ -0,0 +1,59 @@
+import { useConfig } from "@hooks";
+import { Locales } from "@typings";
+import { useEffect, useRef, useState } from "react";
+import { updateLocales } from "../../hooks/useLocale";
+import locales from "../../hooks/useLocale/locales";
+import { useStore } from "../HassContext";
+
+interface FetchLocaleProps {
+  locale?: Locales;
+  children?: React.ReactNode;
+}
+export function FetchLocale({ locale, children }: FetchLocaleProps) {
+  const config = useConfig();
+  const [fetched, setFetched] = useState(false);
+  const fetchPending = useRef(false);
+  const previousLocale = useRef<Locales | null>(null);
+  const setError = useStore((store) => store.setError);
+  const setLocales = useStore((store) => store.setLocales);
+
+  useEffect(() => {
+    const _locale = (locale ?? config?.language);
+    if (!_locale) {
+      // may just be waiting for the users config to resolve
+      return;
+    }
+    const match = locales.find(({ code }) => code === (locale ?? config?.language));
+    if (previousLocale.current !== match?.code) {
+      setFetched(false);
+      fetchPending.current = false;
+      setError(null);
+    }
+ 
+    if (!match) {
+      fetchPending.current = false;
+      setError(
+        `Locale "${locale ?? config?.language}" not found, available options are "${locales.map(({ code }) => `${code}`).join(", ")}"`,
+      );
+    } else {
+      if (fetchPending.current) return
+      fetchPending.current = true;
+      previousLocale.current = match.code;
+      match
+        .fetch()
+        .then((response) => {
+          fetchPending.current = false;
+          setFetched(true);
+          updateLocales(response);
+          setLocales(response);
+        })
+        .catch((e) => {
+          fetchPending.current = false;
+          setFetched(true);
+          setError(`Error retrieving translations from Home Assistant: ${e?.message ?? e}`);
+        });
+    }
+  }, [config, fetched, setLocales, setError, locale]);
+
+  return fetched ? children : null;
+}

packages/core/src/HassConnect/HassContext.tsx

@@ -92,6 +92,12 @@ export interface Store {
   // used by some features to change which window context to use
   setWindowContext: (windowContext: Window) => void;
   windowContext: Window;
+  /** internal - callbacks that will fire when the connection disconnects with home assistant */
+  disconnectCallbacks: (() => void)[];
+  /** use this to trigger certain functionality when the web socket connection disconnects */
+  onDisconnect?: (cb: () => void) => void;
+  /** internal function which will trigger when the connection disconnects */
+  triggerOnDisconnect: () => void;
 }
 
 const IGNORE_KEYS_FOR_DIFF = ["last_changed", "last_updated", "context"];
@@ -192,6 +198,13 @@ export const useStore = create<Store>((set) => ({
     }),
   globalComponentStyles: {},
   setGlobalComponentStyles: (styles) => set(() => ({ globalComponentStyles: styles })),
+  disconnectCallbacks: [],
+  onDisconnect: (cb) => set((state) => ({ disconnectCallbacks: [...state.disconnectCallbacks, cb] })),
+  triggerOnDisconnect: () =>
+    set((state) => {
+      state.disconnectCallbacks.forEach((cb) => cb());
+      return { disconnectCallbacks: [] };
+    }),
 }));
 
 export interface HassContextProps {

packages/core/src/HassConnect/Provider.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useRef } from "react";
 // types
-import type { Connection, HassConfig, getAuthOptions as AuthOptions, Auth, UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { Connection, getAuthOptions as AuthOptions, Auth, UnsubscribeFunc } from "home-assistant-js-websocket";
 // methods
 import {
   getAuth,
@@ -23,8 +23,6 @@ import { isArray, snakeCase } from "lodash";
 import { SnakeOrCamelDomains, DomainService, Locales, CallServiceArgs, Route, ServiceResponse } from "@typings";
 import { saveTokens, loadTokens, clearTokens } from "./token-storage";
 import { useDebouncedCallback } from "use-debounce";
-import locales from "../hooks/useLocale/locales";
-import { updateLocales } from "../hooks/useLocale";
 import { HassContext, type HassContextProps, useStore } from "./HassContext";
 
 export interface HassProviderProps {
@@ -179,7 +177,7 @@ const tryConnection = async (hassUrl: string, hassToken?: string): Promise<Conne
     try {
       new URL(options.hassUrl);
     } catch (err: unknown) {
-      console.log("Error:", err);
+      console.error("Error:", err);
       return {
         type: "error",
         error: "Invalid URL",
@@ -246,10 +244,10 @@ const tryConnection = async (hassUrl: string, hassToken?: string): Promise<Conne
   };
 };
 
-export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot, windowContext }: HassProviderProps) {
+export function HassProvider({ children, hassUrl, hassToken, portalRoot, windowContext }: HassProviderProps) {
   const entityUnsubscribe = useRef<UnsubscribeFunc | null>(null);
   const authenticated = useRef(false);
-  const subscribedConfig = useRef(false);
+  const configUnsubscribe = useRef<UnsubscribeFunc | null>(null);
   const setHash = useStore((store) => store.setHash);
   const _hash = useStore((store) => store.hash);
   const routes = useStore((store) => store.routes);
@@ -264,12 +262,13 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
   const cannotConnect = useStore((store) => store.cannotConnect);
   const setCannotConnect = useStore((store) => store.setCannotConnect);
   const setAuth = useStore((store) => store.setAuth);
+  const triggerOnDisconnect = useStore((store) => store.triggerOnDisconnect);
+  // ready is set internally in the store when we have entities (setEntities does this)
   const ready = useStore((store) => store.ready);
   const setReady = useStore((store) => store.setReady);
   const setConfig = useStore((store) => store.setConfig);
   const setHassUrl = useStore((store) => store.setHassUrl);
   const setPortalRoot = useStore((store) => store.setPortalRoot);
-  const setLocales = useStore((store) => store.setLocales);
   const setWindowContext = useStore((store) => store.setWindowContext);
 
   useEffect(() => {
@@ -292,6 +291,10 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
     setReady(false);
     setRoutes([]);
     authenticated.current = false;
+    if (configUnsubscribe.current) {
+      configUnsubscribe.current();
+      configUnsubscribe.current = null;
+    }
     if (entityUnsubscribe.current) {
       entityUnsubscribe.current();
       entityUnsubscribe.current = null;
@@ -304,7 +307,7 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
       clearTokens();
       if (location) location.reload();
     } catch (err: unknown) {
-      console.log("Error:", err);
+      console.error("Error:", err);
       setError("Unable to log out!");
     }
   }, [reset, setError]);
@@ -323,10 +326,28 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
       setAuth(connectionResponse.auth);
       // store the connection to pass to the provider
       setConnection(connectionResponse.connection);
+      entityUnsubscribe.current = subscribeEntities(connectionResponse.connection, ($entities) => {
+        setEntities($entities);
+      });
+      configUnsubscribe.current = subscribeConfig(connectionResponse.connection, (newConfig) => {
+        setConfig(newConfig);
+      });
+      connectionResponse.connection.addEventListener("disconnected", () => {
+        console.error("Disconnected from Home Assistant, reconnecting...");
+        triggerOnDisconnect();
+        // on disconnection, reset local state
+        reset();
+        // try to reconnect
+        handleConnect();
+      });
+      connectionResponse.connection.addEventListener("reconnect-error", (_, eventData) => {
+        console.error("Reconnection error:", eventData);
+        // on connection error, reset local state
+        reset();
+      });
       _connectionRef.current = connectionResponse.connection;
-      authenticated.current = true;
     }
-  }, [hassUrl, hassToken, setError, setAuth, setConnection, setCannotConnect]);
+  }, [hassUrl, hassToken, triggerOnDisconnect, setError, setCannotConnect, setAuth, setConnection, setEntities, setConfig, reset]);
 
   useEffect(() => {
     setHassUrl(hassUrl);
@@ -379,64 +400,14 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
         data: response.statusText,
       };
     } catch (e) {
-      console.log("Error:", e);
+      console.error("API Error:", e);
       return {
         status: "error",
         data: `API Request failed for endpoint "${endpoint}", follow instructions here: https://shannonhochkins.github.io/ha-component-kit/?path=/docs/core-hooks-usehass-hass-callapi--docs.`,
       };
     }
   }
 
-  const fetchLocale = useCallback(
-    async (config: HassConfig | null): Promise<Record<string, string>> => {
-      const match = locales.find(({ code }) => code === (locale ?? config?.language));
-      if (!match) {
-        throw new Error(
-          `Locale "${locale ?? config?.language}" not found, available options are "${locales.map(({ code }) => `${code}`).join(", ")}"`,
-        );
-      } else {
-        return await match.fetch();
-      }
-    },
-    [locale],
-  );
-
-  useEffect(() => {
-    if (!locale) return;
-    // purposely sending null for the config object as we're fetching a different language specified by the user
-    fetchLocale(null)
-      .then((locales) => {
-        updateLocales(locales);
-        setLocales(locales);
-      })
-      .catch((e) => {
-        setError(`Error retrieving translations from Home Assistant: ${e?.message ?? e}`);
-      });
-  }, [locale, fetchLocale, setLocales, setError]);
-
-  useEffect(() => {
-    if (!connection || subscribedConfig.current) return;
-    subscribedConfig.current = true;
-    // Subscribe to config updates
-    const unsubscribe = subscribeConfig(connection, (newConfig) => {
-      fetchLocale(newConfig)
-        .then((locales) => {
-          // purposely setting config here to delay the rendering process of the application until locales are retrieved
-          setConfig(newConfig);
-          updateLocales(locales);
-          setLocales(locales);
-        })
-        .catch((e) => {
-          setConfig(newConfig);
-          setError(`Error retrieving translations from Home Assistant: ${e?.message ?? e}`);
-        });
-    });
-    // Cleanup function to unsubscribe on unmount
-    return () => {
-      unsubscribe();
-    };
-  }, [connection, setLocales, fetchLocale, setConfig, setError]);
-
   useEffect(() => {
     if (location.hash === "") return;
     if (location.hash.replace("#", "") === _hash) return;
@@ -540,46 +511,26 @@ export function HassProvider({ children, hassUrl, hassToken, locale, portalRoot,
     [connection, ready],
   );
 
-  useEffect(() => {
-    if (connection && entityUnsubscribe.current === null) {
-      entityUnsubscribe.current = subscribeEntities(connection, ($entities) => {
-        setEntities($entities);
-      });
-    }
-  }, [connection, setEntities]);
-
   useEffect(() => {
     return () => {
-      authenticated.current = false;
-      if (entityUnsubscribe.current) {
-        entityUnsubscribe.current();
-        entityUnsubscribe.current = null;
-      }
+      reset();
     };
-  }, []);
+  }, [reset]);
 
   const debounceConnect = useDebouncedCallback(
     async () => {
       try {
-        if (_connectionRef.current && !connection) {
-          setConnection(_connectionRef.current);
-          authenticated.current = true;
-          return;
-        }
-        if (!_connectionRef.current && connection) {
-          _connectionRef.current = connection;
-          authenticated.current = true;
-          return;
+        if (authenticated.current) {
+          reset();
         }
-        if (authenticated.current) return;
         authenticated.current = true;
         await handleConnect();
       } catch (e) {
         const message = handleError(e);
         setError(`Unable to connect to Home Assistant, please check the URL: "${message}"`);
       }
     },
-    100,
+    25,
     {
       leading: true,
       trailing: false,

packages/core/src/HassConnect/index.tsx

@@ -4,6 +4,7 @@ import { HassProvider } from "./Provider";
 import type { HassProviderProps } from "./Provider";
 import styled from "@emotion/styled";
 import { keyframes } from "@emotion/react";
+import { FetchLocale } from "./FetchLocale";
 
 export type HassConnectProps = {
   /** Any react node to render when authenticated */
@@ -107,14 +108,16 @@ export const HassConnect = memo(function HassConnect({
         <>
           {ready ? (
             <Wrapper>
-              {onReady &&
-                !onReadyCalled.current &&
-                ((() => {
-                  onReady();
-                  onReadyCalled.current = true;
-                })(),
-                null)}
-              {children}
+              <FetchLocale locale={options.locale}>
+                {onReady &&
+                  !onReadyCalled.current &&
+                  ((() => {
+                    onReady();
+                    onReadyCalled.current = true;
+                  })(),
+                  null)}
+                {children}
+              </FetchLocale>
             </Wrapper>
           ) : (
             <Wrapper>{loading}</Wrapper>