From 77dc482dda42f9532ece78c4c568b37658270c0a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Wed, 12 Aug 2020 04:26:54 +0300 Subject: feat: improve Avatar --- src/components/Avatar/Avatar.tsx | 16 ++++------------ src/components/Header/Header.tsx | 2 +- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e445891..29754c9 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,35 +1,27 @@ 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; + user?: User; className?: string; } const Avatar: React.FC = ({ user, className }) => { const history = useHistory(); - const { username, avatarUrl } = user; const handleClick = () => { - history.push(`/profile/${username}`); + if (user) history.push(`/profile/${user.username}`); }; - return avatarUrl ? ( + return ( - ) : ( - ); }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 224f6b0..a1ca1b1 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -89,7 +89,7 @@ const Header: React.FC = React.memo(() => { const profile = ( { - user + user?.avatarUrl ? : } -- cgit v1.2.3 From 86a946b2b0535829857757eeaa2226e6f0814f3b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Wed, 12 Aug 2020 04:40:14 +0300 Subject: feat: support drawer in browser --- src/components/Header/BrowserHeader.tsx | 24 ++++++++++++++++-------- src/components/Header/Header.tsx | 5 ++++- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/Header/BrowserHeader.tsx b/src/components/Header/BrowserHeader.tsx index 2dda717..2acb69c 100644 --- a/src/components/Header/BrowserHeader.tsx +++ b/src/components/Header/BrowserHeader.tsx @@ -5,6 +5,7 @@ import SearchBar from './SearchBar'; interface PropTypes { logo: JSX.Element; + menu: JSX.Element; feed: JSX.Element; notifications: JSX.Element; profile: JSX.Element; @@ -18,7 +19,8 @@ const useStyles = makeStyles({ justifyContent: 'space-around' }, group: { - display: 'flex' + display: 'flex', + alignItems: 'center' } }); @@ -27,6 +29,7 @@ const BrowserHeader: React.FC = React.memo(props => { const classes = useStyles(); const { logo, + menu, feed, notifications, profile @@ -34,13 +37,18 @@ const BrowserHeader: React.FC = React.memo(props => { return ( - - {logo} - -
- {feed} - {notifications} - {profile} + + {menu} +
+
+ {logo} +
+ +
+ {feed} + {notifications} + {profile} +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a1ca1b1..93ba47d 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -103,7 +103,10 @@ const Header: React.FC = React.memo(() => { ) : ( - + <> + + + ); }); -- cgit v1.2.3 From 5744923265ff51e392575edfd6a8182589105dc6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Wed, 12 Aug 2020 01:59:27 +0300 Subject: feat: PollCreation page and Fab component --- src/components/Fab/Fab.tsx | 55 ++++++++++++ src/containers/Feed/Feed.tsx | 11 ++- src/containers/Page/Page.tsx | 2 + src/containers/PollCreation/PollCreation.tsx | 105 ++++++++++++++++++++++ src/containers/PollCreation/PollCreationImage.tsx | 95 ++++++++++++++++++++ src/containers/PollCreation/types.ts | 7 ++ src/containers/Profile/Profile.tsx | 2 + src/index.tsx | 3 + 8 files changed, 274 insertions(+), 6 deletions(-) create mode 100644 src/components/Fab/Fab.tsx create mode 100644 src/containers/PollCreation/PollCreation.tsx create mode 100644 src/containers/PollCreation/PollCreationImage.tsx create mode 100644 src/containers/PollCreation/types.ts diff --git a/src/components/Fab/Fab.tsx b/src/components/Fab/Fab.tsx new file mode 100644 index 0000000..335fcba --- /dev/null +++ b/src/components/Fab/Fab.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom' +import { + Fab as FabBase, + useMediaQuery, + Slide, + useScrollTrigger +} from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; +import PlusIcon from '@material-ui/icons/Add'; + +interface PropTypes { + hideOnScroll?: boolean; +} + +const useStyles = makeStyles(theme => ({ + root: { + zIndex: 1200, + position: 'fixed', + + [theme.breakpoints.down('sm')]: { + right: theme.spacing(2), + bottom: theme.spacing(8) + }, + [theme.breakpoints.up('md')]: { + right: theme.spacing(5), + bottom: theme.spacing(5) + } + } +})); + +const Fab: React.FC = ({ hideOnScroll=false }) => { + const classes = useStyles(); + const history = useHistory(); + const trigger = useScrollTrigger(); + + const handleClick = () => { + history.push('/new'); + }; + + return ( + + + + + + ); +}; + +export default Fab; + diff --git a/src/containers/Feed/Feed.tsx b/src/containers/Feed/Feed.tsx index e923bdd..ad306da 100644 --- a/src/containers/Feed/Feed.tsx +++ b/src/containers/Feed/Feed.tsx @@ -1,23 +1,22 @@ import React from 'react'; +import { useHistory } from 'react-router-dom' import { Poll } from 'which-types'; import { Container } from '@material-ui/core/'; import PollsList from '../../components/PollsList/PollsList'; -import PollSubmission from './PollSubmission'; +import Fab from '../../components/Fab/Fab'; import { useAuth } from '../../hooks/useAuth'; import { useFeed } from '../../hooks/APIClient'; + const Feed: React.FC = () => { + const classes = useStyles(); const { data: polls, mutate } = useFeed(); const { isAuthenticated } = useAuth(); - const addPoll = (poll: Poll): void => { - mutate([poll, ...polls], true); - }; - return ( - {isAuthenticated && } + {isAuthenticated && } ); diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx index d1171e6..19cf6aa 100644 --- a/src/containers/Page/Page.tsx +++ b/src/containers/Page/Page.tsx @@ -11,6 +11,7 @@ const Login = React.lazy(() => import('../Login/Login')); const Registration = React.lazy(() => import('../Registration/Registration')); const Home = React.lazy(() => import('../Home/Home')); const Notifications = React.lazy(() => import('../Notifications/Notifications')); +const PollCreation = React.lazy(() => import('../PollCreation/PollCreation')); const useStyles = makeStyles(theme => ({ @@ -47,6 +48,7 @@ const Page: React.FC = () => { + diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx new file mode 100644 index 0000000..1f3a802 --- /dev/null +++ b/src/containers/PollCreation/PollCreation.tsx @@ -0,0 +1,105 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Collapse from '@material-ui/core/Collapse'; +import { + Button, + Card, + ClickAwayListener, + Divider, + Container +} from '@material-ui/core'; +import { Poll } from 'which-types'; +import { useSnackbar } from 'notistack'; +import axios from 'axios'; + +import PollCreationImage from './PollCreationImage'; +import UserStrip from '../../components/UserStrip/UserStrip'; +import { get, post } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; + +interface PropTypes{ + addPoll: (poll: Poll) => void; +} + +const useStyles = makeStyles(theme => ({ + root: { + marginBottom: theme.spacing(4) + }, + images: { + height: theme.spacing(50), + display: 'flex' + } +})); + +const PollCreation: React.FC = ({ addPoll }) => { + const classes = useStyles(); + const [expanded, setExpanded] = useState(true); + const [left, setLeft] = useState(); + const [right, setRight] = useState(); + const { enqueueSnackbar } = useSnackbar(); + const { user } = useAuth(); + + const readyToSubmit = left && right; + + const handleClickAway = () => { + setExpanded(false); + }; + + const uploadImage = (file?: File) => { + const headers = { 'Content-Type': 'image/png' }; + return get('/files') + .then(response => response.data) + .then(uploadUrl => axios.put(uploadUrl, file, { headers })) + .then(response => { + const { config: { url } } = response; + return url && url.slice(0, url.indexOf('.png') + 4); + }); + }; + + const handleClick = async () => { + if (expanded && readyToSubmit) { + const [leftUrl, rightUrl] = await Promise.all([uploadImage(left), uploadImage(right)]); + + const contents = { + left: { url: leftUrl }, + right: { url: rightUrl } + }; + + post('/polls/', { contents }).then(response => { + addPoll(response.data); + enqueueSnackbar('Your poll has been successfully created!', { + variant: 'success' + }); + }); + } + setExpanded(!expanded); + }; + + return ( + + + + + {user && } + +
+ + +
+ + + + + + ); +}; + +export default PollCreation; diff --git a/src/containers/PollCreation/PollCreationImage.tsx b/src/containers/PollCreation/PollCreationImage.tsx new file mode 100644 index 0000000..d3203a6 --- /dev/null +++ b/src/containers/PollCreation/PollCreationImage.tsx @@ -0,0 +1,95 @@ +import React, { useState, useEffect } from 'react'; +import { useFilePicker, utils } from 'react-sage'; +import { makeStyles } from '@material-ui/core/styles'; +import CloudUploadIcon from '@material-ui/icons/CloudUpload'; +import { CardActionArea, CardMedia, Typography } from '@material-ui/core'; +import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'; + +interface PropTypes { + file: File | undefined; + setFile: (file: File | undefined) => void; +} + +const useStyles = makeStyles({ + root: { + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + alignItems: 'center' + }, + clearIcon: { + opacity: '.5', + fontSize: 50 + }, + media: { + height: '100%', + width: '100%', + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + text: { + textAlign: 'center' + } +}); + + +const PollCreationImage: React.FC = ({ file, setFile }) => { + const classes = useStyles(); + const { files, onClick, HiddenFileInput } = useFilePicker(); + const [url, setUrl] = useState(); + const [isMediaHover, setIsMediaHover] = useState(false); + + const handleMouseEnter = (): void => { + setIsMediaHover(true); + }; + + const handleMouseLeave = (): void => { + setIsMediaHover(false); + }; + + useEffect(() => { + if (files?.length) { + const chosenFile = files[0]; + setFile(chosenFile); + utils.loadFile(chosenFile).then(result => setUrl(result)); + } + }, [files, setFile]); + + + const handleClick = () => { + if (file) { + setFile(undefined); + } else onClick(); + }; + + + const Upload = ( + <> + + Upload an image + + + ); + + const Media = ( + + {isMediaHover && } + + ); + + return ( + <> + + {file ? (url && Media) : Upload} + + + ); +}; + +export default PollCreationImage; diff --git a/src/containers/PollCreation/types.ts b/src/containers/PollCreation/types.ts new file mode 100644 index 0000000..24ace4e --- /dev/null +++ b/src/containers/PollCreation/types.ts @@ -0,0 +1,7 @@ +export interface ImageData { + url: string; +} +export interface Contents { + left: ImageData; + right: ImageData; +} diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx index 7e929fb..33abfc2 100644 --- a/src/containers/Profile/Profile.tsx +++ b/src/containers/Profile/Profile.tsx @@ -6,6 +6,7 @@ import { Container } from '@material-ui/core'; import ProfileInfo from './ProfileInfo'; import PollsList from '../../components/PollsList/PollsList'; import Loading from '../../components/Loading/Loading'; +import Fab from '../../components/Fab/Fab'; import { useAuth } from '../../hooks/useAuth'; import { useUser, useProfile } from '../../hooks/APIClient'; @@ -46,6 +47,7 @@ const Profile: React.FC = () => { ? : } + {user?.username === username && } ); }; diff --git a/src/index.tsx b/src/index.tsx index 8eb2506..1f70100 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,6 +17,9 @@ const theme = createMuiTheme({ primary: { main: teal[700], light: teal[100] + }, + secondary: { + main: teal[900] } } }); -- cgit v1.2.3 From d60f6d2e73a0c72237e0d807f15e75f14036057f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 17:13:50 +0300 Subject: feat: make bottom bar dense --- src/components/Header/BottomBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/BottomBar.tsx b/src/components/Header/BottomBar.tsx index 67fe219..6264929 100644 --- a/src/components/Header/BottomBar.tsx +++ b/src/components/Header/BottomBar.tsx @@ -26,7 +26,7 @@ const BottomBar: React.FC = React.memo(props => { return ( - + {notifications} {feed} {profile} -- cgit v1.2.3 From c65923480118e90675c81782b9e3bc653e8e3b40 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 17:20:28 +0300 Subject: fix: resolve eslint errors --- src/components/Fab/Fab.tsx | 15 +++++---------- src/containers/Feed/Feed.tsx | 3 --- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/Fab/Fab.tsx b/src/components/Fab/Fab.tsx index 335fcba..7ca2893 100644 --- a/src/components/Fab/Fab.tsx +++ b/src/components/Fab/Fab.tsx @@ -1,11 +1,6 @@ import React from 'react'; -import { useHistory } from 'react-router-dom' -import { - Fab as FabBase, - useMediaQuery, - Slide, - useScrollTrigger -} from '@material-ui/core/'; +import { useHistory } from 'react-router-dom'; +import { Fab as FabBase, Slide, useScrollTrigger } from '@material-ui/core/'; import { makeStyles } from '@material-ui/core/styles'; import PlusIcon from '@material-ui/icons/Add'; @@ -15,7 +10,7 @@ interface PropTypes { const useStyles = makeStyles(theme => ({ root: { - zIndex: 1200, + zIndex: 1000, position: 'fixed', [theme.breakpoints.down('sm')]: { @@ -29,7 +24,7 @@ const useStyles = makeStyles(theme => ({ } })); -const Fab: React.FC = ({ hideOnScroll=false }) => { +const Fab: React.FC = ({ hideOnScroll = false }) => { const classes = useStyles(); const history = useHistory(); const trigger = useScrollTrigger(); @@ -40,7 +35,7 @@ const Fab: React.FC = ({ hideOnScroll=false }) => { return ( - { - const classes = useStyles(); const { data: polls, mutate } = useFeed(); const { isAuthenticated } = useAuth(); -- cgit v1.2.3 From 52799ec4e4cd5801423ee0d2aa56039c061afdb4 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 17:24:09 +0300 Subject: feat!: remove expansion from PollCreation --- src/containers/PollCreation/PollCreation.tsx | 48 +++++++++++----------------- 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx index 1f3a802..7501d3a 100644 --- a/src/containers/PollCreation/PollCreation.tsx +++ b/src/containers/PollCreation/PollCreation.tsx @@ -1,10 +1,8 @@ import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import Collapse from '@material-ui/core/Collapse'; import { Button, Card, - ClickAwayListener, Divider, Container } from '@material-ui/core'; @@ -33,7 +31,6 @@ const useStyles = makeStyles(theme => ({ const PollCreation: React.FC = ({ addPoll }) => { const classes = useStyles(); - const [expanded, setExpanded] = useState(true); const [left, setLeft] = useState(); const [right, setRight] = useState(); const { enqueueSnackbar } = useSnackbar(); @@ -41,10 +38,6 @@ const PollCreation: React.FC = ({ addPoll }) => { const readyToSubmit = left && right; - const handleClickAway = () => { - setExpanded(false); - }; - const uploadImage = (file?: File) => { const headers = { 'Content-Type': 'image/png' }; return get('/files') @@ -57,7 +50,7 @@ const PollCreation: React.FC = ({ addPoll }) => { }; const handleClick = async () => { - if (expanded && readyToSubmit) { + if (readyToSubmit) { const [leftUrl, rightUrl] = await Promise.all([uploadImage(left), uploadImage(right)]); const contents = { @@ -72,32 +65,27 @@ const PollCreation: React.FC = ({ addPoll }) => { }); }); } - setExpanded(!expanded); }; return ( - - - - {user && } - -
- - -
- - - - + + {user && } + +
+ + +
+ + ); }; -- cgit v1.2.3