103 lines
No EOL
2.6 KiB
TypeScript
103 lines
No EOL
2.6 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import './App.css'
|
|
import { useUserAPI } from '../providers/pond/userAPI'
|
|
import { useAuth0 } from '@auth0/auth0-react'
|
|
import { or } from '../utils/types'
|
|
import LoadingScreen from './LoadingScreen'
|
|
import NavigationContainer from '../navigation/NavigationContainer'
|
|
import { GlobalState, GlobalStateAction, StateProvider } from '../providers/StateContainer'
|
|
import { User } from '../models/user'
|
|
import { Team } from '../models/team'
|
|
import { makeStyles } from '@mui/styles'
|
|
import { Theme } from '@mui/material'
|
|
|
|
const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
|
|
return {
|
|
...state,
|
|
[action.key]: action.value
|
|
};
|
|
};
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
appContent: {
|
|
marginTop: 56,
|
|
marginBottom: 56,
|
|
marginLeft: "0px",
|
|
[theme.breakpoints.up("sm")]: {
|
|
marginTop: 64,
|
|
marginBottom: 0
|
|
},
|
|
[theme.breakpoints.up("md")]: {
|
|
marginLeft: theme.spacing(9)
|
|
}
|
|
},
|
|
container: {
|
|
backgroundColor: theme.palette.background.default,
|
|
},
|
|
helloMessage: {
|
|
marginTop: theme.spacing(2),
|
|
},
|
|
}))
|
|
|
|
const globalDefault = {
|
|
user: User.create(),
|
|
team: Team.create(),
|
|
as: "",
|
|
showErrors: false,
|
|
userTeamPermissions: [],
|
|
backgroundTasksComplete: false
|
|
}
|
|
|
|
interface Props {
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
export default function UserWrapper(props: Props) {
|
|
const { toggleTheme } = props;
|
|
const [loading, setLoading] = useState(false)
|
|
const userAPI = useUserAPI();
|
|
const classes = useStyles();
|
|
const useAuth = useAuth0();
|
|
const hasFetched = useRef(false);
|
|
const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
|
|
|
|
let user_id = or(useAuth.user?.sub, "")
|
|
|
|
const loadUser = useCallback(() => {
|
|
if (hasFetched.current) return;
|
|
setLoading(true)
|
|
userAPI.getUserWithTeam(user_id).then(resp => {
|
|
setGlobal({
|
|
user: resp.data.user ? User.create(resp.data.user) : User.create(),
|
|
team: resp.data.team ? Team.create(resp.data.team) : Team.create(),
|
|
as: "",
|
|
showErrors: false,
|
|
userTeamPermissions: [],
|
|
backgroundTasksComplete: false
|
|
})
|
|
}).catch(() => {
|
|
setGlobal(globalDefault)
|
|
})
|
|
.finally(() => {
|
|
setLoading(false)
|
|
hasFetched.current = true;
|
|
})
|
|
}, [setGlobal])
|
|
|
|
useEffect(() => {
|
|
if (loading) return;
|
|
loadUser()
|
|
}, [loading])
|
|
|
|
if (loading || !global) return (
|
|
<LoadingScreen />
|
|
)
|
|
|
|
return (
|
|
<StateProvider state={global} reducer={reducer}>
|
|
<main className={classes.appContent}>
|
|
<NavigationContainer toggleTheme={toggleTheme} />
|
|
</main>
|
|
</StateProvider>
|
|
)
|
|
} |