From 4bcabf751b8292fee696db5e027f38b1838b0be6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 11 Aug 2020 21:38:47 +0300 Subject: feat: add mobile header --- src/components/Header/BottomBar.tsx | 39 ++++++++++++++++++ src/components/Header/Header.tsx | 75 +++++++++++++++++++--------------- src/components/Header/MobileHeader.tsx | 38 +++++++++++++++++ src/containers/Page/Page.tsx | 2 +- 4 files changed, 120 insertions(+), 34 deletions(-) create mode 100644 src/components/Header/BottomBar.tsx create mode 100644 src/components/Header/MobileHeader.tsx (limited to 'src') diff --git a/src/components/Header/BottomBar.tsx b/src/components/Header/BottomBar.tsx new file mode 100644 index 0000000..57efb3e --- /dev/null +++ b/src/components/Header/BottomBar.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { AppBar, Toolbar } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +interface PropTypes { + profile: JSX.Element; + feed: JSX.Element; + notifications: JSX.Element; +} + +const useStyles = makeStyles(theme => ({ + root: { + top: 'auto', + bottom: 0 + }, + toolbar: { + display: 'flex', + justifyContent: 'space-around' + } +})); + + +const BottomBar: React.FC = React.memo(props => { + const classes = useStyles(); + const { profile, feed, notifications } = props; + + return ( + + + {notifications} + {feed} + {profile} + + + ); +}); + +export default BottomBar; + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index c3a678c..b314d79 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -8,20 +8,22 @@ import { Avatar, useMediaQuery } from '@material-ui/core'; +import { + AccountCircle, + Notifications, + Home, + Menu, + Search, +} from '@material-ui/icons'; import { makeStyles, useTheme } from '@material-ui/core/styles'; -import AccountCircle from '@material-ui/icons/AccountCircle'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import HomeIcon from '@material-ui/icons/Home'; import { useAuth } from '../../hooks/useAuth'; import SearchBar from './SearchBar'; +import MobileHeader from './MobileHeader'; +import BottomBar from './BottomBar'; const useStyles = makeStyles(theme => ({ - mobile: { - top: 'auto', - bottom: 0 - }, toolbar: { display: 'flex', justifyContent: 'space-around' @@ -41,7 +43,6 @@ const useStyles = makeStyles(theme => ({ } })); - const Header: React.FC = React.memo(() => { const classes = useStyles(); const { user } = useAuth(); @@ -66,19 +67,37 @@ const Header: React.FC = React.memo(() => { history.push('/notifications'); }; - const FeedButton = ( + const feed = ( - + + + ); + + const notifications = ( + + + + ); + + const menu = ( + + ); - const NotificationsButton = ( + const search = ( - + ); - const ProfileButton = ( + const logo = ( + + Which + + ); + + const profile= ( { user?.avatarUrl @@ -91,33 +110,23 @@ const Header: React.FC = React.memo(() => { const BrowserVersion = ( - - Which - + {logo}
- {FeedButton} - {NotificationsButton} - {ProfileButton} + {feed} + {notifications} + {profile}
); - const MobileVersion = ( - - - - W - - {FeedButton} - {NotificationsButton} - {ProfileButton} - - - ); - - return isMobile ? MobileVersion : BrowserVersion; + return isMobile ? ( + <> + + + + ) : BrowserVersion; }); export default Header; diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx new file mode 100644 index 0000000..fbbd37a --- /dev/null +++ b/src/components/Header/MobileHeader.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { AppBar, Toolbar, useScrollTrigger, Slide } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +interface PropTypes { + menu: JSX.Element; + logo: JSX.Element; + search: JSX.Element; +} + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'space-between', + }, +})); + + +const MobileHeader: React.FC = React.memo(props => { + const classes = useStyles(); + const trigger = useScrollTrigger(); + const { menu, search, logo } = props; + + return ( + + + + {menu} + {logo} + {search} + + + + ); +}); + +export default MobileHeader; + diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx index 643e6de..f6a0aa5 100644 --- a/src/containers/Page/Page.tsx +++ b/src/containers/Page/Page.tsx @@ -16,7 +16,7 @@ const Notifications = React.lazy(() => import('../Notifications/Notifications')) const useStyles = makeStyles(theme => ({ root: { [theme.breakpoints.down('sm')]: { - margin: theme.spacing(2, 0, 12, 0) + margin: theme.spacing(15, 0, 12, 0) }, [theme.breakpoints.up('md')]: { margin: theme.spacing(15, 5, 8, 5) -- cgit v1.2.3 From a9d713a73b65847af419016d2d97c4e8dab950f9 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 11 Aug 2020 22:00:10 +0300 Subject: refactor: cleanup header components --- src/components/Header/BottomBar.tsx | 4 +-- src/components/Header/BrowserHeader.tsx | 51 +++++++++++++++++++++++++++++++++ src/components/Header/Header.tsx | 40 ++++++-------------------- src/components/Header/MobileHeader.tsx | 15 ++++++---- 4 files changed, 72 insertions(+), 38 deletions(-) create mode 100644 src/components/Header/BrowserHeader.tsx (limited to 'src') diff --git a/src/components/Header/BottomBar.tsx b/src/components/Header/BottomBar.tsx index 57efb3e..67fe219 100644 --- a/src/components/Header/BottomBar.tsx +++ b/src/components/Header/BottomBar.tsx @@ -8,7 +8,7 @@ interface PropTypes { notifications: JSX.Element; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ root: { top: 'auto', bottom: 0 @@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'space-around' } -})); +}); const BottomBar: React.FC = React.memo(props => { diff --git a/src/components/Header/BrowserHeader.tsx b/src/components/Header/BrowserHeader.tsx new file mode 100644 index 0000000..2dda717 --- /dev/null +++ b/src/components/Header/BrowserHeader.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { AppBar, Toolbar } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import SearchBar from './SearchBar'; + +interface PropTypes { + logo: JSX.Element; + feed: JSX.Element; + notifications: JSX.Element; + profile: JSX.Element; +} + +const useStyles = makeStyles({ + root: { + width: '60%', + margin: 'auto', + display: 'flex', + justifyContent: 'space-around' + }, + group: { + display: 'flex' + } +}); + + +const BrowserHeader: React.FC = React.memo(props => { + const classes = useStyles(); + const { + logo, + feed, + notifications, + profile + } = props; + + return ( + + + {logo} + +
+ {feed} + {notifications} + {profile} +
+ + + ); +}); + +export default BrowserHeader; + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b314d79..344b839 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { - AppBar, - Toolbar, IconButton, Typography, Avatar, @@ -13,31 +11,23 @@ import { Notifications, Home, Menu, - Search, + Search } from '@material-ui/icons'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useAuth } from '../../hooks/useAuth'; -import SearchBar from './SearchBar'; import MobileHeader from './MobileHeader'; import BottomBar from './BottomBar'; +import BrowserHeader from './BrowserHeader'; const useStyles = makeStyles(theme => ({ - toolbar: { - display: 'flex', - justifyContent: 'space-around' - }, - browserToolbar: { - width: '60%', - margin: 'auto' - }, logo: { fontWeight: 'bold', cursor: 'pointer', color: 'white' }, - round: { + avatar: { width: theme.spacing(3), height: theme.spacing(3) } @@ -86,7 +76,7 @@ const Header: React.FC = React.memo(() => { ); const search = ( - + ); @@ -97,36 +87,24 @@ const Header: React.FC = React.memo(() => { ); - const profile= ( + const profile = ( { user?.avatarUrl - ? + ? : } ); - const BrowserVersion = ( - - - {logo} - -
- {feed} - {notifications} - {profile} -
- - - ); - return isMobile ? ( <> - ) : BrowserVersion; + ) : ( + + ); }); export default Header; diff --git a/src/components/Header/MobileHeader.tsx b/src/components/Header/MobileHeader.tsx index fbbd37a..a20d54a 100644 --- a/src/components/Header/MobileHeader.tsx +++ b/src/components/Header/MobileHeader.tsx @@ -1,5 +1,10 @@ import React from 'react'; -import { AppBar, Toolbar, useScrollTrigger, Slide } from '@material-ui/core'; +import { + AppBar, + Toolbar, + useScrollTrigger, + Slide +} from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; interface PropTypes { @@ -8,12 +13,12 @@ interface PropTypes { search: JSX.Element; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ root: { display: 'flex', - justifyContent: 'space-between', - }, -})); + justifyContent: 'space-between' + } +}); const MobileHeader: React.FC = React.memo(props => { -- cgit v1.2.3 From b5ce9be31993f5b4bee9abbe57d775b7ea407507 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 11 Aug 2020 22:19:23 +0300 Subject: refactor: create separate Avatar component --- src/components/Avatar/Avatar.tsx | 36 ++++++++++++++++++++++++++++++++++ src/components/Header/Header.tsx | 8 ++++---- src/components/UserStrip/UserStrip.tsx | 26 ++++++------------------ src/containers/Profile/ProfileInfo.tsx | 11 +++++++---- 4 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 src/components/Avatar/Avatar.tsx (limited to 'src') diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx new file mode 100644 index 0000000..e445891 --- /dev/null +++ b/src/components/Avatar/Avatar.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import { Avatar as AvatarBase } from '@material-ui/core'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import { User } from 'which-types'; + +interface PropTypes { + user: User; + className?: string; +} + +const Avatar: React.FC = ({ user, className }) => { + const history = useHistory(); + const { username, avatarUrl } = user; + + const handleClick = () => { + history.push(`/profile/${username}`); + }; + + return avatarUrl ? ( + + ) : ( + + ); +}; + +export default Avatar; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 344b839..5621dbf 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -3,7 +3,6 @@ import { useHistory } from 'react-router-dom'; import { IconButton, Typography, - Avatar, useMediaQuery } from '@material-ui/core'; import { @@ -19,6 +18,7 @@ import { useAuth } from '../../hooks/useAuth'; import MobileHeader from './MobileHeader'; import BottomBar from './BottomBar'; import BrowserHeader from './BrowserHeader'; +import Avatar from '../Avatar/Avatar'; const useStyles = makeStyles(theme => ({ @@ -90,9 +90,9 @@ const Header: React.FC = React.memo(() => { const profile = ( { - user?.avatarUrl - ? - : + user + ? + : } ); diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx index 73d9363..a837961 100644 --- a/src/components/UserStrip/UserStrip.tsx +++ b/src/components/UserStrip/UserStrip.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; -import { Avatar, CardHeader } from '@material-ui/core/'; +import { CardHeader } from '@material-ui/core/'; import { User } from 'which-types'; +import Avatar from '../Avatar/Avatar'; + interface PropTypes { user: User; @@ -21,30 +22,15 @@ const useStyles = makeStyles(theme => ({ marginLeft: theme.spacing(0.5), width: theme.spacing(2), height: theme.spacing(2) - }, - avatar: { - cursor: 'pointer' } })); const UserStrip: React.FC = ({ user, info }) => { const classes = useStyles(); - const history = useHistory(); - const { username, avatarUrl, verified } = user; - - const handleNavigate = () => { - history.push(`/profile/${username}`); - }; - - const avatar = ( - - ); + const { username, verified } = user; + + const avatar = ; const title = (
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index 9eee4c1..a01c222 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Avatar, Badge, Typography } from '@material-ui/core/'; +import { 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'; @@ -8,9 +8,11 @@ import Skeleton from '@material-ui/lab/Skeleton'; import MoreMenu from './MoreMenu'; import Highlight from './Highlight'; import UploadImage from '../../components/UploadImage/UploadImage'; +import Avatar from '../../components/Avatar/Avatar'; import { patch } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; + interface PropTypes { savedPolls: number; totalVotes: number; @@ -116,19 +118,20 @@ const ProfileInfo: React.FC = ({ vertical: 'bottom', horizontal: 'right' }} + onClick={handleClick} badgeContent={(
- +
)} > - +
) - : + : } { !userInfo -- cgit v1.2.3