From 1f646377c35b65b97d6eeebb1e88f6d8307e1ef0 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 29 Jun 2020 23:59:15 +0300
Subject: feat!: create useAuth hook

---
 src/pages/ProfilePage/MoreMenu.tsx    | 11 +++++------
 src/pages/ProfilePage/ProfileInfo.tsx | 24 ++++++++++++------------
 src/pages/ProfilePage/ProfilePage.tsx | 10 ++--------
 3 files changed, 19 insertions(+), 26 deletions(-)

(limited to 'src/pages/ProfilePage')

diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx
index bf3347b..7c17f1e 100644
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ b/src/pages/ProfilePage/MoreMenu.tsx
@@ -4,10 +4,7 @@ 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';
-
-interface PropTypes {
-  logOut: () => void;
-}
+import { useAuth } from '../../hooks/useAuth';
 
 const ITEM_HEIGHT = 48;
 
@@ -19,9 +16,11 @@ const useStyles = makeStyles({
   }
 });
 
-const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
+const MoreMenu: React.FC = () => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const { logout } = useAuth();
+
   const open = Boolean(anchorEl);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -56,7 +55,7 @@ const MoreMenu: React.FC<PropTypes> = ({ logOut }) => {
             }
           }}
         >
-          <MenuItem onClick={logOut}>Log out</MenuItem>
+          <MenuItem onClick={logout}>Log out</MenuItem>
         </Menu>
       </div>
     </div>
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 9fe5912..9557a5e 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -8,15 +8,14 @@ import MoreMenu from './MoreMenu';
 import Highlight from './Highlight';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { patch } from '../../requests';
+import { useAuth } from '../../hooks/useAuth';
 
 
 interface PropTypes {
-  user: User | undefined;
-  logOut: () => void;
   savedPolls: number;
   totalVotes: number;
-  setUserInfo: (a: User) => void;
-  setUser: (a:User) => void;
+  userInfo: User | undefined;
+  setUserInfo: (userInfo: User) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -78,13 +77,14 @@ const useStyles = makeStyles(theme => ({
 
 
 const ProfileInfo: React.FC<PropTypes> = ({
-  user, logOut, savedPolls, totalVotes, setUserInfo, setUser
+  savedPolls, totalVotes, setUserInfo, userInfo
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
+  const { setUser } = useAuth();
 
 
-  const dateSince = new Date(user?.createdAt || '').toLocaleDateString();
+  const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
     setInput(!input);
@@ -101,10 +101,10 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        user?._id === localStorage.getItem('userId')
+        userInfo?._id === localStorage.getItem('userId')
           ? (
             <div>
-              <MoreMenu logOut={logOut} />
+              <MoreMenu />
               <div className={classes.avatarContainer}>
                 <Badge
                   overlap="circle"
@@ -118,17 +118,17 @@ const ProfileInfo: React.FC<PropTypes> = ({
                     </div>
                   )}
                 >
-                  <Avatar className={classes.avatar} src={user?.avatarUrl} />
+                  <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
                 </Badge>
               </div>
               <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
             </div>
 )
-          : <Avatar className={classes.avatar} src={user?.avatarUrl} />
+          : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
       }
       <Typography variant="h5" className={classes.name}>
-        {user?.username}
-        {user?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
+        {userInfo?.username}
+        {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
       </Typography>
       <div className={classes.profileMenu}>
         <Highlight text="Polls" value={savedPolls} />
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index b0ac103..ad2da46 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -6,15 +6,11 @@ import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
 
 interface PropTypes {
-  logOut: () => void;
   navigate: (prefix: string, id: string) => void;
   id: string;
-  setUser:(a:User)=>void;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({
-  logOut, id, navigate, setUser
-}) => {
+const ProfilePage: React.FC<PropTypes> = ({ id, navigate }) => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
   const [totalVotes, setTotalVotes] = useState<number>(0);
@@ -40,10 +36,8 @@ const ProfilePage: React.FC<PropTypes> = ({
   return (
     <>
       <ProfileInfo
-        user={userInfo}
+        userInfo={userInfo}
         setUserInfo={setUserInfo}
-        setUser={setUser}
-        logOut={logOut}
         savedPolls={polls.length}
         totalVotes={totalVotes}
       />
-- 
cgit v1.2.3