@unitedstatespowersquadrons/components 1.2.9-pre.3 → 1.2.10-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({ channel: "ExampleChannel", dispatch });
+  const channel = useAppCableSubscription(dispatch, "ExampleChannel");
 
   const handleDoSomething = () => {
     const newSomething = "changed";
@@ -13,7 +13,7 @@ const SubComponent = () => {
   };
 
   const sendUpstreamMessage = () => {
-    channel.send({ message: "upstream" });
+    if (channel) channel.send({ message: "upstream" });
   };
 
   return(

package/Reducer/buildReducer.tsx

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, 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 { ChannelCallbacks, ChannelSubscriptionOptions, ReducerHandler } from "./types";
+import { Cable, Channel, createConsumer } from "@rails/actioncable";
+import { CableAction, DispatchFunc, ReducerHandler } from "./types";
 
 interface InitialAppProps<AppState> {
   initialState: AppState;
@@ -11,15 +11,15 @@ interface InitialAppProps<AppState> {
 
 export default function buildReducer<AppState, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
-  handlers: ReducerHandler<AppAction>[] = [],
-  actionCableUrl?: string
+  handlers: ReducerHandler<AppAction>[] = []
 ) {
   const StateContext = createContext<AppState | null>(null);
   const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
   const CableContext = createContext<Cable | null>(null);
 
+  const actionCableMetaTag: HTMLMetaElement | null = document.querySelector('meta[name="action-cable-url"]');
+  const actionCableUrl = actionCableMetaTag?.content;
   const cable = actionCableUrl ? createConsumer(actionCableUrl) : null;
-  let subscription: ChannelCallbacks;
 
   function AppProvider(props: InitialAppProps<AppState>) {
     const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
@@ -61,28 +61,18 @@ export default function buildReducer<AppState, AppAction>(
     return context;
   }
 
-  function useAppCableSubscription(options: ChannelSubscriptionOptions) {
+  function useAppCableSubscription(dispatch: DispatchFunc<CableAction>, channel: string) {
     const appCable = useAppCable();
+    const channelRef = useRef<Channel>(null);
 
     useEffect(() => {
-      const { channel, dispatch, ...rest } = options;
-
-      subscription = appCable.subscriptions.create(
-        { channel, ...rest } as ChannelSubscriptionOptions,
-        {
-          received: (data: object) => dispatch({ data, type: "receivedCable" }),
-        } as ChannelCallbacks
-      );
-
-      return(
-        () => {
-          console.log({ subscription: "stop" });
-          subscription.unsubscribe();
-        }
+      channelRef.current = appCable.subscriptions.create(
+        { channel },
+        { received: (data: object) => dispatch({ data, type: "receivedCable" } as CableAction) }
       );
-    }, [appCable.subscriptions, options]);
+    }, [appCable.subscriptions, channel, dispatch]);
 
-    return(cable!);
+    return channelRef.current;
   }
 
   function useAppDispatch() {

package/Reducer/types.ts

@@ -23,22 +23,6 @@ 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/package.json

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