@unitedstatespowersquadrons/components 1.2.8 → 1.2.9-pre.1

package/Reducer/Example/SubComponent.tsx

@@ -4,7 +4,7 @@ import { useAppCableSubscription, useAppDispatch, useAppState } from "./reducer"
 const SubComponent = () => {
   const { something } = useAppState();
   const dispatch = useAppDispatch();
-  const channel = useAppCableSubscription(dispatch, "ExampleChannel");
+  const channel = useAppCableSubscription({ channel: "ExampleChannel", dispatch });
 
   const handleDoSomething = () => {
     const newSomething = "changed";

package/Reducer/Example/appstate.tsx

@@ -1,4 +1,4 @@
 import { AppState } from "./types";
-import buildUnreducibleState from "../buildUnreducibleState";
+import buildUnreducibleState from "../useBuildUnreducibleState";
 
 export const { AppProvider, useAppState } = buildUnreducibleState<AppState>();

package/Reducer/index.tsx

@@ -1,4 +1,4 @@
 export { default as wrapDispatch } from "./wrapDispatch";
-export { default as buildReducer } from "./buildReducer";
-export { default as buildUnreducibleState } from "./buildUnreducibleState";
+export { default as buildReducer } from "./useBuildReducer";
+export { default as buildUnreducibleState } from "./useBuildUnreducibleState";
 export type * from "./types";

package/Reducer/types.ts

@@ -23,6 +23,22 @@ export interface GenericAppAction {
 
 export type CableAction = { data: object; type: "receivedCable" };
 
+export interface ChannelSubscriptionOptions {
+  dispatch: DispatchFunc<CableAction>;
+  channel: string;
+  [key: string]: unknown;
+}
+
+export interface ChannelCallbacks {
+  connected?: () => void;
+  disconnected?: () => void;
+  received?: () => void;
+  rejected?: () => void;
+  unsubscribe: () => void;
+  [key: string]: () => void | undefined;
+}
+
+
 export type RailsAppAction<R extends RailsResponse = RailsResponse> =
   | { type: "saveComplete"; res: R }
   | { type: "saveFailed" };

package/Reducer/{buildReducer.tsx → useBuildReducer.tsx}

@@ -1,15 +1,15 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { Draft, produce } from "immer";
 import { useImmerReducer } from "use-immer";
 import { Cable, createConsumer } from "@rails/actioncable";
-import { CableAction, DispatchFunc, ReducerHandler } from "./types";
+import { ChannelCallbacks, ChannelSubscriptionOptions, ReducerHandler } from "./types";
 
 interface InitialAppProps<AppState> {
   initialState: AppState;
   children: React.ReactNode;
 }
 
-export default function buildReducer<AppState, AppAction>(
+export default function useBuildReducer<AppState, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
   handlers: ReducerHandler<AppAction>[] = [],
   actionCableUrl?: string
@@ -19,6 +19,7 @@ export default function buildReducer<AppState, AppAction>(
   const CableContext = createContext<Cable | null>(null);
 
   const cable = actionCableUrl ? createConsumer(actionCableUrl) : null;
+  const cableRef = useRef<ChannelCallbacks>(null);
 
   function AppProvider(props: InitialAppProps<AppState>) {
     const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
@@ -60,15 +61,23 @@ export default function buildReducer<AppState, AppAction>(
     return context;
   }
 
-  function useAppCableSubscription(dispatch: DispatchFunc<CableAction>, channel: string) {
+  function useAppCableSubscription(options: ChannelSubscriptionOptions) {
     const appCable = useAppCable();
 
-    return(
-      appCable.subscriptions.create(
-        { channel },
-        { received: (data: object) => dispatch({ data, type: "receivedCable" } as CableAction) }
-      )
-    );
+    useEffect(() => {
+      const { channel, dispatch, ...rest } = options;
+
+      cableRef.current = appCable.subscriptions.create(
+        { channel, ...rest } as ChannelSubscriptionOptions,
+        {
+          received: (data: object) => dispatch({ data, type: "receivedCable" }),
+        } as ChannelCallbacks
+      );
+
+      return () => cableRef.current!.unsubscribe();
+    }, [appCable.subscriptions, options]);
+
+    return(cable!);
   }
 
   function useAppDispatch() {

package/Reducer/{buildUnreducibleState.tsx → useBuildUnreducibleState.tsx}

@@ -5,7 +5,7 @@ interface InitialAppProps<AppState> {
   children: React.ReactNode;
 }
 
-export default function buildUnreducibleState<AppState>() {
+export default function useBuildUnreducibleState<AppState>() {
   const StateContext = createContext<AppState | null>(null);
 
   const AppProvider = (props: InitialAppProps<AppState>) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.8",
+  "version": "1.2.9-pre.1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {