Move modal out of redux, fix CIPPSettings/Exclude Tenant

src/components/ModalRoot.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { SharedModal } from './index'
+
+export const ModalService = {
+ on(event, callback) {
+ document.addEventListener(event, (e) => callback(e.detail))
+ },
+ open({
+ componentType = 'text',
+ componentProps = {},
+ body = false,
+ data,
+ title,
+ size,
+ onConfirm = () => {},
+ onClose = () => {},
+ ...rest
+ }) {
+ document.dispatchEvent(
+ new CustomEvent('open', {
+ detail: {
+ componentType,
+ componentProps,
+ body,
+ data,
+ title,
+ size,
+ onConfirm,
+ onClose,
+ ...rest,
+ },
+ }),
+ )
+ },
+ confirm({ body, title, size, onConfirm, confirmLabel, cancelLabel }) {
+ ModalService.open({
+ componentType: 'confirm',
+ body,
+ title,
+ size,
+ onConfirm,
+ confirmLabel,
+ cancelLabel,
+ })
+ },
+}
+
+export function ModalRoot() {
+ const [modal, setModal] = useState({})
+
+ useEffect(() => {
+ ModalService.on('open', (props) => {
+ setModal({
+ ...props,
+ close: () => {
+ setModal({})
+ },
+ })
+ })
+ }, [])
+
+ const ModalComponent = modal.body ? SharedModal : null
+
+ return <>{ModalComponent && <ModalComponent {...modal} visible close={modal.close} />}</>
+}

src/components/SharedModal.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react'
-import { resetModal } from '../store/features/modal'
 import DataTable from 'react-data-table-component'
 import PropTypes from 'prop-types'
 
@@ -36,27 +34,28 @@ const sharedProps = {
  onClose: PropTypes.func,
 }
 
