From b6f9dbc3cbb21447fdeb22420b005da37de2af8e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 9 Aug 2020 19:51:32 +0300 Subject: feat: use SWR in profile page --- src/pages/ProfilePage/ProfileInfo.tsx | 9 +++--- src/pages/ProfilePage/ProfilePage.tsx | 57 ++++++++++++----------------------- 2 files changed, 23 insertions(+), 43 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index e4ef66a..8b1447a 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -16,7 +16,6 @@ interface PropTypes { totalVotes: number; userInfo: User | undefined; setUserInfo: (userInfo: User) => void; - isLoading: boolean; } const useStyles = makeStyles(theme => ({ @@ -83,7 +82,7 @@ const useStyles = makeStyles(theme => ({ const ProfileInfo: React.FC = ({ - savedPolls, totalVotes, setUserInfo, userInfo, isLoading + savedPolls, totalVotes, setUserInfo, userInfo }) => { const classes = useStyles(); const [input, setInput] = useState(false); @@ -105,7 +104,7 @@ const ProfileInfo: React.FC = ({ return (
{ - isLoading + !userInfo ? : userInfo?._id === localStorage.getItem('userId') ? ( @@ -133,7 +132,7 @@ const ProfileInfo: React.FC = ({ : } { - isLoading + !userInfo ? : ( @@ -144,7 +143,7 @@ const ProfileInfo: React.FC = ({ }
{ - isLoading + !userInfo ? ( <> diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index ae94b9f..4769999 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -1,59 +1,41 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { User, Poll } from 'which-types'; +import { 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'; +import { useUser, useProfile } from '../../hooks/APIClient'; const ProfilePage: React.FC = () => { - const [userInfo, setUserInfo] = useState(); - const [polls, setPolls] = useState([]); - const [totalVotes, setTotalVotes] = useState(0); - const [isInfoLoading, setIsInfoLoading] = useState(false); - const [isPollsLoading, setIsPollsLoading] = useState(false); const history = useHistory(); const { username } = useParams(); const { user } = useAuth(); + const { data: userInfo, mutate: setUserInfo } = useUser(username); + const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id); + useEffect(() => { - setIsInfoLoading(true); + fetchPolls(); + }, [userInfo, fetchPolls]) - const redirect = () => { + useEffect(() => { + if (!username) { if (user) history.push(`/profile/${user.username}`); else history.push('/login'); }; + }, [username, history, user]); - 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]); + const totalVotes = useCallback( + polls.reduce( + (total: number, current: Poll) => { + const { left, right } = current.contents; + return total + left.votes + right.votes; + }, 0 + ), [polls]); return ( @@ -62,9 +44,8 @@ const ProfilePage: React.FC = () => { setUserInfo={setUserInfo} savedPolls={polls.length} totalVotes={totalVotes} - isLoading={isInfoLoading} /> - {isPollsLoading ? : (polls.length > 0 && )} + ); }; -- cgit v1.2.3 From 359ec6a68ea92b3d1eecf020742157eb3be90b9f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 9 Aug 2020 21:17:33 +0300 Subject: feat: add useFeed hook --- src/pages/ProfilePage/ProfilePage.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 4769999..293b766 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -15,11 +15,7 @@ const ProfilePage: React.FC = () => { const { user } = useAuth(); const { data: userInfo, mutate: setUserInfo } = useUser(username); - const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id); - - useEffect(() => { - fetchPolls(); - }, [userInfo, fetchPolls]) + const { data: polls } = useProfile(userInfo?._id); useEffect(() => { if (!username) { -- cgit v1.2.3 From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:02:24 +0300 Subject: feat!: add useLocalStorage hook --- src/pages/ProfilePage/ProfileInfo.tsx | 7 +++---- src/pages/ProfilePage/ProfilePage.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 8b1447a..9eee4c1 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -86,7 +86,7 @@ const ProfileInfo: React.FC = ({ }) => { const classes = useStyles(); const [input, setInput] = useState(false); - const { setUser } = useAuth(); + const { user } = useAuth(); const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString(); const handleClick = () => { @@ -94,10 +94,9 @@ const ProfileInfo: React.FC = ({ }; const patchAvatar = (url: string) => { - const id = localStorage.getItem('userId'); + const id = user?._id; patch(`/users/${id}`, { avatarUrl: url }).then(res => { setUserInfo(res.data); - setUser(res.data); }); }; @@ -106,7 +105,7 @@ const ProfileInfo: React.FC = ({ { !userInfo ? - : userInfo?._id === localStorage.getItem('userId') + : userInfo?._id === user?._id ? (
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 293b766..9e00784 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -21,7 +21,7 @@ const ProfilePage: React.FC = () => { if (!username) { if (user) history.push(`/profile/${user.username}`); else history.push('/login'); - }; + } }, [username, history, user]); @@ -31,7 +31,9 @@ const ProfilePage: React.FC = () => { const { left, right } = current.contents; return total + left.votes + right.votes; }, 0 - ), [polls]); + ), + [polls] + ); return ( -- cgit v1.2.3 From dfa6f0a8d1415539e1ff6a3ca848627bbe87b470 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:19:17 +0300 Subject: fix: show Feed loading correctly --- src/pages/ProfilePage/ProfilePage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src/pages/ProfilePage') diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 9e00784..db27d25 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -5,6 +5,7 @@ import { Container } from '@material-ui/core'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; +import Loading from '../../components/Loading/Loading'; import { useAuth } from '../../hooks/useAuth'; import { useUser, useProfile } from '../../hooks/APIClient'; @@ -15,7 +16,7 @@ const ProfilePage: React.FC = () => { const { user } = useAuth(); const { data: userInfo, mutate: setUserInfo } = useUser(username); - const { data: polls } = useProfile(userInfo?._id); + const { data: polls, isValidating } = useProfile(userInfo?._id); useEffect(() => { if (!username) { @@ -43,7 +44,10 @@ const ProfilePage: React.FC = () => { savedPolls={polls.length} totalVotes={totalVotes} /> - + {!polls.length && isValidating + ? + : + } ); }; -- cgit v1.2.3 From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:28:39 +0300 Subject: refactor: move pages -> containers --- src/pages/ProfilePage/Highlight.tsx | 39 -------- src/pages/ProfilePage/MoreMenu.tsx | 72 --------------- src/pages/ProfilePage/ProfileInfo.tsx | 166 ---------------------------------- src/pages/ProfilePage/ProfilePage.tsx | 55 ----------- 4 files changed, 332 deletions(-) delete mode 100644 src/pages/ProfilePage/Highlight.tsx delete mode 100644 src/pages/ProfilePage/MoreMenu.tsx delete mode 100644 src/pages/ProfilePage/ProfileInfo.tsx delete mode 100644 src/pages/ProfilePage/ProfilePage.tsx (limited to 'src/pages/ProfilePage') 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 = ({ text, value }) => { - const classes = useStyles(); - - return ( -
-
{value}
-
{text}
-
- ); -}; - -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(null); - const { logout } = useAuth(); - const history = useHistory(); - - const open = Boolean(anchorEl); - - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleLogout = () => { - logout(); - history.push('/login'); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
-
- - - - - Log out - -
-
- ); -}; - -export default MoreMenu; diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx deleted file mode 100644 index 9eee4c1..0000000 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ /dev/null @@ -1,166 +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; -} - -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 = ({ - savedPolls, totalVotes, setUserInfo, userInfo -}) => { - const classes = useStyles(); - const [input, setInput] = useState(false); - const { user } = useAuth(); - const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString(); - - const handleClick = () => { - setInput(!input); - }; - - const patchAvatar = (url: string) => { - const id = user?._id; - patch(`/users/${id}`, { avatarUrl: url }).then(res => { - setUserInfo(res.data); - }); - }; - - return ( -
- { - !userInfo - ? - : userInfo?._id === user?._id - ? ( -
- -
- - -
- )} - > - - -
- -
- ) - : - } - { - !userInfo - ? - : ( - - {userInfo?.username} - {userInfo?.verified && } - - ) - } -
- { - !userInfo - ? ( - <> - - - - - ) - : ( - <> - - - - - ) - } -
-
- ); -}; - -export default ProfileInfo; diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx deleted file mode 100644 index db27d25..0000000 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useEffect, useCallback } from 'react'; -import { useHistory, useParams } from 'react-router-dom'; -import { Poll } from 'which-types'; -import { Container } from '@material-ui/core'; - -import ProfileInfo from './ProfileInfo'; -import Feed from '../../components/Feed/Feed'; -import Loading from '../../components/Loading/Loading'; -import { useAuth } from '../../hooks/useAuth'; -import { useUser, useProfile } from '../../hooks/APIClient'; - - -const ProfilePage: React.FC = () => { - const history = useHistory(); - const { username } = useParams(); - const { user } = useAuth(); - - const { data: userInfo, mutate: setUserInfo } = useUser(username); - const { data: polls, isValidating } = useProfile(userInfo?._id); - - useEffect(() => { - if (!username) { - if (user) history.push(`/profile/${user.username}`); - else history.push('/login'); - } - }, [username, history, user]); - - - const totalVotes = useCallback( - polls.reduce( - (total: number, current: Poll) => { - const { left, right } = current.contents; - return total + left.votes + right.votes; - }, 0 - ), - [polls] - ); - - return ( - - - {!polls.length && isValidating - ? - : - } - - ); -}; - -export default ProfilePage; -- cgit v1.2.3