From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 00:28:39 +0300 Subject: refactor: move pages -> containers --- src/containers/FeedPage/FeedPage.tsx | 27 +++ src/containers/FeedPage/PollSubmission.tsx | 92 ++++++++++ src/containers/FeedPage/PollSubmissionImage.tsx | 87 +++++++++ src/containers/FeedPage/types.ts | 7 + src/containers/HomePage/HomePage.tsx | 203 +++++++++++++++++++++ src/containers/HomePage/ReviewForm.tsx | 74 ++++++++ src/containers/LoginPage/LoginPage.tsx | 103 +++++++++++ .../NotificationsPage/NotificationsPage.tsx | 23 +++ src/containers/Page/Page.tsx | 59 ++++++ src/containers/ProfilePage/Highlight.tsx | 39 ++++ src/containers/ProfilePage/MoreMenu.tsx | 72 ++++++++ src/containers/ProfilePage/ProfileInfo.tsx | 166 +++++++++++++++++ src/containers/ProfilePage/ProfilePage.tsx | 55 ++++++ .../RegistrationPage/RegistrationPage.tsx | 96 ++++++++++ 14 files changed, 1103 insertions(+) create mode 100644 src/containers/FeedPage/FeedPage.tsx create mode 100644 src/containers/FeedPage/PollSubmission.tsx create mode 100644 src/containers/FeedPage/PollSubmissionImage.tsx create mode 100644 src/containers/FeedPage/types.ts create mode 100644 src/containers/HomePage/HomePage.tsx create mode 100644 src/containers/HomePage/ReviewForm.tsx create mode 100644 src/containers/LoginPage/LoginPage.tsx create mode 100644 src/containers/NotificationsPage/NotificationsPage.tsx create mode 100644 src/containers/Page/Page.tsx create mode 100644 src/containers/ProfilePage/Highlight.tsx create mode 100644 src/containers/ProfilePage/MoreMenu.tsx create mode 100644 src/containers/ProfilePage/ProfileInfo.tsx create mode 100644 src/containers/ProfilePage/ProfilePage.tsx create mode 100644 src/containers/RegistrationPage/RegistrationPage.tsx (limited to 'src/containers') diff --git a/src/containers/FeedPage/FeedPage.tsx b/src/containers/FeedPage/FeedPage.tsx new file mode 100644 index 0000000..da0fb2a --- /dev/null +++ b/src/containers/FeedPage/FeedPage.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Poll } from 'which-types'; +import { Container } from '@material-ui/core/'; + +import Feed from '../../components/Feed/Feed'; +import PollSubmission from './PollSubmission'; +import { useAuth } from '../../hooks/useAuth'; +import { useFeed } from '../../hooks/APIClient'; + +const FeedPage: React.FC = () => { + const { data, mutate } = useFeed(); + const { isAuthenticated } = useAuth(); + + const addPoll = (poll: Poll): void => { + mutate([poll, ...data], true); + }; + + return ( + + {isAuthenticated && } + + + ); +}; + +export default FeedPage; + diff --git a/src/containers/FeedPage/PollSubmission.tsx b/src/containers/FeedPage/PollSubmission.tsx new file mode 100644 index 0000000..347eecc --- /dev/null +++ b/src/containers/FeedPage/PollSubmission.tsx @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Collapse from '@material-ui/core/Collapse'; +import { + Button, + Card, + ClickAwayListener, + Divider +} from '@material-ui/core'; +import { Poll, Which } from 'which-types'; +import { useSnackbar } from 'notistack'; +import PollSubmissionImage from './PollSubmissionImage'; +import UserStrip from '../../components/UserStrip/UserStrip'; +import { post } from '../../requests'; +import { Contents } from './types'; +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 emptyContents: Contents = { + left: { url: '' }, + right: { url: '' } +}; + +const PollSubmission: React.FC = ({ addPoll }) => { + const classes = useStyles(); + const [expanded, setExpanded] = useState(false); + const [contents, setContents] = useState(emptyContents); + const { enqueueSnackbar } = useSnackbar(); + const { user } = useAuth(); + + const readyToSubmit = contents.left.url && contents.right.url; + + const setUrl = (which: Which) => (url: string): void => { + setContents({ ...contents, [which]: { url } }); + }; + + const handleClickAway = () => { + setExpanded(false); + }; + + const handleClick = () => { + if (expanded && readyToSubmit) { + post('/polls/', { contents }).then(response => { + addPoll(response.data); + enqueueSnackbar('Your poll has been successfully created!', { + variant: 'success' + }); + }); + setContents({ ...emptyContents }); + } + setExpanded(!expanded); + }; + + return ( + + + + {user && } + +
+ + +
+ + + + + ); +}; + +export default PollSubmission; diff --git a/src/containers/FeedPage/PollSubmissionImage.tsx b/src/containers/FeedPage/PollSubmissionImage.tsx new file mode 100644 index 0000000..8835989 --- /dev/null +++ b/src/containers/FeedPage/PollSubmissionImage.tsx @@ -0,0 +1,87 @@ +import React, { useState } from 'react'; +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'; + +import UploadImage from '../../components/UploadImage/UploadImage'; + +interface PropTypes { + url: string; + setUrl: (url: string) => 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 PollSubmissionImage: React.FC = ({ url, setUrl }) => { + const classes = useStyles(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isMediaHover, setIsMediaHover] = useState(false); + + const handleClick = (): void => { + if (!isModalOpen) { + if (url) setUrl(''); + else setIsModalOpen(!isModalOpen); + } + }; + + const handleMouseEnter = (): void => { + setIsMediaHover(true); + }; + + const handleMouseLeave = (): void => { + setIsMediaHover(false); + }; + + + const Upload = ( + <> + + Upload an image + + ); + + const Media = ( + + {isMediaHover && } + + ); + + return ( + <> + + {url ? Media : Upload} + + + + ); +}; + +export default PollSubmissionImage; diff --git a/src/containers/FeedPage/types.ts b/src/containers/FeedPage/types.ts new file mode 100644 index 0000000..24ace4e --- /dev/null +++ b/src/containers/FeedPage/types.ts @@ -0,0 +1,7 @@ +export interface ImageData { + url: string; +} +export interface Contents { + left: ImageData; + right: ImageData; +} diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx new file mode 100644 index 0000000..b1dc506 --- /dev/null +++ b/src/containers/HomePage/HomePage.tsx @@ -0,0 +1,203 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import { + Typography, + Divider, + Grid, + Button, + Link, + useMediaQuery +} from '@material-ui/core/'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import { Rating } from '@material-ui/lab'; +import { Feedback } from 'which-types'; + +import { useAuth } from '../../hooks/useAuth'; +import { get } from '../../requests'; +import ReviewCard from '../../components/ReviewCard/ReviewCard'; +import ReviewForm from './ReviewForm'; + +const useStyles = makeStyles(theme => ({ + root: { + overflow: 'hidden', + padding: theme.spacing(0, 2) + }, + logo: { + width: theme.spacing(20), + height: theme.spacing(20) + }, + score: { + fontWeight: 'bold' + }, + signup: { + marginLeft: theme.spacing(2) + }, + reviews: { + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 10) + } + } +})); + +const HomePage: React.FC = () => { + const [feedbacks, setFeedbacks] = useState([]); + const classes = useStyles(); + const history = useHistory(); + const { isAuthenticated, user } = useAuth(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + + const rating = feedbacks.length && feedbacks.reduce( + (acc: number, feedback: Feedback) => acc + feedback.score, + 0 + ) / feedbacks.length; + + useEffect(() => { + get('/feedback').then(response => { + setFeedbacks(response.data); + }); + }, []); + + const handleLetsGo = () => { + history.push('/feed'); + }; + + const handleSignUp = () => { + history.push('/registration'); + }; + + const GithubLink = GitHub; + const TypescriptLink = Typescript; + const ReactLink = React; + const FeathersLink = Feathers; + const MUILink = Material-UI; + const EmailLink = eug-vs@keemail.me; + + const Reviews = ( +
+ {feedbacks.map(feedback => )} +
+ ); + + const FeedbackSection = feedbacks.findIndex((feedback: Feedback) => feedback.author._id === user?._id) >= 0 ? ( +

+ You have already left feedback for this version. + If you have more to say, please open GitHub issue or contact us directly via email: {EmailLink}. + Alternatively, you can just wait for another application patch to come out. +

+ ) : ( + <> +

+ Here you can share your thougts about Which with us! + Note that you can ony leave feedback once per application version (there will be plenty of them later). +

+ {isAuthenticated ? : ( + <> +

You must be authorized to leave feedback.

+ + + )} + + ); + + return ( +
+ + + + + logo + + + {rating !== 0 && } + + + {rating !== 0 && ( + + User score: {rating.toFixed(1)} + + )} + + + {isMobile || Reviews} + + + + + Which one to choose? + + +

+ Have you ever found yourself stuck between two options, not being able to choose any? + This is exactly the problem we are going to solve! +

+

Share your minor everyday uncertainties with the whole world and see what others think!

+ + {!isAuthenticated && ( + + )} + + + + About the project + + +

+ The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. + It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)! +

