modal reducer

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -5,6 +5,9 @@ import MatomoDialog from './modals/matomo'
 import AlertModal from './modals/alert'
 import AppContext from './context/context'
 import DragBar from './dragbar/dragbar'
+import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
+import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
+import { Modal } from './types'
 interface IRemixAppUi {
   app: any
 }
@@ -16,6 +19,19 @@ const RemixApp = (props: IRemixAppUi) => {
   const mainPanelRef = useRef(null)
   const iconPanelRef = useRef(null)
   const hiddenPanelRef = useRef(null)
+  // modals
+  const [focusModal, setFocusModal] = useState<Modal>({
+    hide: true,
+    title: '',
+    message: '',
+    okLabel: '',
+    okFn: () => {},
+    cancelLabel: '',
+    cancelFn: () => {}
+  })
+  const [modals, setModals] = useState<Modal[]>([])
+  const [focusToaster, setFocusToaster] = useState<string>('')
+  const [toasters, setToasters] = useState<string[]>([])
 
   useEffect(() => {
     if (sidePanelRef.current) {
@@ -61,6 +77,36 @@ const RemixApp = (props: IRemixAppUi) => {
     })
   }
 
+  const handleHideModal = () => {
+    setFocusModal(modal => {
+      return { ...modal, hide: true, message: null }
+    })
+  }
+
+  // eslint-disable-next-line no-undef
+  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+    setModals(modals => {
+      modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
+      return [...modals]
+    })
+  }
+
+  export const clearPopUp = async () => {
+    dispatch(hidePopUp())
+  }
+
+  const handleToaster = () => {
+    setFocusToaster('')
+    clearPopUp()
+  }
+
+  const toast = (toasterMsg: string) => {
+    setToasters(messages => {
+      messages.push(toasterMsg)
+      return [...messages]
+    })
+  }
+
   const components = {
     iconPanel: <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"></div>,
     sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}></div>,
@@ -68,8 +114,14 @@ const RemixApp = (props: IRemixAppUi) => {
     hiddenPanel: <div ref={hiddenPanelRef}></div>
   }
 
+  const value = {
+    settings: props.app.settings,
+    showMatamo: props.app.showMatamo,
+    appManager: props.app.appManager
+  }
+
   return (
-    <AppContext.Provider value={{ settings: props.app.settings, showMatamo: props.app.showMatamo, appManager: props.app.appManager }}>
+    <AppContext.Provider value={value}>
       <RemixSplashScreen hide={appReady}></RemixSplashScreen>
       <AlertModal></AlertModal>
       <MatomoDialog hide={!appReady}></MatomoDialog>

libs/remix-ui/app/src/lib/remix-app/state/modals.ts

@@ -0,0 +1,48 @@
+import { useReducer } from 'react'
+import { modalReducer } from '../reducer/modals'
+
+export const actionTypes = {
+  setModal: 'SET_MODAL',
+  setToast: 'SET_TOAST'
+}
+
+export const setModal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+  return {
+    type: actionTypes.setModal,
+    payload: { message, title, okLabel, okFn, cancelLabel, cancelFn }
+  }
+}
+
+export const setToast = (toasterMsg: string) => {
+  return {
+    type: actionTypes.setToast,
+    payload: toasterMsg
+  }
+}
+
+function useModals ({ reducer = modalReducer } = {}) {
+  const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, {
+    modals: [],
+    toasters: [],
+    focusModal: {
+      hide: true,
+      title: '',
+      message: '',
+      okLabel: '',
+      okFn: () => {},
+      cancelLabel: '',
+      cancelFn: () => {}
+    },
+    focusToaster: ''
+  })
+
+  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+    dispatch(setModal(title, message, okLabel, okFn, cancelLabel, cancelFn))
+  }
+
+  const toast = (toasterMsg: string) => {
+    dispatch(setToast(toasterMsg))
+  }
+
+  return { focusModal, modals, focusToaster, toasters, modal, toast }
+}