aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Feed/Feed.tsx1
-rw-r--r--src/components/Header/Header.tsx6
-rw-r--r--src/components/UploadImage/UploadImage.tsx25
-rw-r--r--src/index.tsx11
-rw-r--r--src/pages/ProfilePage/Highlight.tsx (renamed from src/components/Highlight/Highlight.tsx)12
-rw-r--r--src/pages/ProfilePage/MoreMenu.tsx12
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx77
-rw-r--r--src/pages/ProfilePage/ProfilePage.tsx31
-rw-r--r--src/requests.ts4
9 files changed, 98 insertions, 81 deletions
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 06b5087..0c4d84f 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({
const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
const classes = useStyles();
- console.log(polls);
return (
<div className={classes.root}>
{polls.map(poll => <PollCard initialPoll={poll} key={poll._id} navigate={navigate} />)}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index a5e6817..2e3fc20 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
logo: {
fontWeight: 'bold'
},
- avatar:{
+ avatar: {
width: 24,
height: 24
}
@@ -62,8 +62,8 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
</IconButton>
<IconButton onClick={handleProfile}>
{
- userImage!== undefined
- ? <Avatar className={classes.avatar} src={userImage}/>
+ userImage !== undefined
+ ? <Avatar className={classes.avatar} src={userImage} />
: <AccountCircle />
}
</IconButton>
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 929151f..42ee989 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
@@ -6,28 +6,29 @@ import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
-import {patch} from "../../requests";
-import {User} from 'which-types';
+import { User } from 'which-types';
+import { patch } from '../../requests';
interface PropTypes {
- displayD: boolean;
- setDisplayD: (d: boolean) => void;
- setUserInfo: (a: User) => void;
- setUser: (a: User) => void
+ displayD: boolean;
+ setDisplayD: (d: boolean) => void;
+ setUserInfo: (a: User) => void;
+ setUser: (a: User) => void
}
-const UploadImage: React.FC<PropTypes> = ({displayD,setDisplayD,setUserInfo,setUser}) => {
+const UploadImage: React.FC<PropTypes> = ({
+ displayD, setDisplayD, setUserInfo, setUser
+}) => {
const urlRef = useRef<HTMLInputElement>(null);
const handleClose = () => {
setDisplayD(false);
};
- const updateAvatar = (event: any) => {
+ const updateAvatar = () => {
const id = localStorage.getItem('userId');
const newAvatar = urlRef.current?.value;
- console.log(newAvatar);
- patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => {
+ patch(`/users/${id}`, { avatarUrl: newAvatar }).then(res => {
setUserInfo(res.data);
setUser(res.data);
});
@@ -36,7 +37,7 @@ const UploadImage: React.FC<PropTypes> = ({displayD,setDisplayD,setUserInfo,set
return (
<div>
- <Dialog open={displayD} onClose={handleClose} >
+ <Dialog open={displayD} onClose={handleClose}>
<DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
<DialogContent>
<DialogContentText>
diff --git a/src/index.tsx b/src/index.tsx
index 0e6f761..9139e4b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -90,9 +90,16 @@ const App: React.FC = () => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
- <Header navigate={navigate} userImage={user?.avatarUrl}/>
+ <Header navigate={navigate} userImage={user?.avatarUrl} />
<div className={classes.root}>
- { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} setUser={setUser}/> }
+ { page.prefix === 'profile' && (
+ <ProfilePage
+ logOut={logOut}
+ id={page.id}
+ navigate={navigate}
+ setUser={setUser}
+ />
+ ) }
{ page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
{ page.prefix === 'auth' && <AuthPage logIn={logIn} /> }
</div>
diff --git a/src/components/Highlight/Highlight.tsx b/src/pages/ProfilePage/Highlight.tsx
index 8e11c34..ebc3f56 100644
--- a/src/components/Highlight/Highlight.tsx
+++ b/src/pages/ProfilePage/Highlight.tsx
@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
-import {makeStyles} from '@material-ui/core/styles';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
interface PropTypes {
text: string;
- value: any;
+ value: string | number;
}
const useStyles = makeStyles({
@@ -13,7 +13,7 @@ const useStyles = makeStyles({
menuButton: {
width: 200,
height: 50,
- textAlign: 'center',
+ textAlign: 'center'
},
menuNumber: {
fontWeight: 800,
@@ -21,11 +21,11 @@ const useStyles = makeStyles({
},
menuText: {
color: 'darkgray'
- },
+ }
});
-const Highlight: React.FC<PropTypes> = ({text, value}) => {
+const Highlight: React.FC<PropTypes> = ({ text, value }) => {
const classes = useStyles();
return (
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} />
</>
);
diff --git a/src/requests.ts b/src/requests.ts
index 42b5b95..e18a056 100644
--- a/src/requests.ts
+++ b/src/requests.ts
@@ -10,6 +10,8 @@ requests.interceptors.request.use(config => {
return _.set(config, 'headers.Authorization', token);
});
-export const { get, post, put, patch } = requests;
+export const {
+ get, post, put, patch
+} = requests;
export default requests;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-24 06:53:51 +0000