From 917d83bfb70d863944df62fb3ca254ba74e67e6e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:09:56 +0300
Subject: feat: add EmptyState component
---
src/containers/Profile/Profile.tsx | 15 +++++++++------
src/containers/Profile/ProfileInfo.tsx | 5 +++--
2 files changed, 12 insertions(+), 8 deletions(-)
(limited to 'src/containers/Profile')
diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx
index 33abfc2..fe77ff2 100644
--- a/src/containers/Profile/Profile.tsx
+++ b/src/containers/Profile/Profile.tsx
@@ -7,6 +7,7 @@ import ProfileInfo from './ProfileInfo';
import PollsList from '../../components/PollsList/PollsList';
import Loading from '../../components/Loading/Loading';
import Fab from '../../components/Fab/Fab';
+import EmptyState from '../../components/EmptyState/EmptyState';
import { useAuth } from '../../hooks/useAuth';
import { useUser, useProfile } from '../../hooks/APIClient';
@@ -27,25 +28,27 @@ const Profile: React.FC = () => {
}, [username, history, user]);
- const totalVotes = useMemo(() => polls.reduce(
+ const totalVotes = useMemo(() => polls?.reduce(
(total: number, current: Poll) => {
const { left, right } = current.contents;
return total + left.votes + right.votes;
}, 0
- ), [polls]);
+ ) || 0, [polls]);
return (
<Container maxWidth="sm" disableGutters>
<ProfileInfo
userInfo={userInfo}
setUserInfo={setUserInfo}
- savedPolls={polls.length}
+ savedPolls={polls?.length || 0}
totalVotes={totalVotes}
/>
{
- isValidating && !polls
- ? <Loading />
- : <PollsList polls={polls} mutate={mutatePolls} />
+ polls
+ ? polls.length
+ ? <PollsList polls={polls} mutate={mutatePolls} />
+ : <EmptyState />
+ : isValidating && <Loading />
}
{user?.username === username && <Fab />}
</Container>
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 82f640d..c5c5454 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -21,7 +21,8 @@ interface PropTypes {
const useStyles = makeStyles(theme => ({
root: {
- position: 'relative'
+ position: 'relative',
+ marginBottom: theme.spacing(2)
},
avatar: {
width: 150,
@@ -43,7 +44,7 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
width: '100%',
height: 50,
- margin: '50px 0',
+ marginTop: theme.spacing(6),
borderBottom: '1px solid lightgray'
},
menuButton: {
--
cgit v1.2.3