♻️ Loosen channelName requirement in use(presence)Channel to allow ch…

…annelName to be undefined (plus tests)

src/__tests__/useChannel.tsx

@@ -3,14 +3,17 @@ import React from "react";
 import { __PusherContext } from "../PusherProvider";
 import { renderHook } from "@testing-library/react-hooks";
 import { renderHookWithProvider } from "../testUtils";
-import { useChannel } from "../useChannel";
+import { useChannel, NO_CHANNEL_NAME_WARNING } from "../useChannel";
 
 describe("useChannel()", () => {
   test("should throw an error when no channelName present", () => {
-    const { result } = renderHook(() => useChannel(undefined));
-    expect(result.error.message).toBe(
-      "channelName required to subscribe to a channel"
+    const wrapper: React.FC = (props) => (
+      <__PusherContext.Provider value={{ client: {} as any }} {...props} />
     );
+
+    jest.spyOn(console, "warn");
+    renderHook(() => useChannel(undefined), { wrapper });
+    expect(console.warn).toHaveBeenCalledWith(NO_CHANNEL_NAME_WARNING);
   });
 
   test("should return undefined if no pusher client present", () => {

src/useChannel.ts

@@ -1,7 +1,5 @@
 import { Channel, PresenceChannel } from "pusher-js";
 import { useEffect, useState } from "react";
-
-import invariant from "invariant";
 import { usePusher } from "./usePusher";
 
 /**
@@ -18,19 +16,26 @@ import { usePusher } from "./usePusher";
  * ```
  */
 
+export const NO_CHANNEL_NAME_WARNING =
+  "No channel name passed to useChannel. No channel has been subscribed to.";
+
 export function useChannel<T extends Channel & PresenceChannel>(
   channelName: string | undefined
 ) {
-  // errors for missing arguments
-  invariant(channelName, NO_CHANNEL_NAME_ERROR);
   const { client } = usePusher();
   const [channel, setChannel] = useState<T | undefined>();
   useEffect(() => {
     /** Return early if there's no client */
     if (!client) return;
 
+    /** Return early and warn if there's no channel */
+    if (!channelName) {
+      console.warn(NO_CHANNEL_NAME_WARNING);
+      return;
+    }
+
     /** Subscribe to channel and set it in state */
-    const pusherChannel = client?.subscribe(channelName);
+    const pusherChannel = client.subscribe(channelName);
     setChannel(pusherChannel as T);
 
     /** Cleanup on unmount/re-render */
@@ -40,6 +45,3 @@ export function useChannel<T extends Channel & PresenceChannel>(
   /** Return the channel for use. */
   return channel;
 }
-
-export const NO_CHANNEL_NAME_ERROR =
-  "channelName required to subscribe to a channel";

src/usePresenceChannel.ts

@@ -77,11 +77,11 @@ export const presenceChannelReducer = (
 };
 
 export function usePresenceChannel(
-  channelName: string
+  channelName: string | undefined
 ): usePresenceChannelValue {
   // errors for missing arguments
   invariant(
-    channelName.includes("presence-"),
+    channelName && channelName.includes("presence-"),
     "Presence channels should use prefix 'presence-' in their name. Use the useChannel hook instead."
   );