integrated hyperflux to dialog service

packages/client-core/src/common/components/Dialog/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 
+import { dispatchAction } from '@xrengine/hyperflux'
+
 import CloseIcon from '@mui/icons-material/Close'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
@@ -22,13 +24,13 @@ const UIDialog = (): JSX.Element => {
 
   useEffect(() => {
     history.listen(() => {
-      dispatch(DialogAction.dialogClose())
+      dispatchAction(DialogAction.dialogClose())
     })
   }, [])
 
   const handleClose = (e: any): void => {
     e.preventDefault()
-    dispatch(DialogAction.dialogClose())
+    dispatchAction(DialogAction.dialogClose())
   }
 
   return (

packages/client-core/src/common/services/DialogService.ts

@@ -1,47 +1,41 @@
-import { createState, useState } from '@speigg/hookstate'
-
 import { DialogSeed } from '@xrengine/common/src/interfaces/Dialog'
-import { Dialog } from '@xrengine/common/src/interfaces/Dialog'
-
-import { store } from '../../store'
+import { matches } from '@xrengine/engine/src/common/functions/MatchesUtils'
+import { defineAction, defineState, dispatchAction, getState, useState } from '@xrengine/hyperflux'
 
 //State
-const state = createState({
-  isOpened: false,
-  content: DialogSeed
+const DialogState = defineState({
+  name: 'DialogState',
+  initial: () => ({
+    isOpened: false,
+    content: DialogSeed
+  })
 })
 
-store.receptors.push((action: DialogActionType): any => {
-  state.batch((s) => {
-    switch (action.type) {
-      case 'SHOW_DIALOG':
+export const DialogServiceReceptor = (action) => {
+  getState(action).batch((s) => {
+    matches(action)
+      .when(DialogAction.dialogShow.matches, (action) => {
         return s.merge({ isOpened: true, content: action.content })
-      case 'CLOSE_DIALOG':
+      })
+      .when(DialogAction.dialogClose.matches, () => {
         return s.merge({ isOpened: false, content: DialogSeed })
-      default:
-        break
-    }
-  }, action.type)
-})
+      })
+  })
+}
 
-export const dialogState = () => state
+export const dialogState = () => getState(DialogState)
 
-export const useDialogState = () => useState(state) as any as typeof state
+export const useDialogState = () => useState(dialogState())
 
 //Action
-export const DialogAction = {
-  dialogShow: (content: Dialog) => {
-    return {
-      type: 'SHOW_DIALOG' as const,
-      content
-    }
-  },
-  dialogClose: () => {
-    return {
-      type: 'CLOSE_DIALOG' as const,
-      content: undefined
-    }
-  }
+export class DialogAction {
+  static dialogShow = defineAction({
+    type: 'SHOW_DIALOG' as const,
+    content: matches.object
+  })
+
+  static dialogClose = defineAction({
+    type: 'CLOSE_DIALOG' as const,
+    content: matches.any
+  })
 }
-
-export type DialogActionType = ReturnType<typeof DialogAction[keyof typeof DialogAction]>

packages/client-core/src/user/components/Auth/PasswordLogin.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { dispatchAction } from '@xrengine/hyperflux'
+
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
 import Avatar from '@mui/material/Avatar'
 import Button from '@mui/material/Button'
@@ -47,7 +49,7 @@ const PasswordLogin = ({ isAddConnection }: Props): JSX.Element => {
         },
         userId as string
       )
-      dispatch(DialogAction.dialogClose())
+      dispatchAction(DialogAction.dialogClose())
     } else {
       AuthService.loginUserByPassword({
         email: state.email,
@@ -113,9 +115,9 @@ const PasswordLogin = ({ isAddConnection }: Props): JSX.Element => {
                   href="#"
                   // variant="body2"
                   onClick={() =>
-                    dispatch(
+                    dispatchAction(
                       DialogAction.dialogShow({
-                        children: <ForgotPassword />
+                        content: <ForgotPassword />
                       })
                     )
                   }
@@ -130,9 +132,9 @@ const PasswordLogin = ({ isAddConnection }: Props): JSX.Element => {
                   href="#"
                   // variant="body2"
                   onClick={() =>
-                    dispatch(
+                    dispatchAction(
                       DialogAction.dialogShow({
-                        children: <SignUp />
+                        content: <SignUp />
                       })
                     )
                   }

packages/client/src/route/public.tsx

@@ -13,6 +13,7 @@ import {
 } from '@xrengine/client-core/src/admin/services/Setting/ClientSettingService'
 import ErrorBoundary from '@xrengine/client-core/src/common/components/ErrorBoundary'
 import { AppServiceReceptor } from '@xrengine/client-core/src/common/services/AppService'
+import { DialogServiceReceptor } from '@xrengine/client-core/src/common/services/DialogService'
 import { ProjectServiceReceptor } from '@xrengine/client-core/src/common/services/ProjectService'
 import { LoadingCircle } from '@xrengine/client-core/src/components/LoadingCircle'
 import { InviteService, InviteServiceReceptor } from '@xrengine/client-core/src/social/services/InviteService'
@@ -49,6 +50,7 @@ function RouterComp(props) {
     addActionReceptor(AuthServiceReceptor)
     addActionReceptor(InviteServiceReceptor)
     addActionReceptor(LocationServiceReceptor)
+    addActionReceptor(DialogServiceReceptor)
     addActionReceptor(AppServiceReceptor)
     addActionReceptor(ProjectServiceReceptor)
 
@@ -75,6 +77,7 @@ function RouterComp(props) {
       removeActionReceptor(AuthServiceReceptor)
       removeActionReceptor(InviteServiceReceptor)
       removeActionReceptor(LocationServiceReceptor)
+      removeActionReceptor(DialogServiceReceptor)
       removeActionReceptor(AppServiceReceptor)
       removeActionReceptor(ProjectServiceReceptor)
     }