quidproquo-web-react 0.0.262 → 0.1.0

package/lib/esm/dateTime/hooks/useTimeAgo.js

@@ -0,0 +1,22 @@
+import { formatTimeAgo, getTimeAgoUpdateIntervalMs } from 'quidproquo-web';
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * Returns a relative time phrase for `date` (e.g. "5 minutes ago") that
+ * updates itself over time. The re-render cadence adapts to the age of the
+ * date, so recent times tick every second and older ones only update hourly.
+ */
+export const useTimeAgo = (date, locale) => {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        let timeoutId;
+        const schedule = () => {
+            timeoutId = setTimeout(() => {
+                setNow(new Date());
+                schedule();
+            }, getTimeAgoUpdateIntervalMs(date, new Date()));
+        };
+        schedule();
+        return () => clearTimeout(timeoutId);
+    }, [date]);
+    return useMemo(() => formatTimeAgo(date, now, locale), [date, now, locale]);
+};

package/lib/esm/dateTime/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateTime';
+export * from './hooks';

package/lib/esm/dateTime/index.js

@@ -0,0 +1,2 @@
+export * from './DateTime';
+export * from './hooks';

package/lib/esm/dateTime/logic/formatTimeAgo.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Formats the distance between `date` and `now` as a relative phrase
+ * (e.g. "5 minutes ago", "in 2 hours") using the native Intl.RelativeTimeFormat.
+ * Past dates are negative, future dates are positive.
+ */
+export declare const formatTimeAgo: (date: Date, now?: Date, locale?: string | string[]) => string;
+/**
+ * How long until the relative phrase could next change, so callers can
+ * re-render no more often than necessary.
+ */
+export declare const getTimeAgoUpdateIntervalMs: (date: Date, now?: Date) => number;

package/lib/esm/dateTime/logic/formatTimeAgo.js

@@ -0,0 +1,44 @@
+// Each amount is "how many of this unit make up one of the next unit".
+const DIVISIONS = [
+    { amount: 60, unit: 'seconds' },
+    { amount: 60, unit: 'minutes' },
+    { amount: 24, unit: 'hours' },
+    { amount: 7, unit: 'days' },
+    { amount: 4.34524, unit: 'weeks' },
+    { amount: 12, unit: 'months' },
+    { amount: Number.POSITIVE_INFINITY, unit: 'years' },
+];
+/**
+ * Formats the distance between `date` and `now` as a relative phrase
+ * (e.g. "5 minutes ago", "in 2 hours") using the native Intl.RelativeTimeFormat.
+ * Past dates are negative, future dates are positive.
+ */
+export const formatTimeAgo = (date, now = new Date(), locale) => {
+    const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    // Seconds between the two dates; negative for the past.
+    let duration = (date.getTime() - now.getTime()) / 1000;
+    for (const division of DIVISIONS) {
+        if (Math.abs(duration) < division.amount) {
+            return formatter.format(Math.round(duration), division.unit);
+        }
+        duration /= division.amount;
+    }
+    return formatter.format(Math.round(duration), 'years');
+};
+/**
+ * How long until the relative phrase could next change, so callers can
+ * re-render no more often than necessary.
+ */
+export const getTimeAgoUpdateIntervalMs = (date, now = new Date()) => {
+    const seconds = Math.abs((date.getTime() - now.getTime()) / 1000);
+    if (seconds < 60) {
+        return 1000; // seconds tick over
+    }
+    if (seconds < 60 * 60) {
+        return 60 * 1000; // minutes tick over
+    }
+    if (seconds < 60 * 60 * 24) {
+        return 60 * 60 * 1000; // hours tick over
+    }
+    return 60 * 60 * 24 * 1000; // days or coarser
+};

package/lib/esm/dateTime/logic/index.d.ts

@@ -0,0 +1 @@
+export * from './formatTimeAgo';

package/lib/esm/dateTime/logic/index.js

@@ -0,0 +1 @@
+export * from './formatTimeAgo';

package/lib/esm/hooks/asmj/QpqContextProvider.d.ts

@@ -6,5 +6,6 @@ interface QpqContextProviderProps<T> {
     children: ReactNode;
 }
 export declare const useQpqContextValues: () => QpqContext<any>;
