[Modals] Add modals layout

app/containers/Event/index.js

@@ -10,7 +10,8 @@ const Event = ({ router }) => {
   const Modals = useModals();
 
   useEffect(() => {
-    Modals.ViewEvent.open({ id: id_or_slug, slug: id_or_slug });
+    !Modals.ViewEvent.isOpen() &&
+      Modals.ViewEvent.open({ id: id_or_slug, slug: id_or_slug });
   }, [id_or_slug]);
 
   return (

app/layouts/Dashboard/index.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { withRouter } from 'next/router';
 import './style.scss';
 
-const Dashboard = ({ children, data, router, query, isPublic }) => {
+const Dashboard = ({ children, data, router, isPublic }) => {
   const [showSideBar, setSideBar] = useState(true);
 
   if (!data) return null;

app/modals/AddEvent/index.js

@@ -132,7 +132,7 @@ const AddEvent = ({ dateTimeRange, types, onClose }) => {
   };
 
   return (
-    <Modal isOpen={true} size="md">
+    <>
       <ModalHeader>Add Event</ModalHeader>
       <ModalBody>
         <Form {...formProps} />
@@ -145,7 +145,7 @@ const AddEvent = ({ dateTimeRange, types, onClose }) => {
           Add
         </Button>
       </ModalFooter>
-    </Modal>
+    </>
   );
 };
 

app/modals/AddZoomAccount/index.js

@@ -22,7 +22,7 @@ const AddZoomAccount = ({ onClose, onSuccess }) => {
   const errors = formatErrors(rawErrors);
 
   return (
-    <Modal isOpen={true} size="sm">
+    <>
       <ModalHeader>Add Zoom Account</ModalHeader>
       <ModalBody>
         <Form className="row" errors={errors}>
@@ -45,7 +45,7 @@ const AddZoomAccount = ({ onClose, onSuccess }) => {
           Add
         </Button>
       </ModalFooter>
-    </Modal>
+    </>
   );
 };
 

app/modals/EditEvent/index.js

@@ -215,7 +215,7 @@ const EditEvent = ({ loading, onClose, types, event }) => {
   };
 
   return (
-    <Modal isOpen={true} size="md">
+    <>
       <ModalHeader>Edit Event</ModalHeader>
       <ModalBody>{!loading && <Form {...formProps} />}</ModalBody>
       <ModalFooter>
@@ -226,7 +226,7 @@ const EditEvent = ({ loading, onClose, types, event }) => {
           Save
         </Button>
       </ModalFooter>
-    </Modal>
+    </>
   );
 };
 

app/modals/Impersonate/index.js

@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import Form from 'Components/Form';
 import UserSelect from 'Components/UserSelect';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { useRouter } from 'next/router';
 
 const Impersonate = ({ onClose }) => {
@@ -15,7 +15,7 @@ const Impersonate = ({ onClose }) => {
   };
 
   return (
-    <Modal isOpen={true} size="md">
+    <>
       <ModalHeader>Impersonate</ModalHeader>
       <ModalBody>
         <Form className="row">
@@ -38,7 +38,7 @@ const Impersonate = ({ onClose }) => {
           Impersonate
         </Button>
       </ModalFooter>
-    </Modal>
+    </>
   );
 };
 

app/modals/Manager.js

@@ -1,5 +1,8 @@
 import { useReducer, createContext } from 'react';
 import dynamic from 'next/dynamic';
+import { Modal } from 'reactstrap';
+import { withRouter } from 'next/router';
+import classNames from 'classnames';
 
 const Context = createContext();
 
@@ -19,51 +22,84 @@ const reducer = (state, { type, payload }) => {
 };
 
 const modals = {
-  AddEvent: dynamic(() => import('./AddEvent')),
-  ViewEvent: dynamic(() => import('./ViewEvent')),
-  EditEvent: dynamic(() => import('./EditEvent')),
-  AddZoomAccount: dynamic(() => import('./AddZoomAccount')),
-  Impersonate: dynamic(() => import('./Impersonate')),
+  AddEvent: {
+    size: 'md',
+    Component: dynamic(() => import('./AddEvent')),
+  },
+  ViewEvent: {
+    size: 'sm',
+    autoClose: true,
+    Component: dynamic(() => import('./ViewEvent')),
+  },
+  EditEvent: {
+    size: 'md',
+    Component: dynamic(() => import('./EditEvent')),
+  },
+  AddZoomAccount: {
+    size: 'sm',
+    Component: dynamic(() => import('./AddZoomAccount')),
+  },
+  Impersonate: {
+    size: 'md',
+    Component: dynamic(() => import('./Impersonate')),
+  },
 };
 
-const ModalsManager = React.memo(({ children }) => {
-  const [state, dispatch] = useReducer(reducer, []);
-
-  const actions = Object.keys(modals).reduce((acm, name) => {
-    acm[name] = {
-      open: (props) =>
-        dispatch({ type: 'openModal', payload: { name, props } }),
-      close: () => dispatch({ type: 'closeModal', payload: { name } }),
-    };
-
-    return acm;
-  }, {});
-
-  return (
-    <Context.Provider value={actions}>
-      {children}
-      {state.map(({ name, props }, index) => {
-        const Modal = modals[name];
-
-        Modal.displayName = name;
-
-        return (
-          <Modal
-            key={`${name}-${index}`}
-            {...props}
-            onClose={async (...args) => {
-              const { onClose } = props;
-
-              if (typeof onClose === 'function') await onClose(...args);
-
-              return actions[name].close();
-            }}
-          />
-        );
-      })}
-    </Context.Provider>
-  );
-});
+const ModalsManager = withRouter(
+  React.memo(({ children, router }) => {
+    const [state, dispatch] = useReducer(reducer, []);
+
+    const actions = Object.keys(modals).reduce((acm, name) => {
+      acm[name] = {
+        open: (props) =>
+          dispatch({ type: 'openModal', payload: { name, props } }),
+        close: () => dispatch({ type: 'closeModal', payload: { name } }),
+        isOpen: () => !!state.find((modal) => modal.name === name),
+      };
+
+      return acm;
+    }, {});
+
+    const embed = router?.query?.hasOwnProperty('embed');
+
+    return (
+      <Context.Provider value={actions}>
+        {children}
+        {state.map(({ name, props }, index) => {
+          const config = modals[name];
+          const ModalComponent = config.Component;
+
+          ModalComponent.displayName = name;
+
+          const onClose = async (...args) => {
+            const { onClose } = props;
+
+            if (typeof onClose === 'function') await onClose(...args);
+
+            return actions[name].close();
+          };
+
+          return (
+            <Modal
+              key={`${name}-${index}`}
+              className={classNames({ embed })}
+              isOpen={true}
+              size={props.size || config.size}
+              backdrop={!embed}
+              toggle={() => !embed && config.autoClose && onClose()}>
+              <ModalComponent
+                {...props}
+                embed={embed}
+                autoClose={config.autoClose}
+                onClose={onClose}
+              />
+            </Modal>
+          );
+        })}
+      </Context.Provider>
+    );
+  }),
+);
 
 ModalsManager.Context = Context;
 

app/modals/ViewEvent/index.js

@@ -17,21 +17,15 @@ const ViewEvent = ({ id, slug, onClose, event, startPolling, stopPolling }) => {
 
   if (!event) {
     return (
-      <Modal isOpen={true} size="sm" toggle={() => onClose()}>
-        <ModalBody>
-          <p className="text-center">No Event Found.</p>
-        </ModalBody>
-      </Modal>
+      <ModalBody>
+        <p className="text-center">No Event Found.</p>
+      </ModalBody>
     );
   }
 
   const queryData = { query: QUERY, variables: { id: id, slug: slug } };
 
-  return (
-    <Modal isOpen={true} size="sm" toggle={() => onClose()}>
-      <Content event={{ ...event }} onClose={onClose} />
-    </Modal>
-  );
+  return <Content event={{ ...event }} onClose={onClose} />;
 };
 
 export default createPage({
@@ -40,11 +34,10 @@ export default createPage({
   variables: ({ id, slug }) => ({ id, slug }),
   isPublic: true,
   requireLogin: false,
+  Layout: null,
   LoaderComponent: ({ onClose }) => (
-    <Modal isOpen={true} size="sm" toggle={() => onClose()}>
-      <ModalBody>
-        <Loader relative />
-      </ModalBody>
-    </Modal>
+    <ModalBody>
+      <Loader relative />
+    </ModalBody>
   ),
 });

app/pages/_app.js

@@ -39,7 +39,8 @@ class App extends NextApp {
         <Head>
           <link rel="icon" href="/favicon.png" />
         </Head>
-        <ModalsManager>
+        <ModalsManager
+          router={{ query: pageProps.query, params: pageProps.params }}>
           {hasError ? <ErrorLayout /> : <Page {...pageProps}></Page>}
         </ModalsManager>
       </ApolloProvider>

app/styles/_custom.scss

@@ -102,3 +102,13 @@
     top: 5px;
   }
 }
+
+.modal {
+  .modal-dialog {
+    &.embed {
+      .modal-content {
+        min-height: calc(100vh - 20px);
+      }
+    }
+  }
+}

app/utils/createPage.js

@@ -57,6 +57,8 @@ const createPage = ({
     content = <Component loading={loading} {...data} {...rest} {...props} />;
   }
 
+  if (!Layout) return content;
+
   return (
     <Layout
       loading={loading}