-export default function SharedModal() {
- const dispatch = useDispatch()
- const modal = useSelector((store) => store.modal)
+export default function SharedModal(props) {
  const {
  componentType = 'text',
  componentProps = {},
  body = false,
  data,
  title,
- visible,
+ visible = true,
  size,
  onClose = () => {},
- } = modal
+ close,
+ ...rest
+ } = props
 
  const handleClose = () => {
- dispatch(resetModal())
  onClose()
+ close()
  }
+ console.log('show modal', { props }, { rest })
 
  if (componentType === 'confirm') {
- return <ConfirmModal {...modal} />
+ return <ConfirmModal {...props} {...rest} />
  }
 
  return (
@@ -89,21 +88,20 @@ export const ConfirmModal = ({
  title,
  visible,
  size,
+ close,
  onClose = () => {},
  onConfirm = () => {},
- confirmLabel = 'Yes',
+ confirmLabel = 'Continue',
  cancelLabel = 'Cancel',
 }) => {
- const dispatch = useDispatch()
-
  const handleClose = () => {
- dispatch(resetModal())
  onClose()
+ close()
  }
 
  const handleConfirm = () => {
- dispatch(resetModal())
  onConfirm()
+ close()
  }
 
  return (

src/components/index.js

@@ -5,6 +5,7 @@ import AppHeaderDropdown from './header/AppHeaderDropdown'
 import AppSidebar from './AppSidebar'
 import Loading, { FullScreenLoading } from './Loading'
 import SharedModal from './SharedModal'
+import { ModalRoot, ModalService } from './ModalRoot'
 import { CippPage, CippPageList } from './CippPage'
 import {
  Condition,
@@ -29,6 +30,8 @@ export {
  Condition,
  FullScreenLoading,
  Loading,
+ ModalRoot,
+ ModalService,
  RFFCFormCheck,
  RFFCFormFeedback,
  RFFCFormInput,

src/hooks/useConfirmModal.js

@@ -1,28 +1,21 @@
 import React from 'react'
-import { useDispatch } from 'react-redux'
-import { setModalContent } from '../store/features/modal'
+import { ModalService } from '../components'
 
 export default function useConfirmModal({
  body,
  onConfirm = () => {},
  confirmLabel = 'Continue',
  cancelLabel = 'Cancel',
 }) {
- const dispatch = useDispatch()
-
  const showModal = () =>
- dispatch(
- setModalContent({
- componentType: 'confirm',
- title: 'Confirm',
- body: <div>{body}</div>,
- onConfirm,
- confirmLabel,
- cancelLabel,
- visible: true,
- size: 'xl',
- }),
- )
+ ModalService.confirm({
+ title: 'Confirm',
+ body: <div>{body}</div>,
+ onConfirm,
+ confirmLabel,
+ cancelLabel,
+ size: 'xl',
+ })
 
  return showModal
 }

src/layout/DefaultLayout.js

@@ -1,6 +1,5 @@
 import React, { useEffect, Suspense, useCallback } from 'react'
-import { AppSidebar, AppFooter, AppHeader, FullScreenLoading } from '../components/index'
-import SharedModal from '../components/SharedModal'
+import { AppSidebar, AppFooter, AppHeader, FullScreenLoading, ModalRoot } from '../components/index'
 import Toasts from '../components/Toasts'
 import { useDispatch, useSelector } from 'react-redux'
 import { Outlet } from 'react-router-dom'
@@ -28,7 +27,7 @@ const DefaultLayout = () => {
  return (
  <div>
  <FastSwitcher />
- <SharedModal />
+ <ModalRoot />
  <Toasts />
  <AppSidebar />
  <div className="wrapper d-flex flex-column min-vh-100">

src/store/root.js

@@ -3,7 +3,6 @@ import { combineReducers } from '@reduxjs/toolkit'
 // features
 import appReducer, { appSlice } from './features/app'
 import authReducer, { authSlice } from './features/auth'
-import { modalSlice } from './features/modal'
 import { toastsSlice } from './features/toasts'
 import { switcherSlice } from './features/switcher'
 
@@ -18,7 +17,6 @@ export const root = {
  // slices
  [appSlice.name]: appReducer,
  [authSlice.name]: authReducer,
- [modalSlice.name]: modalSlice.reducer,
  [switcherSlice.name]: switcherSlice.reducer,
  [toastsSlice.name]: toastsSlice.reducer,
 

src/store/store.js

@@ -1,20 +1,15 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { persistStore, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from 'redux-persist'
-import { modalSlice } from './features/modal'
 import { unauthenticatedMiddleware } from './middleware/unauthenticatedMiddleware'
 import { errorMiddleware } from './middleware/errorMiddleware'
 import { rootReducer, apiMiddleware } from './root'
 
-const modalActionTypes = Object.keys(modalSlice.actions).map(
- (action) => modalSlice.actions[action].type,
-)
-
 export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
  serializableCheck: {
- ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, ...modalActionTypes],
+ ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
  },
  }).concat([unauthenticatedMiddleware, ...apiMiddleware, errorMiddleware]),
 })

src/views/cipp/CIPPSettings.js

@@ -38,13 +38,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCircleNotch, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { useListTenantsQuery } from '../../store/api/tenants'
 import { useLazyEditDnsConfigQuery, useLazyGetDnsConfigQuery } from '../../store/api/domains'
-import { setModalContent } from '../../store/features/modal'
 import { useDispatch, useSelector } from 'react-redux'
 import { TenantSelector, CippTable, TenantSelectorMultiple } from '../../components/cipp'
 import { CippPage, RFFCFormSwitch, RFFCFormInput } from '../../components'
 import { Form } from 'react-final-form'
 import useConfirmModal from '../../hooks/useConfirmModal'
 import { setCurrentTenant } from '../../store/features/app'
+import { ModalService } from '../../components'
 
 const CIPPSettings = () => {
  const [active, setActive] = useState(1)
@@ -258,33 +258,25 @@ const ExcludedTenantsSettings = () => {
  } = useListExcludedTenantsQuery()
  const [removeExcludeTenant, removeExcludeTenantResult] = useExecRemoveExcludeTenantMutation()
  const [addExcludeTenant, addExcludeTenantResult] = useExecAddExcludeTenantMutation()
- const [selectedTenant, setSelectedTenant] = useState()
+ // const [selectedTenant, setSelectedTenant] = useState()
+ const selectedTenant = useRef()
 
  useEffect(() => {
  // if a tenant is already selected and that's the tenant the
  // user wants to exclude, we need to set that to the current state
- setSelectedTenant(currentTenant)
+ selectedTenant.current = currentTenant
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
 
  const handleRemoveExclusion = (domain) =>
- dispatch(
- setModalContent({
- componentType: 'confirm',
- title: 'Remove Exclusion',
- body: <div>Are you sure you want to remove the exclusion for {domain}?</div>,
- onConfirm: () => removeExcludeTenant(domain),
- confirmLabel: 'Continue',
- cancelLabel: 'Cancel',
- visible: true,
- }),
- )
+ ModalService.confirm({
+ title: 'Remove Exclusion',
+ body: <div>Are you sure you want to remove the exclusion for {domain}?</div>,
+ onConfirm: () => removeExcludeTenant(domain),
+ })
 
- const handleConfirmExcludeTenant = () => {
- console.log('selected tenant', selectedTenant)
- console.log('current tenant', currentTenant)
-
- addExcludeTenant(selectedTenant.defaultDomainName)
+ const handleConfirmExcludeTenant = (tenant) => {
+ addExcludeTenant(tenant.defaultDomainName)
  .unwrap()
  .then(() => {
  // since we're re-using tenant selector,
@@ -293,29 +285,17 @@ const ExcludedTenantsSettings = () => {
  })
  }
 
- const handleSelectExcludeTenant = (tenant) => {
- console.log('nani?', { tenant })
- setSelectedTenant(tenant)
- console.log('post set?', { selectedTenant })
- }
-
- const handleExcludeTenant = () => {
- dispatch(
- setModalContent({
- componentType: 'confirm',
- title: 'Add Exclusion',
- body: (
- <div style={{ overflow: 'visible' }}>
- <div>Select a tenant to exclude</div>
- <TenantSelector action={handleSelectExcludeTenant} />
- </div>
- ),
- onConfirm: handleConfirmExcludeTenant,
- confirmLabel: 'Continue',
- cancelLabel: 'Cancel',
- visible: true,
- }),
- )
+ const handleExcludeTenant = (selected) => {
+ ModalService.confirm({
+ body: (
+ <div style={{ overflow: 'visible' }}>
+ <div>Select a tenant to exclude</div>
+ <TenantSelector action={(tenant) => (selected.current = tenant)} />
+ </div>
+ ),
+ title: 'Add Exclusion',
+ onConfirm: () => handleConfirmExcludeTenant(selected.current),
+ })
  }
 
  return (
@@ -340,7 +320,7 @@ const ExcludedTenantsSettings = () => {
  style={{ position: 'absolute', right: '5px' }}
  size="sm"
  href="#"
- onClick={() => handleExcludeTenant()}
+ onClick={() => handleExcludeTenant(selectedTenant)}
  >
  Add Excluded Tenant
  </CButton>