+

+ We encourage any developer to check it out. Feel free to open issues and create Pull Requests! +

+

+ All the development process is being tracked on the KanBan board (thanks GitHub). + You can always check it to see what is the current state of the project. +

+ + + + + Leave feedback + + + {FeedbackSection} + + + {isMobile && ( + + {Reviews} + + )} + + + +
+ ); +}; + +export default HomePage; + diff --git a/src/containers/HomePage/ReviewForm.tsx b/src/containers/HomePage/ReviewForm.tsx new file mode 100644 index 0000000..b626ce2 --- /dev/null +++ b/src/containers/HomePage/ReviewForm.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import { TextField, Button } from '@material-ui/core'; +import { Rating } from '@material-ui/lab'; +import { useSnackbar } from 'notistack'; + +import { post } from '../../requests'; + +const version = 'v1.0.0'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + flexDirection: 'column' + }, + textField: { + margin: theme.spacing(2, 0) + } +})); + +const ReviewForm: React.FC = () => { + const [contents, setContents] = useState(''); + const [score, setScore] = useState(0); + const classes = useStyles(); + const history = useHistory(); + const { enqueueSnackbar } = useSnackbar(); + + const handleSubmit = (): void => { + if (score) { + post('/feedback', { contents, score, version }).then(() => { + enqueueSnackbar('Your feedback has been submitted!', { + variant: 'success' + }); + history.push('/feed'); + }); + } + }; + + const handleChange = (event: React.ChangeEvent): void => { + setContents(event.target?.value || ''); + }; + + const handleChangeRating = (event: React.ChangeEvent>, newScore: number | null): void => { + setScore(newScore || 0); + }; + + return ( +
+ + +
+ +
+
+ ); +}; + +export default ReviewForm; diff --git a/src/containers/LoginPage/LoginPage.tsx b/src/containers/LoginPage/LoginPage.tsx new file mode 100644 index 0000000..335cbb1 --- /dev/null +++ b/src/containers/LoginPage/LoginPage.tsx @@ -0,0 +1,103 @@ +import React, { useState, useRef } from 'react'; +import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import { + TextField, + Button, + FormControlLabel, + Switch +} from '@material-ui/core'; +import { useAuth } from '../../hooks/useAuth'; + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: theme.spacing(35) + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + }, + formHeader: { + textAlign: 'center', + fontSize: 25 + }, + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' + } +})); + +const LoginPage: React.FC = () => { + const [error, setError] = useState(false); + const [remember, setRemember] = useState(true); + const classes = useStyles(); + const nameRef = useRef(); + const passwordRef = useRef(); + const { login } = useAuth(); + const history = useHistory(); + + const handleCheck = () => { + setRemember(!remember); + }; + + const handleSubmit = async () => { + const name = nameRef.current?.value?.toLowerCase(); + const password = passwordRef.current?.value; + if (name && password) { + login(name, password, remember).then(success => { + if (success) history.push(`/profile/${name}`); + else setError(true); + }); + } + }; + + const handleRegistration = () => { + history.push('/registration'); + }; + + return ( + <> +
Sign In
+
+ + + } + label="Remember me" + /> + + +
+
{'Don\'t have an account?'}
+ + Sign up + +
+ + ); +}; + +export default LoginPage; + diff --git a/src/containers/NotificationsPage/NotificationsPage.tsx b/src/containers/NotificationsPage/NotificationsPage.tsx new file mode 100644 index 0000000..064fbd4 --- /dev/null +++ b/src/containers/NotificationsPage/NotificationsPage.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + root: { + marginTop: theme.spacing(25), + textAlign: 'center' + } +})); + +const NotificationsPage: React.FC = () => { + const classes = useStyles(); + + return ( + + Sorry, this page is being constructed yet. + + ); +}; + +export default NotificationsPage; + diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx new file mode 100644 index 0000000..8a39636 --- /dev/null +++ b/src/containers/Page/Page.tsx @@ -0,0 +1,59 @@ +import React, { Suspense } from 'react'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { useMediaQuery } from '@material-ui/core'; +import { SnackbarProvider } from 'notistack'; +import { Switch, Route } from 'react-router-dom'; +import Loading from '../../components/Loading/Loading'; + +const ProfilePage = React.lazy(() => import('../ProfilePage/ProfilePage')); +const FeedPage = React.lazy(() => import('../FeedPage/FeedPage')); +const LoginPage = React.lazy(() => import('../LoginPage/LoginPage')); +const RegistrationPage = React.lazy(() => import('../RegistrationPage/RegistrationPage')); +const HomePage = React.lazy(() => import('../HomePage/HomePage')); +const NotificationsPage = React.lazy(() => import('../NotificationsPage/NotificationsPage')); + + +const useStyles = makeStyles(theme => ({ + root: { + [theme.breakpoints.down('sm')]: { + margin: theme.spacing(2, 0, 12, 0) + }, + [theme.breakpoints.up('md')]: { + margin: theme.spacing(15, 5, 8, 5) + } + } +})); + + +const Page: React.FC = () => { + const classes = useStyles(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + + return ( + +
+ }> + + + + + + + + + +
+ + ); +}; + + +export default Page; + diff --git a/src/containers/ProfilePage/Highlight.tsx b/src/containers/ProfilePage/Highlight.tsx new file mode 100644 index 0000000..ebc3f56 --- /dev/null +++ b/src/containers/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/containers/ProfilePage/MoreMenu.tsx b/src/containers/ProfilePage/MoreMenu.tsx new file mode 100644 index 0000000..1f41879 --- /dev/null +++ b/src/containers/ProfilePage/MoreMenu.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +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 { useAuth } from '../../hooks/useAuth'; + +const ITEM_HEIGHT = 48; + +const useStyles = makeStyles({ + moreMenu: { + position: 'absolute', + right: 10, + zIndex: 100 + } +}); + +const MoreMenu: React.FC = () => { + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + const { logout } = useAuth(); + const history = useHistory(); + + const open = Boolean(anchorEl); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleLogout = () => { + logout(); + history.push('/login'); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + return ( +
+
+ + + + + Log out + +
+
+ ); +}; + +export default MoreMenu; diff --git a/src/containers/ProfilePage/ProfileInfo.tsx b/src/containers/ProfilePage/ProfileInfo.tsx new file mode 100644 index 0000000..9eee4c1 --- /dev/null +++ b/src/containers/ProfilePage/ProfileInfo.tsx @@ -0,0 +1,166 @@ +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 = ({ + 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 ( +
+ { + !userInfo + ? + : userInfo?._id === user?._id + ? ( +
+ +
+ + +
+ )} + > + + +
+ +
+ ) + : + } + { + !userInfo + ? + : ( + + {userInfo?.username} + {userInfo?.verified && } + + ) + } +
+ { + !userInfo + ? ( + <> + + + + + ) + : ( + <> + + + + + ) + } +
+ + ); +}; + +export default ProfileInfo; diff --git a/src/containers/ProfilePage/ProfilePage.tsx b/src/containers/ProfilePage/ProfilePage.tsx new file mode 100644 index 0000000..db27d25 --- /dev/null +++ b/src/containers/ProfilePage/ProfilePage.tsx @@ -0,0 +1,55 @@ +import React, { useEffect, useCallback } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { Poll } from 'which-types'; +import { Container } from '@material-ui/core'; + +import ProfileInfo from './ProfileInfo'; +import Feed from '../../components/Feed/Feed'; +import Loading from '../../components/Loading/Loading'; +import { useAuth } from '../../hooks/useAuth'; +import { useUser, useProfile } from '../../hooks/APIClient'; + + +const ProfilePage: React.FC = () => { + const history = useHistory(); + const { username } = useParams(); + const { user } = useAuth(); + + const { data: userInfo, mutate: setUserInfo } = useUser(username); + const { data: polls, isValidating } = useProfile(userInfo?._id); + + useEffect(() => { + if (!username) { + if (user) history.push(`/profile/${user.username}`); + else history.push('/login'); + } + }, [username, history, user]); + + + const totalVotes = useCallback( + polls.reduce( + (total: number, current: Poll) => { + const { left, right } = current.contents; + return total + left.votes + right.votes; + }, 0 + ), + [polls] + ); + + return ( + + + {!polls.length && isValidating + ? + : + } + + ); +}; + +export default ProfilePage; diff --git a/src/containers/RegistrationPage/RegistrationPage.tsx b/src/containers/RegistrationPage/RegistrationPage.tsx new file mode 100644 index 0000000..18a9379 --- /dev/null +++ b/src/containers/RegistrationPage/RegistrationPage.tsx @@ -0,0 +1,96 @@ +import React, { useState, useRef } from 'react'; +import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; +import { post } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; + + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: theme.spacing(35) + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + }, + formHeader: { + textAlign: 'center', + fontSize: 25 + }, + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' + } +})); + +const RegistrationPage: React.FC = () => { + const [error, setError] = useState(false); + const classes = useStyles(); + const usernameRef = useRef(); + const emailRef = useRef(); + const passwordRef = useRef(); + const { login } = useAuth(); + const history = useHistory(); + + const handleSubmit = () => { + const username = usernameRef.current?.value?.toLowerCase(); + const password = passwordRef.current?.value; + const email = emailRef.current?.value; + if (username && password) { + post('/users', { username, password, email }) + .then(() => login(username, password)) + .then(() => history.push(`/profile/${username}`)); + } else setError(true); + }; + + const handleLogin = () => { + history.push('/login'); + }; + + return ( + <> +
Sign Up
+
+ + + + + +
+
Already have an account?
+ + Log in + +
+ + ); +}; + +export default RegistrationPage; -- cgit v1.2.3