diff options
Diffstat (limited to 'src/pages/ProfilePage')
-rw-r--r-- | src/pages/ProfilePage/MoreMenu.tsx | 11 | ||||
-rw-r--r-- | src/pages/ProfilePage/ProfileInfo.tsx | 24 | ||||
-rw-r--r-- | src/pages/ProfilePage/ProfilePage.tsx | 10 |
3 files changed, 19 insertions, 26 deletions
diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx index bf3347b..7c17f1e 100644 --- a/src/pages/ProfilePage/MoreMenu.tsx +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -4,10 +4,7 @@ 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; -} +import { useAuth } from '../../hooks/useAuth'; const ITEM_HEIGHT = 48; @@ -19,9 +16,11 @@ const useStyles = makeStyles({ } }); -const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { +const MoreMenu: React.FC = () => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null); + const { logout } = useAuth(); + const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { @@ -56,7 +55,7 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => { } }} > - <MenuItem onClick={logOut}>Log out</MenuItem> + <MenuItem onClick={logout}>Log out</MenuItem> </Menu> </div> </div> diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 9fe5912..9557a5e 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -8,15 +8,14 @@ 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 { - user: User | undefined; - logOut: () => void; savedPolls: number; totalVotes: number; - setUserInfo: (a: User) => void; - setUser: (a:User) => void; + userInfo: User | undefined; + setUserInfo: (userInfo: User) => void; } const useStyles = makeStyles(theme => ({ @@ -78,13 +77,14 @@ const useStyles = makeStyles(theme => ({ const ProfileInfo: React.FC<PropTypes> = ({ - user, logOut, savedPolls, totalVotes, setUserInfo, setUser + savedPolls, totalVotes, setUserInfo, userInfo }) => { const classes = useStyles(); const [input, setInput] = useState(false); + const { setUser } = useAuth(); - const dateSince = new Date(user?.createdAt || '').toLocaleDateString(); + const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString(); const handleClick = () => { setInput(!input); @@ -101,10 +101,10 @@ const ProfileInfo: React.FC<PropTypes> = ({ return ( <div className={classes.root}> { - user?._id === localStorage.getItem('userId') + userInfo?._id === localStorage.getItem('userId') ? ( <div> - <MoreMenu logOut={logOut} /> + <MoreMenu /> <div className={classes.avatarContainer}> <Badge overlap="circle" @@ -118,17 +118,17 @@ const ProfileInfo: React.FC<PropTypes> = ({ </div> )} > - <Avatar className={classes.avatar} src={user?.avatarUrl} /> + <Avatar className={classes.avatar} src={userInfo?.avatarUrl} /> </Badge> </div> <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} /> </div> ) - : <Avatar className={classes.avatar} src={user?.avatarUrl} /> + : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} /> } <Typography variant="h5" className={classes.name}> - {user?.username} - {user?.verified && <VerifiedIcon className={classes.verified} color="primary" />} + {userInfo?.username} + {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />} </Typography> <div className={classes.profileMenu}> <Highlight text="Polls" value={savedPolls} /> diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index b0ac103..ad2da46 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -6,15 +6,11 @@ import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; interface PropTypes { - logOut: () => void; navigate: (prefix: string, id: string) => void; id: string; - setUser:(a:User)=>void; } -const ProfilePage: React.FC<PropTypes> = ({ - logOut, id, navigate, setUser -}) => { +const ProfilePage: React.FC<PropTypes> = ({ id, navigate }) => { const [userInfo, setUserInfo] = useState<User>(); const [polls, setPolls] = useState<Poll[]>([]); const [totalVotes, setTotalVotes] = useState<number>(0); @@ -40,10 +36,8 @@ const ProfilePage: React.FC<PropTypes> = ({ return ( <> <ProfileInfo - user={userInfo} + userInfo={userInfo} setUserInfo={setUserInfo} - setUser={setUser} - logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes} /> |