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.tsx72
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx168
-rw-r--r--src/pages/ProfilePage/ProfilePage.tsx72
4 files changed, 0 insertions, 351 deletions
diff --git a/src/pages/ProfilePage/Highlight.tsx b/src/pages/ProfilePage/Highlight.tsx
deleted file mode 100644
index ebc3f56..0000000
--- a/src/pages/ProfilePage/Highlight.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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
deleted file mode 100644
index 1f41879..0000000
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-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 { useAuth } from '../../hooks/useAuth';
-
-const ITEM_HEIGHT = 48;
-
-const useStyles = makeStyles({
- moreMenu: {
- position: 'absolute',
- right: 10,
- zIndex: 100
- }
-});
-
-const MoreMenu: React.FC = () => {
- const classes = useStyles();
- const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
- const { logout } = useAuth();
- const history = useHistory();
-
- const open = Boolean(anchorEl);
-
- const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleLogout = () => {
- logout();
- history.push('/login');
- };
-
- 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={handleLogout}>Log out</MenuItem>
- </Menu>
- </div>
- </div>
- );
-};
-
-export default MoreMenu;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
deleted file mode 100644
index e4ef66a..0000000
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, { useState } from 'react';
-import { Avatar, Badge, Typography } from '@material-ui/core/';
-import { makeStyles } from '@material-ui/core/styles';
-import { User } from 'which-types';
-import CameraAltIcon from '@material-ui/icons/CameraAlt';
-import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
-import Skeleton from '@material-ui/lab/Skeleton';
-import MoreMenu from './MoreMenu';
-import Highlight from './Highlight';
-import UploadImage from '../../components/UploadImage/UploadImage';
-import { patch } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
-
-interface PropTypes {
- savedPolls: number;
- totalVotes: number;
- userInfo: User | undefined;
- setUserInfo: (userInfo: User) => void;
- isLoading: boolean;
-}
-
-const useStyles = makeStyles(theme => ({
- root: {
- position: 'relative'
- },
- avatar: {
- width: 150,
- height: 150,
- margin: '0 auto'
- },
- name: {
- margin: theme.spacing(1, 0),
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
- },
- verified: {
- marginLeft: theme.spacing(0.5),
- width: theme.spacing(3),
- height: theme.spacing(3)
- },
- profileMenu: {
- display: 'flex',
- width: '100%',
- height: 50,
- margin: '50px 0',
- borderBottom: '1px solid lightgray'
- },
- menuButton: {
- width: 200,
- height: 50,
- 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'
- },
- skeleton: {
- margin: '10px auto',
- borderRadius: 2
- }
-
-}));
-
-
-const ProfileInfo: React.FC<PropTypes> = ({
- savedPolls, totalVotes, setUserInfo, userInfo, isLoading
-}) => {
- const classes = useStyles();
- const [input, setInput] = useState(false);
- const { setUser } = useAuth();
- const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
-
- const handleClick = () => {
- setInput(!input);
- };
-
- const patchAvatar = (url: string) => {
- const id = localStorage.getItem('userId');
- patch(`/users/${id}`, { avatarUrl: url }).then(res => {
- setUserInfo(res.data);
- setUser(res.data);
- });
- };
-
- return (
- <div className={classes.root}>
- {
- isLoading
- ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
- : userInfo?._id === localStorage.getItem('userId')
- ? (
- <div>
- <MoreMenu />
- <div className={classes.avatarContainer}>
- <Badge
- overlap="circle"
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right'
- }}
- badgeContent={(
- <div className={classes.badge}>
- <CameraAltIcon onClick={handleClick} />
- </div>
- )}
- >
- <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
- </Badge>
- </div>
- <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
- </div>
- )
- : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
- }
- {
- isLoading
- ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
- : (
- <Typography variant="h5" className={classes.name}>
- {userInfo?.username}
- {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
- </Typography>
- )
- }
- <div className={classes.profileMenu}>
- {
- isLoading
- ? (
- <>
- <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
- <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
- <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
- </>
- )
- : (
- <>
- <Highlight text="Polls" value={savedPolls} />
- <Highlight text="Since" value={dateSince} />
- <Highlight text="Total votes" value={totalVotes} />
- </>
- )
- }
- </div>
- </div>
- );
-};
-
-export default ProfileInfo;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
deleted file mode 100644
index ae94b9f..0000000
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
-import { User, Poll } from 'which-types';
-import { Container } from '@material-ui/core';
-
-import ProfileInfo from './ProfileInfo';
-import Feed from '../../components/Feed/Feed';
-import { get } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
-
-
-const ProfilePage: React.FC = () => {
- const [userInfo, setUserInfo] = useState<User>();
- const [polls, setPolls] = useState<Poll[]>([]);
- const [totalVotes, setTotalVotes] = useState<number>(0);
- const [isInfoLoading, setIsInfoLoading] = useState(false);
- const [isPollsLoading, setIsPollsLoading] = useState(false);
- const history = useHistory();
- const { username } = useParams();
- const { user } = useAuth();
-
- useEffect(() => {
- setIsInfoLoading(true);
-
- const redirect = () => {
- if (user) history.push(`/profile/${user.username}`);
- else history.push('/login');
- };
-
- if (username) {
- get(`/users?username=${username}`).then(response => {
- if (!response.data.length) redirect(); // TODO: handle this case
- setUserInfo(response.data[0]);
- setIsInfoLoading(false);
- }).catch(() => redirect());
- } else redirect();
- }, [username, user, history]);
-
-
- useEffect(() => {
- if (userInfo?._id) {
- setIsPollsLoading(true);
-
- get(`/profiles/${userInfo._id}`).then(response => {
- setIsPollsLoading(false);
- setPolls([]);
- setPolls(response.data);
- setTotalVotes(response.data.reduce(
- (total: number, current: Poll) => {
- const { left, right } = current.contents;
- return total + left.votes + right.votes;
- }, 0
- ));
- });
- }
- }, [userInfo]);
-
- return (
- <Container maxWidth="sm" disableGutters>
- <ProfileInfo
- userInfo={userInfo}
- setUserInfo={setUserInfo}
- savedPolls={polls.length}
- totalVotes={totalVotes}
- isLoading={isInfoLoading}
- />
- {isPollsLoading ? <Feed polls={[]} /> : (polls.length > 0 && <Feed polls={polls} />)}
- </Container>
- );
-};
-
-export default ProfilePage;
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-02 21:52:23 +0000