From 1f646377c35b65b97d6eeebb1e88f6d8307e1ef0 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 29 Jun 2020 23:59:15 +0300 Subject: feat!: create useAuth hook --- src/pages/ProfilePage/MoreMenu.tsx | 11 +++++------ src/pages/ProfilePage/ProfileInfo.tsx | 24 ++++++++++++------------ src/pages/ProfilePage/ProfilePage.tsx | 10 ++-------- 3 files changed, 19 insertions(+), 26 deletions(-) (limited to 'src/pages/ProfilePage') 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 = ({ logOut }) => { +const MoreMenu: React.FC = () => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); + const { logout } = useAuth(); + const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -56,7 +55,7 @@ const MoreMenu: React.FC = ({ logOut }) => { } }} > - Log out + Log out 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 = ({ - 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 = ({ return (
{ - user?._id === localStorage.getItem('userId') + userInfo?._id === localStorage.getItem('userId') ? (
- +
= ({
)} > - +
) - : + : } - {user?.username} - {user?.verified && } + {userInfo?.username} + {userInfo?.verified && }
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 = ({ - logOut, id, navigate, setUser -}) => { +const ProfilePage: React.FC = ({ id, navigate }) => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); @@ -40,10 +36,8 @@ const ProfilePage: React.FC = ({ return ( <> -- cgit v1.2.3 From 1499c0126d1a7a2377b0267b761479100c636ee9 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 00:41:09 +0300 Subject: feat!: create useNavigate hook --- src/pages/ProfilePage/ProfilePage.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index ad2da46..808d43a 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -4,16 +4,18 @@ import { User, Poll } from 'which-types'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; -interface PropTypes { - navigate: (prefix: string, id: string) => void; - id: string; -} -const ProfilePage: React.FC = ({ id, navigate }) => { +const ProfilePage: React.FC = () => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); + const { page } = useNavigate(); + const { user } = useAuth(); + + const id = page?.id || user?._id; useEffect(() => { get(`/users/${id}`).then(response => { @@ -41,7 +43,7 @@ const ProfilePage: React.FC = ({ id, navigate }) => { savedPolls={polls.length} totalVotes={totalVotes} /> - + ); }; -- cgit v1.2.3 From 5ccb1ec0be71ed4efb22b4942d70d9132415f69e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 00:43:48 +0300 Subject: style: fix some eslint errors --- src/pages/ProfilePage/ProfilePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 808d43a..d354a45 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -4,8 +4,8 @@ import { User, Poll } from 'which-types'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; -import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; const ProfilePage: React.FC = () => { -- cgit v1.2.3 From b31ed66aafbe1d5dbe70d0cdfd70864204510d81 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 01:27:39 +0300 Subject: fix: re-implement navigation logic --- src/pages/ProfilePage/MoreMenu.tsx | 9 ++++++++- src/pages/ProfilePage/ProfilePage.tsx | 36 +++++++++++++++++------------------ 2 files changed, 25 insertions(+), 20 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx index 7c17f1e..4e681f5 100644 --- a/src/pages/ProfilePage/MoreMenu.tsx +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -5,6 +5,7 @@ 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'; +import { useNavigate } from '../../hooks/useNavigate'; const ITEM_HEIGHT = 48; @@ -20,6 +21,7 @@ const MoreMenu: React.FC = () => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const { logout } = useAuth(); + const { navigate } = useNavigate(); const open = Boolean(anchorEl); @@ -27,6 +29,11 @@ const MoreMenu: React.FC = () => { setAnchorEl(event.currentTarget); }; + const handleLogout = () => { + logout(); + navigate('auth'); + }; + const handleClose = () => { setAnchorEl(null); }; @@ -55,7 +62,7 @@ const MoreMenu: React.FC = () => { } }} > - Log out + Log out
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index d354a45..ca39746 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -12,28 +12,26 @@ const ProfilePage: React.FC = () => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); - const { page } = useNavigate(); + const { page, navigate } = useNavigate(); const { user } = useAuth(); - const id = page?.id || user?._id; - - useEffect(() => { - get(`/users/${id}`).then(response => { - setUserInfo(response.data); - }); - }, [id]); - 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, userInfo]); + const id = page?.id || user?._id + if (id) { + get(`/users/${id}`).then(response => { + setUserInfo(response.data); + }); + 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 + )); + }); + } else navigate('auth'); + }, [navigate, page, user]); return ( <> -- cgit v1.2.3 From e170d04d5d2c8c86d2683f3accb4feb2d94c881a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 01:34:51 +0300 Subject: style: fix linting errors --- src/pages/ProfilePage/ProfilePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index ca39746..2c18466 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -16,7 +16,7 @@ const ProfilePage: React.FC = () => { const { user } = useAuth(); useEffect(() => { - const id = page?.id || user?._id + const id = page?.id || user?._id; if (id) { get(`/users/${id}`).then(response => { setUserInfo(response.data); -- cgit v1.2.3