aboutsummaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/ProfilePage/Highlight.tsx39
-rw-r--r--src/pages/ProfilePage/MoreMenu.tsx66
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx115
-rw-r--r--src/pages/ProfilePage/ProfilePage.tsx26
4 files changed, 213 insertions, 33 deletions
diff --git a/src/pages/ProfilePage/Highlight.tsx b/src/pages/ProfilePage/Highlight.tsx
new file mode 100644
index 0000000..ebc3f56
--- /dev/null
+++ b/src/pages/ProfilePage/Highlight.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface PropTypes {
+ text: string;
+ value: string | number;
+}
+
+const useStyles = makeStyles({
+ root: {
+ position: 'relative'
+ },
+ menuButton: {
+ width: 200,
+ height: 50,
+ textAlign: 'center'
+ },
+ menuNumber: {
+ fontWeight: 800,
+ color: 'black'
+ },
+ menuText: {
+ color: 'darkgray'
+ }
+});
+
+
+const Highlight: React.FC<PropTypes> = ({ text, value }) => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.menuButton}>
+ <div className={classes.menuNumber}>{value}</div>
+ <div className={classes.menuText}>{text}</div>
+ </div>
+ );
+};
+
+export default Highlight;
diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx
new file mode 100644
index 0000000..bf3347b
--- /dev/null
+++ b/src/pages/ProfilePage/MoreMenu.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import { makeStyles } from '@material-ui/core';
+
+interface PropTypes {
+ logOut: () => void;
+}
+
+const ITEM_HEIGHT = 48;
+
+const useStyles = makeStyles({
+ moreMenu: {
+ position: 'absolute',
+ right: 10,
+ zIndex: 100
+ }
+});
+
+const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+ const open = Boolean(anchorEl);
+
+ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+ <div className={classes.moreMenu}>
+ <div>
+ <IconButton
+ aria-label="more"
+ aria-controls="long-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ >
+ <MoreHorizIcon />
+ </IconButton>
+ <Menu
+ id="long-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={open}
+ onClose={handleClose}
+ PaperProps={{
+ style: {
+ maxHeight: ITEM_HEIGHT * 4.5,
+ width: '20ch'
+ }
+ }}
+ >
+ <MenuItem onClick={logOut}>Log out</MenuItem>
+ </Menu>
+ </div>
+ </div>
+ );
+};
+
+export default MoreMenu;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 7208ec8..f52e374 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,64 +1,123 @@
-import React from 'react';
-import { Avatar } from '@material-ui/core/';
+import React, { useState } from 'react';
+import { Avatar, Badge } from '@material-ui/core/';
import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button/Button';
import { User } from 'which-types';
+import CameraAltIcon from '@material-ui/icons/CameraAlt';
+import MoreMenu from './MoreMenu';
+import Highlight from './Highlight';
+import UploadImage from '../../components/UploadImage/UploadImage';
+
interface PropTypes {
user: User | undefined;
logOut: () => void;
+ savedPolls: number;
+ totalVotes: number;
+ setUserInfo: (a: User) => void;
+ setUser: (a:User) => void;
}
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
+ root: {
+ position: 'relative'
+ },
avatar: {
- margin: '0 auto',
width: 150,
height: 150,
- marginBottom: 10
+ margin: '0 auto'
},
name: {
fontSize: 20,
- textAlign: 'center'
+ textAlign: 'center',
+ margin: '10px 0'
},
profileMenu: {
display: 'flex',
width: '100%',
height: 50,
- borderBottom: '1px solid lightgray',
- margin: '50px 0'
+ margin: '50px 0',
+ borderBottom: '1px solid lightgray'
},
menuButton: {
width: 200,
height: 50,
- paddingTop: 15,
textAlign: 'center'
+ },
+ badge: {
+ width: theme.spacing(5),
+ height: theme.spacing(5),
+ borderRadius: '50%',
+ cursor: 'pointer',
+ background: '#d3d3d3',
+ display: 'flex',
+ alignItems: 'center',
+ '& svg': {
+ margin: '0 auto'
+ }
+ },
+ avatarContainer: {
+ position: 'relative',
+ textAlign: 'center'
+ },
+ menuNumber: {
+ fontWeight: 800,
+ color: 'black'
+ },
+ menuText: {
+ color: 'darkgray'
}
-});
+}));
+
-const ProfileInfo: React.FC<PropTypes> = ({ user, logOut }) => {
+const ProfileInfo: React.FC<PropTypes> = ({
+ user, logOut, savedPolls, totalVotes, setUserInfo, setUser
+}) => {
const classes = useStyles();
+ const [input, setInput] = useState(false);
+
+ const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
+
+ const handleClick = () => {
+ setInput(!input);
+ };
+
return (
- <div>
- <Avatar className={classes.avatar} src={user?.avatarUrl} />
+ <div className={classes.root}>
+ {
+ user?._id === localStorage.getItem('userId')
+ ? (
+ <div>
+ <MoreMenu logOut={logOut} />
+ <div className={classes.avatarContainer}>
+ <Badge
+ onClick={handleClick}
+ overlap="circle"
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right'
+ }}
+ badgeContent={(
+ <div className={classes.badge}>
+ <CameraAltIcon />
+ </div>
+ )}
+ >
+ <Avatar className={classes.avatar} src={user?.avatarUrl} />
+ </Badge>
+ </div>
+ <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser} />
+ </div>
+)
+ : <Avatar className={classes.avatar} src={user?.avatarUrl} />
+ }
<div className={classes.name}>
{user?.username}
</div>
<div className={classes.profileMenu}>
- <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
- Polls
- </div>
- <div className={classes.menuButton}>
- Followers
- </div>
- <div className={classes.menuButton}>
- Following
- </div>
+ <Highlight text="Polls" value={savedPolls} />
+ <Highlight text="Since" value={dateSince} />
+ <Highlight text="Total" value={totalVotes} />
</div>
- {
- user?._id === localStorage.getItem('userId')
- ? <Button variant="contained" onClick={logOut}>Log Out</Button>
- : null
- }
</div>
);
};
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 363d4ff..b0ac103 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -9,11 +9,15 @@ interface PropTypes {
logOut: () => void;
navigate: (prefix: string, id: string) => void;
id: string;
+ setUser:(a:User)=>void;
}
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
+const ProfilePage: React.FC<PropTypes> = ({
+ logOut, id, navigate, setUser
+}) => {
const [userInfo, setUserInfo] = useState<User>();
const [polls, setPolls] = useState<Poll[]>([]);
+ const [totalVotes, setTotalVotes] = useState<number>(0);
useEffect(() => {
get(`/users/${id}`).then(response => {
@@ -24,14 +28,26 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
useEffect(() => {
get(`/profiles/${id}`).then(response => {
setPolls(response.data);
+ setTotalVotes(response.data.reduce(
+ (total: number, current: Poll) => {
+ const { left, right } = current.contents;
+ return total + left.votes + right.votes;
+ }, 0
+ ));
});
- }, [id]);
-
+ }, [id, userInfo]);
return (
<>
- <ProfileInfo user={userInfo} logOut={logOut} />
- <Feed polls={polls} navigate={navigate} />
+ <ProfileInfo
+ user={userInfo}
+ setUserInfo={setUserInfo}
+ setUser={setUser}
+ logOut={logOut}
+ savedPolls={polls.length}
+ totalVotes={totalVotes}
+ />
+ <Feed polls={[...polls]} navigate={navigate} />
</>
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 21:43:17 +0000