From 3f6e3074f2b3697dc63e170d1d018e60f004cc64 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 31 Mar 2022 20:39:05 +0530
Subject: [PATCH] Add reusable dialog (#459)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/dialog/Dialog.jsx           |  5 +-
 src/app/molecules/dialog/Dialog.scss          |  5 --
 src/app/molecules/dialog/ReusableDialog.jsx   | 49 +++++++++++++++++++
 src/app/organisms/create-room/CreateRoom.scss |  1 +
 src/app/organisms/pw/Dialogs.jsx              |  4 ++
 .../organisms/read-receipts/ReadReceipts.jsx  |  8 +--
 src/client/action/navigation.js               |  9 ++++
 src/client/state/cons.js                      |  2 +
 src/client/state/navigation.js                |  8 +++
 9 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 src/app/molecules/dialog/ReusableDialog.jsx

diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
index 93307dc7..637766a9 100644
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -12,6 +12,7 @@ import RawModal from '../../atoms/modal/RawModal';
 function Dialog({
   className, isOpen, title, onAfterOpen, onAfterClose,
   contentOptions, onRequestClose, closeFromOutside, children,
+  invisibleScroll,
 }) {
   return (
     <RawModal
@@ -36,7 +37,7 @@ function Dialog({
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
-            <ScrollView autoHide>
+            <ScrollView autoHide invisible={invisibleScroll}>
               <div className="dialog__content-container">
                 {children}
               </div>
@@ -55,6 +56,7 @@ Dialog.defaultProps = {
   onAfterClose: null,
   onRequestClose: null,
   closeFromOutside: true,
+  invisibleScroll: false,
 };
 
 Dialog.propTypes = {
@@ -67,6 +69,7 @@ Dialog.propTypes = {
   onRequestClose: PropTypes.func,
   closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  invisibleScroll: PropTypes.bool,
 };
 
 export default Dialog;
diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
index dd4c4336..77e5f059 100644
--- a/src/app/molecules/dialog/Dialog.scss
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -21,8 +21,3 @@
     flex-direction: column;
   }
 }
-
-.dialog__content-container {
-  padding-top: var(--sp-extra-tight);
-  padding-bottom: var(--sp-extra-loose);
-}
\ No newline at end of file
diff --git a/src/app/molecules/dialog/ReusableDialog.jsx b/src/app/molecules/dialog/ReusableDialog.jsx
new file mode 100644
index 00000000..b05cafcf
--- /dev/null
+++ b/src/app/molecules/dialog/ReusableDialog.jsx
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+
+import navigation from '../../../client/state/navigation';
+import IconButton from '../../atoms/button/IconButton';
+import Dialog from './Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReusableDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (title, render, afterClose) => {
+      setIsOpen(true);
+      setData({ title, render, afterClose });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    data.afterClose();
+    setData(null);
+  };
+
+  const handleRequestClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={data?.title || ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={handleRequestClose}
+      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      invisibleScroll
+    >
+      {data?.render(handleRequestClose) || <div />}
+    </Dialog>
+  );
+}
+
+export default ReusableDialog;
diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
index de9efdbd..ccd3ea3b 100644
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -2,6 +2,7 @@
 @use '../../partials/dir';
 
 .create-room {
+  margin: var(--sp-normal);
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {
diff --git a/src/app/organisms/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
index 5c5e115c..f29a8192 100644
--- a/src/app/organisms/pw/Dialogs.jsx
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -8,6 +8,8 @@ import Search from '../search/Search';
 import ViewSource from '../view-source/ViewSource';
 import CreateRoom from '../create-room/CreateRoom';
 
+import ReusableDialog from '../../molecules/dialog/ReusableDialog';
+
 function Dialogs() {
   return (
     <>
@@ -18,6 +20,8 @@ function Dialogs() {
       <CreateRoom />
       <SpaceAddExisting />
       <Search />
+
+      <ReusableDialog />
     </>
   );
 }
diff --git a/src/app/organisms/read-receipts/ReadReceipts.jsx b/src/app/organisms/read-receipts/ReadReceipts.jsx
index 715fafef..1e648e0b 100644
--- a/src/app/organisms/read-receipts/ReadReceipts.jsx
+++ b/src/app/organisms/read-receipts/ReadReceipts.jsx
@@ -64,9 +64,11 @@ function ReadReceipts() {
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
-      {
-        readers.map(renderPeople)
-      }
+      <div style={{ marginTop: 'var(--sp-tight)', marginBottom: 'var(--sp-extra-loose)' }}>
+        {
+          readers.map(renderPeople)
+        }
+      </div>
     </Dialog>
   );
 }
diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index d94044d1..e16d25d2 100644
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -150,3 +150,12 @@ export function openReusableContextMenu(placement, cords, render, afterClose) {
     afterClose,
   });
 }
+
+export function openReusableDialog(title, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
+    title,
+    render,
+    afterClose,
+  });
+}
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index f7ffc8f9..4e258ac3 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -47,6 +47,7 @@ const cons = {
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
     },
     room: {
       JOIN: 'JOIN',
@@ -92,6 +93,7 @@ const cons = {
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index 06871e92..eb59e7a2 100644
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -174,6 +174,14 @@ class Navigation extends EventEmitter {
           action.afterClose,
         );
       },
+      [cons.actions.navigation.OPEN_REUSABLE_DIALOG]: () => {
+        this.emit(
+          cons.events.navigation.REUSABLE_DIALOG_OPENED,
+          action.title,
+          action.render,
+          action.afterClose,
+        );
+      },
     };
     actions[action.type]?.();
   }