-export declare const QpqContextProvider: <T>({ contextIdentifier, value, children }: QpqContextProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const useQpqContextValue: <T>(contextIdentifier: QpqContextIdentifier<T>) => T;
+export declare const QpqContextProvider: <T>({ contextIdentifier, value, children }: QpqContextProviderProps<T>) => import("react").JSX.Element;
 export {};

package/lib/esm/hooks/asmj/QpqContextProvider.js

@@ -5,6 +5,10 @@ const qpqReactContext = createContext({});
 export const useQpqContextValues = () => {
     return useContext(qpqReactContext);
 };
+export const useQpqContextValue = (contextIdentifier) => {
+    const context = useQpqContextValues();
+    return contextIdentifier.uniqueName in context ? context[contextIdentifier.uniqueName] : contextIdentifier.defaultValue;
+};
 export const QpqContextProvider = ({ contextIdentifier, value, children }) => {
     // Get the parent context value
     const parentContext = useContext(qpqReactContext);

package/lib/esm/hooks/asmj/QpqRuntimeEffectCatcher.d.ts

@@ -7,8 +7,8 @@ type QpqRuntimeEffectCatcher = {
 };
 export declare const QpqRuntimeEffectCatcherComponent: <TState, TAction, TApi extends QpqApi>({ children, runtime, name, }: QpqRuntimeEffectCatcher & {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const QpqRuntimeEffectCatcher: import("react").MemoExoticComponent<(<TState, TAction, TApi extends QpqApi>({ children, runtime, name, }: QpqRuntimeEffectCatcher & {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element)>;
+}) => import("react").JSX.Element)>;
 export {};

package/lib/esm/hooks/asmj/index.d.ts

@@ -4,4 +4,5 @@ export * from './createQpqRuntimeDefinition';
 export * from './QpqContextProvider';
 export * from './QpqMappedApi';
 export * from './QpqRuntimeEffectCatcher';
+export * from './useBubbleReducer';
 export * from './useQpqRuntime';

package/lib/esm/hooks/asmj/index.js

@@ -4,4 +4,5 @@ export * from './createQpqRuntimeDefinition';
 export * from './QpqContextProvider';
 export * from './QpqMappedApi';
 export * from './QpqRuntimeEffectCatcher';
+export * from './useBubbleReducer';
 export * from './useQpqRuntime';

package/lib/esm/hooks/asmj/useBubbleReducer.d.ts

@@ -0,0 +1,2 @@
+import { QpqBubbleReducer } from './bubbleReducer';
+export declare const useBubbleReducer: <TState>(reducer: QpqBubbleReducer<TState, any>, initialState: TState | (() => TState)) => [TState, (action: unknown) => void];

package/lib/esm/hooks/asmj/useBubbleReducer.js

@@ -0,0 +1,18 @@
+import { useCallback, useContext, useRef, useState } from 'react';
+import { BubbleReducerDispatchContext } from './bubbleReducer';
+export const useBubbleReducer = (reducer, initialState) => {
+    const parentDispatch = useContext(BubbleReducerDispatchContext);
+    const [state, setState] = useState(initialState);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const dispatch = useCallback((action) => {
+        const [newState, preventBubble] = reducer(stateRef.current, action);
+        if (preventBubble) {
+            setState(newState);
+        }
+        else {
+            parentDispatch(action);
+        }
+    }, [parentDispatch, reducer]);
+    return [state, dispatch];
+};

package/lib/esm/hooks/asmj/useQpqRuntime.d.ts

@@ -1,4 +1,6 @@
-import { Story } from 'quidproquo-core';
+import { ActionProcessorListResolver, Story } from 'quidproquo-core';
+import { Dispatch } from 'react';
 import { QpqRuntimeDefinition } from './createQpqRuntimeDefinition';
 import { QpqApi, QpqMappedApi } from './QpqMappedApi';
-export declare function useQpqRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string): [QpqMappedApi<TApi>, TState, (action: any) => void];
+export type ActionProcessorListResolverFactory<TState = any> = (dispatch: Dispatch<any>, getCurrentState: () => TState) => ActionProcessorListResolver;
+export declare function useQpqRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [QpqMappedApi<TApi>, TState, (action: any) => void];

package/lib/esm/hooks/asmj/useQpqRuntime.js

@@ -2,12 +2,16 @@ import { useEffect, useMemo, useState } from 'react';
 import { useQpq } from '../useQpq';
 import { getStateActionProcessor } from './actionProcessor';
 import { useQpqRuntimeBubblingReducer } from './bubbleReducer';
-export function useQpqRuntime(atom, mainStory, name) {
+export function useQpqRuntime(atom, mainStory, name, getActionProcessors = () => async () => ({})) {
     const atomInfo = useMemo(() => atom(name), [atom, name]);
     const [state, dispatch, getCurrentState] = useQpqRuntimeBubblingReducer(atom, name);
     // Api generators are memoized to prevent unnecessary re-renders.
     const [memoedApiGenerators] = useState(() => atomInfo.api);
-    const resolver = useQpq(getStateActionProcessor(dispatch, getCurrentState));
+    const mergedProcessors = async (qpqConfig, dynamicModuleLoader) => ({
+        ...(await getStateActionProcessor(dispatch, getCurrentState)(qpqConfig, dynamicModuleLoader)),
+        ...(await getActionProcessors(dispatch, getCurrentState)(qpqConfig, dynamicModuleLoader)),
+    });
+    const resolver = useQpq(mergedProcessors);
     // Wrap and remap each API generator using the resolver.
     const api = useMemo(() => {
         const wrapped = {};

package/lib/esm/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './asmj';
 export * from './useAsyncEffect';
+export * from './useComputed';
 export * from './useEffectCallback';
 export * from './useFastCallback';
 export * from './useMetadata';

package/lib/esm/hooks/index.js

@@ -1,5 +1,6 @@
 export * from './asmj';
 export * from './useAsyncEffect';
+export * from './useComputed';
 export * from './useEffectCallback';
 export * from './useFastCallback';
 export * from './useMetadata';

package/lib/esm/hooks/useComputed.d.ts

@@ -0,0 +1 @@
+export declare function useComputed<TState extends object, T>(state: TState, selector: (state: TState) => T): T;

package/lib/esm/hooks/useComputed.js

@@ -0,0 +1,4 @@
+export function useComputed(state, selector) {
+    // TODO: use proxies to resolve deps and only return updated values when the deps change.
+    return selector(state);
+}

package/lib/esm/hooks/useQpq.js

@@ -1,6 +1,7 @@
 import { getWebActionProcessors } from 'quidproquo-actionprocessor-web';
 import { createRuntime, defineModule, QpqRuntimeType, } from 'quidproquo-core';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useActionProcessors } from '../actionProcessor';
 import { useQpqContextValues } from './asmj/QpqContextProvider';
 function* withVersionCheck(story, versionRef, capturedVersion) {
     let nextValue = undefined;
@@ -25,6 +26,7 @@ const logger = {
 };
 export function useQpq(getActionProcessors = async () => ({})) {
     const qpqContextValues = useQpqContextValues();
+    const contextGetActionProcessors = useActionProcessors();
     const versionRef = useRef(0);
     useEffect(() => {
         return () => {
@@ -36,6 +38,7 @@ export function useQpq(getActionProcessors = async () => ({})) {
         context: qpqContextValues,
     }, async (qpqConfig, dynamicModuleLoader) => ({
         ...(await getWebActionProcessors(qpqConfig, dynamicModuleLoader)),
+        ...(await contextGetActionProcessors(qpqConfig, dynamicModuleLoader)),
         ...(await getActionProcessors(qpqConfig, dynamicModuleLoader)),
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, QpqRuntimeType.UI, async (_runtime) => {
         // noop

package/lib/esm/index.d.ts

@@ -1,7 +1,9 @@
 import 'symbol-observable';
+export * from './actionProcessor';
 export * from './api';
 export * from './auth';
 export * from './baseUrl';
+export * from './dateTime';
 export * from './hooks';
 export * from './state';
 export * from './useFieldBinding';

package/lib/esm/index.js

@@ -1,7 +1,9 @@
 import 'symbol-observable';
+export * from './actionProcessor';
 export * from './api';
 export * from './auth';
 export * from './baseUrl';
+export * from './dateTime';
 export * from './hooks';
 export * from './state';
 export * from './useFieldBinding';

package/lib/esm/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.d.ts

@@ -0,0 +1,4 @@
+import { ActionProcessorList } from 'quidproquo-core';
+import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
+import { RefObject } from 'react';
+export declare const getServiceRequestActionProcessor: (sendEventRef: RefObject<((event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, "correlationId">) => Promise<any>) | null>) => ActionProcessorList;

package/lib/esm/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.js

@@ -0,0 +1,11 @@
+import { actionResult, actionResultError } from 'quidproquo-core';
+import { ServiceActionType } from 'quidproquo-webserver';
+export const getServiceRequestActionProcessor = (sendEventRef) => ({
+    [ServiceActionType.Request]: async ({ serviceName, method, payload, }) => {
+        const response = await sendEventRef.current?.({ type: `qpq/serviceRequest/${serviceName}/${method}`, payload });
+        if (response && !response.success) {
+            return actionResultError(response.error.errorType, response.error.errorText, response.error.errorStack);
+        }
+        return actionResult(response?.result);
+    },
+});

package/lib/esm/webSocketQueue/hooks/index.d.ts

@@ -1,2 +1,4 @@
+export * from './actionProcessor/getServiceRequestActionProcessor';
+export * from './useQpqWebsocketQueueRuntime';
 export * from './useSubscribeToWebSocketQueueEvent';
 export * from './useWebsocketQueueSendEvent';

package/lib/esm/webSocketQueue/hooks/index.js

@@ -1,2 +1,4 @@
+export * from './actionProcessor/getServiceRequestActionProcessor';
+export * from './useQpqWebsocketQueueRuntime';
 export * from './useSubscribeToWebSocketQueueEvent';
 export * from './useWebsocketQueueSendEvent';

package/lib/esm/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.d.ts

@@ -0,0 +1,11 @@
+import { Story } from 'quidproquo-core';
+import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
+import { QpqRuntimeDefinition } from '../../hooks/asmj/createQpqRuntimeDefinition';
+import { QpqApi, QpqMappedApi } from '../../hooks/asmj/QpqMappedApi';
+import { ActionProcessorListResolverFactory } from '../../hooks/asmj/useQpqRuntime';
+export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [
+    QpqMappedApi<TApi>,
+    TState,
+    (action: any) => void,
+    (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>
+];

package/lib/esm/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.js

@@ -0,0 +1,24 @@
+import { WebSocketQueueServerMessageEventType } from 'quidproquo-webserver';
+import { useRef } from 'react';
+import { useQpqRuntime } from '../../hooks/asmj/useQpqRuntime';
+import { getServiceRequestActionProcessor } from './actionProcessor/getServiceRequestActionProcessor';
+import { useWebsocketQueueSendEvent } from './useWebsocketQueueSendEvent';
+export function useQpqWebsocketQueueRuntime(atom, mainStory, name, getActionProcessors) {
+    const sendEventRef = useRef(null);
+    const mergedFactory = (dispatch, getCurrentState) => {
+        const serviceResolver = async () => getServiceRequestActionProcessor(sendEventRef);
+        const callerResolver = getActionProcessors?.(dispatch, getCurrentState);
+        return async (qpqConfig, dynamicModuleLoader) => ({
+            ...(await serviceResolver()),
+            ...(callerResolver ? await callerResolver(qpqConfig, dynamicModuleLoader) : {}),
+        });
+    };
+    const [api, state, dispatch] = useQpqRuntime(atom, mainStory, name, mergedFactory);
+    const sendEvent = useWebsocketQueueSendEvent((event) => {
+        if (event.type === WebSocketQueueServerMessageEventType.StateDispatch) {
+            dispatch(event.payload);
+        }
+    });
+    sendEventRef.current = sendEvent;
+    return [api, state, dispatch, sendEvent];
+}

package/lib/esm/webSocketQueue/hooks/useWebsocketQueueSendEvent.d.ts

@@ -1,2 +1,2 @@
 import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
-export declare const useWebsocketQueueSendEvent: <E extends AnyWebSocketQueueEventMessageWithCorrelation>() => (event: E) => void;
+export declare const useWebsocketQueueSendEvent: <TSend extends AnyWebSocketQueueEventMessageWithCorrelation>(onCorrelatedMessage?: (event: AnyWebSocketQueueEventMessageWithCorrelation) => void) => (event: Omit<TSend, "correlationId">) => Promise<any>;

package/lib/esm/webSocketQueue/hooks/useWebsocketQueueSendEvent.js

@@ -1,5 +1,55 @@
-import { useWebsocketSendEvent } from '../../websocket';
-export const useWebsocketQueueSendEvent = () => {
-    const sendMessage = useWebsocketSendEvent();
-    return sendMessage;
+import { WebsocketServiceEvent } from 'quidproquo-web';
+import { WebSocketQueueServerMessageEventType } from 'quidproquo-webserver';
+import { useRef } from 'react';
+import { useFastCallback } from '../../hooks';
+import { useSubscribeToWebsocket, useWebsocketApi } from '../../websocket';
+export const useWebsocketQueueSendEvent = (onCorrelatedMessage) => {
+    const websocketApi = useWebsocketApi();
+    const activeCorrelationsRef = useRef(new Set());
+    const pendingResolversRef = useRef(new Map());
+    // Subscribe to ALL messages, filter by active correlationIds
+    const handleMessage = useFastCallback((_ws, rawEvent) => {
+        if (!rawEvent)
+            return;
+        try {
+            const parsed = JSON.parse(rawEvent.data);
+            if (!parsed.correlationId || !activeCorrelationsRef.current.has(parsed.correlationId)) {
+                return;
+            }
+            if (parsed.type === WebSocketQueueServerMessageEventType.ServiceRequestResponse) {
+                const resolve = pendingResolversRef.current.get(parsed.correlationId);
+                if (resolve) {
+                    resolve(parsed.payload);
+                    pendingResolversRef.current.delete(parsed.correlationId);
+                    activeCorrelationsRef.current.delete(parsed.correlationId);
+                }
+            }
+            else {
+                onCorrelatedMessage?.(parsed);
+            }
+        }
+        catch {
+            // Not JSON or not a queue message — ignore
+        }
+    });
+    useSubscribeToWebsocket(WebsocketServiceEvent.MESSAGE, handleMessage);
+    // Send with auto-generated correlationId, register it as active
+    const sendEvent = useFastCallback((event) => {
+        if (!websocketApi) {
+            return Promise.resolve(undefined);
+        }
+        const correlationId = crypto.randomUUID();
+        activeCorrelationsRef.current.add(correlationId);
+        const isServiceRequest = event.type.startsWith('qpq/serviceRequest/');
+        if (isServiceRequest) {
+            const promise = new Promise((resolve) => {
+                pendingResolversRef.current.set(correlationId, resolve);
+            });
+            websocketApi.sendEvent({ ...event, correlationId });
+            return promise;
+        }
+        websocketApi.sendEvent({ ...event, correlationId });
+        return Promise.resolve(undefined);
+    });
+    return sendEvent;
 };

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthContext.d.ts

@@ -0,0 +1 @@
+export declare const WebSocketAuthContext: import("react").Context<boolean>;

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const WebSocketAuthContext = createContext(false);

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -1,11 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useWebsocketAuthSync, useWebsocketPingPong } from './hooks';
+import { WebSocketAuthContext } from './WebSocketAuthContext';
 const component = ({ children, accessToken }) => {
-    useWebsocketAuthSync(accessToken);
+    const isAuthenticated = useWebsocketAuthSync(accessToken);
     // Keep the active websocket alive
     useWebsocketPingPong();
-    // This fragment is not useless!
-    return _jsx(_Fragment, { children: children });
+    return (_jsx(WebSocketAuthContext.Provider, { value: isAuthenticated, children: children }));
 };
 export const WebSocketAuthSync = memo(component);

package/lib/esm/websocket/WebSocketAuthSync/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useWebsocketAuthSync';
+export * from './useWebSocketIsAuthenticated';
 export * from './useWebsocketPingPong';

package/lib/esm/websocket/WebSocketAuthSync/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useWebsocketAuthSync';
+export * from './useWebSocketIsAuthenticated';
 export * from './useWebsocketPingPong';

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebSocketIsAuthenticated.d.ts

@@ -0,0 +1 @@
+export declare const useWebSocketIsAuthenticated: () => boolean;

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebSocketIsAuthenticated.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { WebSocketAuthContext } from '../WebSocketAuthContext';
+export const useWebSocketIsAuthenticated = () => {
+    return useContext(WebSocketAuthContext);
+};

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.d.ts

@@ -1,2 +1,2 @@
 import { AuthenticationInfo } from 'quidproquo-core';
-export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo["accessToken"]) => void;
+export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo["accessToken"]) => boolean;

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -1,33 +1,36 @@
 import { WebsocketServiceEvent } from 'quidproquo-web';
-import { WebSocketQueueClientMessageEventType, } from 'quidproquo-webserver';
-import { useEffect } from 'react';
+import { WebSocketQueueClientMessageEventType, WebSocketQueueServerMessageEventType, } from 'quidproquo-webserver';
+import { useEffect, useState } from 'react';
 import { useFastCallback } from '../../../hooks';
-import { useSubscribeToWebsocket, useWebsocketApi, useWebsocketSendEvent } from '../../hooks';
+import { useSubscribeToWebsocket, useSubscribeToWebSocketEvent, useWebsocketApi, useWebsocketSendEvent } from '../../hooks';
 export const useWebsocketAuthSync = (accessToken) => {
     const sendMessage = useWebsocketSendEvent();
     const websocketApi = useWebsocketApi();
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
     const updateAuthTokens = useFastCallback(() => {
         if (!websocketApi?.isConnected()) {
             return;
         }
         if (accessToken) {
-            const authMessage = {
+            sendMessage({
                 type: WebSocketQueueClientMessageEventType.Authenticate,
                 payload: {
                     accessToken: accessToken,
                 },
-            };
-            sendMessage(authMessage);
+            });
         }
-        else {
-            const authMessage = {
+        else if (isAuthenticated) {
+            sendMessage({
                 type: WebSocketQueueClientMessageEventType.Unauthenticate,
-            };
-            sendMessage(authMessage);
+            });
         }
     });
+    useSubscribeToWebSocketEvent(WebSocketQueueServerMessageEventType.Authenticated, () => setIsAuthenticated(true));
+    useSubscribeToWebSocketEvent(WebSocketQueueServerMessageEventType.Unauthenticated, () => setIsAuthenticated(false));
     // Sync the tokens in on open
     useSubscribeToWebsocket(WebsocketServiceEvent.OPEN, updateAuthTokens);
+    useSubscribeToWebsocket(WebsocketServiceEvent.CLOSE, () => setIsAuthenticated(false));
     // Sync the tokens when they change
-    useEffect(updateAuthTokens, [accessToken, websocketApi]);
+    useEffect(updateAuthTokens, [accessToken, websocketApi, isAuthenticated]);
+    return isAuthenticated;
 };

package/lib/esm/websocket/WebSocketAuthSync/index.d.ts

@@ -1 +1,2 @@
+export * from './hooks/useWebSocketIsAuthenticated';
 export * from './WebSocketAuthSync';

package/lib/esm/websocket/WebSocketAuthSync/index.js

@@ -1 +1,2 @@
+export * from './hooks/useWebSocketIsAuthenticated';
 export * from './WebSocketAuthSync';

package/lib/esm/websocket/hooks/useSubscribeToWebSocketEvent.js

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
+import { useFastCallback } from '../../hooks';
 import { useWebsocketApi } from './useWebsocketApi';
 export const useSubscribeToWebSocketEvent = (subscriptionType, callback) => {
+    const stableCallback = useFastCallback(callback);
     const websocketService = useWebsocketApi();
     useEffect(() => {
-        const subscriptionHandle = websocketService?.subscribeToEvent(subscriptionType, callback);
+        const subscriptionHandle = websocketService?.subscribeToEvent(subscriptionType, stableCallback);
         return () => {
             if (subscriptionHandle) {
                 websocketService?.unsubscribe(subscriptionHandle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };

package/lib/esm/websocket/hooks/useSubscribeToWebsocket.js

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
+import { useFastCallback } from '../../hooks';
 import { useWebsocketApi } from './useWebsocketApi';
 export const useSubscribeToWebsocket = (subscriptionType, callback) => {
+    const stableCallback = useFastCallback(callback);
     const websocketService = useWebsocketApi();
     useEffect(() => {
-        const handle = websocketService?.subscribe(subscriptionType, callback);
+        const handle = websocketService?.subscribe(subscriptionType, stableCallback);
         return () => {
             if (handle) {
                 websocketService?.unsubscribe(handle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.0.262",
+  "version": "0.1.0",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -32,8 +32,10 @@
   },
   "homepage": "https://github.com/joe-coady/quidproquo#readme",
   "devDependencies": {
-    "quidproquo-core": "0.0.262",
-    "quidproquo-tsconfig": "0.0.262",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "quidproquo-core": "0.1.0",
+    "quidproquo-tsconfig": "0.1.0",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
@@ -41,10 +43,10 @@
   },
   "dependencies": {
     "jotai": "^2.12.1",
-    "symbol-observable": "^4.0.0",
-    "quidproquo-web": "0.0.262",
-    "quidproquo-webserver": "0.0.262",
-    "quidproquo-actionprocessor-node": "0.0.262",
-    "quidproquo-actionprocessor-web": "0.0.262"
+    "quidproquo-actionprocessor-node": "0.1.0",
+    "quidproquo-actionprocessor-web": "0.1.0",
+    "quidproquo-web": "0.1.0",
+    "quidproquo-webserver": "0.1.0",
+    "symbol-observable": "^4.0.0"
   }
-}
+}