aboutsummaryrefslogtreecommitdiff
path: root/src/pages/ProfilePage
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/ProfilePage')
-rw-r--r--src/pages/ProfilePage/Highlight.tsx39
-rw-r--r--src/pages/ProfilePage/MoreMenu.tsx12
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx77
-rw-r--r--src/pages/ProfilePage/ProfilePage.tsx31
4 files changed, 103 insertions, 56 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
index a4bc993..bf3347b 100644
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ b/src/pages/ProfilePage/MoreMenu.tsx
@@ -3,7 +3,7 @@ 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";
+import { makeStyles } from '@material-ui/core';
interface PropTypes {
logOut: () => void;
@@ -21,10 +21,10 @@ const useStyles = makeStyles({
const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
const classes = useStyles();
- const [anchorEl, setAnchorEl] = React.useState(null);
+ const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
const open = Boolean(anchorEl);
- const handleClick = (event: any) => {
+ const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
@@ -41,7 +41,7 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
aria-haspopup="true"
onClick={handleClick}
>
- <MoreHorizIcon/>
+ <MoreHorizIcon />
</IconButton>
<Menu
id="long-menu"
@@ -52,8 +52,8 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
- width: '20ch',
- },
+ width: '20ch'
+ }
}}
>
<MenuItem onClick={logOut}>Log out</MenuItem>
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 27966e9..f52e374 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,12 +1,11 @@
-import React, {useRef, useState} from 'react';
-import {Avatar, Badge, TextField, withStyles} from '@material-ui/core/';
-import {makeStyles} from '@material-ui/core/styles';
-import {User} from 'which-types';
+import React, { useState } from 'react';
+import { Avatar, Badge } from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+import { User } from 'which-types';
import CameraAltIcon from '@material-ui/icons/CameraAlt';
-import MoreMenu from "./MoreMenu";
-import {patch} from '../../requests';
-import Highlight from "../../components/Highlight/Highlight";
-import UploadImage from "../../components/UploadImage/UploadImage";
+import MoreMenu from './MoreMenu';
+import Highlight from './Highlight';
+import UploadImage from '../../components/UploadImage/UploadImage';
interface PropTypes {
@@ -70,50 +69,54 @@ const useStyles = makeStyles(theme => ({
}));
-const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => {
+const ProfileInfo: React.FC<PropTypes> = ({
+ user, logOut, savedPolls, totalVotes, setUserInfo, setUser
+}) => {
const classes = useStyles();
- const [input,setInput] = useState(false);
+ const [input, setInput] = useState(false);
+
+ const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
const handleClick = () => {
- input === false ? setInput(true) : setInput(false);
+ setInput(!input);
};
return (
<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>
+ <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>
- <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser}/>
- </div>
- : <Avatar className={classes.avatar} src={user?.avatarUrl}/>
+)
+ : <Avatar className={classes.avatar} src={user?.avatarUrl} />
}
<div className={classes.name}>
{user?.username}
</div>
<div className={classes.profileMenu}>
- <Highlight text="Polls" value={savedPolls}/>
- <Highlight text="Since" value={user?.createdAt.toString().substring(0,10).replace(/-/g, '.')}/>
- <Highlight text="Total" value={totalVotes}/>
+ <Highlight text="Polls" value={savedPolls} />
+ <Highlight text="Since" value={dateSince} />
+ <Highlight text="Total" value={totalVotes} />
</div>
</div>
);
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 479fd5c..b0ac103 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -12,7 +12,9 @@ interface PropTypes {
setUser:(a:User)=>void;
}
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate,setUser }) => {
+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);
@@ -25,23 +27,26 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate,setUser }) => {
useEffect(() => {
get(`/profiles/${id}`).then(response => {
- setPolls([]);
- setPolls([...response.data]);
-
- // const x = response.data.reduce((a: any, c: any) => a.contents.left.votes + c.contents.left.votes);
- // const y = response.data.reduce((a: any, c: any) => a.contents.right.votes + c.contents.right.votes);
- let sum = 0;
- for(let i = 0;i<response.data.length;i++){
- sum += response.data[i].contents.left.votes;
- sum += response.data[i].contents.right.votes;
- }
- setTotalVotes(sum);
+ setPolls(response.data);
+ setTotalVotes(response.data.reduce(
+ (total: number, current: Poll) => {
+ const { left, right } = current.contents;
+ return total + left.votes + right.votes;
+ }, 0
+ ));
});
}, [id, userInfo]);
return (
<>
- <ProfileInfo user={userInfo} setUserInfo={setUserInfo} setUser={setUser} logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes}/>
+ <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-24 03:29:36 +0000