Update To React Router v6

package.json

@@ -129,7 +129,7 @@
     "pre-commit": "1.2.2",
     "prettier": "2.8.1",
     "react-dnd": "16.0.0",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.8.1",
     "rimraf": "^3.0.2",
     "stylelint": "^14.6.1",
     "stylelint-config-standard-scss": "^3.0.0",

packages/client-core/i18n/en/admin.json

@@ -69,6 +69,7 @@
       "fixErrorFields": "Please fix all errors"
     },
     "analytics": {
+      "loading": "Loading analytics...",
       "activeParties": "Active Parties",
       "activeLocations": "Active Locations",
       "activeInstances": "Active Instances",

packages/client-core/i18n/en/common.json

@@ -16,9 +16,16 @@
   },
   "loader": {
     "connecting": "Connecting...",
+    "starting": "Starting...",
+    "loadingLocation": "Loading locations...",
     "loadingEngine": "Loading engine...",
+    "loadingEditor": "Loading editor...",
     "loadingRoutes": "Loading routes...",
     "loadingRoute": "Loading route...",
+    "loadingAuth": "Loading auth routes...",
+    "loadingAdmin": "Loading admin routes...",
+    "loadingCustom": "Loading custom routes...",
+    "loadingAllowed": "Loading allowed routes...",
     "loadingXRSystems": "Loading immersive session...",
     "connectingToWorld": "Connecting to world...",
     "entering": "Entering world...",
@@ -27,7 +34,10 @@
     "objectRemainingPlural": "{{count}} objects remaining",
     "loadingObjects": "Loading Objects",
     "loadingComplete": "Loading Complete",
-    "joiningWorld": "Joining World"
+    "joiningWorld": "Joining World",
+    "editor": "Loading Editor",
+    "offline": "Loading Offline",
+    "auth": "Loading Auth"
   },
   "alert": {
     "eventWasSuccess": "Event was successful",

packages/client-core/package.json

@@ -69,7 +69,7 @@
     "react-i18next": "11.16.6",
     "react-joystick-component": "4.0.0",
     "react-reflex": "^4.0.9",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.8.1",
     "recovery": "^0.2.6",
     "styled-components": "5.3.3",
     "tick-tock": "^1.0.0",

packages/client-core/src/admin/adminRoutes.tsx

@@ -1,32 +1,19 @@
-import React, { Suspense, useEffect } from 'react'
-import { Redirect, Switch } from 'react-router-dom'
+import { t } from 'i18next'
+import React, { lazy, Suspense, useEffect } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
 
-import LoadingView from '@xrengine/client-core/src/common/components/LoadingView'
 import { Engine } from '@xrengine/engine/src/ecs/classes/Engine'
 import { EngineActions, useEngineState } from '@xrengine/engine/src/ecs/classes/EngineState'
 import { initSystems } from '@xrengine/engine/src/ecs/functions/SystemFunctions'
 import { dispatchAction } from '@xrengine/hyperflux'
 
-import CircularProgress from '@mui/material/CircularProgress'
-
-import PrivateRoute from '../Private'
+import { LoadingCircle } from '../components/LoadingCircle'
 import AdminSystem from '../systems/AdminSystem'
+import Dashboard from '../user/components/Dashboard'
 import { useAuthState } from '../user/services/AuthService'
-import analytics from './components/Analytics'
-import avatars from './components/Avatars'
-import benchmarking from './components/Benchmarking'
-import botSetting from './components/Bots'
-import groups from './components/Group'
-import instance from './components/Instance'
-import invites from './components/Invite'
-import locations from './components/Location'
-import party from './components/Party'
-import projects from './components/Project'
-import resources from './components/Resources'
-import routes from './components/Routes'
-import server from './components/Server'
-import setting from './components/Setting'
-import users from './components/Users'
+import Analytics from './components/Analytics'
+
+const $allowed = lazy(() => import('@xrengine/client-core/src/admin/allowedRoutes'))
 
 const AdminSystemInjection = {
   uuid: 'core.admin.AdminSystem',
@@ -36,9 +23,9 @@ const AdminSystemInjection = {
 
 const ProtectedRoutes = () => {
   const admin = useAuthState().user
-  const { isEngineInitialized } = useEngineState().value
 
   let allowedRoutes = {
+    analytics: false,
     location: false,
     user: false,
     bot: false,
@@ -75,49 +62,18 @@ const ProtectedRoutes = () => {
   })
 
   if (admin?.id?.value?.length! > 0 && !admin?.scopes?.value?.find((scope) => scope.type === 'admin:admin')) {
-    return <Redirect to={{ pathname: '/', state: { from: '/admin' } }} />
+    return <Navigate to={{ pathname: '/' }} />
   }
 
   return (
-    <div style={{ pointerEvents: 'auto' }}>
-      <Suspense
-        fallback={
-          <div
-            style={{
-              height: '100vh',
-              width: '100%',
-              textAlign: 'center',
-              pointerEvents: 'auto',
-              paddingTop: 'calc(50vh - 7px)'
-            }}
-          >
-            <CircularProgress />
-          </div>
-        }
-      >
-        {!isEngineInitialized && <LoadingView sx={{ height: '100vh' }} />}
-        {isEngineInitialized && (
-          <Switch>
-            {allowedRoutes.globalAvatars && <PrivateRoute exact path="/admin/avatars" component={avatars} />}
-            {allowedRoutes.benchmarking && <PrivateRoute exact path="/admin/benchmarking" component={benchmarking} />}
-            {allowedRoutes.groups && <PrivateRoute exact path="/admin/groups" component={groups} />}
-            {allowedRoutes.instance && <PrivateRoute exact path="/admin/instance" component={instance} />}
-            {allowedRoutes.invite && <PrivateRoute exact path="/admin/invites" component={invites} />}
-            {allowedRoutes.location && <PrivateRoute exact path="/admin/locations" component={locations} />}
-            {allowedRoutes.routes && <PrivateRoute exact path="/admin/routes" component={routes} />}
-            {allowedRoutes.party && <PrivateRoute exact path="/admin/parties" component={party} />}
-            {allowedRoutes.bot && <PrivateRoute exact path="/admin/bots" component={botSetting} />}
-            {allowedRoutes.projects && <PrivateRoute exact path="/admin/projects" component={projects} />}
-            {allowedRoutes.server && <PrivateRoute exact path="/admin/server" component={server} />}
-            {allowedRoutes.settings && <PrivateRoute exact path="/admin/settings" component={setting} />}
-            {allowedRoutes.static_resource && <PrivateRoute exact path="/admin/resources" component={resources} />}
-            {allowedRoutes.user && <PrivateRoute exact path="/admin/users" component={users} />}
-            <PrivateRoute exact path="/admin/*" component={() => <Redirect to="/admin" />} />
-            <PrivateRoute path="/admin" component={analytics} />
-          </Switch>
-        )}
+    <Dashboard>
+      <Suspense fallback={<LoadingCircle message={t('common:loader.loadingAdmin')} />}>
+        <Routes>
+          <Route path="/*" element={<$allowed allowedRoutes={allowedRoutes} />} />
+          {<Route path="/" element={<Analytics />} />}
+        </Routes>
       </Suspense>
-    </div>
+    </Dashboard>
   )
 }
 

packages/client-core/src/admin/allowedRoutes.tsx

@@ -0,0 +1,67 @@
+import { t } from 'i18next'
+import React, { Suspense } from 'react'
+import { Route, Routes, useLocation } from 'react-router-dom'
+
+import { LoadingCircle } from '../components/LoadingCircle'
+import Avatars from './components/Avatars'
+import Benchmarking from './components/Benchmarking'
+import BotSetting from './components/Bots'
+import Groups from './components/Group'
+import Instance from './components/Instance'
+import Invites from './components/Invite'
+import Locations from './components/Location'
+import Party from './components/Party'
+import Projects from './components/Project'
+import Resources from './components/Resources'
+import RoutesComp from './components/Routes'
+import Server from './components/Server'
+import Setting from './components/Setting'
+import Users from './components/Users'
+
+const availableRoutes = [
+  { route: '/avatars', key: 'globalAvatars', component: Avatars, props: {} },
+  { route: '/benchmarking', key: 'benchmarking', component: Benchmarking, props: {} },
+  { route: '/groups', key: 'groups', component: Groups, props: {} },
+  { route: '/instance', key: 'instance', component: Instance, props: {} },
+  { route: '/invites', key: 'invite', component: Invites, props: {} },
+  { route: '/locations', key: 'location', component: Locations, props: {} },
+  { route: '/routes', key: 'routes', component: RoutesComp, props: {} },
+  { route: '/parties', key: 'party', component: Party, props: {} },
+  { route: '/bots', key: 'bot', component: BotSetting, props: {} },
+  { route: '/projects', key: 'projects', component: Projects, props: {} },
+  { route: '/server', key: 'server', component: Server, props: {} },
+  { route: '/settings', key: 'settings', component: Setting, props: {} },
+  { route: '/resources', key: 'static_resource', component: Resources, props: {} },
+  { route: '/users', key: 'user', component: Users, props: {} }
+]
+
+const AllowedRoutes = ({ allowedRoutes }) => {
+  const location = useLocation()
+  const { pathname } = location
+
+  // Improve loading by only using matched route
+  const matchedRoutes = availableRoutes.filter((r) => {
+    return r.route.split('/')[1] === pathname.split('/')[2] && allowedRoutes[r.key]
+  })
+  console.log(matchedRoutes)
+  return (
+    <Suspense fallback={<LoadingCircle message={t('common:loader.loadingAllowed')} />}>
+      <Routes>
+        {matchedRoutes.map((route, i) => {
+          const { route: r, component, props: p } = route
+          const Element = component as any
+          return (
+            <Route
+              key={`custom-route-${i}`}
+              path={r.split('/')[1] === '' ? `${r}*` : `${r}/*`}
+              element={<Element />}
+              {...p}
+            />
+          )
+        })}
+      </Routes>
+    </Suspense>
+  )
+}
+
+export default AllowedRoutes

packages/client-core/src/admin/components/Analytics/AnalyticsService.tsx

@@ -30,7 +30,7 @@ const AnalyticsService = ({ name, colors, fetch, data, refetch }: any) => {
       />
     )
   } else {
-    return <LoadingView sx={{ height: '100vh' }} />
+    return <LoadingView sx={{ height: '100vh' }} title={t(`admin:components.analytics.loading`)} />
   }
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { dispatchAction } from '@xrengine/hyperflux'
 
@@ -18,13 +18,11 @@ const UIDialog = (): JSX.Element => {
   const dialog = useDialogState()
   const isOpened = dialog.isOpened
   const content = dialog.content
-  const history = useHistory()
+  const navigate = useNavigate()
 
   useEffect(() => {
-    history.listen(() => {
-      dispatchAction(DialogAction.dialogClose({}))
-    })
-  }, [])
+    dispatchAction(DialogAction.dialogClose({}))
+  }, [location, dispatchAction])
 
   const handleClose = (e: any): void => {
     e.preventDefault()

packages/client-core/src/components/World/LocationLoadHelper.tsx

@@ -1,4 +1,4 @@
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { LocationService } from '@xrengine/client-core/src/social/services/LocationService'
 import config from '@xrengine/common/src/config'
@@ -18,10 +18,10 @@ const logger = multiLogger.child({ component: 'client-core:world' })
 
 export const retrieveLocationByName = (locationName: string, userId: string) => {
   if (locationName === config.client.lobbyLocationName) {
-    const history = useHistory()
+    const navigate = useNavigate()
     LocationService.getLobby()
       .then((lobby) => {
-        history.replace('/location/' + lobby?.slugifiedName)
+        navigate('/location/' + lobby?.slugifiedName)
       })
       .catch((err) => logger.error(err, 'getLobby'))
   } else {

packages/client-core/src/user/components/Dashboard/DashboardMenuItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link, withRouter } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import Divider from '@mui/material/Divider'
 import List from '@mui/material/List'
@@ -17,8 +17,8 @@ interface Props {
   location: any
 }
 
-const DashboardMenuItem = ({ location }: Props) => {
-  const { pathname } = location
+const DashboardMenuItem = () => {
+  const { pathname } = useLocation()
   const scopes = useAuthState().user?.scopes?.value || []
   const { t } = useTranslation()
 
@@ -58,8 +58,15 @@ const DashboardMenuItem = ({ location }: Props) => {
         {SidebarItems(allowedRoutes)
           .filter(Boolean)
           .map((sidebarItem, index) => {
+            const pieces = sidebarItem.path.split('/')
+            const lastPiece = pieces[pieces.length - 1]
             return (
-              <Link key={index} to={sidebarItem.path} className={styles.textLink} title={t(sidebarItem.name)}>
+              <Link
+                key={index}
+                to={lastPiece === 'admin' ? '/admin' : lastPiece}
+                className={styles.textLink}
+                title={t(sidebarItem.name)}
+              >
                 <ListItem
                   classes={{ selected: styles.selected }}
                   style={{ color: 'var(--iconButtonColor)' }}
@@ -77,4 +84,4 @@ const DashboardMenuItem = ({ location }: Props) => {
   )
 }
 
-export default withRouter(DashboardMenuItem)
+export default DashboardMenuItem

packages/client-core/src/user/components/Dashboard/index.module.scss

@@ -101,10 +101,13 @@
 }
 
 .drawer {
-  z-index: 9;
+  z-index: 999;
   width: 250px;
   flex-shrink: 0;
   white-space: nowrap;
+  position: fixed;
+  height: "100vh";
+  pointer-events: auto;
 }
 
 .drawerOpen {
@@ -117,7 +120,6 @@
 }
 
 .drawerClose {
-  z-index: 9;
   overflow-x: hidden;
   width: 57px !important;
   transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1);

packages/client-core/src/user/components/Dashboard/index.tsx

@@ -7,7 +7,6 @@ import { ChevronLeft, ChevronRight, Menu } from '@mui/icons-material'
 import { Person } from '@mui/icons-material'
 import { Box, Popover } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
-import CssBaseline from '@mui/material/CssBaseline'
 import Drawer from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
 import { useTheme } from '@mui/material/styles'
@@ -60,8 +59,7 @@ const Dashboard = ({ children }: Props) => {
   }
 
   return (
-    <div>
-      <CssBaseline />
+    <div style={{ pointerEvents: 'auto' }}>
       <AppBar position="fixed" className={styles.appBar}>
         <nav className={styles.navbar}>
           <div className={styles.navContainer}>