Unverified Commit 7b5dd0ce authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Portal-Added user account quick links - drop down menu (#206)

* Added basic router and navigation layout

* finished navigation logic

* made the left nav bar a component and improved the styles

* Added a demo collapse section

* finished the basic faq collapse list

* finished the basic faq collapse list

* finished style for FAQs part

* removed unused imports

* minor update to fix a React warning

* Added fetch for user name and avatar

* made some improvements based on feedback

* Added basic components and styles

* commented out home

* Finished toolbar and dropdown menu

* minor update on calling logout function

* updated the avatar based on feedback

* updated no user name

* Updated the dropdown menu for user info
parent 2c3dd552
......@@ -7,6 +7,7 @@ import {
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
api_prefix,
HAS_TOKEN_EXPIRED,
} from '../Constants/Constants';
......@@ -691,3 +692,14 @@ export function requestErrorHandler(statusCode) {
export function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
export const logout = () => {
fetch(`${api_prefix()}/logout`)
.then(() => {
window.location.assign('/');
})
.catch((err) => {
console.log(err);
window.location.assign('/');
});
};
\ No newline at end of file
import { AppBar, Avatar, Toolbar, Typography } from '@material-ui/core';
import {
AppBar,
Avatar,
Button,
Link,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Toolbar,
Typography,
} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import EditIcon from '@material-ui/icons/Edit';
import SettingsIcon from '@material-ui/icons/Settings';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
import { useState } from 'react';
import { useEffect } from 'react';
import demoAvatar from '../../../assets/demo-avatar.jpg';
import { api_prefix, drawerWidth, END_POINT, FETCH_HEADER } from '../../../Constants/Constants';
import { api_prefix, darkOrange, drawerWidth, END_POINT, FETCH_HEADER } from '../../../Constants/Constants';
import { logout } from '../../../Utils/formFunctionHelpers';
const useStyles = makeStyles(() =>
createStyles({
......@@ -30,28 +46,116 @@ const useStyles = makeStyles(() =>
marginBottom: 0,
marginRight: 7,
},
dropDownBtn: {
minWidth: 38,
height: 30,
padding: 0,
},
dropDownIcon: {
color: '#A4AFB7',
},
dropDownItemIcon: {
minWidth: 30,
},
avatarCtn: {
width: 38,
height: 38,
marginLeft: 11,
backgroundColor: darkOrange,
},
avatar: {
width: 38,
anchorTag: {
textDecoration: 'none',
color: 'inherit',
'&:hover ': {
textDecoration: 'none',
color: 'inherit',
},
},
})
);
interface UserInfo {
first_name: string;
last_name: string;
full_name: string;
picture: string;
}
export default function AppTopBar() {
const classes = useStyles();
const [userInfo, setUserInfo] = useState<UserInfo>();
const [userInfo, setUserInfo] = useState<UserInfo>({
first_name: '',
last_name: '',
full_name: '',
picture: '',
});
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleDropdownBtnClicked = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleOptionClicked = (destination: string) => {
window.location.assign(destination);
};
const handleClose = () => {
setAnchorEl(null);
};
const getInitials = (firstname: string, lastname: string) => {
const firstnameInitial = firstname.substring(0, 1).toUpperCase();
const lastnameInitial = lastname.substring(0, 1).toUpperCase();
return firstnameInitial + lastnameInitial;
};
const renderDropdownMenu = () => (
<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
{userInfo?.full_name && (
<MenuItem onClick={() => handleOptionClicked('https://www.eclipse.org/user')}>
<ListItemIcon className={classes.dropDownItemIcon}>
<PersonIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="View Profile" />
</MenuItem>
)}
{userInfo?.full_name && (
<MenuItem onClick={() => handleOptionClicked('https://accounts.eclipse.org/user/edit')}>
<ListItemIcon className={classes.dropDownItemIcon}>
<EditIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Edit Profile" />
</MenuItem>
)}
<MenuItem className="toolbar-manage-cookies" onClick={handleClose}>
<ListItemIcon className={classes.dropDownItemIcon}>
<SettingsIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Manage Cookies" />
</MenuItem>
{userInfo?.full_name ? (
<MenuItem onClick={logout}>
<ListItemIcon className={classes.dropDownItemIcon}>
<ExitToAppIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Log Out" />
</MenuItem>
) : (
<Link href="/api/login" className={classes.anchorTag}>
<MenuItem>
<ListItemIcon className={classes.dropDownItemIcon}>
<AccountCircleIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Log In" />
</MenuItem>
</Link>
)}
</Menu>
);
useEffect(() => {
const getUserFullInfo = (username: String) => {
......@@ -59,6 +163,8 @@ export default function AppTopBar() {
.then((res) => res.json())
.then((data) => {
setUserInfo({
first_name: data.first_name,
last_name: data.last_name,
full_name: data.full_name,
picture: data.picture,
});
......@@ -88,14 +194,19 @@ export default function AppTopBar() {
<Toolbar className={classes.toolbarCtn}>
<div className={classes.verticalDivider}></div>
<Typography paragraph className={classes.username}>
{userInfo?.full_name ? userInfo.full_name : 'John Doe'}
{userInfo?.full_name || 'Anonymous'}
</Typography>
<ExpandMoreIcon className={classes.dropDownIcon} />
<Avatar
className={classes.avatarCtn}
alt="user avatar"
src={userInfo?.picture ? userInfo.picture : demoAvatar}
/>
<Button className={classes.dropDownBtn} onClick={handleDropdownBtnClicked}>
<ExpandMoreIcon className={classes.dropDownIcon} />
</Button>
{renderDropdownMenu()}
{userInfo?.picture ? (
<Avatar className={classes.avatarCtn} alt="user avatar" src={userInfo.picture} />
) : (
<Avatar className={classes.avatarCtn}>{getInitials(userInfo.first_name, userInfo.last_name) || 'A'}</Avatar>
)}
</Toolbar>
</AppBar>
);
......
import { useContext } from 'react';
import { api_prefix } from '../../../Constants/Constants';
import MembershipContext from '../../../Context/MembershipContext';
import { logout } from '../../../Utils/formFunctionHelpers';
/* eslint-disable jsx-a11y/anchor-is-valid */
export default function AppHeader() {
const { currentUser, setNeedLoadingSignIn } = useContext(MembershipContext);
const logout = () => {
fetch(`${api_prefix()}/logout`)
.then(() => {
window.location.assign('/');
})
.catch((err) => {
console.log(err);
window.location.assign('/');
});
};
return (
<header className="header-wrapper" id="header-wrapper">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment