58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
import React, { memo, useEffect, useState } from 'react';
|
|
import classNames from 'classnames';
|
|
import Button from '@material-ui/core/Button';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import useReduxApi from '@Hooks/useReduxApi';
|
|
import useDidMount from '@Hooks/useDidMount';
|
|
import useMappedState from '@Hooks/useMappedState';
|
|
import Loading from '@Components/Base/Loading';
|
|
import Styles from './index.module.css';
|
|
|
|
function Home(): React.ReactElement {
|
|
/* Global & Local State */
|
|
const reduxUser = useReduxApi('user');
|
|
const storeUser = useMappedState((state) => state.user);
|
|
const [isFirstInitial, setIsFirstInitial] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
/* Functions */
|
|
const onSignOut = (): void => {
|
|
reduxUser('postUserSignOut', []);
|
|
};
|
|
const initialize = (): void => {
|
|
setIsFirstInitial(true);
|
|
};
|
|
/* Hooks */
|
|
useDidMount(() => {
|
|
initialize();
|
|
});
|
|
useEffect(() => {
|
|
if (!isFirstInitial) return;
|
|
if (storeUser.userSignOutUrl.url) {
|
|
window.location.href = storeUser.userSignOutUrl.url;
|
|
}
|
|
setIsLoading(false);
|
|
}, [storeUser.userSignOutUrl]);
|
|
/* Main */
|
|
return (
|
|
<div className={classNames(Styles.homeContainer)}>
|
|
<div className={classNames(Styles.homeInfoContainer)}>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h2">使用者名稱</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h3">{storeUser.userAccount.username}</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h2">顯示名稱</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h3">
|
|
{storeUser.userAccount.display_name}
|
|
</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h2">電子信箱</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h3">{storeUser.userAccount.email}</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h2">允許觸及的 Groups</Typography>
|
|
<Typography className={classNames(Styles.homeInfoItem)} variant="h3">
|
|
{storeUser.userAccount.groups.join('')}
|
|
</Typography>
|
|
<Button variant="contained" color="primary" onClick={onSignOut}>登出</Button>
|
|
</div>
|
|
<Loading typePosition="absolute" typeZIndex={20000} typeIcon="line:fix" isLoading={isLoading} />
|
|
</div>
|
|
);
|
|
}
|
|
export default memo(Home);
|