refactor: merge Dialog.toggleOpen and Dialog.toggleOpenSingle into Di…

…alog.toggle
GetStream · Sep 16, 2024 · 7a67c03 · 7a67c03
1 parent f649140
commit 7a67c03
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 27 deletions.
diff --git a/docusaurus/docs/React/guides/dialog-management.mdx b/docusaurus/docs/React/guides/dialog-management.mdx
@@ -79,8 +79,7 @@ Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
 
 - `dialog.open()` - opens the dialog
 - `dialog.close()` - closes the dialog
-- `dialog.toggleOpen()` - flips the dialog open state and does not close any other dialog that could be open
-- `dialog.toggleOpenSingle()` - flips the open state and does close any other dialog that could be open
+- `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument `closeAll`. If enabled closes any other dialog that would be open.
 - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
 
 Every `Dialog` object carries its own `id` and `isOpen` flag.

diff --git a/src/components/Dialog/DialogManager.ts b/src/components/Dialog/DialogManager.ts
@@ -12,8 +12,7 @@ export type Dialog = {
   isOpen: boolean | undefined;
   open: (zIndex?: number) => void;
   remove: () => void;
-  toggle: () => void;
-  toggleSingle: () => void;
+  toggle: (closeAll?: boolean) => void;
 };
 
 export type DialogManagerOptions = {
@@ -26,6 +25,16 @@ export type DialogManagerState = {
   dialogsById: Dialogs;
 };
 
+/**
+ * Keeps a map of Dialog objects.
+ * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
+ * The hook returns an object with the following API:
+ *
+ * - `dialog.open()` - opens the dialog
+ * - `dialog.close()` - closes the dialog
+ * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.
+ * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
+ */
 export class DialogManager {
   id: string;
   state = new StateStore<DialogManagerState>({
@@ -58,11 +67,8 @@ export class DialogManager {
         remove: () => {
           this.remove(id);
         },
-        toggle: () => {
-          this.toggleOpen({ id });
-        },
-        toggleSingle: () => {
-          this.toggleOpenSingle({ id });
+        toggle: (closeAll = false) => {
+          this.toggle({ id }, closeAll);
         },
       };
       this.state.next((current) => ({
@@ -98,19 +104,11 @@ export class DialogManager {
     Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) => dialog.close());
   }
 
-  toggleOpen(params: GetOrCreateDialogParams) {
-    if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {
-      this.close(params.id);
-    } else {
-      this.open(params);
-    }
-  }
-
-  toggleOpenSingle(params: GetOrCreateDialogParams) {
+  toggle(params: GetOrCreateDialogParams, closeAll = false) {
     if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {
       this.close(params.id);
     } else {
-      this.open(params, true);
+      this.open(params, closeAll);
     }
   }
 

diff --git a/src/components/Dialog/__tests__/DialogsManager.test.js b/src/components/Dialog/__tests__/DialogsManager.test.js
@@ -25,7 +25,6 @@ describe('DialogManager', () => {
       open: expect.any(Function),
       remove: expect.any(Function),
       toggle: expect.any(Function),
-      toggleSingle: expect.any(Function),
     });
     expect(Object.keys(dialogManager.state.getLatestValue().dialogsById)).toHaveLength(1);
     expect(dialogManager.openDialogCount).toBe(0);
@@ -54,7 +53,6 @@ describe('DialogManager', () => {
       open: expect.any(Function),
       remove: expect.any(Function),
       toggle: expect.any(Function),
-      toggleSingle: expect.any(Function),
     });
     expect(dialogManager.openDialogCount).toBe(1);
   });
@@ -109,9 +107,9 @@ describe('DialogManager', () => {
     const dialogManager = new DialogManager();
     dialogManager.open({ id: 'xxx' });
     dialogManager.open({ id: 'yyy' });
-    dialogManager.toggleOpen({ id: dialogId });
+    dialogManager.toggle({ id: dialogId });
     expect(dialogManager.openDialogCount).toBe(3);
-    dialogManager.toggleOpen({ id: dialogId });
+    dialogManager.toggle({ id: dialogId });
     expect(dialogManager.openDialogCount).toBe(2);
   });
 
@@ -120,10 +118,10 @@ describe('DialogManager', () => {
 
     dialogManager.open({ id: 'xxx' });
     dialogManager.open({ id: 'yyy' });
-    dialogManager.toggleOpenSingle({ id: dialogId });
+    dialogManager.toggle({ id: dialogId }, true);
     expect(dialogManager.openDialogCount).toBe(1);
 
-    dialogManager.toggleOpenSingle({ id: dialogId });
+    dialogManager.toggle({ id: dialogId }, true);
     expect(dialogManager.openDialogCount).toBe(0);
   });
 

diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
@@ -106,7 +106,7 @@ export const MessageActions = <
     <MessageActionsWrapper
       customWrapperClass={customWrapperClass}
       inline={inline}
-      toggleOpen={dialog?.toggleSingle}
+      toggleOpen={dialog?.toggle}
     >
       <DialogAnchor
         id={dialogId}

diff --git a/src/components/Reactions/ReactionSelectorWithButton.tsx b/src/components/Reactions/ReactionSelectorWithButton.tsx
@@ -44,7 +44,7 @@ export const ReactionSelectorWithButton = <
         aria-label={t('aria/Open Reaction Selector')}
         className={`str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`}
         data-testid='message-reaction-action'
-        onClick={dialog.toggleSingle}
+        onClick={() => dialog?.toggle()}
         ref={buttonRef}
       >
         <ReactionIcon className='str-chat__message-action-icon' />