Optimize-routing (#10465)

* optimize routing and client settings state cleanup

* license

* format

* fix index not loading, optimize and fix auth routes

* fixes

* log

packages/client-core/src/admin/components/settings/tabs/client.tsx

@@ -27,8 +27,8 @@ import React, { forwardRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiMinus, HiPlusSmall } from 'react-icons/hi2'
 
-import { ClientSettingType } from '@etherealengine/common/src/schema.type.module'
-import { getMutableState, NO_PROXY, none, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import { clientSettingPath, ClientSettingType } from '@etherealengine/common/src/schema.type.module'
+import { NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 import Accordion from '@etherealengine/ui/src/primitives/tailwind/Accordion'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import Input from '@etherealengine/ui/src/primitives/tailwind/Input'
@@ -37,8 +37,8 @@ import Select from '@etherealengine/ui/src/primitives/tailwind/Select'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import Toggle from '@etherealengine/ui/src/primitives/tailwind/Toggle'
 
-import { AuthState } from '../../../../user/services/AuthService'
-import { AdminClientSettingsState, ClientSettingService } from '../../../services/Setting/ClientSettingService'
+import { Engine } from '@etherealengine/ecs'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 
 const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefObject<HTMLDivElement>) => {
   const { t } = useTranslation()
@@ -47,51 +47,25 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
     loading: false,
     errorMessage: ''
   })
-  const user = useHookstate(getMutableState(AuthState).user)
 
-  const clientSettingState = useMutableState(AdminClientSettingsState)
-  const [clientSetting] = clientSettingState?.client?.get({ noproxy: true }) || []
-  const id = clientSetting?.id
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSettings = clientSettingQuery.data[0] ?? null
+  const id = clientSettings?.id
 
-  const settings = useHookstate(clientSetting)
+  const settingsState = useHookstate(null as null | ClientSettingType)
 
   useEffect(() => {
-    if (user?.id?.value != null && clientSettingState?.updateNeeded?.value === true) {
-      ClientSettingService.fetchClientSettings()
+    if (clientSettingQuery) {
+      state.set({ loading: clientSettingQuery.status === 'pending', errorMessage: clientSettingQuery.error })
     }
-  }, [user?.id?.value, clientSettingState?.updateNeeded?.value])
+  }, [clientSettingQuery])
 
   useEffect(() => {
-    if (clientSetting) {
-      settings.merge({
-        logo: clientSetting?.logo,
-        title: clientSetting?.title,
-        shortTitle: clientSetting?.shortTitle,
-        startPath: clientSetting?.startPath || '/',
-        appTitle: clientSetting?.appTitle,
-        appSubtitle: clientSetting?.appSubtitle,
-        appDescription: clientSetting?.appDescription,
-        appBackground: clientSetting?.appBackground,
-        appSocialLinks: JSON.parse(JSON.stringify(clientSetting?.appSocialLinks)) || [],
-        appleTouchIcon: clientSetting?.appleTouchIcon,
-        icon192px: clientSetting?.icon192px,
-        icon512px: clientSetting?.icon512px,
-        siteManifest: clientSetting?.siteManifest,
-        safariPinnedTab: clientSetting?.safariPinnedTab,
-        favicon: clientSetting?.favicon,
-        webmanifestLink: clientSetting?.webmanifestLink,
-        swScriptLink: clientSetting?.swScriptLink,
-        favicon16px: clientSetting?.favicon16px,
-        favicon32px: clientSetting?.favicon32px,
-        siteDescription: clientSetting?.siteDescription,
-        key8thWall: clientSetting?.key8thWall,
-        privacyPolicy: clientSetting?.privacyPolicy,
-        homepageLinkButtonEnabled: clientSetting?.homepageLinkButtonEnabled,
-        homepageLinkButtonRedirect: clientSetting?.homepageLinkButtonRedirect,
-        homepageLinkButtonText: clientSetting?.homepageLinkButtonText
-      })
+    if (clientSettings) {
+      settingsState.set(clientSettings)
+      state.set({ loading: false, errorMessage: '' })
     }
-  }, [clientSettingState?.updateNeeded?.value])
+  }, [clientSettings])
 
   const codecMenu = [
     {
@@ -130,24 +104,32 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
   const handleSubmit = (event) => {
     state.loading.set(true)
     event.preventDefault()
-    console.log(settings.get(NO_PROXY))
-    settings.merge({
-      createdAt: none,
-      updatedAt: none
-    })
-    ClientSettingService.patchClientSetting(settings.value as ClientSettingType, id)
+    const newSettings = {
+      ...settingsState.get(NO_PROXY),
+      createdAt: undefined!,
+      updatedAt: undefined!
+    } as any as ClientSettingType
+    Engine.instance.api
+      .service(clientSettingPath)
+      .patch(id, newSettings)
       .then(() => {
         state.set({ loading: false, errorMessage: '' })
+        clientSettingQuery.refetch()
       })
       .catch((e) => {
         state.set({ loading: false, errorMessage: e.message })
       })
   }
 
   const handleCancel = () => {
-    settings.set(clientSetting)
+    settingsState.set(clientSettings)
   }
 
+  if (!settingsState.value)
+    return <LoadingView fullScreen className="block h-12 w-12" title={t('common:loader.loading')} />
+
+  const settings = settingsState as State<ClientSettingType>
+
   return (
     <Accordion
       title={t('admin:components.setting.client.header')}
@@ -292,14 +274,14 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
         <Input
           className="col-span-1"
           label={t('admin:components.setting.url')}
-          value={clientSetting?.url || ''}
+          value={clientSettings?.url || ''}
           disabled
         />
 
         <Input
           className="col-span-1"
           label={t('admin:components.setting.releaseName')}
-          value={clientSetting?.releaseName || ''}
+          value={clientSettings?.releaseName || ''}
           disabled
         />
 

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

@@ -27,7 +27,6 @@ import { defaultThemeSettings, getCurrentTheme } from '@etherealengine/common/sr
 import { ClientThemeOptionsType } from '@etherealengine/common/src/schema.type.module'
 import { defineState, getMutableState, getState, useMutableState } from '@etherealengine/hyperflux'
 
-import { AdminClientSettingsState } from '../../admin/services/Setting/ClientSettingService'
 import { AuthState } from '../../user/services/AuthService'
 
 /** @deprected this is the thene for mui pages, it will be replaced with ThemeService / ThemeState */
@@ -70,9 +69,5 @@ export const getAppTheme = () => {
 
   const authState = getState(AuthState)
   const theme = getCurrentTheme(authState.user?.userSetting?.themeModes)
-  const clientSettingState = getState(AdminClientSettingsState)
-  const themeSettings = clientSettingState?.client?.[0]?.themeSettings
-  if (themeSettings) return themeSettings[theme]
-
   return defaultThemeSettings[theme]
 }

packages/client-core/src/common/services/RouterService.tsx

@@ -70,7 +70,13 @@ export const RouterState = defineState({
 export type CustomRoute = {
   route: string
   component: ReturnType<typeof lazy>
-  props: any
+  componentProps?: {
+    [x: string]: any
+  }
+  props?: {
+    [x: string]: any
+    exact?: boolean
+  }
 }
 
 /**
@@ -110,5 +116,5 @@ export const useCustomRoutes = () => {
     })
   }, [])
 
-  return customRoutes.get(NO_PROXY)
+  return customRoutes.get(NO_PROXY) as CustomRoute[]
 }

packages/client-core/src/components/LoadWebappInjection.tsx

@@ -23,16 +23,26 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import config from '@etherealengine/common/src/config'
+import { clientSettingPath } from '@etherealengine/common/src/schema.type.module'
 import { NO_PROXY } from '@etherealengine/hyperflux'
 import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
 import { useHookstate } from '@hookstate/core'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export const LoadWebappInjection = (props) => {
+export const LoadWebappInjection = (props: { children: React.ReactNode }) => {
   const { t } = useTranslation()
 
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSettings = clientSettingQuery.data[0] ?? null
+  useEffect(() => {
+    config.client.key8thWall = clientSettings?.key8thWall
+    config.client.mediaSettings = clientSettings?.mediaSettings
+  }, [clientSettings])
+
   const projectComponents = useHookstate(null as null | any[])
 
   useEffect(() => {

packages/client-core/src/components/UserMediaWindow/index.tsx

@@ -42,7 +42,7 @@ import {
   toggleWebcamPaused
 } from '@etherealengine/client-core/src/transports/SocketWebRTCClientFunctions'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
-import { UserName, userPath } from '@etherealengine/common/src/schema.type.module'
+import { UserName, clientSettingPath, userPath } from '@etherealengine/common/src/schema.type.module'
 import { useExecute } from '@etherealengine/ecs'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { AudioState } from '@etherealengine/engine/src/audio/AudioState'
@@ -59,7 +59,7 @@ import {
   useMutableState
 } from '@etherealengine/hyperflux'
 import { NetworkState, VideoConstants } from '@etherealengine/network'
-import { useGet } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import { useFind, useGet } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { isMobile } from '@etherealengine/spatial/src/common/functions/isMobile'
 import { drawPoseToCanvas } from '@etherealengine/ui/src/pages/Capture'
 import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
@@ -68,7 +68,6 @@ import Slider from '@etherealengine/ui/src/primitives/mui/Slider'
 import Tooltip from '@etherealengine/ui/src/primitives/mui/Tooltip'
 import Canvas from '@etherealengine/ui/src/primitives/tailwind/Canvas'
 
-import { AdminClientSettingsState } from '../../admin/services/Setting/ClientSettingService'
 import { MediaStreamState } from '../../transports/MediaStreams'
 import { PeerMediaChannelState, PeerMediaStreamInterface } from '../../transports/PeerMediaChannelState'
 import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
@@ -491,6 +490,9 @@ export const UserMediaWindow = ({ peerID, type }: Props): JSX.Element => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const canvasCtxRef = useRef<CanvasRenderingContext2D>()
 
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSetting = clientSettingQuery.data[0]
+
   useDrawMocapLandmarks(videoElement, canvasCtxRef, canvasRef, peerID)
 
   useEffect(() => {
@@ -517,8 +519,7 @@ export const UserMediaWindow = ({ peerID, type }: Props): JSX.Element => {
     const encodings = videoStream.rtpParameters.encodings
 
     const immersiveMedia = getMutableState(MediaSettingsState).immersiveMedia
-    const clientSettingState = getMutableState(AdminClientSettingsState)
-    const { maxResolution } = clientSettingState.client[0].mediaSettings.video.value
+    const { maxResolution } = clientSetting.mediaSettings.video
     const resolution = VideoConstants.VIDEO_CONSTRAINTS[maxResolution] || VideoConstants.VIDEO_CONSTRAINTS.hd
     if (isPiP || immersiveMedia.value) {
       let maxLayer

packages/client-core/src/systems/LoadingUISystem.tsx

@@ -70,7 +70,6 @@ import { ObjectFitFunctions } from '@etherealengine/spatial/src/xrui/functions/O
 import type { WebLayer3D } from '@etherealengine/xrui'
 
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
-import { AdminClientSettingsState } from '../admin/services/Setting/ClientSettingService'
 import { AppThemeState, getAppTheme } from '../common/services/AppThemeState'
 import { useRemoveEngineCanvas } from '../hooks/useEngineCanvas'
 import { LocationState } from '../social/services/LocationService'
@@ -339,17 +338,14 @@ const execute = () => {
 const Reactor = () => {
   const themeState = useMutableState(AppThemeState)
   const themeModes = useHookstate(getMutableState(AuthState).user?.userSetting?.ornull?.themeModes)
-  const clientSettings = useHookstate(
-    getMutableState(AdminClientSettingsState)?.client?.[0]?.themeSettings?.clientSettings
-  )
   const locationSceneID = useHookstate(getMutableState(LocationState).currentLocation.location.sceneId).value
   const sceneEntity = GLTFAssetState.useScene(locationSceneID)
   const gltfDocumentState = useMutableState(GLTFDocumentState)
 
   useEffect(() => {
     const theme = getAppTheme()
     if (theme) defaultColor.set(theme!.textColor)
-  }, [themeState, themeModes, clientSettings])
+  }, [themeState, themeModes])
 
   if (!sceneEntity) return null
 

packages/client-core/src/transports/MediaStreams.ts

@@ -24,10 +24,10 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import multiLogger from '@etherealengine/common/src/logger'
-import { defineState, getMutableState, getState } from '@etherealengine/hyperflux'
+import { defineState, getMutableState } from '@etherealengine/hyperflux'
 import { VideoConstants } from '@etherealengine/network'
 
-import { AdminClientSettingsState } from '../admin/services/Setting/ClientSettingService'
+import config from '@etherealengine/common/src/config'
 import { ProducerExtension } from './SocketWebRTCClientFunctions'
 
 const logger = multiLogger.child({ component: 'client-core:MediaStreams' })
@@ -182,9 +182,8 @@ export const MediaStreamService = {
    */
   async getVideoStream() {
     const state = getMutableState(MediaStreamState)
-    const clientSettingState = getState(AdminClientSettingsState)
     try {
-      const { maxResolution } = clientSettingState.client[0].mediaSettings.video
+      const { maxResolution } = config.client.mediaSettings!.video
       const constraints = {
         video: VideoConstants.VIDEO_CONSTRAINTS[maxResolution] || VideoConstants.VIDEO_CONSTRAINTS.hd
       }