Made changes reflecting the review given for PR #160

Resolve merge conflicts for third cherry-pick from modal_refactor

src/components/modals/BaseModal.tsx

@@ -9,15 +9,15 @@ import {
 
 interface BaseModalProps {
   title: string;
-  contentText: string;
+  content: string;
   open: boolean;
   handleClose: () => void;
   children: JSX.Element[] | JSX.Element;
 }
 
 export const BaseModal = ({
   title,
-  contentText,
+  content,
   open,
   handleClose,
   children,
@@ -27,7 +27,7 @@ export const BaseModal = ({
       <DialogTitle>{title}</DialogTitle>
 
       <DialogContent>
-        <DialogContentText>{contentText}</DialogContentText>
+        <DialogContentText>{content}</DialogContentText>
       </DialogContent>
 
       <DialogActions>{children}</DialogActions>

src/components/modals/ButtonWithAlertModal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { ButtonProps } from '../buttons/Button';
+
+import { ButtonWithModal, ModalTitleContentProps } from './ButtonWithModal';
+
+export interface AlertModalProps extends ModalTitleContentProps {
+  closeButtonProps: ButtonProps;
+}
+
+export interface ButtonWithAlertModalProps extends ButtonProps {
+  alertModalProps: AlertModalProps;
+}
+
+export const ButtonWithAlertModal = ({
+  alertModalProps,
+  name,
+  ...otherButtonProps
+}: ButtonWithAlertModalProps) => {
+  const {
+    closeButtonProps,
+    ...modalTitleContentProps
+  }: AlertModalProps = alertModalProps;
+
+  return (
+    <ButtonWithModal
+      modalTitleContentProps={modalTitleContentProps}
+      name={name}
+      actionButtonPropsList={[{ name: 'Close', ...closeButtonProps }]}
+      {...otherButtonProps}
+    />
+  );
+};

src/components/modals/ButtonWithConfirmationModal.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { ButtonProps } from '../buttons/Button';
+
+import { ButtonWithModal, ModalTitleContentProps } from './ButtonWithModal';
+
+export interface ConfirmationModalProps extends ModalTitleContentProps {
+  confirmButtonProps: ButtonProps;
+  cancelButtonProps: ButtonProps;
+}
+
+export interface ButtonWithConfirmationModalProps extends ButtonProps {
+  confirmationModalProps: ConfirmationModalProps;
+}
+
+export const ButtonWithConfirmationModal = ({
+  confirmationModalProps,
+  name,
+  onClick,
+  ...otherButtonProps
+}: ButtonWithConfirmationModalProps) => {
+  const {
+    cancelButtonProps,
+    confirmButtonProps,
+    ...modalTitleContentProps
+  }: ConfirmationModalProps = confirmationModalProps;
+
+  return (
+    <ButtonWithModal
+      modalTitleContentProps={modalTitleContentProps}
+      name={name}
+      actionButtonPropsList={[
+        { name: 'Cancel', ...cancelButtonProps },
+        { name: 'Confirm', onClick, ...confirmButtonProps },
+      ]}
+      {...otherButtonProps}
+    />
+  );
+};

src/components/modals/ButtonWithModal.tsx

@@ -2,42 +2,40 @@ import React, { useState } from 'react';
 
 import { Button, ButtonProps } from '../buttons/Button';
 
-import {
-  ModalProps,
-  ModalWithActionButtons,
-  ActionButton,
-} from './ModalWithActionButtons';
+import { ModalProps, ModalWithActionButtons } from './ModalWithActionButtons';
+
+export interface ModalTitleContentProps {
+  title: string;
+  content: string;
+}
 
 export interface ButtonWithModalProps extends ButtonProps {
-  modalTitle: string;
-  modalContentText: string;
-  actionButtonList: ActionButton[];
+  modalTitleContentProps: ModalTitleContentProps;
+  actionButtonPropsList: ButtonProps[];
 }
 
 export const ButtonWithModal = ({
-  modalTitle,
-  modalContentText,
+  modalTitleContentProps,
   name,
-  actionButtonList,
-  ...otherOpenButtonProps
+  actionButtonPropsList,
+  ...otherButtonProps
 }: ButtonWithModalProps) => {
   const [open, setOpen] = useState(false);
   const modalProps: ModalProps = {
-    title: modalTitle,
-    contentText: modalContentText,
+    ...modalTitleContentProps,
     open,
     handleClose: () => setOpen(false),
   };
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} {...otherOpenButtonProps}>
+      <Button onClick={() => setOpen(true)} {...otherButtonProps}>
         {name}
       </Button>
 
       <ModalWithActionButtons
         modalProps={modalProps}
-        actionButtonList={actionButtonList}
+        actionButtonPropsList={actionButtonPropsList}
       />
     </>
   );

src/components/modals/ModalWithActionButtons.tsx

@@ -4,45 +4,35 @@ import { Button, ButtonProps } from '../buttons/Button';
 
 import { BaseModal } from './BaseModal';
 
-export interface ActionButton extends ButtonProps {
-  actionCallback?: (...params: any[]) => any;
-  closeModalOnClick?: boolean;
-}
-
 export interface ModalProps {
   title: string;
-  contentText: string;
+  content: string;
   open: boolean;
   handleClose: () => void;
 }
 
-interface ModalActionButtonProps {
+interface ModalWithActionButtonProps {
   modalProps: ModalProps;
-  actionButtonList: ActionButton[];
+  actionButtonPropsList: ButtonProps[];
 }
 
 export const ModalWithActionButtons = ({
   modalProps,
-  actionButtonList,
-}: ModalActionButtonProps) => {
+  actionButtonPropsList,
+}: ModalWithActionButtonProps) => {
   return (
     <BaseModal {...modalProps}>
-      {actionButtonList.map((buttonProps: ActionButton) => {
-        const {
-          name,
-          closeModalOnClick = true,
-          actionCallback = () => {
-            return null;
-          },
-          ...otherProps
-        } = buttonProps;
-
-        const onClickFunction = () => {
-          if (closeModalOnClick) {
-            modalProps.handleClose();
+      {actionButtonPropsList.map((buttonProps: ButtonProps) => {
+        const { name, onClick, ...otherProps } = buttonProps;
+
+        const onClickFunction = (
+          event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+        ) => {
+          if (onClick !== undefined) {
+            onClick(event);
           }
 
-          actionCallback();
+          modalProps.handleClose();
         };
 
         return (

src/components/modals/README.md

@@ -0,0 +1,8 @@
+The component abstraction level for for modals goes (from lowest to highest level):
+
+1. BaseModal
+2. ModalWithActionButtons
+3. ButtonWithModal
+4. ButtonWithAlertModal, ButtonWithConfirmationModal
+
+The (i+1)-th component depends on the i-th component.

src/components/modals/index.tsx

@@ -1,56 +1,2 @@
-import React from 'react';
-
-import { ButtonWithModal } from './ButtonWithModal';
-import { ActionButton } from './ModalWithActionButtons';
-
-export interface ButtonConfirmationModalProps {
-  modalTitle: string;
-  modalContentText: string;
-  name: string;
-  confirmButtonProps: ActionButton;
-  cancelButtonProps: ActionButton;
-}
-
-export const ButtonWithConfirmationModal = ({
-  modalTitle,
-  modalContentText,
-  name,
-  confirmButtonProps,
-  cancelButtonProps,
-  ...otherOpenButtonProps
-}: ButtonConfirmationModalProps) => {
-  return (
-    <ButtonWithModal
-      modalTitle={modalTitle}
-      modalContentText={modalContentText}
-      name={name}
-      actionButtonList={[cancelButtonProps, confirmButtonProps]}
-      {...otherOpenButtonProps}
-    />
-  );
-};
-
-export interface ButtonAlertModalProps {
-  modalTitle: string;
-  modalContentText: string;
-  name: string;
-  closeButtonProps: ActionButton;
-}
-
-export const ButtonWithAlertModal = ({
-  modalTitle,
-  modalContentText,
-  name,
-  closeButtonProps,
-  ...otherOpenButtonProps
-}: ButtonAlertModalProps) => {
-  return (
-    <ButtonWithModal
-      modalTitle={modalTitle}
-      modalContentText={modalContentText}
-      name={name}
-      actionButtonList={[closeButtonProps]}
-      {...otherOpenButtonProps}
-    />
-  );
-};
+export { ButtonWithConfirmationModal } from './ButtonWithConfirmationModal';
+export { ButtonWithAlertModal } from './ButtonWithAlertModal';

src/components/modals/modals.stories.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
+import { ButtonProps } from '../buttons/Button';
+
 import { ButtonWithModal, ButtonWithModalProps } from './ButtonWithModal';
-import { ActionButton } from './ModalWithActionButtons';
 
 export default {
   title: 'Modals/Button With Modal',
@@ -13,39 +14,43 @@ const Template: Story<ButtonWithModalProps> = args => (
   <ButtonWithModal {...args} />
 );
 
-const confirmButtonProps: ActionButton = {
+const confirmButtonProps: ButtonProps = {
   name: 'Confirm',
-  actionCallback: () => alert('You just clicked the confirm button!'),
+  onClick: () => alert('You just clicked the confirm button!'),
   primary: true,
   positive: true,
 };
 
-const cancelButtonProps: ActionButton = {
+const cancelButtonProps: ButtonProps = {
   name: 'Cancel',
   primary: true,
   negative: true,
 };
 
 export const ButtonWithConfirmationModal = Template.bind({});
 ButtonWithConfirmationModal.args = {
-  modalTitle: 'Sample Button With Confirmation Modal',
-  modalContentText: 'Put any text you want here.',
+  modalTitleContentProps: {
+    title: 'Sample Button With Confirmation Modal',
+    content: 'Put any text you want here.',
+  },
   name: 'Click on me!',
-  actionButtonList: [cancelButtonProps, confirmButtonProps],
+  actionButtonPropsList: [cancelButtonProps, confirmButtonProps],
   primary: true,
   positive: true,
 };
 
-const closeButtonProps: ActionButton = {
+const closeButtonProps: ButtonProps = {
   name: 'Close',
 };
 
 export const ButtonWithAlertModal = Template.bind({});
 ButtonWithAlertModal.args = {
-  modalTitle: 'Sample Button With Alert Modal',
-  modalContentText: 'Put any text you want here.',
+  modalTitleContentProps: {
+    title: 'Sample Button With Alert Modal',
+    content: 'Put any text you want here.',
+  },
   name: 'Click on me!',
-  actionButtonList: [closeButtonProps],
+  actionButtonPropsList: [closeButtonProps],
   primary: true,
   negative: true,
 };

src/pages/EventDetailsPage/components/DeleteEditButtons/index.js

@@ -28,7 +28,7 @@ const DeleteEditButtons = props => {
 
   const confirmButtonProps = {
     name: 'Yes',
-    actionCallback: () => {
+    onClick: () => {
       handleConfirmDelete();
       history.push(ROUTES.CALENDAR);
     },
@@ -46,12 +46,14 @@ const DeleteEditButtons = props => {
     <Grid container justify='flex-end' spacing={1}>
       <Grid item>
         <ButtonWithConfirmationModal
-          title='Delete this event?'
-          contentText='Do you want to delete this event permanently?'
-          confirmButtonProps={confirmButtonProps}
-          cancelButtonProps={cancelButtonProps}
+          confirmationModalProps={{
+            title: 'Delete this event?',
+            content: 'Do you want to delete this event permanently?',
+            confirmButtonProps,
+            cancelButtonProps,
+          }}
           name='Delete'
-          secondary
+          primary
           negative
         />
       </Grid>