4 files changed, 88 insertions, 22 deletions

diff --git a/src/components/Highlight/Highlight.tsx b/src/components/Highlight/Highlight.tsx
new file mode 100644
index 0000000..71764e2
--- /dev/null
+++ b/src/components/Highlight/Highlight.tsx
@@ -0,0 +1,39 @@
+import React, {useState} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+
+interface PropTypes {
+  text: string;
+  value: any;
+}
+
+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<PropTypes> = ({text, value}) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.menuButton}>
+      <div className={classes.menuNumber}>{value}</div>
+      <div className={classes.menuText}>{text}</div>
+    </div>
+  );
+};
+
+export default Highlight;
diff --git a/src/components/UserStatus/UserStatus.tsx b/src/components/UserStatus/UserStatus.tsx
new file mode 100644
index 0000000..338b5d1
--- /dev/null
+++ b/src/components/UserStatus/UserStatus.tsx
@@ -0,0 +1,29 @@
+import React, {useState} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'relative'
+  },
+  status: {
+    textAlign: 'center',
+    color: 'darkgray'
+  },
+});
+
+
+const UserStatus: React.FC = () => {
+  const classes = useStyles();
+
+  const changeStatus = () => {
+
+  };
+
+  return (
+    <div className={classes.status} onClick={changeStatus}>
+      I am not alcoholic
+    </div>
+  );
+};
+
+export default UserStatus;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 07a6df0..a445b51 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -5,11 +5,15 @@ import {User} from 'which-types';
 import CameraAltIcon from '@material-ui/icons/CameraAlt';
 import MoreMenu from "./MoreMenu";
 import {patch} from '../../requests';
+import Highlight from "../../components/Highlight/Highlight";
+import UserStatus from "../../components/UserStatus/UserStatus";
 
 
 interface PropTypes {
   user: User | undefined;
   logOut: () => void;
+  savedPolls: number;
+  totalVotes: number;
 }
 
 const useStyles = makeStyles({
@@ -51,11 +55,7 @@ const useStyles = makeStyles({
   },
   menuText: {
     color: 'darkgray'
-  },
-  status: {
-    textAlign: 'center',
-    color: 'darkgray'
-  },
+  }
 });
 
 
@@ -69,7 +69,7 @@ const StyledBadge = withStyles((theme) => ({
   },
 }))(Badge);
 
-const ProfileInfo: React.FC<PropTypes> = ({user, logOut}) => {
+const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes}) => {
   const classes = useStyles();
   const [input,setInput] = useState('hide');
   const urlRef = useRef<HTMLInputElement>();
@@ -131,22 +131,11 @@ const ProfileInfo: React.FC<PropTypes> = ({user, logOut}) => {
       <div className={classes.name}>
         {user?.username}
       </div>
-      <div className={classes.status}>
-        I am not alcoholic
-      </div>
+      <UserStatus />
       <div className={classes.profileMenu}>
-        <div className={classes.menuButton}>
-          <div className={classes.menuNumber}>11</div>
-          <div className={classes.menuText}>Polls</div>
-        </div>
-        <div className={classes.menuButton}>
-          <div className={classes.menuNumber}>05.05.2020</div>
-          <div className={classes.menuText}>Since</div>
-        </div>
-        <div className={classes.menuButton}>
-          <div className={classes.menuNumber}>17</div>
-          <div className={classes.menuText}>Total votes</div>
-        </div>
+        <Highlight text="polls" value={savedPolls}/>
+        <Highlight text="since" value={user?.createdAt.toString().substring(0,10).replace(/-/g, '.')}/>
+        <Highlight text="total" value={totalVotes}/>
       </div>
     </div>
   );
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 363d4ff..3506995 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -14,6 +14,7 @@ interface PropTypes {
 const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
+  const [totalVotes, setTotalVotes] = useState<number>(0);
 
   useEffect(() => {
     get(`/users/${id}`).then(response => {
@@ -24,13 +25,21 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
   useEffect(() => {
     get(`/profiles/${id}`).then(response => {
       setPolls(response.data);
+      // const x = response.data.reduce((a: any, c: any) => a.contents.left.votes + c.contents.left.votes);
+      // const y = response.data.reduce((a: any, c: any) => a.contents.right.votes + c.contents.right.votes);
+      let sum = 0;
+      for(let i = 0;i<response.data.length;i++){
+        sum += response.data[i].contents.left.votes;
+        sum += response.data[i].contents.right.votes;
+      }
+      setTotalVotes(sum);
     });
   }, [id]);
 
 
   return (
     <>
-      <ProfileInfo user={userInfo} logOut={logOut} />
+      <ProfileInfo user={userInfo} logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes}/>
       <Feed polls={polls} navigate={navigate} />
     </>
   );