@unitedstatespowersquadrons/components 1.2.8-pre.2 → 1.2.9-pre.1

package/Reducer/Example/SubComponent.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { useAppDispatch, useAppState } from "./reducer";
+import { useAppCableSubscription, useAppDispatch, useAppState } from "./reducer";
 
 const SubComponent = () => {
   const { something } = useAppState();
   const dispatch = useAppDispatch();
+  const channel = useAppCableSubscription({ channel: "ExampleChannel", dispatch });
 
   const handleDoSomething = () => {
     const newSomething = "changed";
@@ -11,10 +12,15 @@ const SubComponent = () => {
     dispatch({ something: newSomething, type: "doSomething" });
   };
 
+  const sendUpstreamMessage = () => {
+    channel.send({ message: "upstream" });
+  };
+
   return(
-    <div onClick={handleDoSomething}>
-      {something}
-    </div>
+    <>
+      <div onClick={handleDoSomething}>{something}</div>
+      <div onClick={sendUpstreamMessage}>Send Upstream</div>
+    </>
   );
 };
 

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/Example/reducer.tsx

@@ -1,7 +1,7 @@
 import { Draft } from "immer";
 import * as ReducerHandlers from "./reducerHandlers";
 import { AppState, ServerResponse } from "./types";
-import { buildReducer, RailsAppAction } from "../";
+import { buildReducer, CableAction, RailsAppAction } from "../";
 
 // If you want to add additional data to the server response, use type `RailsAppAction<ServerResponse>`.
 // Otherwise, just use type `RailsAppAction`.
@@ -9,6 +9,7 @@ import { buildReducer, RailsAppAction } from "../";
 // If you need to access the available `type`s for your defined AppAction, use `AppActionType<AppAction>`
 //
 export type AppAction =
+  | CableAction
   | RailsAppAction<ServerResponse>
   | { type: "doSomething"; something: string };
 
@@ -20,10 +21,16 @@ export const reducer = (draft: Draft<AppState>, action: AppAction): void => {
     draft.something = action.something;
 
     break;
+  case "receivedCable": break;
   case "saveComplete": break;
   case "saveFailed": break;
   default: return type satisfies never;
   }
 };
 
-export const { AppProvider, useAppDispatch, useAppState } = buildReducer(reducer, Object.values(ReducerHandlers));
+export const {
+  AppProvider,
+  useAppCableSubscription,
+  useAppDispatch,
+  useAppState,
+} = buildReducer(reducer, Object.values(ReducerHandlers));

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-pre.2",
+  "version": "1.2.9-pre.1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {