Merge pull request #46 from which-ecosystem/profile

profile

1 files changed, 87 insertions, 28 deletions

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 7208ec8..f52e374 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,64 +1,123 @@
-import React from 'react';
-import { Avatar } from '@material-ui/core/';
+import React, { useState } from 'react';
+import { Avatar, Badge } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button/Button';
 import { User } from 'which-types';
+import CameraAltIcon from '@material-ui/icons/CameraAlt';
+import MoreMenu from './MoreMenu';
+import Highlight from './Highlight';
+import UploadImage from '../../components/UploadImage/UploadImage';
+
 
 interface PropTypes {
   user: User | undefined;
   logOut: () => void;
+  savedPolls: number;
+  totalVotes: number;
+  setUserInfo: (a: User) => void;
+  setUser: (a:User) => void;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'relative'
+  },
   avatar: {
-    margin: '0 auto',
     width: 150,
     height: 150,
-    marginBottom: 10
+    margin: '0 auto'
   },
   name: {
     fontSize: 20,
-    textAlign: 'center'
+    textAlign: 'center',
+    margin: '10px 0'
   },
   profileMenu: {
     display: 'flex',
     width: '100%',
     height: 50,
-    borderBottom: '1px solid lightgray',
-    margin: '50px 0'
+    margin: '50px 0',
+    borderBottom: '1px solid lightgray'
   },
   menuButton: {
     width: 200,
     height: 50,
-    paddingTop: 15,
     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'
   }
-});
+}));
+
 
-const ProfileInfo: React.FC<PropTypes> = ({ user, logOut }) => {
+const ProfileInfo: React.FC<PropTypes> = ({
+  user, logOut, savedPolls, totalVotes, setUserInfo, setUser
+}) => {
   const classes = useStyles();
+  const [input, setInput] = useState(false);
+
+  const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
+
+  const handleClick = () => {
+    setInput(!input);
+  };
+
   return (
-    <div>
-      <Avatar className={classes.avatar} src={user?.avatarUrl} />
+    <div className={classes.root}>
+      {
+        user?._id === localStorage.getItem('userId')
+          ? (
+            <div>
+              <MoreMenu logOut={logOut} />
+              <div className={classes.avatarContainer}>
+                <Badge
+                  onClick={handleClick}
+                  overlap="circle"
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                  }}
+                  badgeContent={(
+                    <div className={classes.badge}>
+                      <CameraAltIcon />
+                    </div>
+                  )}
+                >
+                  <Avatar className={classes.avatar} src={user?.avatarUrl} />
+                </Badge>
+              </div>
+              <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser} />
+            </div>
+)
+          : <Avatar className={classes.avatar} src={user?.avatarUrl} />
+      }
       <div className={classes.name}>
         {user?.username}
       </div>
       <div className={classes.profileMenu}>
-        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
-          Polls
-        </div>
-        <div className={classes.menuButton}>
-          Followers
-        </div>
-        <div className={classes.menuButton}>
-          Following
-        </div>
+        <Highlight text="Polls" value={savedPolls} />
+        <Highlight text="Since" value={dateSince} />
+        <Highlight text="Total" value={totalVotes} />
       </div>
-      {
-        user?._id === localStorage.getItem('userId')
-          ? <Button variant="contained" onClick={logOut}>Log Out</Button>
-          : null
-      }
     </div>
   );
 };