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


From c30f59c85d8c57a9250635d96e3a295345c45ba7 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:31:15 +0300
Subject: feat: add message to EmptyState

---
 src/containers/Profile/Profile.tsx     | 5 +++--
 src/containers/Profile/ProfileInfo.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/containers/Profile')

diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx
index fe77ff2..701aa06 100644
--- a/src/containers/Profile/Profile.tsx
+++ b/src/containers/Profile/Profile.tsx
@@ -27,6 +27,7 @@ const Profile: React.FC = () => {
     }
   }, [username, history, user]);
 
+  const isOwnProfile = useMemo(() => user?.username === username, [user, username]);
 
   const totalVotes = useMemo(() => polls?.reduce(
     (total: number, current: Poll) => {
@@ -47,10 +48,10 @@ const Profile: React.FC = () => {
         polls
           ? polls.length
             ? <PollsList polls={polls} mutate={mutatePolls} />
-            : <EmptyState />
+            : <EmptyState message={isOwnProfile ? 'Create a poll and it will show up here.' : ''} />
           : isValidating && <Loading />
       }
-      {user?.username === username && <Fab />}
+      {isOwnProfile && <Fab />}
     </Container>
   );
 };
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index c5c5454..c9831f3 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -22,7 +22,7 @@ interface PropTypes {
 const useStyles = makeStyles(theme => ({
   root: {
     position: 'relative',
-    marginBottom: theme.spacing(2)
+    marginBottom: theme.spacing(4)
   },
   avatar: {
     width: 150,
-- 
cgit v1.2.3