vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show user email

Browse Source
This commit is contained in:
karishmas6
2024-10-28 19:06:43 +05:30
parent 5d671993d6
commit bbabf61cbe
1 changed files with 67 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/molecules/NavBar.tsx
View File

@@ -3,12 +3,11 @@ import axios from 'axios';
import styled from "styled-components"; import styled from "styled-components";
import { stopRecording } from "../../api/recording"; import { stopRecording } from "../../api/recording";
import { useGlobalInfoStore } from "../../context/globalInfo"; import { useGlobalInfoStore } from "../../context/globalInfo";
import { IconButton } from "@mui/material"; import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material";
import { RecordingIcon } from "../atoms/RecorderIcon"; import { AccountCircle, Logout, Clear } from "@mui/icons-material";
import { SaveRecording } from "./SaveRecording";
import { Logout, Clear } from "@mui/icons-material";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../context/auth'; import { AuthContext } from '../../context/auth';
import { SaveRecording } from '../molecules/SaveRecording';
interface NavBarProps { interface NavBarProps {
recordingName: string; recordingName: string;
@@ -16,14 +15,20 @@ interface NavBarProps {
} }
export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => { export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore(); const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
const { state, dispatch } = useContext(AuthContext); const { state, dispatch } = useContext(AuthContext);
const { user } = state; const { user } = state;
console.log(`Recording URL: ${recordingUrl}`)
const navigate = useNavigate(); const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const logout = async () => { const logout = async () => {
dispatch({ type: 'LOGOUT' }); dispatch({ type: 'LOGOUT' });
@@ -33,8 +38,6 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
navigate('/login'); navigate('/login');
}; };
// If recording is in progress, the resources and change page view by setting browserId to null
// else it won't affect the page
const goToMainMenu = async () => { const goToMainMenu = async () => {
if (browserId) { if (browserId) {
await stopRecording(browserId); await stopRecording(browserId);
@@ -50,63 +53,65 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
}}> }}>
<img src="../../../public/img/maxunlogo.png" width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 12px' }} /> <img src="../../../public/img/maxunlogo.png" width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
<div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div> <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
</div> </div>
{ {
user !== null ? ( user ? (
<> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
<div style={{ {!isRecording ? (
display: 'flex', <>
justifyContent: 'flex-end', <IconButton onClick={handleMenuOpen} sx={{
}}> display: 'flex',
{ alignItems: 'center',
!isRecording ? ( border: '1px solid #ff00c3',
<> borderRadius: '5px',
<IconButton sx={{ padding: '8px',
width: '140px', background: 'white',
border: '1px solid #ff00c3', color: '#ff00c3',
borderRadius: '5px', marginRight: '10px',
padding: '8px', '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
background: 'white', }}>
color: '#ff00c3', <AccountCircle sx={{ marginRight: '5px' }} />
marginRight: '10px', <Typography variant="body1">{user.email}</Typography>
fontFamily: '"Roboto","Helvetica","Arial",sans-serif', </IconButton>
fontWeight: '500', <Menu
fontSize: '0.875rem', anchorEl={anchorEl}
lineHeight: '1.75', open={Boolean(anchorEl)}
letterSpacing: '0.02857em', onClose={handleMenuClose}
'&:hover': { backgroundColor: 'white', color: '#ff00c3' } anchorOrigin={{
}} onClick={logout}> vertical: 'bottom',
<Logout sx={{ marginRight: '5px' }} /> horizontal: 'right',
Logout</IconButton> }}
</> transformOrigin={{
) : vertical: 'top',
<> horizontal: 'right',
<IconButton sx={{ }}
width: '140px', >
borderRadius: '5px', <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
padding: '8px', <Logout sx={{ marginRight: '5px' }} /> Logout
background: 'red', </MenuItem>
color: 'white', </Menu>
marginRight: '10px', </>
fontFamily: '"Roboto","Helvetica","Arial",sans-serif', ) : (
fontWeight: '500', <>
fontSize: '0.875rem', <IconButton onClick={goToMainMenu} sx={{
lineHeight: '1.75', borderRadius: '5px',
letterSpacing: '0.02857em', padding: '8px',
'&:hover': { color: 'white', backgroundColor: 'red' } background: 'red',
}} onClick={goToMainMenu}> color: 'white',
<Clear sx={{ marginRight: '5px' }} /> marginRight: '10px',
Discard</IconButton> '&:hover': { color: 'white', backgroundColor: 'red' }
<SaveRecording fileName={recordingName} /> }}>
</> <Clear sx={{ marginRight: '5px' }} />
} Discard
</div> </IconButton>
</> <SaveRecording fileName={recordingName} />
</>
)}
</div>
) : "" ) : ""
} }
</NavBarWrapper> </NavBarWrapper>
); );
}; };