Hashes and Consistent Esc Key

esbuild.config.mjs

@@ -146,6 +146,7 @@ const esbuild = {
       TITLE: env.parsed.TITLE || env.parsed.MAP_GENERAL_TITLE || '',
       SENTRY_DSN: env.parsed.SENTRY_DSN || '',
       SENTRY_TRACES_SAMPLE_RATE: env.parsed.SENTRY_TRACES_SAMPLE_RATE || 0.1,
+      SENTRY_DEBUG: env.parsed.SENTRY_DEBUG || false,
       VERSION: version,
       DEVELOPMENT: isDevelopment,
       CUSTOM: hasCustom,

example.env

@@ -5,4 +5,5 @@ SENTRY_AUTH_TOKEN=""
 SENTRY_ORG=""
 SENTRY_PROJECT=""
 SENTRY_TRACES_SAMPLE_RATE=0.1
-DEV_PORT=""
+SENTRY_DEBUG=
+DEV_PORT=""

package.json

@@ -101,7 +101,7 @@
     "react-i18next": "^11.9.0",
     "react-leaflet": "3.2.2",
     "react-leaflet-markercluster": "3.0.0-rc1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.0",
     "react-virtualized-auto-sizer": "^1.0.5",
     "react-window": "^1.8.6",
     "require-from-string": "^2.0.2",

src/components/App.jsx

@@ -1,10 +1,12 @@
 import '@assets/css/main.css'
 
 import React, { Suspense } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
 import { ApolloProvider } from '@apollo/client'
 import client from '@services/apollo'
 
-import ReactRouter from './ReactRouter'
+import Config from './Config'
 import ErrorBoundary from './ErrorBoundary'
 
 const SetText = () => {
@@ -32,12 +34,13 @@ const SetText = () => {
 
 export default function App() {
   document.body.classList.add('dark')
-
   return (
     <Suspense fallback={<SetText />}>
       <ApolloProvider client={client}>
         <ErrorBoundary>
-          <ReactRouter />
+          <BrowserRouter>
+            <Config />
+          </BrowserRouter>
         </ErrorBoundary>
       </ApolloProvider>
     </Suspense>

src/components/ClearStorage.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 
 export default function ClearStorage() {
   localStorage.clear()
   sessionStorage.clear()
-  return <Redirect push to="/" />
+  return <Navigate push to="/" />
 }

src/components/Config.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { ThemeProvider } from '@material-ui/styles'
+import { useTranslation } from 'react-i18next'
+
+import setTheme from '@assets/mui/theme'
+import UIcons from '@services/Icons'
+import Fetch from '@services/Fetch'
+
+import ReactRouter from './ReactRouter'
+import HolidayEffects from './HolidayEffects'
+
+const rootLoading = document.getElementById('loader')
+const loadingText = document.getElementById('loading-text')
+
+export default function Config() {
+  const { t } = useTranslation()
+  const [serverSettings, setServerSettings] = useState(null)
+
+  if (rootLoading) {
+    if (serverSettings) {
+      rootLoading.style.display = 'none'
+    }
+  }
+
+  if (rootLoading) {
+    if (serverSettings) {
+      rootLoading.style.display = 'none'
+    }
+  }
+  const getServerSettings = useCallback(async () => {
+    const data = await Fetch.getSettings()
+    const Icons = data.masterfile ? new UIcons(data.config.icons, data.masterfile.questRewardTypes) : null
+    if (Icons) {
+      Icons.build(data.config.icons.styles)
+      if (data.config.icons.defaultIcons) {
+        Icons.setSelection(data.config.icons.defaultIcons)
+      }
+    }
+    setServerSettings({ ...data, Icons })
+  }, [])
+
+  useEffect(() => {
+    if (!serverSettings) {
+      if (loadingText) {
+        loadingText.innerText = t('loading_settings')
+      }
+      getServerSettings()
+    }
+  }, [])
+
+  if (!serverSettings) {
+    return <div />
+  }
+
+  return (
+    <ThemeProvider theme={setTheme(serverSettings?.config?.map?.theme)}>
+      <ReactRouter serverSettings={serverSettings} getServerSettings={getServerSettings} />
+      <canvas id="holiday-canvas" />
+      <HolidayEffects mapSettings={serverSettings?.config?.map ? serverSettings.config.map : {}} />
+    </ThemeProvider>
+  )
+}

src/components/Container.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { MapContainer } from 'react-leaflet'
+import { useStore } from '@hooks/useStore'
+
+import Map from './Map'
+
+export default function Container({ serverSettings, params }) {
+  const location = useStore(state => state.location)
+  const zoom = useStore(state => state.zoom)
+
+  return (
+    <MapContainer
+      tap={false}
+      center={location}
+      zoom={zoom}
+      zoomControl={false}
+      preferCanvas
+    >
+      {(serverSettings.user && serverSettings.user.perms.map) && (
+        <Map
+          serverSettings={serverSettings}
+          params={params}
+        />
+      )}
+    </MapContainer>
+  )
+}

src/components/ReactRouter.jsx

@@ -1,82 +1,36 @@
-import React, { useEffect, useState, useCallback } from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { ThemeProvider } from '@material-ui/styles'
-
-import setTheme from '@assets/mui/theme'
-import UIcons from '@services/Icons'
-import Fetch from '@services/Fetch'
+import React from 'react'
+import { Route, Routes } from 'react-router-dom'
+import useConfig from '@hooks/useConfig'
 
 import Auth from './layout/auth/Auth'
 import Login from './layout/auth/Login'
-import RouteChangeTracker from './RouteChangeTracker'
 import Errors from './Errors'
 import ClearStorage from './ClearStorage'
-import HolidayEffects from './HolidayEffects'
-
-const rootLoading = document.getElementById('loader')
-const loadingText = document.getElementById('loading-text')
-
-export default function ReactRouter() {
-  const { t } = useTranslation()
-  const [serverSettings, setServerSettings] = useState(null)
 
-  if (rootLoading) {
-    if (serverSettings) {
-      rootLoading.style.display = 'none'
-    }
-  }
-  const getServerSettings = useCallback(async () => {
-    const data = await Fetch.getSettings()
-    const Icons = data.masterfile ? new UIcons(data.config.icons, data.masterfile.questRewardTypes) : null
-    if (Icons) {
-      Icons.build(data.config.icons.styles)
-      if (data.config.icons.defaultIcons) {
-        Icons.setSelection(data.config.icons.defaultIcons)
-      }
-    }
-    setServerSettings({ ...data, Icons })
-  }, [])
+export default function ReactRouter({ serverSettings, getServerSettings }) {
+  useConfig(serverSettings)
 
-  useEffect(() => {
-    if (!serverSettings) {
-      if (loadingText) {
-        loadingText.innerText = t('loading_settings')
-      }
-      getServerSettings()
-    }
-  }, [])
+  const authRoute = <Auth serverSettings={serverSettings} getServerSettings={getServerSettings} />
 
   return (
-    <ThemeProvider theme={setTheme(serverSettings?.config?.map?.theme)}>
-      <Router>
-        {(inject.GOOGLE_ANALYTICS_ID) && <RouteChangeTracker />}
-        <Switch>
-          <Route exact path="/404" component={Errors} />
-          <Route exact path="/500" component={Errors} />
-          <Route exact path="/reset" component={ClearStorage} />
-          <Route exact path="/">
-            {serverSettings && <Auth serverSettings={serverSettings} getServerSettings={getServerSettings} />}
-          </Route>
-          <Route exact path="/login">
-            {serverSettings && (
-              <Login
-                clickedTwice
-                serverSettings={serverSettings}
-                getServerSettings={getServerSettings}
-              />
-            )}
-          </Route>
-          <Route exact path="/@/:lat/:lon/:zoom?">
-            {serverSettings && <Auth serverSettings={serverSettings} getServerSettings={getServerSettings} />}
-          </Route>
-          <Route exact path="/id/:category/:id/:zoom?">
-            {serverSettings && <Auth serverSettings={serverSettings} getServerSettings={getServerSettings} />}
-          </Route>
-        </Switch>
-      </Router>
-      <canvas id="holiday-canvas" />
-      <HolidayEffects mapSettings={serverSettings?.config?.map ? serverSettings.config.map : {}} />
-    </ThemeProvider>
+    <Routes>
+      <Route path="/" element={authRoute} />
+      <Route path="reset" element={<ClearStorage />} />
+      <Route
+        path="login"
+        element={(
+          <Login
+            clickedTwice
+            serverSettings={serverSettings}
+            getServerSettings={getServerSettings}
+          />
+        )}
+      />
+      <Route path="@/:lat/:lon" element={authRoute} />
+      <Route path="@/:lat/:lon/:zoom" element={authRoute} />
+      <Route path="id/:category/:id" element={authRoute} />
+      <Route path="id/:category/:id/:zoom" element={authRoute} />
+      <Route path="*" element={<Errors />} />
+    </Routes>
   )
 }

src/components/WebhookQuery.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { useQuery } from '@apollo/client'
 
 import Query from '@services/Query'
-import ConfigSettings from './ConfigSettings'
+import ConfigSettings from './Container'
 
-export default function WebhookQuery({ match, serverSettings }) {
-  let lowercase = match.params.category.toLowerCase()
+export default function WebhookQuery({ params, serverSettings }) {
+  let lowercase = params.category.toLowerCase()
   if (lowercase === 'invasions'
     || lowercase === 'lures'
     || lowercase === 'quests') {
@@ -16,8 +16,8 @@ export default function WebhookQuery({ match, serverSettings }) {
   }
   const { data } = useQuery(Query[lowercase]('id'), {
     variables: {
-      id: match.params.id,
-      perm: match.params.category.toLowerCase(),
+      id: params.id,
+      perm: params.category.toLowerCase(),
       version: inject.VERSION,
     },
   })
@@ -26,8 +26,8 @@ export default function WebhookQuery({ match, serverSettings }) {
       paramLocation={data[`${lowercase}Single`]
         ? [data[`${lowercase}Single`].lat, data[`${lowercase}Single`].lon]
         : null}
-      paramZoom={match.params.zoom}
-      match={match}
+      paramZoom={params.zoom}
+      params={params}
       serverSettings={serverSettings}
     />
   ) : null

src/components/layout/FloatingBtn.jsx

@@ -26,6 +26,7 @@ export default function FloatingButtons({
   scanZoneMode, setScanZoneMode,
 }) {
   const { t } = useTranslation()
+
   const { map: { enableFloatingProfileButton },
     scanner: { scannerType, enableScanNext, enableScanZone } } = useStatic(state => state.config)
   const { loggedIn } = useStatic(state => state.auth)
@@ -78,7 +79,13 @@ export default function FloatingButtons({
       ) : null}
       {(perms?.webhooks?.length && webhooks && selectedWebhook) ? (
         <Grid item>
-          <Fab color="secondary" size={fabSize} onClick={() => setWebhookMode('open')} title={selectedWebhook} disabled={Boolean(webhookMode) || Boolean(scanNextMode) || Boolean(scanZoneMode)}>
+          <Fab
+            color="secondary"
+            size={fabSize}
+            onClick={() => setWebhookMode('open')}
+            title={selectedWebhook}
+            disabled={Boolean(webhookMode) || Boolean(scanNextMode) || Boolean(scanZoneMode)}
+          >
             <NotificationsActive fontSize={iconSize} />
           </Fab>
         </Grid>