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/ProfilePage.tsx | 57 ++++++++++++----------------------- 1 file changed, 19 insertions(+), 38 deletions(-) (limited to 'src/pages/ProfilePage/ProfilePage.tsx') 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/ProfilePage.tsx') 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/ProfilePage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/pages/ProfilePage/ProfilePage.tsx') 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/ProfilePage.tsx') 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/ProfilePage.tsx | 55 ----------------------------------- 1 file changed, 55 deletions(-) delete mode 100644 src/pages/ProfilePage/ProfilePage.tsx (limited to 'src/pages/ProfilePage/ProfilePage.tsx') 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