Pwabuilder domain setting

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

@@ -288,6 +288,8 @@
       "icon512px": "Icon 512px",
       "favIcon16px": "FavIcon 16px",
       "favIcon32px": "FavIcon 32px",
+      "webmanifestLink": "Webmanifest",
+      "swScriptLink": "pwabuilder-sw.js",
       "releaseName": "Release Name",
       "email": "Email",
       "smtp": "SMTP",
@@ -338,6 +340,7 @@
       "defaultThemes": "Default Themes",
       "theme": "Theme",
       "editor": "Editor",
+      "studio": "Studio",
       "admin": "Admin",
       "key8thWall": "8th Wall Key",
       "shortTitle": "PWA Short Title",

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

@@ -3,10 +3,12 @@ import React from 'react'
 import ReactApexChart from 'react-apexcharts'
 import { useTranslation } from 'react-i18next'
 
-import { useAdminAnalyticsState } from '../../services/AnalyticsService'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+
+import { AdminAnalyticsState } from '../../services/AnalyticsService'
 
 const ActivityGraph = ({ startDate, endDate }) => {
-  const analyticsState = useAdminAnalyticsState()
+  const analyticsState = useHookstate(getMutableState(AdminAnalyticsState))
   const { t } = useTranslation()
 
   let maxY = 0

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

@@ -3,10 +3,12 @@ import { t } from 'i18next'
 import React from 'react'
 import ReactApexChart from 'react-apexcharts'
 
-import { useAdminAnalyticsState } from '../../services/AnalyticsService'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+
+import { AdminAnalyticsState } from '../../services/AnalyticsService'
 
 const UserGraph = ({ startDate, endDate }) => {
-  const analyticsState = useAdminAnalyticsState()
+  const analyticsState = useHookstate(getMutableState(AdminAnalyticsState))
 
   let maxY = 0
   let minX = new Date(startDate).getTime()

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

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
 import moment from 'moment'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import React, { useEffect } from 'react'
 
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import Box from '@etherealengine/ui/src/Box'
 import TextField from '@etherealengine/ui/src/TextField'
 import ToggleButton from '@etherealengine/ui/src/ToggleButton'
@@ -12,9 +12,8 @@ import DateAdapter from '@mui/lab/AdapterMoment'
 import LocalizationProvider from '@mui/lab/LocalizationProvider'
 import MobileDateTimePicker from '@mui/lab/MobileDateTimePicker'
 
-import { useAuthState } from '../../../user/services/AuthService'
-import { useAdminAnalyticsState } from '../../services/AnalyticsService'
-import { AdminAnalyticsService } from '../../services/AnalyticsService'
+import { AuthState } from '../../../user/services/AuthService'
+import { AdminAnalyticsService, AdminAnalyticsState } from '../../services/AnalyticsService'
 import styles from '../../styles/admin.module.scss'
 import ActivityGraph from './ActivityGraph'
 
@@ -30,37 +29,36 @@ import UserGraph from './UserGraph'
  */
 
 const Analytics = () => {
-  const [refetch, setRefetch] = useState(false)
-  // const { t } = useTranslation()
-  const [graphSelector, setGraphSelector] = useState('activity')
-  const analyticsState = useAdminAnalyticsState()
+  const refetch = useHookstate(false)
+  const graphSelector = useHookstate('activity')
+  const analyticsState = useHookstate(getMutableState(AdminAnalyticsState))
 
-  const [endDate, setEndDate] = useState(moment())
-  const [startDate, setStartDate] = useState(moment().subtract(30, 'days'))
+  const endDate = useHookstate(moment())
+  const startDate = useHookstate(moment().subtract(30, 'days'))
 
   useEffect(() => {
-    if (refetch === true && startDate < endDate) {
-      setRefetch(false)
+    if (refetch.value && startDate.value < endDate.value) {
+      refetch.set(false)
     }
-  }, [refetch, startDate, endDate])
+  }, [refetch.value, startDate.value, endDate.value])
 
-  const authState = useAuthState()
+  const authState = useHookstate(getMutableState(AuthState))
 
   useEffect(() => {
-    if (authState.isLoggedIn.value) setRefetch(true)
+    if (authState.isLoggedIn.value) refetch.set(true)
   }, [authState.isLoggedIn.value])
 
   const onDateRangeStartChange = (value) => {
-    setStartDate(value)
-    setRefetch(true)
+    startDate.set(value)
+    refetch.set(true)
   }
 
   const onDateRangeEndChange = (value) => {
-    setEndDate(value)
-    setRefetch(true)
+    endDate.set(value)
+    refetch.set(true)
   }
 
-  const tempStartDate = moment(startDate)
+  const tempStartDate = moment(startDate.value)
   const minEndDate = moment(tempStartDate.startOf('day').add(1, 'day'))
 
   return (
@@ -71,62 +69,67 @@ const Analytics = () => {
           colors={['#2c519d', '#31288f']}
           fetch={AdminAnalyticsService.fetchActiveParties}
           data={analyticsState.activeParties.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
         <AnalyticsService
           name="activeLocations"
           colors={['#77b2e9', '#458bcc']}
           fetch={AdminAnalyticsService.fetchActiveLocations}
           data={analyticsState.activeLocations.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
         <AnalyticsService
           name="activeScenes"
           colors={['#e3b76c', '#df9b26']}
           fetch={AdminAnalyticsService.fetchActiveScenes}
           data={analyticsState.activeScenes.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
         <AnalyticsService
           name="activeInstances"
           colors={['#ed7d7e', '#c95859']}
           fetch={AdminAnalyticsService.fetchActiveInstances}
           data={analyticsState.activeInstances.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
         <AnalyticsService
           name="dailyUsers"
           colors={['#53a7cd', '#24779c']}
           fetch={AdminAnalyticsService.fetchDailyUsers}
           data={analyticsState.dailyUsers.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
         <AnalyticsService
           name="dailyNewUsers"
           colors={['#9771d3', '#6945a1']}
           fetch={AdminAnalyticsService.fetchDailyNewUsers}
           data={analyticsState.dailyNewUsers.value}
-          refetch={refetch}
+          refetch={refetch.value}
         />
       </div>
       <div className={styles.mt20px}>
         <div className={styles.analyticsPaper}>
-          <ToggleButtonGroup value={graphSelector} exclusive color="primary" aria-label="outlined primary button group">
+          <ToggleButtonGroup
+            value={graphSelector.value}
+            exclusive
+            color="primary"
+            aria-label="outlined primary button group"
+          >
             <ToggleButton
               className={clsx(styles.btn, {
-                [styles.btnSelected]: graphSelector === 'activity'
+                [styles.btnSelected]: graphSelector.value === 'activity'
               })}
               value="activity"
-              onClick={() => setGraphSelector('activity')}
+              onClick={() => graphSelector.set('activity')}
             >
               Activity
             </ToggleButton>
             <ToggleButton
               className={clsx(styles.btn, {
-                [styles.btnSelected]: graphSelector === 'users'
+                [styles.btnSelected]: graphSelector.value === 'users'
               })}
               value="users"
-              onClick={() => setGraphSelector('users')}
+              onClick={() => graphSelector.set('users')}
             >
               Users
             </ToggleButton>
@@ -135,7 +138,7 @@ const Analytics = () => {
             {/* @ts-ignore */}
             <LocalizationProvider dateAdapter={DateAdapter}>
               <MobileDateTimePicker
-                value={startDate}
+                value={startDate.value}
                 DialogProps={{
                   PaperProps: {
                     className: styles.dateTimePickerDialog
@@ -146,7 +149,7 @@ const Analytics = () => {
               />
               <Box sx={{ mx: 2 }}> to </Box>
               <MobileDateTimePicker
-                value={endDate}
+                value={endDate.value}
                 DialogProps={{
                   PaperProps: {
                     className: styles.dateTimePickerDialog
@@ -158,10 +161,12 @@ const Analytics = () => {
               />
             </LocalizationProvider>
           </div>
-          {graphSelector === 'activity' && (
-            <ActivityGraph startDate={startDate?.toDate()} endDate={endDate?.toDate()} />
+          {graphSelector.value === 'activity' && (
+            <ActivityGraph startDate={startDate?.value?.toDate()} endDate={endDate?.value?.toDate()} />
+          )}
+          {graphSelector.value === 'users' && (
+            <UserGraph startDate={startDate?.value?.toDate()} endDate={endDate?.value?.toDate()} />
           )}
-          {graphSelector === 'users' && <UserGraph startDate={startDate?.toDate()} endDate={endDate?.toDate()} />}
         </div>
       </div>
     </>