style: fix ALL linting errors

4 files changed, 103 insertions, 56 deletions

diff --git a/src/pages/ProfilePage/Highlight.tsx b/src/pages/ProfilePage/Highlight.tsx
new file mode 100644
index 0000000..ebc3f56
--- /dev/null
+++ b/src/pages/ProfilePage/Highlight.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface PropTypes {
+  text: string;
+  value: string | number;
+}
+
+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/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx
index a4bc993..bf3347b 100644
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ b/src/pages/ProfilePage/MoreMenu.tsx
@@ -3,7 +3,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
-import {makeStyles} from "@material-ui/core";
+import { makeStyles } from '@material-ui/core';
 
 interface PropTypes {
   logOut: () => void;
@@ -21,10 +21,10 @@ const useStyles = makeStyles({
 
 const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const open = Boolean(anchorEl);
 
-  const handleClick = (event: any) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -41,7 +41,7 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
           aria-haspopup="true"
           onClick={handleClick}
         >
-          <MoreHorizIcon/>
+          <MoreHorizIcon />
         </IconButton>
         <Menu
           id="long-menu"
@@ -52,8 +52,8 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
           PaperProps={{
             style: {
               maxHeight: ITEM_HEIGHT * 4.5,
-              width: '20ch',
-            },
+              width: '20ch'
+            }
           }}
         >
           <MenuItem onClick={logOut}>Log out</MenuItem>
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 27966e9..f52e374 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,12 +1,11 @@
-import React, {useRef, useState} from 'react';
-import {Avatar, Badge, TextField, withStyles} from '@material-ui/core/';
-import {makeStyles} from '@material-ui/core/styles';
-import {User} from 'which-types';
+import React, { useState } from 'react';
+import { Avatar, Badge } from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+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 UploadImage from "../../components/UploadImage/UploadImage";
+import MoreMenu from './MoreMenu';
+import Highlight from './Highlight';
+import UploadImage from '../../components/UploadImage/UploadImage';
 
 
 interface PropTypes {
@@ -70,50 +69,54 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const ProfileInfo: React.FC<PropTypes> = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => {
+const ProfileInfo: React.FC<PropTypes> = ({
+  user, logOut, savedPolls, totalVotes, setUserInfo, setUser
+}) => {
   const classes = useStyles();
-  const [input,setInput] = useState(false);
+  const [input, setInput] = useState(false);
+
+  const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
-    input === false ? setInput(true) : setInput(false);
+    setInput(!input);
   };
 
   return (
     <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>
+              <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>
-            <UploadImage displayD={input} setDisplayD={setInput} setUserInfo={setUserInfo} setUser={setUser}/>
-          </div>
-          : <Avatar className={classes.avatar} src={user?.avatarUrl}/>
+)
+          : <Avatar className={classes.avatar} src={user?.avatarUrl} />
       }
       <div className={classes.name}>
         {user?.username}
       </div>
       <div className={classes.profileMenu}>
-        <Highlight text="Polls" value={savedPolls}/>
-        <Highlight text="Since" value={user?.createdAt.toString().substring(0,10).replace(/-/g, '.')}/>
-        <Highlight text="Total" value={totalVotes}/>
+        <Highlight text="Polls" value={savedPolls} />
+        <Highlight text="Since" value={dateSince} />
+        <Highlight text="Total" value={totalVotes} />
       </div>
     </div>
   );
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 479fd5c..b0ac103 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -12,7 +12,9 @@ interface PropTypes {
   setUser:(a:User)=>void;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate,setUser }) => {
+const ProfilePage: React.FC<PropTypes> = ({
+  logOut, id, navigate, setUser
+}) => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
   const [totalVotes, setTotalVotes] = useState<number>(0);
@@ -25,23 +27,26 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate,setUser }) => {
 
   useEffect(() => {
     get(`/profiles/${id}`).then(response => {
-      setPolls([]);
-      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);
+      setPolls(response.data);
+      setTotalVotes(response.data.reduce(
+        (total: number, current: Poll) => {
+          const { left, right } = current.contents;
+          return total + left.votes + right.votes;
+        }, 0
+      ));
     });
   }, [id, userInfo]);
 
   return (
     <>
-      <ProfileInfo user={userInfo} setUserInfo={setUserInfo} setUser={setUser} logOut={logOut} savedPolls={polls.length} totalVotes={totalVotes}/>
+      <ProfileInfo
+        user={userInfo}
+        setUserInfo={setUserInfo}
+        setUser={setUser}
+        logOut={logOut}
+        savedPolls={polls.length}
+        totalVotes={totalVotes}
+      />
       <Feed polls={[...polls]} navigate={navigate} />
     </>
   );