Merge pull request #9 from talkjs/feat/asguest_prop

Add `asGuest` prop

Author: Asha20

lib/Session.tsx

@@ -3,7 +3,7 @@ import Talk from "talkjs";
 import { SessionContext } from "./SessionContext";
 import { SessionEvents } from "./types";
 import { EventListeners } from "./EventListeners";
-import { useSetter } from "./hooks";
+import { useMethod } from "./hooks";
 
 type UserProps =
   | { userId: string; syncUser?: undefined }
@@ -22,8 +22,14 @@ export function Session(props: SessionProps) {
   const [ready, markReady] = useState(false);
   const [session, setSession] = useState<Talk.Session>();
 
-  const { userId, syncUser, appId, signature, sessionRef, desktopNotificationEnabled } =
-    props;
+  const {
+    userId,
+    syncUser,
+    appId,
+    signature,
+    sessionRef,
+    desktopNotificationEnabled,
+  } = props;
 
   useEffect(() => {
     Talk.ready.then(() => markReady(true));
@@ -55,9 +61,9 @@ export function Session(props: SessionProps) {
         }
       };
     }
-  }, [ready, appId, userId, syncUser, sessionRef]);
+  }, [ready, signature, appId, userId, syncUser, sessionRef]);
 
-  useSetter(
+  useMethod(
     session,
     desktopNotificationEnabled,
     "setDesktopNotificationEnabled",

lib/hooks.tsx

@@ -24,20 +24,37 @@ export function usePreviousIfDeeplyEqual<T>(val: T) {
 }
 
 /**
- * Calls method `setter` on `box` with `value`, iff `value` is set & deeply
+ * Calls method `method` on `box` with `value`, iff `value` is set & deeply
  * different from before (and the box is alive)
  */
-export function useSetter<
+export function useMethod<
   V,
   S extends string,
   T extends TalkObject & Record<S, (val: V) => any>,
->(box: T | undefined, value: V | undefined, setter: S) {
+>(box: T | undefined, value: V | undefined, method: S) {
   value = usePreviousIfDeeplyEqual(value);
   useEffect(() => {
     if (value !== undefined && box?.isAlive) {
-      box[setter](value);
+      box[method](value);
     }
-  }, [setter, box, value]);
+  }, [method, box, value]);
+}
+
+/**
+ * Like {@link useMethod}, except `args` is an array that gets spread into
+ * the method call
+ */
+export function useSpreadMethod<
+  V extends any[],
+  S extends string,
+  T extends TalkObject & Record<S, (...args: V) => any>,
+>(box: T | undefined, args: V | undefined, method: S) {
+  args = usePreviousIfDeeplyEqual(args);
+  useEffect(() => {
+    if (args !== undefined && box?.isAlive) {
+      box[method](...args);
+    }
+  }, [method, box, args]);
 }
 
 /**
@@ -50,14 +67,20 @@ export function useConversation<T extends Talk.UIBox>(
   box: T | undefined,
   syncConversation: ConversationProps["syncConversation"],
   conversationId: ConversationProps["conversationId"],
+  asGuest: boolean | undefined,
 ) {
   const conversation = useMemo(() => {
     if (typeof syncConversation === "function") {
       return session?.isAlive ? syncConversation(session) : undefined;
     }
     return syncConversation ?? conversationId;
   }, [session, syncConversation, conversationId]);
-  useSetter(box, conversation, "select");
+
+  const args = (
+    conversation !== undefined ? [conversation, { asGuest }] : undefined
+  ) as any;
+
+  useSpreadMethod(box, args, "select");
 }
 
 // subset of Session to help TypeScript pick the right overloads

lib/types.ts

@@ -43,7 +43,7 @@ export type ConversationProps =
     };
 
 export type UIBoxProps<T extends Talk.UIBox> = UIBoxEvents<T> &
-  ConversationProps;
+  ConversationProps & { asGuest?: boolean };
 
 declare const testChatboxEvents: UIBoxEvents<Talk.Chatbox>;
 declare const testInboxEvents: UIBoxEvents<Talk.Inbox>;

lib/ui/Chatbox.tsx

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
 import { getKeyForObject, splitObjectByPrefix } from "../util";
-import { useSetter, useConversation, useUIBox } from "../hooks";
+import { useMethod, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
 
@@ -35,6 +35,7 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     chatboxRef,
     style,
     className,
@@ -47,10 +48,10 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
     options;
 
   const box = useUIBox(session, "createChatbox", simpleOptions, chatboxRef);
-  useSetter(box, messageFilter, "setMessageFilter");
-  useSetter(box, presence, "setPresence");
-  useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useMethod(box, messageFilter, "setMessageFilter");
+  useMethod(box, presence, "setPresence");
+  useMethod(box, highlightedWords, "setHighlightedWords");
+  useConversation(session, box, syncConversation, conversationId, asGuest);
 
   return (
     <MountedBox

lib/ui/Inbox.tsx

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from "react";
 import type Talk from "talkjs";
 import { useSession } from "../SessionContext";
 import { getKeyForObject, splitObjectByPrefix } from "../util";
-import { useSetter, useConversation, useUIBox } from "../hooks";
+import { useMethod, useConversation, useUIBox } from "../hooks";
 import { FirstParameter, UIBoxProps } from "../types";
 import { MountedBox } from "../MountedBox";
 
@@ -35,6 +35,7 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     inboxRef,
     style,
     className,
@@ -52,11 +53,11 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
   } = options;
 
   const box = useUIBox(session, "createInbox", simpleOptions, inboxRef);
-  useSetter(box, messageFilter, "setMessageFilter");
-  useSetter(box, feedFilter, "setFeedFilter");
-  useSetter(box, presence, "setPresence");
-  useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useMethod(box, messageFilter, "setMessageFilter");
+  useMethod(box, feedFilter, "setFeedFilter");
+  useMethod(box, presence, "setPresence");
+  useMethod(box, highlightedWords, "setHighlightedWords");
+  useConversation(session, box, syncConversation, conversationId, asGuest);
 
   return (
     <MountedBox

lib/ui/Popup.tsx

@@ -1,7 +1,7 @@
 import Talk from "talkjs";
 import { useSession } from "../SessionContext";
 import { getKeyForObject, splitObjectByPrefix } from "../util";
-import { useSetter, useConversation, useUIBox, useMountBox } from "../hooks";
+import { useMethod, useConversation, useUIBox, useMountBox } from "../hooks";
 import { EventListeners } from "../EventListeners";
 import { UIBoxProps } from "../types";
 
@@ -26,6 +26,7 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     popupRef,
     ...optionsAndEvents
   } = props;
@@ -35,10 +36,10 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
     options;
 
   const box = useUIBox(session, "createPopup", simpleOptions, popupRef);
-  useSetter(box, messageFilter, "setMessageFilter");
-  useSetter(box, presence, "setPresence");
-  useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useMethod(box, messageFilter, "setMessageFilter");
+  useMethod(box, presence, "setPresence");
+  useMethod(box, highlightedWords, "setHighlightedWords");
+  useConversation(session, box, syncConversation, conversationId, asGuest);
   useMountBox(box, undefined);
 
   return <EventListeners target={box} handlers={events} />;