From cb88b8fde92772c5de4eb36cea88c69d7a879d93 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Thu, 25 Jun 2020 21:37:38 +0300 Subject: feat: add icon for uploading avatar photo --- src/pages/ProfilePage/ProfileInfo.tsx | 39 ++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 7208ec8..2d2c67b 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Avatar } from '@material-ui/core/'; +import {Avatar, Badge, withStyles} 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'; interface PropTypes { user: User | undefined; @@ -11,14 +12,13 @@ interface PropTypes { const useStyles = makeStyles({ avatar: { - margin: '0 auto', width: 150, height: 150, - marginBottom: 10 }, name: { fontSize: 20, - textAlign: 'center' + textAlign: 'center', + margin: '10px 0' }, profileMenu: { display: 'flex', @@ -32,14 +32,43 @@ const useStyles = makeStyles({ height: 50, paddingTop: 15, textAlign: 'center' + }, + badge: { + backgroundColor: 'lightgray' + }, + avatarContainer: { + position: 'relative', + textAlign: 'center' } }); + +const StyledBadge = withStyles((theme) => ({ + badge: { + backgroundColor: 'lightgray', + width: 40, + height: 40, + borderRadius: '50%', + cursor: 'pointer' + }, +}))(Badge); + const ProfileInfo: React.FC = ({ user, logOut }) => { const classes = useStyles(); return (
- +
+ } + > + + +
{user?.username}
-- cgit v1.2.3 From 9852ed44fca2c71e6992e583d4cd3b874b6b18fa Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Thu, 25 Jun 2020 21:48:05 +0300 Subject: upload photo icon appear only on yours profile --- src/pages/ProfilePage/ProfileInfo.tsx | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 2d2c67b..18a9fca 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -14,6 +14,7 @@ const useStyles = makeStyles({ avatar: { width: 150, height: 150, + margin: '0 auto' }, name: { fontSize: 20, @@ -57,18 +58,22 @@ const ProfileInfo: React.FC = ({ user, logOut }) => { const classes = useStyles(); return (
-
- } - > - - -
+ { + user?._id === localStorage.getItem('userId') + ?
+ } + > + + +
+ : + }
{user?.username}
-- cgit v1.2.3 From c5b771b87b92260e19f0c43ed83151c8e3d49f73 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 26 Jun 2020 02:49:13 +0300 Subject: feat: add more menu button to profile --- src/pages/ProfilePage/MoreMenu.tsx | 66 +++++++++++++++++++++++++++++++ src/pages/ProfilePage/ProfileInfo.tsx | 74 ++++++++++++++++++++++------------- 2 files changed, 112 insertions(+), 28 deletions(-) create mode 100644 src/pages/ProfilePage/MoreMenu.tsx (limited to 'src') diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx new file mode 100644 index 0000000..a4bc993 --- /dev/null +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +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"; + +interface PropTypes { + logOut: () => void; +} + +const ITEM_HEIGHT = 48; + +const useStyles = makeStyles({ + moreMenu: { + position: 'absolute', + right: 10, + zIndex: 100 + } +}); + +const MoreMenu: React.FC = ({ logOut }) => { + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + + const handleClick = (event: any) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
+
+ + + + + Log out + +
+
+ ); +}; + +export default MoreMenu; diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 18a9fca..7489bc5 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -1,9 +1,9 @@ import React from 'react'; import {Avatar, Badge, withStyles} 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 {makeStyles} from '@material-ui/core/styles'; +import {User} from 'which-types'; import CameraAltIcon from '@material-ui/icons/CameraAlt'; +import MoreMenu from "./MoreMenu"; interface PropTypes { user: User | undefined; @@ -11,6 +11,9 @@ interface PropTypes { } const useStyles = makeStyles({ + root: { + position: 'relative' + }, avatar: { width: 150, height: 150, @@ -31,7 +34,6 @@ const useStyles = makeStyles({ menuButton: { width: 200, height: 50, - paddingTop: 15, textAlign: 'center' }, badge: { @@ -40,7 +42,18 @@ const useStyles = makeStyles({ avatarContainer: { position: 'relative', textAlign: 'center' - } + }, + menuNumber: { + fontWeight: 800, + color: 'black' + }, + menuText: { + color: 'darkgray' + }, + status: { + textAlign: 'center', + color: 'darkgray' + }, }); @@ -54,45 +67,50 @@ const StyledBadge = withStyles((theme) => ({ }, }))(Badge); -const ProfileInfo: React.FC = ({ user, logOut }) => { +const ProfileInfo: React.FC = ({user, logOut}) => { const classes = useStyles(); return ( -
+
{ user?._id === localStorage.getItem('userId') - ?
- } - > - - + ? +
+ +
+ } + > + + +
- : + : }
{user?.username}
+
+ I am not alcoholic +
-
- Polls +
+
11
+
Polls
- Followers +
05.05.2020
+
Since
- Following +
17
+
Total votes
- { - user?._id === localStorage.getItem('userId') - ? - : null - }
); }; -- cgit v1.2.3 From 9e9c18cd1d02a0185d0387770a7bafc18020d6c0 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 26 Jun 2020 03:03:33 +0300 Subject: display user avatar instead avatarIcon in header --- src/components/Header/Header.tsx | 15 ++++++++++++--- src/index.tsx | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 4e25fa3..eb24ecc 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -3,7 +3,7 @@ import { AppBar, Toolbar, IconButton, - Typography + Typography, Avatar } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import AccountCircle from '@material-ui/icons/AccountCircle'; @@ -13,6 +13,7 @@ import HomeIcon from '@material-ui/icons/Home'; import SearchBar from './SearchBar'; interface PropTypes { + userImage: string | undefined; navigate: (prefix: string) => void; } @@ -25,10 +26,14 @@ const useStyles = makeStyles({ }, logo: { fontWeight: 'bold' + }, + avatar:{ + width: 24, + height: 24 } }); -const Header: React.FC = ({ navigate }) => { +const Header: React.FC = ({ navigate, userImage }) => { const classes = useStyles(); const handleHome = (): void => { @@ -56,7 +61,11 @@ const Header: React.FC = ({ navigate }) => { - + { + localStorage.getItem('token') + ? + : + }
diff --git a/src/index.tsx b/src/index.tsx index 50b19f7..d50700b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -90,7 +90,7 @@ const App: React.FC = () => { return ( -
+
{ page.prefix === 'profile' && } { page.prefix === 'feed' && } -- cgit v1.2.3 From 08599cd0954fbbb90d4932cf3de1c7511eb81b52 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 26 Jun 2020 18:59:29 +0300 Subject: add request to set avatarUrl --- src/pages/ProfilePage/ProfileInfo.tsx | 43 ++++++++++++++++++++++++++++++++--- src/requests.ts | 2 +- 2 files changed, 41 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 7489bc5..07a6df0 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -1,9 +1,11 @@ -import React from 'react'; -import {Avatar, Badge, withStyles} from '@material-ui/core/'; +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 CameraAltIcon from '@material-ui/icons/CameraAlt'; import MoreMenu from "./MoreMenu"; +import {patch} from '../../requests'; + interface PropTypes { user: User | undefined; @@ -69,6 +71,21 @@ const StyledBadge = withStyles((theme) => ({ const ProfileInfo: React.FC = ({user, logOut}) => { const classes = useStyles(); + const [input,setInput] = useState('hide'); + const urlRef = useRef(); + + const handleClick = () => { + input === 'hide' ? setInput('show') : setInput('hide'); + }; + + const updateAvatar = (event: any) => { + const id = localStorage.getItem('userId'); + const newAvatar = urlRef.current?.value; + patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => { + console.log(res); + }) + }; + return (
{ @@ -78,16 +95,36 @@ const ProfileInfo: React.FC = ({user, logOut}) => {
} + badgeContent= + { +
+ +
+ } >
+ { + input === 'show' + ?
+ + + + : null + }
: } diff --git a/src/requests.ts b/src/requests.ts index 4cfd37b..42b5b95 100644 --- a/src/requests.ts +++ b/src/requests.ts @@ -10,6 +10,6 @@ requests.interceptors.request.use(config => { return _.set(config, 'headers.Authorization', token); }); -export const { get, post, put } = requests; +export const { get, post, put, patch } = requests; export default requests; -- cgit v1.2.3 From a5fbcc34f2529a2429124572915597c0fed45ae7 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 26 Jun 2020 19:07:37 +0300 Subject: show avatar in header only if user set an avatar image --- src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index eb24ecc..a5e6817 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -62,7 +62,7 @@ const Header: React.FC = ({ navigate, userImage }) => { { - localStorage.getItem('token') + userImage!== undefined ? : } -- cgit v1.2.3 From 28a0027e212cfe2b3f5d397464dbbfe14a5a186c Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 26 Jun 2020 23:54:55 +0300 Subject: take all info from user to highlight --- src/components/Highlight/Highlight.tsx | 39 ++++++++++++++++++++++++++++++++ src/components/UserStatus/UserStatus.tsx | 29 ++++++++++++++++++++++++ src/pages/ProfilePage/ProfileInfo.tsx | 31 ++++++++----------------- src/pages/ProfilePage/ProfilePage.tsx | 11 ++++++++- 4 files changed, 88 insertions(+), 22 deletions(-) create mode 100644 src/components/Highlight/Highlight.tsx create mode 100644 src/components/UserStatus/UserStatus.tsx (limited to 'src') 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 = ({text, value}) => { + const classes = useStyles(); + + return ( +
+
{value}
+
{text}
+
+ ); +}; + +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 ( +
+ I am not alcoholic +
+ ); +}; + +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 = ({user, logOut}) => { +const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes}) => { const classes = useStyles(); const [input,setInput] = useState('hide'); const urlRef = useRef(); @@ -131,22 +131,11 @@ const ProfileInfo: React.FC = ({user, logOut}) => {
{user?.username}
-
- I am not alcoholic -
+
-
-
11
-
Polls
-
-
-
05.05.2020
-
Since
-
-
-
17
-
Total votes
-
+ + +
); 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 = ({ logOut, id, navigate }) => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); + const [totalVotes, setTotalVotes] = useState(0); useEffect(() => { get(`/users/${id}`).then(response => { @@ -24,13 +25,21 @@ const ProfilePage: React.FC = ({ 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 - + ); -- cgit v1.2.3 From 562f675297e03f8abb16af0a5506c51ba91e166a Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 27 Jun 2020 15:34:32 +0300 Subject: button as a component --- src/components/Highlight/Highlight.tsx | 2 +- src/components/UserStatus/UserStatus.tsx | 29 ----------------------------- src/pages/ProfilePage/ProfileInfo.tsx | 9 +++------ 3 files changed, 4 insertions(+), 36 deletions(-) delete mode 100644 src/components/UserStatus/UserStatus.tsx (limited to 'src') diff --git a/src/components/Highlight/Highlight.tsx b/src/components/Highlight/Highlight.tsx index 71764e2..8e11c34 100644 --- a/src/components/Highlight/Highlight.tsx +++ b/src/components/Highlight/Highlight.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles({ menuButton: { width: 200, height: 50, - textAlign: 'center' + textAlign: 'center', }, menuNumber: { fontWeight: 800, diff --git a/src/components/UserStatus/UserStatus.tsx b/src/components/UserStatus/UserStatus.tsx deleted file mode 100644 index 338b5d1..0000000 --- a/src/components/UserStatus/UserStatus.tsx +++ /dev/null @@ -1,29 +0,0 @@ -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 ( -
- I am not alcoholic -
- ); -}; - -export default UserStatus; diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index a445b51..b68075f 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -6,7 +6,6 @@ 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 { @@ -34,7 +33,6 @@ const useStyles = makeStyles({ display: 'flex', width: '100%', height: 50, - borderBottom: '1px solid lightgray', margin: '50px 0' }, menuButton: { @@ -131,11 +129,10 @@ const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes})
{user?.username}
-
- - - + + +
); -- cgit v1.2.3 From e199f28a384dfd6fdf71e6ddaa21799096099cf9 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 27 Jun 2020 16:49:58 +0300 Subject: add dialog window for uploading avatar --- src/components/UploadImage/UploadImage.tsx | 69 ++++++++++++++++++++++++++++++ src/index.tsx | 2 +- src/pages/ProfilePage/ProfileInfo.tsx | 32 +++----------- src/pages/ProfilePage/ProfilePage.tsx | 5 ++- 4 files changed, 80 insertions(+), 28 deletions(-) create mode 100644 src/components/UploadImage/UploadImage.tsx (limited to 'src') diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx new file mode 100644 index 0000000..929151f --- /dev/null +++ b/src/components/UploadImage/UploadImage.tsx @@ -0,0 +1,69 @@ +import React, {useRef} from 'react'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import {patch} from "../../requests"; +import {User} from 'which-types'; + +interface PropTypes { + displayD: boolean; + setDisplayD: (d: boolean) => void; + setUserInfo: (a: User) => void; + setUser: (a: User) => void +} + +const UploadImage: React.FC = ({displayD,setDisplayD,setUserInfo,setUser}) => { + const urlRef = useRef(null); + + const handleClose = () => { + setDisplayD(false); + }; + + const updateAvatar = (event: any) => { + const id = localStorage.getItem('userId'); + const newAvatar = urlRef.current?.value; + console.log(newAvatar); + patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => { + setUserInfo(res.data); + setUser(res.data); + }); + setDisplayD(false); + }; + + return ( +
+ + Upload an Image + + + Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image. + + + + + + + + +
+ ); +}; + +export default UploadImage; diff --git a/src/index.tsx b/src/index.tsx index d50700b..0e6f761 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -92,7 +92,7 @@ const App: React.FC = () => {
- { page.prefix === 'profile' && } + { page.prefix === 'profile' && } { page.prefix === 'feed' && } { page.prefix === 'auth' && }
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index b68075f..6578764 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -6,6 +6,7 @@ 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"; interface PropTypes { @@ -13,6 +14,8 @@ interface PropTypes { logOut: () => void; savedPolls: number; totalVotes: number; + setUserInfo: (a: User) => void; + setUser: (a:User) => void; } const useStyles = makeStyles({ @@ -67,22 +70,14 @@ const StyledBadge = withStyles((theme) => ({ }, }))(Badge); -const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes}) => { +const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => { const classes = useStyles(); - const [input,setInput] = useState('hide'); - const urlRef = useRef(); + const [input,setInput] = useState(false); const handleClick = () => { - input === 'hide' ? setInput('show') : setInput('hide'); + input === false ? setInput(true) : setInput(false); }; - const updateAvatar = (event: any) => { - const id = localStorage.getItem('userId'); - const newAvatar = urlRef.current?.value; - patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => { - console.log(res); - }) - }; return (
@@ -109,20 +104,7 @@ const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes})
- { - input === 'show' - ?
- - - - : null - } +
: } diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 3506995..b2ca0a0 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -9,9 +9,10 @@ interface PropTypes { logOut: () => void; navigate: (prefix: string, id: string) => void; id: string; + setUser:(a:User)=>void; } -const ProfilePage: React.FC = ({ logOut, id, navigate }) => { +const ProfilePage: React.FC = ({ logOut, id, navigate,setUser }) => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); @@ -39,7 +40,7 @@ const ProfilePage: React.FC = ({ logOut, id, navigate }) => { return ( <> - + ); -- cgit v1.2.3 From 490904d9299df636134b82d5507e629f570a1791 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 27 Jun 2020 17:53:31 +0300 Subject: change avata image right after submit --- src/components/Feed/Feed.tsx | 2 +- src/pages/ProfilePage/ProfileInfo.tsx | 4 ++-- src/pages/ProfilePage/ProfilePage.tsx | 9 +++++---- 3 files changed, 8 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index d81da99..06b5087 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({ const Feed: React.FC = ({ polls, navigate }) => { const classes = useStyles(); - + console.log(polls); return (
{polls.map(poll => )} diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 6578764..6a2f853 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -36,7 +36,8 @@ const useStyles = makeStyles({ display: 'flex', width: '100%', height: 50, - margin: '50px 0' + margin: '50px 0', + borderBottom: '1px solid lightgray' }, menuButton: { width: 200, @@ -78,7 +79,6 @@ const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes, input === false ? setInput(true) : setInput(false); }; - return (
{ diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index b2ca0a0..479fd5c 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -25,7 +25,9 @@ const ProfilePage: React.FC = ({ logOut, id, navigate,setUser }) => { useEffect(() => { get(`/profiles/${id}`).then(response => { - setPolls(response.data); + 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; @@ -35,13 +37,12 @@ const ProfilePage: React.FC = ({ logOut, id, navigate,setUser }) => { } setTotalVotes(sum); }); - }, [id]); - + }, [id, userInfo]); return ( <> - + ); }; -- cgit v1.2.3 From 3d4d7984ccc738f42c7ff287576e7e7e4b470672 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 27 Jun 2020 18:54:01 +0300 Subject: refactor: remove withStyles --- src/pages/ProfilePage/ProfileInfo.tsx | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 6a2f853..27966e9 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -18,7 +18,7 @@ interface PropTypes { setUser: (a:User) => void; } -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ root: { position: 'relative' }, @@ -45,7 +45,16 @@ const useStyles = makeStyles({ textAlign: 'center' }, badge: { - backgroundColor: 'lightgray' + 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', @@ -58,18 +67,8 @@ const useStyles = makeStyles({ menuText: { color: 'darkgray' } -}); - +})); -const StyledBadge = withStyles((theme) => ({ - badge: { - backgroundColor: 'lightgray', - width: 40, - height: 40, - borderRadius: '50%', - cursor: 'pointer' - }, -}))(Badge); const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => { const classes = useStyles(); @@ -87,7 +86,7 @@ const ProfileInfo: React.FC = ({user, logOut,savedPolls, totalVotes,
- = ({user, logOut,savedPolls, totalVotes, }} badgeContent= { -
+
} > - +
-- cgit v1.2.3 From 5b08023e0aa0e626264673ebb86dc82299a3b54b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 27 Jun 2020 19:15:41 +0300 Subject: style: fix ALL linting errors --- src/components/Feed/Feed.tsx | 1 - src/components/Header/Header.tsx | 6 +-- src/components/Highlight/Highlight.tsx | 39 --------------- src/components/UploadImage/UploadImage.tsx | 25 +++++----- src/index.tsx | 11 ++++- src/pages/ProfilePage/Highlight.tsx | 39 +++++++++++++++ src/pages/ProfilePage/MoreMenu.tsx | 12 ++--- src/pages/ProfilePage/ProfileInfo.tsx | 77 ++++++++++++++++-------------- src/pages/ProfilePage/ProfilePage.tsx | 31 +++++++----- src/requests.ts | 4 +- 10 files changed, 131 insertions(+), 114 deletions(-) delete mode 100644 src/components/Highlight/Highlight.tsx create mode 100644 src/pages/ProfilePage/Highlight.tsx (limited to 'src') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 06b5087..0c4d84f 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({ const Feed: React.FC = ({ polls, navigate }) => { const classes = useStyles(); - console.log(polls); return (
{polls.map(poll => )} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a5e6817..2e3fc20 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -27,7 +27,7 @@ const useStyles = makeStyles({ logo: { fontWeight: 'bold' }, - avatar:{ + avatar: { width: 24, height: 24 } @@ -62,8 +62,8 @@ const Header: React.FC = ({ navigate, userImage }) => { { - userImage!== undefined - ? + userImage !== undefined + ? : } diff --git a/src/components/Highlight/Highlight.tsx b/src/components/Highlight/Highlight.tsx deleted file mode 100644 index 8e11c34..0000000 --- a/src/components/Highlight/Highlight.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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 = ({text, value}) => { - const classes = useStyles(); - - return ( -
-
{value}
-
{text}
-
- ); -}; - -export default Highlight; diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx index 929151f..42ee989 100644 --- a/src/components/UploadImage/UploadImage.tsx +++ b/src/components/UploadImage/UploadImage.tsx @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, { useRef } from 'react'; import Button from '@material-ui/core/Button'; import TextField from '@material-ui/core/TextField'; import Dialog from '@material-ui/core/Dialog'; @@ -6,28 +6,29 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; -import {patch} from "../../requests"; -import {User} from 'which-types'; +import { User } from 'which-types'; +import { patch } from '../../requests'; interface PropTypes { - displayD: boolean; - setDisplayD: (d: boolean) => void; - setUserInfo: (a: User) => void; - setUser: (a: User) => void + displayD: boolean; + setDisplayD: (d: boolean) => void; + setUserInfo: (a: User) => void; + setUser: (a: User) => void } -const UploadImage: React.FC = ({displayD,setDisplayD,setUserInfo,setUser}) => { +const UploadImage: React.FC = ({ + displayD, setDisplayD, setUserInfo, setUser +}) => { const urlRef = useRef(null); const handleClose = () => { setDisplayD(false); }; - const updateAvatar = (event: any) => { + const updateAvatar = () => { const id = localStorage.getItem('userId'); const newAvatar = urlRef.current?.value; - console.log(newAvatar); - patch(`/users/${id}`, {avatarUrl: newAvatar}).then(res => { + patch(`/users/${id}`, { avatarUrl: newAvatar }).then(res => { setUserInfo(res.data); setUser(res.data); }); @@ -36,7 +37,7 @@ const UploadImage: React.FC = ({displayD,setDisplayD,setUserInfo,set return (
- + Upload an Image diff --git a/src/index.tsx b/src/index.tsx index 0e6f761..9139e4b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -90,9 +90,16 @@ const App: React.FC = () => { return ( -
+
- { page.prefix === 'profile' && } + { page.prefix === 'profile' && ( + + ) } { page.prefix === 'feed' && } { page.prefix === 'auth' && }
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 = ({ text, value }) => { + const classes = useStyles(); + + return ( +
+
{value}
+
{text}
+
+ ); +}; + +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 = ({ logOut }) => { const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); - const handleClick = (event: any) => { + const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; @@ -41,7 +41,7 @@ const MoreMenu: React.FC = ({ logOut }) => { aria-haspopup="true" onClick={handleClick} > - + = ({ logOut }) => { PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, - width: '20ch', - }, + width: '20ch' + } }} > Log out 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 = ({user, logOut,savedPolls, totalVotes, setUserInfo,setUser}) => { +const ProfileInfo: React.FC = ({ + 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 (
{ user?._id === localStorage.getItem('userId') - ? -
- -
- - -
- } - > - - + ? ( +
+ +
+ + +
+ )} + > + + +
+
- -
- : +) + : }
{user?.username}
- - - + + +
); 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 = ({ logOut, id, navigate,setUser }) => { +const ProfilePage: React.FC = ({ + logOut, id, navigate, setUser +}) => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); @@ -25,23 +27,26 @@ const ProfilePage: React.FC = ({ 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 { + const { left, right } = current.contents; + return total + left.votes + right.votes; + }, 0 + )); }); }, [id, userInfo]); return ( <> - + ); diff --git a/src/requests.ts b/src/requests.ts index 42b5b95..e18a056 100644 --- a/src/requests.ts +++ b/src/requests.ts @@ -10,6 +10,8 @@ requests.interceptors.request.use(config => { return _.set(config, 'headers.Authorization', token); }); -export const { get, post, put, patch } = requests; +export const { + get, post, put, patch +} = requests; export default requests; -- cgit v1.2.3