david
2 years ago
11 changed files with 254 additions and 53 deletions
@ -0,0 +1,44 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { Box, AppBar, Typography, Toolbar, IconButton } from '@mui/material'; |
||||||
|
import AccountCircle from '@mui/icons-material/AccountCircle'; |
||||||
|
import { UserProfile } from './UserProfile'; |
||||||
|
|
||||||
|
export const Appbar = () => { |
||||||
|
const [showDrawer, setShowDrawer] = useState(false); |
||||||
|
|
||||||
|
const toggleDrawer = () => (event) => { |
||||||
|
if ( |
||||||
|
event.type === 'keydown' && |
||||||
|
(event.key === 'Tab' || event.key === 'Shift') |
||||||
|
) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setShowDrawer((showDrawer) => !showDrawer); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box> |
||||||
|
<AppBar> |
||||||
|
<Toolbar> |
||||||
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> |
||||||
|
supachat |
||||||
|
</Typography> |
||||||
|
<div> |
||||||
|
<IconButton |
||||||
|
size="large" |
||||||
|
aria-label="account of current user" |
||||||
|
aria-controls="menu-appbar" |
||||||
|
aria-haspopup="true" |
||||||
|
onClick={toggleDrawer()} |
||||||
|
color="inherit" |
||||||
|
> |
||||||
|
<AccountCircle /> |
||||||
|
</IconButton> |
||||||
|
<UserProfile toggleDrawer={toggleDrawer} showDrawer={showDrawer} /> |
||||||
|
</div> |
||||||
|
</Toolbar> |
||||||
|
</AppBar> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}; |
@ -0,0 +1,7 @@ |
|||||||
|
import { Navigate } from 'react-router-dom'; |
||||||
|
import { useAuth } from '../Contexts/AuthContext'; |
||||||
|
|
||||||
|
export const PrivateRoute = ({ children }) => { |
||||||
|
const { user } = useAuth(); |
||||||
|
return user ? children : <Navigate to="/auth" replace />; |
||||||
|
}; |
@ -0,0 +1,53 @@ |
|||||||
|
import { |
||||||
|
Drawer, |
||||||
|
Button, |
||||||
|
IconButton, |
||||||
|
Toolbar, |
||||||
|
Box, |
||||||
|
TextField, |
||||||
|
Divider, |
||||||
|
Stack, |
||||||
|
} from '@mui/material'; |
||||||
|
import { useAuth } from '../Contexts/AuthContext'; |
||||||
|
import { useSnackbar } from '../Contexts/SnackbarContext'; |
||||||
|
import CloseIcon from '@mui/icons-material/Close'; |
||||||
|
|
||||||
|
export const UserProfile = ({ showDrawer, toggleDrawer }) => { |
||||||
|
const { user, signOut } = useAuth(); |
||||||
|
const { showSnackBar } = useSnackbar(); |
||||||
|
|
||||||
|
const handleSignOut = (e) => { |
||||||
|
e.preventDefault(); |
||||||
|
signOut(); |
||||||
|
showSnackBar('info', 'user logged out'); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Drawer |
||||||
|
PaperProps={{ |
||||||
|
sx: { |
||||||
|
// width: 1
|
||||||
|
width: 350, |
||||||
|
}, |
||||||
|
}} |
||||||
|
anchor="right" |
||||||
|
open={showDrawer} |
||||||
|
onClose={toggleDrawer()} |
||||||
|
> |
||||||
|
<Toolbar sx={{ flexDirection: 'row' }}> |
||||||
|
<Box sx={{ flexGrow: 1 }}>user profile</Box> |
||||||
|
<IconButton onClick={toggleDrawer()}> |
||||||
|
<CloseIcon /> |
||||||
|
</IconButton> |
||||||
|
</Toolbar> |
||||||
|
<Divider /> |
||||||
|
<Stack m={2} spacing={1}> |
||||||
|
<TextField fullWidth label="email" value={user.email} /> |
||||||
|
|
||||||
|
<Button fullWidth onClick={(e) => handleSignOut(e)}> |
||||||
|
signout |
||||||
|
</Button> |
||||||
|
</Stack> |
||||||
|
</Drawer> |
||||||
|
); |
||||||
|
}; |
Loading…
Reference in new issue