From b6f9dbc3cbb21447fdeb22420b005da37de2af8e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 19:51:32 +0300
Subject: feat: use SWR in profile page

---
 src/pages/ProfilePage/ProfileInfo.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/pages/ProfilePage/ProfileInfo.tsx')

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index e4ef66a..8b1447a 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -16,7 +16,6 @@ interface PropTypes {
   totalVotes: number;
   userInfo: User | undefined;
   setUserInfo: (userInfo: User) => void;
-  isLoading: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -83,7 +82,7 @@ const useStyles = makeStyles(theme => ({
 
 
 const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo, isLoading
+  savedPolls, totalVotes, setUserInfo, userInfo
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
@@ -105,7 +104,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        isLoading
+        !userInfo
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
           : userInfo?._id === localStorage.getItem('userId')
             ? (
@@ -133,7 +132,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
             : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
       }
       {
-        isLoading
+        !userInfo
           ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
           : (
             <Typography variant="h5" className={classes.name}>
@@ -144,7 +143,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
       }
       <div className={classes.profileMenu}>
         {
-          isLoading
+          !userInfo
             ? (
               <>
                 <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-- 
cgit v1.2.3


From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:02:24 +0300
Subject: feat!: add useLocalStorage hook

---
 src/pages/ProfilePage/ProfileInfo.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/pages/ProfilePage/ProfileInfo.tsx')

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 8b1447a..9eee4c1 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -86,7 +86,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
-  const { setUser } = useAuth();
+  const { user } = useAuth();
   const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
@@ -94,10 +94,9 @@ const ProfileInfo: React.FC<PropTypes> = ({
   };
 
   const patchAvatar = (url: string) => {
-    const id = localStorage.getItem('userId');
+    const id = user?._id;
     patch(`/users/${id}`, { avatarUrl: url }).then(res => {
       setUserInfo(res.data);
-      setUser(res.data);
     });
   };
 
@@ -106,7 +105,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
       {
         !userInfo
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
-          : userInfo?._id === localStorage.getItem('userId')
+          : userInfo?._id === user?._id
             ? (
               <div>
                 <MoreMenu />
-- 
cgit v1.2.3


From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:28:39 +0300
Subject: refactor: move pages -> containers

---
 src/pages/ProfilePage/ProfileInfo.tsx | 166 ----------------------------------
 1 file changed, 166 deletions(-)
 delete mode 100644 src/pages/ProfilePage/ProfileInfo.tsx

(limited to 'src/pages/ProfilePage/ProfileInfo.tsx')

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
deleted file mode 100644
index 9eee4c1..0000000
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react';
-import { Avatar, Badge, Typography } from '@material-ui/core/';
-import { makeStyles } from '@material-ui/core/styles';
-import { User } from 'which-types';
-import CameraAltIcon from '@material-ui/icons/CameraAlt';
-import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
-import Skeleton from '@material-ui/lab/Skeleton';
-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 {
-  savedPolls: number;
-  totalVotes: number;
-  userInfo: User | undefined;
-  setUserInfo: (userInfo: User) => void;
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    position: 'relative'
-  },
-  avatar: {
-    width: 150,
-    height: 150,
-    margin: '0 auto'
-  },
-  name: {
-    margin: theme.spacing(1, 0),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  verified: {
-    marginLeft: theme.spacing(0.5),
-    width: theme.spacing(3),
-    height: theme.spacing(3)
-  },
-  profileMenu: {
-    display: 'flex',
-    width: '100%',
-    height: 50,
-    margin: '50px 0',
-    borderBottom: '1px solid lightgray'
-  },
-  menuButton: {
-    width: 200,
-    height: 50,
-    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'
-  },
-  skeleton: {
-    margin: '10px auto',
-    borderRadius: 2
-  }
-
-}));
-
-
-const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo
-}) => {
-  const classes = useStyles();
-  const [input, setInput] = useState(false);
-  const { user } = useAuth();
-  const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
-
-  const handleClick = () => {
-    setInput(!input);
-  };
-
-  const patchAvatar = (url: string) => {
-    const id = user?._id;
-    patch(`/users/${id}`, { avatarUrl: url }).then(res => {
-      setUserInfo(res.data);
-    });
-  };
-
-  return (
-    <div className={classes.root}>
-      {
-        !userInfo
-          ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
-          : userInfo?._id === user?._id
-            ? (
-              <div>
-                <MoreMenu />
-                <div className={classes.avatarContainer}>
-                  <Badge
-                    overlap="circle"
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'right'
-                    }}
-                    badgeContent={(
-                      <div className={classes.badge}>
-                        <CameraAltIcon onClick={handleClick} />
-                      </div>
-                    )}
-                  >
-                    <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-                  </Badge>
-                </div>
-                <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
-              </div>
-            )
-            : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-      }
-      {
-        !userInfo
-          ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
-          : (
-            <Typography variant="h5" className={classes.name}>
-              {userInfo?.username}
-              {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
-            </Typography>
-          )
-      }
-      <div className={classes.profileMenu}>
-        {
-          !userInfo
-            ? (
-              <>
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-              </>
-            )
-            : (
-              <>
-                <Highlight text="Polls" value={savedPolls} />
-                <Highlight text="Since" value={dateSince} />
-                <Highlight text="Total votes" value={totalVotes} />
-              </>
-            )
-        }
-      </div>
-    </div>
-  );
-};
-
-export default ProfileInfo;
-- 
cgit v1.2.3