Merge pull request #3254 from XRFoundation/2088-auth

implemented Hookstate in auth

packages/client-core/src/admin/components/AdminConsole.tsx

@@ -13,18 +13,16 @@ import styles from './Admin.module.scss'
 import VideoModal from './VideoModal'
 import { useHistory } from 'react-router-dom'
 import { selectVideoState } from '../../media/components/video/selector'
-import { selectAuthState } from '../../user/reducers/auth/selector'
+import { useAuthState } from '../../user/reducers/auth/AuthState'
 import { fetchAdminVideos } from '../reducers/admin/service'
 
 interface Props {
-  auth: any
   videos: any
   fetchAdminVideos: typeof fetchAdminVideos
 }
 
 const mapStateToProps = (state: any): any => {
   return {
-    auth: selectAuthState(state),
     videos: selectVideoState(state)
   }
 }
@@ -34,7 +32,10 @@ const mapDispatchToProps = (dispatch: Dispatch): any => ({
 })
 
 const AdminConsole = (props: Props): any => {
-  const { fetchAdminVideos, auth, videos } = props
+  const { fetchAdminVideos, videos } = props
+
+  const auth = useAuthState()
+
   const initialState = {
     name: '',
     url: '',
@@ -90,7 +91,7 @@ const AdminConsole = (props: Props): any => {
 
   return (
     <div>
-      {auth.get('user').userRole === 'admin' && (
+      {auth.user.userRole.value === 'admin' && (
         <div className={styles['page-container']}>
           <div className={styles.header}>
             <Button variant="contained" color="primary" onClick={() => goToRoot()}>

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

@@ -9,7 +9,7 @@ import UserGraph from './UserGraph'
 import ActivityGraph from './ActivityGraph'
 import { connect } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
+import { useAuthState } from '../../../user/reducers/auth/AuthState'
 import { selectAnalyticsState } from '@xrengine/client-core/src/admin/reducers/admin/analytics/selector'
 import {
   fetchActiveParties,
@@ -26,7 +26,6 @@ interface Props {
   adminGroupState?: any
   fetchAdminGroup?: any
   analyticsState?: any
-  authState?: any
   fetchActiveParties?: any
   fetchActiveLocations?: any
   fetchActiveScenes?: any
@@ -38,7 +37,6 @@ interface Props {
 }
 
 const mapStateToProps = (state: any): any => ({
-  authState: selectAuthState(state),
   analyticsState: selectAnalyticsState(state)
 })
 
@@ -88,8 +86,7 @@ const Analytics = (props: Props) => {
     fetchChannelUsers,
     fetchInstanceUsers,
     fetchDailyUsers,
-    fetchDailyNewUsers,
-    authState
+    fetchDailyNewUsers
   } = props
   const [refetch, setRefetch] = useState(false)
   const [graphSelector, setGraphSelector] = useState('activity')
@@ -169,9 +166,10 @@ const Analytics = (props: Props) => {
     setRefetch(false)
   }, [refetch])
 
+  const authState = useAuthState()
+
   useEffect(() => {
-    console.log('authState changed', authState.get('isLoggedIn'))
-    if (authState.get('isLoggedIn')) setRefetch(true)
+    if (authState.isLoggedIn.value) setRefetch(true)
   }, [authState])
 
   useEffect(() => {

packages/client-core/src/admin/components/Avatars/Avatars.tsx

@@ -11,50 +11,47 @@ import TableCell from '@material-ui/core/TableCell'
 import TableSortLabel from '@material-ui/core/TableSortLabel'
 import Paper from '@material-ui/core/Paper'
 import TablePagination from '@material-ui/core/TablePagination'
-import { connect } from 'react-redux'
+import { connect, useDispatch } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 import { selectAppState } from '../../../common/reducers/app/selector'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
+import { useAuthState } from '../../../user/reducers/auth/AuthState'
 import { AVATAR_PAGE_LIMIT } from '../../reducers/admin/avatar/reducers'
 import { fetchLocationTypes } from '../../reducers/admin/location/service'
 import { fetchAdminAvatars } from '../../reducers/admin/avatar/service'
 import styles from './Avatars.module.scss'
 import AddToContentPackModal from '../ContentPack/AddToContentPackModal'
 import { selectAdminAvatarState } from '../../reducers/admin/avatar/selector'
 import AvatarSelectMenu from '../../../user/components/UserMenu/menus/AvatarSelectMenu'
-import { uploadAvatarModel } from '../../../user/reducers/auth/service'
+import { AuthService } from '../../../user/reducers/auth/AuthService'
 
 if (!global.setImmediate) {
   global.setImmediate = setTimeout as any
 }
 
 interface Props {
-  authState?: any
   locationState?: any
   fetchAdminAvatars?: any
   fetchLocationTypes?: any
   adminAvatarState?: any
-  uploadAvatarModel?: Function
 }
 
 const mapStateToProps = (state: any): any => {
   return {
     appState: selectAppState(state),
-    authState: selectAuthState(state),
     adminAvatarState: selectAdminAvatarState(state)
   }
 }
 
 const mapDispatchToProps = (dispatch: Dispatch): any => ({
   fetchAdminAvatars: bindActionCreators(fetchAdminAvatars, dispatch),
-  fetchLocationTypes: bindActionCreators(fetchLocationTypes, dispatch),
-  uploadAvatarModel: bindActionCreators(uploadAvatarModel, dispatch)
+  fetchLocationTypes: bindActionCreators(fetchLocationTypes, dispatch)
 })
 
 const Avatars = (props: Props) => {
-  const { authState, fetchAdminAvatars, adminAvatarState, uploadAvatarModel } = props
-
-  const user = authState.get('user')
+  const { fetchAdminAvatars, adminAvatarState } = props
+  const dispatch = useDispatch()
+  const authState = useAuthState()
+  const user = authState.user
   const adminAvatars = adminAvatarState.get('avatars').get('avatars')
   const adminAvatarCount = adminAvatarState.get('avatars').get('total')
 
@@ -202,7 +199,7 @@ const Avatars = (props: Props) => {
   // }, [])
 
   useEffect(() => {
-    if (user?.id != null && (adminAvatarState.get('avatars').get('updateNeeded') === true || refetch === true)) {
+    if (user?.id.value != null && (adminAvatarState.get('avatars').get('updateNeeded') === true || refetch === true)) {
       fetchAdminAvatars()
     }
     setRefetch(false)
@@ -223,6 +220,10 @@ const Avatars = (props: Props) => {
     })
   }
 
+  const uploadAvatarModel = (model: any, thumbnail: any, avatarName?: string, isPublicAvatar?: boolean): any => {
+    dispatch(AuthService.uploadAvatarModel(model, thumbnail, avatarName, isPublicAvatar))
+  }
+
   return (
     <div>
       <Paper className={styles.adminRoot}>
@@ -289,7 +290,7 @@ const Avatars = (props: Props) => {
                       {row.key}
                     </TableCell>
                     <TableCell className={styles.tcell} align="right">
-                      {user.userRole === 'admin' && (
+                      {user.userRole.value === 'admin' && (
                         <Checkbox
                           className={styles.checkbox}
                           onChange={(e) => handleCheck(e, row)}

packages/client-core/src/admin/components/Bots/CreateBot.tsx

@@ -22,7 +22,7 @@ import { selectAdminInstanceState } from '../../reducers/admin/instance/selector
 import { fetchAdminInstances } from '../../reducers/admin/instance/service'
 import { fetchAdminLocations } from '../../reducers/admin/location/service'
 import { connect } from 'react-redux'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
+import { useAuthState } from '../../../user/reducers/auth/AuthState'
 import MuiAlert from '@material-ui/lab/Alert'
 import Snackbar from '@material-ui/core/Snackbar'
 import { createBotAsAdmin } from '../../reducers/admin/bots/service'
@@ -32,7 +32,6 @@ import { validateForm } from './validation'
 interface Props {
   fetchAdminInstances?: any
   adminInstanceState?: any
-  authState?: any
   createBotAsAdmin?: any
   adminLocationState?: any
   fetchAdminLocations?: any
@@ -41,7 +40,6 @@ interface Props {
 const mapStateToProps = (state: any): any => {
   return {
     adminInstanceState: selectAdminInstanceState(state),
-    authState: selectAuthState(state),
     adminLocationState: selectAdminLocationState(state)
   }
 }
@@ -57,14 +55,7 @@ const Alert = (props) => {
 }
 
 const CreateBot = (props: Props) => {
-  const {
-    adminInstanceState,
-    authState,
-    fetchAdminInstances,
-    createBotAsAdmin,
-    fetchAdminLocations,
-    adminLocationState
-  } = props
+  const { adminInstanceState, fetchAdminInstances, createBotAsAdmin, fetchAdminLocations, adminLocationState } = props
   const [command, setCommand] = React.useState({
     name: '',
     description: ''
@@ -86,16 +77,17 @@ const CreateBot = (props: Props) => {
   })
   const classes = useStyles()
   const classx = useStyle()
-  const user = authState.get('user')
+  const authState = useAuthState()
+  const user = authState.user
   const adminInstances = adminInstanceState.get('instances')
   const instanceData = adminInstances.get('instances')
   const adminLocation = adminLocationState.get('locations')
   const locationData = adminLocation.get('locations')
   React.useEffect(() => {
-    if (user.id && adminInstances.get('updateNeeded')) {
+    if (user.id.value && adminInstances.get('updateNeeded')) {
       fetchAdminInstances()
     }
-    if (user?.id != null && adminLocation.get('updateNeeded') === true) {
+    if (user?.id.value != null && adminLocation.get('updateNeeded') === true) {
       fetchAdminLocations()
     }
   }, [user, adminInstanceState])
@@ -129,7 +121,7 @@ const CreateBot = (props: Props) => {
     const data = {
       name: state.name,
       instanceId: state.instance || null,
-      userId: user.id,
+      userId: user.id.value,
       command: commandData,
       description: state.description,
       locationId: state.location

packages/client-core/src/admin/components/Bots/displayBots.tsx

@@ -19,7 +19,7 @@ import { fetchBotAsAdmin } from '../../reducers/admin/bots/service'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import { selectAdminBotsState } from '../../reducers/admin/bots/selector'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
+import { useAuthState } from '../../../user/reducers/auth/AuthState'
 import Button from '@material-ui/core/Button'
 import { createBotCammand, removeBots, removeBotsCommand } from '../../reducers/admin/bots/service'
 import MuiAlert from '@material-ui/lab/Alert'
@@ -29,16 +29,14 @@ import UpdateBot from './updateBot'
 interface Props {
   fetchBotAsAdmin?: any
   botsAdminState?: any
-  authState?: any
   createBotCammand?: any
   removeBots?: any
   removeBotsCommand?: any
 }
 
 const mapStateToProps = (state: any): any => {
   return {
-    botsAdminState: selectAdminBotsState(state),
-    authState: selectAuthState(state)
+    botsAdminState: selectAdminBotsState(state)
   }
 }
 
@@ -54,7 +52,7 @@ const Alert = (props) => {
 }
 
 const DisplayBots = (props: Props) => {
-  const { fetchBotAsAdmin, botsAdminState, authState, createBotCammand, removeBots, removeBotsCommand } = props
+  const { fetchBotAsAdmin, botsAdminState, createBotCammand, removeBots, removeBotsCommand } = props
   const classes = useStyles()
   const [expanded, setExpanded] = React.useState<string | false>('panel0')
   const [name, setName] = React.useState('')
@@ -68,10 +66,10 @@ const DisplayBots = (props: Props) => {
   }
 
   const botAdmin = botsAdminState.get('bots')
-  const user = authState.get('user')
+  const user = useAuthState().user
   const botAdminData = botAdmin.get('bots')
   React.useEffect(() => {
-    if (user.id && botAdmin.get('updateNeeded')) {
+    if (user.id.value && botAdmin.get('updateNeeded')) {
       fetchBotAsAdmin()
     }
   }, [botAdmin, user])

packages/client-core/src/admin/components/Bots/updateBot.tsx

@@ -19,7 +19,7 @@ import MuiAlert from '@material-ui/lab/Alert'
 import Snackbar from '@material-ui/core/Snackbar'
 import { updateBotAsAdmin } from '../../reducers/admin/bots/service'
 import { Dispatch, bindActionCreators } from 'redux'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
+import { useAuthState } from '../../../user/reducers/auth/AuthState'
 import Grid from '@material-ui/core/Grid'
 import IconButton from '@material-ui/core/IconButton'
 import { fetchAdminInstances } from '../../reducers/admin/instance/service'
@@ -32,16 +32,14 @@ interface Props {
   adminLocationState?: any
   adminInstanceState?: any
   updateBotAsAdmin?: any
-  authState?: any
   fetchAdminInstances?: any
   fetchAdminLocations?: any
 }
 
 const mapStateToProps = (state: any): any => {
   return {
     adminLocationState: selectAdminLocationState(state),
-    adminInstanceState: selectAdminInstanceState(state),
-    authState: selectAuthState(state)
+    adminInstanceState: selectAdminInstanceState(state)
   }
 }
 
@@ -63,7 +61,6 @@ const UpdateBot = (props: Props) => {
     adminLocationState,
     adminInstanceState,
     updateBotAsAdmin,
-    authState,
     fetchAdminLocations,
     fetchAdminInstances
   } = props
@@ -87,7 +84,7 @@ const UpdateBot = (props: Props) => {
   const locationData = adminLocation.get('locations')
   const adminInstances = adminInstanceState.get('instances')
   const instanceData = adminInstances.get('instances')
-  const user = authState.get('user')
+  const user = useAuthState().user
 
   React.useEffect(() => {
     if (bot) {
@@ -140,7 +137,7 @@ const UpdateBot = (props: Props) => {
     const data = {
       name: state.name,
       instanceId: state.instance || null,
-      userId: user.id,
+      userId: user.id.value,
       description: state.description,
       locationId: state.location
     }

packages/client-core/src/admin/components/ContentPack/AddToContentPackModal.tsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 import { selectAppState } from '../../../common/reducers/app/selector'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
 import { selectContentPackState } from '../../reducers/contentPack/selector'
 import styles from './ContentPack.module.scss'
 import {
@@ -42,7 +41,6 @@ interface Props {
 const mapStateToProps = (state: any): any => {
   return {
     appState: selectAppState(state),
-    authState: selectAuthState(state),
     contentPackState: selectContentPackState(state)
   }
 }

packages/client-core/src/admin/components/ContentPack/ContentPackConsole.tsx

@@ -7,22 +7,19 @@ import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
 import ListSubheader from '@material-ui/core/ListSubheader'
 import DownloadModal from './DownloadModal'
-import { selectAuthState } from '../../../user/reducers/auth/selector'
 import { selectContentPackState } from '../../reducers/contentPack/selector'
 import { ConfirmProvider } from 'material-ui-confirm'
 import { fetchContentPacks } from '../../reducers/contentPack/service'
 import ContentPackDetailsModal from './ContentPackDetailsModal'
 import styles from './ContentPack.module.scss'
 
 interface Props {
-  authState?: any
   contentPackState?: any
   fetchContentPacks?: any
 }
 
 const mapStateToProps = (state: any): any => {
   return {
-    authState: selectAuthState(state),
     contentPackState: selectContentPackState(state)
   }
 }