From 5a597796f622407be7ba03f5eb7aeb608c418fc2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 21:51:38 +0300 Subject: chore: install react-router-dom --- package-lock.json | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + 2 files changed, 109 insertions(+) diff --git a/package-lock.json b/package-lock.json index 59b1f75..e4183d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1626,6 +1626,11 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.7", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.7.tgz", + "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz", @@ -1702,6 +1707,25 @@ "@types/react": "*" } }, + "@types/react-router": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz", + "integrity": "sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==", + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.5.tgz", + "integrity": "sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==", + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/react-transition-group": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", @@ -6307,6 +6331,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -8316,6 +8353,15 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" }, + "mini-create-react-context": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", + "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==", + "requires": { + "@babel/runtime": "^7.5.5", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", @@ -10832,6 +10878,52 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -11549,6 +11641,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -13023,6 +13120,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -13419,6 +13521,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 676e20a..2690f3a 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,14 @@ "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", + "@types/react-router-dom": "^5.1.5", "axios": "^0.19.2", "lodash": "^4.17.15", "notistack": "^0.9.17", "react": "^16.13.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-virtualized": "^9.21.2", "typeface-roboto": "0.0.75", -- cgit v1.2.3 From d9c74d25ab1f4e13cb980074e188ef6125d2d290 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 21:53:48 +0300 Subject: feat: setup initial routing --- src/pages/Page.tsx | 46 +++++++++++++++++++++++++++++++--------------- src/pages/PrivateRoute.tsx | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 src/pages/PrivateRoute.tsx diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 56d7372..62b6b61 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; +import { BrowserRouter, Switch, Route } from 'react-router-dom'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; @@ -9,6 +10,7 @@ import AuthPage from './AuthPage/AuthPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import { useNavigate } from '../hooks/useNavigate'; +import PrivateRoute from './PrivateRoute'; const useStyles = makeStyles(theme => ({ @@ -22,6 +24,16 @@ const useStyles = makeStyles(theme => ({ } })); + +const urls = { + home: '/', + login: '/login', + registration: '/registration', + profile: '/profile', + feed: '/feed', + notifications: '/notifications' +}; + const Page: React.FC = () => { const { page } = useNavigate(); const classes = useStyles(); @@ -29,21 +41,25 @@ const Page: React.FC = () => { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return ( - -
- { page.prefix === 'home' && } - { page.prefix === 'profile' && } - { page.prefix === 'feed' && } - { page.prefix === 'auth' && } - { page.prefix === 'notifications' && } -
- + + +
+ + + + + + + +
+ + ); }; diff --git a/src/pages/PrivateRoute.tsx b/src/pages/PrivateRoute.tsx new file mode 100644 index 0000000..cdee67b --- /dev/null +++ b/src/pages/PrivateRoute.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Redirect, Route } from 'react-router-dom'; +import { useAuth } from '../hooks/useAuth'; + +const urls = { + home: '/', + login: '/login', + registration: '/registration', + profile: '/profile', + feed: '/feed', + notifications: '/notifications' +}; + +const PrivateRoute: React.FC = ({ component: ProtectedComponent, ...rest }) => { + const { isAuthenticated } = useAuth(); + + const getComponent: React.FC = (props) => { + if (props.match.path === urls.login || props.match.path === urls.registration) { + return isAuthenticated() ? ( + + ) : ( + + ); + } + + return isAuthenticated() ? ( + + ) : ( + + ); + } + + return ; +}; + +export default PrivateRoute; -- cgit v1.2.3 From 056ef91e36f86a3278dfbb2f369939534bffe7e2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 21:58:31 +0300 Subject: refactor: move urls to separate file --- src/pages/Page.tsx | 12 +----------- src/pages/PrivateRoute.tsx | 9 +-------- src/pages/urls.ts | 8 ++++++++ 3 files changed, 10 insertions(+), 19 deletions(-) create mode 100644 src/pages/urls.ts diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 62b6b61..85b351c 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -9,8 +9,8 @@ import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; -import { useNavigate } from '../hooks/useNavigate'; import PrivateRoute from './PrivateRoute'; +import urls from './urls'; const useStyles = makeStyles(theme => ({ @@ -25,17 +25,7 @@ const useStyles = makeStyles(theme => ({ })); -const urls = { - home: '/', - login: '/login', - registration: '/registration', - profile: '/profile', - feed: '/feed', - notifications: '/notifications' -}; - const Page: React.FC = () => { - const { page } = useNavigate(); const classes = useStyles(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); diff --git a/src/pages/PrivateRoute.tsx b/src/pages/PrivateRoute.tsx index cdee67b..685e53d 100644 --- a/src/pages/PrivateRoute.tsx +++ b/src/pages/PrivateRoute.tsx @@ -1,15 +1,8 @@ import React from 'react'; import { Redirect, Route } from 'react-router-dom'; import { useAuth } from '../hooks/useAuth'; +import urls from './urls'; -const urls = { - home: '/', - login: '/login', - registration: '/registration', - profile: '/profile', - feed: '/feed', - notifications: '/notifications' -}; const PrivateRoute: React.FC = ({ component: ProtectedComponent, ...rest }) => { const { isAuthenticated } = useAuth(); diff --git a/src/pages/urls.ts b/src/pages/urls.ts new file mode 100644 index 0000000..3a05f39 --- /dev/null +++ b/src/pages/urls.ts @@ -0,0 +1,8 @@ +export default { + home: '/', + login: '/login', + registration: '/registration', + profile: '/profile', + feed: '/feed', + notifications: '/notifications' +}; -- cgit v1.2.3 From 2d6ba7459fff67823b55cfc39342896873962714 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 22:25:20 +0300 Subject: refactor: simplify Route component --- src/pages/Page.tsx | 15 ++++++++------- src/pages/PrivateRoute.tsx | 29 ----------------------------- src/pages/Route.tsx | 11 +++++++++++ 3 files changed, 19 insertions(+), 36 deletions(-) delete mode 100644 src/pages/PrivateRoute.tsx create mode 100644 src/pages/Route.tsx diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 85b351c..29b9564 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -2,14 +2,14 @@ import React from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; -import { BrowserRouter, Switch, Route } from 'react-router-dom'; +import { BrowserRouter, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; -import PrivateRoute from './PrivateRoute'; +import Route from './Route'; import urls from './urls'; @@ -41,11 +41,12 @@ const Page: React.FC = () => { >
- - - - - + + + + + +
diff --git a/src/pages/PrivateRoute.tsx b/src/pages/PrivateRoute.tsx deleted file mode 100644 index 685e53d..0000000 --- a/src/pages/PrivateRoute.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Redirect, Route } from 'react-router-dom'; -import { useAuth } from '../hooks/useAuth'; -import urls from './urls'; - - -const PrivateRoute: React.FC = ({ component: ProtectedComponent, ...rest }) => { - const { isAuthenticated } = useAuth(); - - const getComponent: React.FC = (props) => { - if (props.match.path === urls.login || props.match.path === urls.registration) { - return isAuthenticated() ? ( - - ) : ( - - ); - } - - return isAuthenticated() ? ( - - ) : ( - - ); - } - - return ; -}; - -export default PrivateRoute; diff --git a/src/pages/Route.tsx b/src/pages/Route.tsx new file mode 100644 index 0000000..fdd6f96 --- /dev/null +++ b/src/pages/Route.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Route as BaseRoute } from 'react-router-dom'; + + +const Route: React.FC = ({ component: Component, ...rest }) => { + const render: React.FC = (props) => ; + + return ; +}; + +export default Route; -- cgit v1.2.3 From 5ba6455b2aa6c75c336628bda59e70b46e3b1d6b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 22:42:50 +0300 Subject: refactor: separate Auth pages --- src/pages/AuthPage/AuthPage.tsx | 50 --------------- src/pages/AuthPage/SignInForm.tsx | 80 ------------------------ src/pages/AuthPage/SignUpForm.tsx | 73 ---------------------- src/pages/LoginPage/LoginPage.tsx | 82 +++++++++++++++++++++++++ src/pages/Page.tsx | 7 ++- src/pages/RegistrationPage/RegistrationPage.tsx | 75 ++++++++++++++++++++++ 6 files changed, 161 insertions(+), 206 deletions(-) delete mode 100644 src/pages/AuthPage/AuthPage.tsx delete mode 100644 src/pages/AuthPage/SignInForm.tsx delete mode 100644 src/pages/AuthPage/SignUpForm.tsx create mode 100644 src/pages/LoginPage/LoginPage.tsx create mode 100644 src/pages/RegistrationPage/RegistrationPage.tsx diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx deleted file mode 100644 index ad93463..0000000 --- a/src/pages/AuthPage/AuthPage.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useState } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import SignInForm from './SignInForm'; -import SignUpForm from './SignUpForm'; - -const useStyles = makeStyles({ - formTransfer: { - display: 'flex', - justifyContent: 'center' - }, - transferButton: { - marginLeft: 10, - color: 'green', - cursor: 'pointer' - } -}); - -const AuthPage: React.FC = () => { - const [auth, setAuth] = useState<'signIn' | 'signUp'>('signIn'); - const classes = useStyles(); - - const handleRedirect = () => { - setAuth(auth === 'signIn' ? 'signUp' : 'signIn'); - }; - - const footerInfo = { - signIn: ['Don\'t have an account?', 'Sign up'], - signUp: ['Already have an account?', 'Sign in'] - }; - - return ( - <> - {auth === 'signIn' && } - {auth === 'signUp' && } -
-
{footerInfo[auth][0]}
- - {footerInfo[auth][1]} - -
- - ); -}; - -export default AuthPage; - diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx deleted file mode 100644 index e68483b..0000000 --- a/src/pages/AuthPage/SignInForm.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { - TextField, - Button, - FormControlLabel, - Switch -} from '@material-ui/core'; -import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; - -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 - } -})); - -const SignInForm: 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 { navigate } = useNavigate(); - - const handleCheck = () => { - setRemember(!remember); - }; - - const handleSubmit = async () => { - const name = nameRef.current?.value; - const password = passwordRef.current?.value; - if (name && password) { - login(name, password, remember).then(success => { - if (success) navigate('profile'); - else setError(true); - }); - } - }; - - return ( - <> -
Sign In
-
- - - } - label="Remember me" - /> - - - - ); -}; - -export default SignInForm; - diff --git a/src/pages/AuthPage/SignUpForm.tsx b/src/pages/AuthPage/SignUpForm.tsx deleted file mode 100644 index 1dacd45..0000000 --- a/src/pages/AuthPage/SignUpForm.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useState, useRef } from 'react'; -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'; -import { useNavigate } from '../../hooks/useNavigate'; - - -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 - } -})); - -const SignUpForm: React.FC = () => { - const [error, setError] = useState(false); - const classes = useStyles(); - const usernameRef = useRef(); - const emailRef = useRef(); - const passwordRef = useRef(); - const { login } = useAuth(); - const { navigate } = useNavigate(); - - const onClick = () => { - const username = usernameRef.current?.value; - const password = passwordRef.current?.value; - const email = emailRef.current?.value; - if (username && password) { - post('/users', { username, password, email }) - .then(() => login(username, password)) - .then(() => navigate('profile')); - } else setError(true); - }; - - return ( - <> -
Sign Up
-
- - - - - - - ); -}; - -export default SignUpForm; diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx new file mode 100644 index 0000000..ef31491 --- /dev/null +++ b/src/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,82 @@ +import React, { useState, useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + TextField, + Button, + FormControlLabel, + Switch +} from '@material-ui/core'; +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; + +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 + } +})); + +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 { navigate } = useNavigate(); + + const handleCheck = () => { + setRemember(!remember); + }; + + const handleSubmit = async () => { + const name = nameRef.current?.value; + const password = passwordRef.current?.value; + if (name && password) { + login(name, password, remember).then(success => { + if (success) navigate('profile'); + else setError(true); + }); + } + }; + + // TODO: Add registration redirect + + return ( + <> +
Sign In
+
+ + + } + label="Remember me" + /> + + + + ); +}; + +export default LoginPage; + diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 29b9564..47f5f50 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -6,7 +6,8 @@ import { BrowserRouter, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; -import AuthPage from './AuthPage/AuthPage'; +import LoginPage from './LoginPage/LoginPage'; +import RegistrationPage from './RegistrationPage/RegistrationPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import Route from './Route'; @@ -42,8 +43,8 @@ const Page: React.FC = () => {
- - + + diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx new file mode 100644 index 0000000..e283a0e --- /dev/null +++ b/src/pages/RegistrationPage/RegistrationPage.tsx @@ -0,0 +1,75 @@ +import React, { useState, useRef } from 'react'; +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'; +import { useNavigate } from '../../hooks/useNavigate'; + + +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 + } +})); + +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 { navigate } = useNavigate(); + + const onClick = () => { + const username = usernameRef.current?.value; + const password = passwordRef.current?.value; + const email = emailRef.current?.value; + if (username && password) { + post('/users', { username, password, email }) + .then(() => login(username, password)) + .then(() => navigate('profile')); + } else setError(true); + }; + + // TODO: add login redirect + + return ( + <> +
Sign Up
+
+ + + + + + + ); +}; + +export default RegistrationPage; -- cgit v1.2.3 From b124be4d5067570a8f5db4813d45e1bf49d95f56 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 7 Aug 2020 22:53:53 +0300 Subject: feat: support routing in Header --- src/components/Header/Header.tsx | 19 +++++++++++-------- src/index.tsx | 5 +++-- src/pages/Page.tsx | 40 +++++++++++++++++++--------------------- src/pages/urls.ts | 2 +- 4 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 41aeec7..ef5f9fb 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useHistory } from 'react-router-dom'; import { AppBar, Toolbar, @@ -11,10 +12,11 @@ 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 { useNavigate } from '../../hooks/useNavigate'; +import { useAuth } from '../../hooks/useAuth'; import SearchBar from './SearchBar'; +import urls from '../../pages/urls'; + const useStyles = makeStyles(theme => ({ mobile: { @@ -40,28 +42,29 @@ const useStyles = makeStyles(theme => ({ } })); + const Header: React.FC = () => { const classes = useStyles(); const { user } = useAuth(); - const { navigate } = useNavigate(); const theme = useTheme(); + const history = useHistory(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const handleHome = (): void => { - navigate('home'); + history.push(urls.home); }; const handleFeed = (): void => { - navigate('feed'); + history.push(urls.feed) }; const handleProfile = (): void => { - if (user) navigate('profile'); - else navigate('auth'); + if (user) history.push(urls.profile(user.username)); + else history.push(urls.login); }; const handleNotifications = (): void => { - navigate('notifications'); + history.push(urls.notifications); }; const FeedButton = ( diff --git a/src/index.tsx b/src/index.tsx index e8fbce1..16c5fe3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import { CssBaseline } from '@material-ui/core'; +import { BrowserRouter } from 'react-router-dom'; import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; @@ -23,7 +24,7 @@ const theme = createMuiTheme({ const App: React.FC = () => { return ( - + @@ -32,7 +33,7 @@ const App: React.FC = () => { - + ); }; diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 47f5f50..f5c975c 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; -import { BrowserRouter, Switch } from 'react-router-dom'; +import { Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; @@ -32,26 +32,24 @@ const Page: React.FC = () => { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return ( - - -
- - - - - - - - -
- - + +
+ + + + + + + + +
+ ); }; diff --git a/src/pages/urls.ts b/src/pages/urls.ts index 3a05f39..e10edac 100644 --- a/src/pages/urls.ts +++ b/src/pages/urls.ts @@ -2,7 +2,7 @@ export default { home: '/', login: '/login', registration: '/registration', - profile: '/profile', + profile: (username: string = '') => `/profile/${username.toLowerCase()}`, feed: '/feed', notifications: '/notifications' }; -- cgit v1.2.3 From 46e360a23969bde69f6d80b5ff27401a39169be6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:07:08 +0300 Subject: feat: use router logic in ProfilePage --- src/pages/Page.tsx | 2 +- src/pages/ProfilePage/ProfilePage.tsx | 39 ++++++++++++++++++++++++----------- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index f5c975c..dd413bf 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -46,7 +46,7 @@ const Page: React.FC = () => { - +
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 34c9efa..b81c70f 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; import { User, Poll } from 'which-types'; import { Container } from '@material-ui/core'; @@ -6,28 +7,42 @@ import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; const ProfilePage: React.FC = () => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); - const { page, navigate } = useNavigate(); - const { user } = useAuth(); const [isInfoLoading, setIsInfoLoading] = useState(false); const [isPollsLoading, setIsPollsLoading] = useState(false); + const history = useHistory(); + const { username } = useParams(); + const { user } = useAuth(); useEffect(() => { - const id = page?.id || user?._id; setIsInfoLoading(true); - setIsPollsLoading(true); - if (id) { - get(`/users/${id}`).then(response => { - setUserInfo(response.data); + + const redirect = () => { + if (user) history.push(`/profile/${user.username}`); + else history.push('/login'); + }; + + if (username) { + get(`/users?username=${username}`).then(response => { + if (!response.data.length) return redirect(); // TODO: handle this case + setUserInfo(response.data[0]); setIsInfoLoading(false); - }); - get(`/profiles/${id}`).then(response => { + }).catch(() => redirect()); + } else redirect() + + }, [username, user, history]); + + + useEffect(() => { + if (userInfo?._id) { + setIsPollsLoading(true); + + get(`/profiles/${userInfo._id}`).then(response => { setIsPollsLoading(false); setPolls([]); setPolls(response.data); @@ -38,8 +53,8 @@ const ProfilePage: React.FC = () => { }, 0 )); }); - } else navigate('auth'); - }, [navigate, page, user]); + } + }, [userInfo]) return ( -- cgit v1.2.3 From 0fe1f4138f870c4d00a02741bacf25165c94541e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:07:32 +0300 Subject: feat: support routing for UserStrip --- src/components/UserStrip/UserStrip.tsx | 7 ++++--- src/pages/ProfilePage/ProfilePage.tsx | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx index 3ac47b3..a2d2700 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 { User } from 'which-types'; -import { useNavigate } from '../../hooks/useNavigate'; +import urls from '../../pages/urls'; interface PropTypes { user: User; @@ -30,11 +31,11 @@ const useStyles = makeStyles(theme => ({ const UserStrip: React.FC = ({ user, info }) => { const classes = useStyles(); - const { navigate } = useNavigate(); + const history = useHistory(); const { username, avatarUrl, verified } = user; const handleNavigate = () => { - navigate('profile', user._id); + history.push(urls.profile(user.username)); }; const avatar = ( diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index b81c70f..ec917fd 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -7,6 +7,7 @@ import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; +import urls from '../urls'; const ProfilePage: React.FC = () => { @@ -23,8 +24,8 @@ const ProfilePage: React.FC = () => { setIsInfoLoading(true); const redirect = () => { - if (user) history.push(`/profile/${user.username}`); - else history.push('/login'); + if (user) history.push(urls.profile(user.username)); + else history.push(urls.login); }; if (username) { -- cgit v1.2.3 From cc1133ff817218f80476d91ec509c5eaa6be86e6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:11:28 +0300 Subject: feat: support routing in SearchBar --- src/components/Header/SearchBar.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx index ba0943b..f54cf25 100644 --- a/src/components/Header/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; import SearchIcon from '@material-ui/icons/Search'; import { InputBase, @@ -10,9 +11,10 @@ import { } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { User } from 'which-types'; + import { get } from '../../requests'; import UserStrip from '../UserStrip/UserStrip'; -import { useNavigate } from '../../hooks/useNavigate'; +import urls from '../../pages/urls'; const INTERVAL = 300; @@ -41,7 +43,7 @@ const SearchBar: React.FC = () => { const [results, setResults] = useState([]); const [query, setQuery] = useState(''); const [debouncedQuery, setDebouncedQuery] = useState(query); - const { navigate } = useNavigate(); + const history = useHistory(); const classes = useStyles(); useEffect(() => { @@ -69,7 +71,8 @@ const SearchBar: React.FC = () => { }; const handleNavigate = (index: number) => () => { - navigate('profile', results[index]._id); + const { username } = results[index]; + history.push(urls.profile(username)); handleClose(); }; -- cgit v1.2.3 From 10e146ef0215d41527f0466b0e139a6805b96540 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:33:45 +0300 Subject: refactor: remove urls file --- src/components/Header/Header.tsx | 11 +++++------ src/components/Header/SearchBar.tsx | 4 +--- src/components/UserStrip/UserStrip.tsx | 3 +-- src/pages/Page.tsx | 13 ++++++------- src/pages/ProfilePage/ProfilePage.tsx | 5 ++--- src/pages/urls.ts | 8 -------- 6 files changed, 15 insertions(+), 29 deletions(-) delete mode 100644 src/pages/urls.ts diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index ef5f9fb..9c42c31 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -15,7 +15,6 @@ import HomeIcon from '@material-ui/icons/Home'; import { useAuth } from '../../hooks/useAuth'; import SearchBar from './SearchBar'; -import urls from '../../pages/urls'; const useStyles = makeStyles(theme => ({ @@ -51,20 +50,20 @@ const Header: React.FC = () => { const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const handleHome = (): void => { - history.push(urls.home); + history.push('/'); }; const handleFeed = (): void => { - history.push(urls.feed) + history.push('/feed') }; const handleProfile = (): void => { - if (user) history.push(urls.profile(user.username)); - else history.push(urls.login); + if (user) history.push(`/profile/${user.username}`); + else history.push('/login'); }; const handleNotifications = (): void => { - history.push(urls.notifications); + history.push('/notifications'); }; const FeedButton = ( diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx index f54cf25..f541589 100644 --- a/src/components/Header/SearchBar.tsx +++ b/src/components/Header/SearchBar.tsx @@ -14,8 +14,6 @@ import { User } from 'which-types'; import { get } from '../../requests'; import UserStrip from '../UserStrip/UserStrip'; -import urls from '../../pages/urls'; - const INTERVAL = 300; const LIMIT = 7; @@ -72,7 +70,7 @@ const SearchBar: React.FC = () => { const handleNavigate = (index: number) => () => { const { username } = results[index]; - history.push(urls.profile(username)); + history.push(`/profile/${username}`); handleClose(); }; diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx index a2d2700..73d9363 100644 --- a/src/components/UserStrip/UserStrip.tsx +++ b/src/components/UserStrip/UserStrip.tsx @@ -5,7 +5,6 @@ import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; import { Avatar, CardHeader } from '@material-ui/core/'; import { User } from 'which-types'; -import urls from '../../pages/urls'; interface PropTypes { user: User; @@ -35,7 +34,7 @@ const UserStrip: React.FC = ({ user, info }) => { const { username, avatarUrl, verified } = user; const handleNavigate = () => { - history.push(urls.profile(user.username)); + history.push(`/profile/${username}`); }; const avatar = ( diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index dd413bf..34a1046 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -11,7 +11,6 @@ import RegistrationPage from './RegistrationPage/RegistrationPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import Route from './Route'; -import urls from './urls'; const useStyles = makeStyles(theme => ({ @@ -41,12 +40,12 @@ const Page: React.FC = () => { >
- - - - - - + + + + + +
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index ec917fd..b81c70f 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -7,7 +7,6 @@ import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; -import urls from '../urls'; const ProfilePage: React.FC = () => { @@ -24,8 +23,8 @@ const ProfilePage: React.FC = () => { setIsInfoLoading(true); const redirect = () => { - if (user) history.push(urls.profile(user.username)); - else history.push(urls.login); + if (user) history.push(`/profile/${user.username}`); + else history.push('/login'); }; if (username) { diff --git a/src/pages/urls.ts b/src/pages/urls.ts deleted file mode 100644 index e10edac..0000000 --- a/src/pages/urls.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { - home: '/', - login: '/login', - registration: '/registration', - profile: (username: string = '') => `/profile/${username.toLowerCase()}`, - feed: '/feed', - notifications: '/notifications' -}; -- cgit v1.2.3 From 6a0b6ec911c39989a1af4322e2a32d75fddbb274 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:42:16 +0300 Subject: feat: complete router navigation --- src/hooks/useNavigate.tsx | 42 ------------------------- src/index.tsx | 2 +- src/pages/HomePage/HomePage.tsx | 8 ++--- src/pages/HomePage/ReviewForm.tsx | 6 ++-- src/pages/LoginPage/LoginPage.tsx | 6 ++-- src/pages/ProfilePage/MoreMenu.tsx | 6 ++-- src/pages/RegistrationPage/RegistrationPage.tsx | 6 ++-- 7 files changed, 17 insertions(+), 59 deletions(-) delete mode 100644 src/hooks/useNavigate.tsx diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx deleted file mode 100644 index d1a433d..0000000 --- a/src/hooks/useNavigate.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState, useContext, createContext } from 'react'; - -export interface Page { - prefix: string; - id?: string; -} - -interface ContextType { - page: Page; - setPage: (page: Page) => void; - navigate: (prefix: string, id?: string) => void; -} - -const landingPage = { prefix: 'home' }; - -const context = createContext({ - page: landingPage, - setPage: () => {}, - navigate: () => {} -}); - -const useProvideNavigation = () => { - const [page, setPage] = useState(landingPage); - - const navigate: ContextType['navigate'] = (prefix, id?) => { - setPage({ prefix, id }); - window.scrollTo(0, 0); - }; - - return { page, setPage, navigate }; -}; - -export const NavigationProvider: React.FC = ({ children }) => { - const navigation = useProvideNavigation(); - const { Provider } = context; - return {children}; -}; - -export const useNavigate = (): ContextType => { - return useContext(context); -}; - diff --git a/src/index.tsx b/src/index.tsx index 16c5fe3..64b1760 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,7 +10,7 @@ import Header from './components/Header/Header'; import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow'; import Page from './pages/Page'; import { AuthProvider } from './hooks/useAuth'; -import { NavigationProvider } from './hooks/useNavigate'; + const theme = createMuiTheme({ palette: { diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index a6c54b0..17e377a 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; import { Typography, Divider, @@ -12,7 +13,6 @@ import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import { Rating } from '@material-ui/lab'; import { Feedback } from 'which-types'; -import { useNavigate } from '../../hooks/useNavigate'; import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; import ReviewCard from '../../components/ReviewCard/ReviewCard'; @@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({ const HomePage: React.FC = () => { const [feedbacks, setFeedbacks] = useState([]); const classes = useStyles(); - const { navigate } = useNavigate(); + const history = useHistory(); const { isAuthenticated, user } = useAuth(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); @@ -60,11 +60,11 @@ const HomePage: React.FC = () => { }, []); const handleLetsGo = () => { - navigate('feed'); + history.push('/feed'); }; const handleSignUp = () => { - navigate('auth'); + history.push('/registration'); }; const GithubLink = GitHub; diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx index 248e36e..b626ce2 100644 --- a/src/pages/HomePage/ReviewForm.tsx +++ b/src/pages/HomePage/ReviewForm.tsx @@ -1,11 +1,11 @@ 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'; -import { useNavigate } from '../../hooks/useNavigate'; const version = 'v1.0.0'; @@ -23,7 +23,7 @@ const ReviewForm: React.FC = () => { const [contents, setContents] = useState(''); const [score, setScore] = useState(0); const classes = useStyles(); - const { navigate } = useNavigate(); + const history = useHistory(); const { enqueueSnackbar } = useSnackbar(); const handleSubmit = (): void => { @@ -32,7 +32,7 @@ const ReviewForm: React.FC = () => { enqueueSnackbar('Your feedback has been submitted!', { variant: 'success' }); - navigate('feed'); + history.push('/feed'); }); } }; diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index ef31491..367ed6b 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -1,4 +1,5 @@ import React, { useState, useRef } from 'react'; +import { useHistory } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import { TextField, @@ -7,7 +8,6 @@ import { Switch } from '@material-ui/core'; import { useAuth } from '../../hooks/useAuth'; -import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { @@ -33,7 +33,7 @@ const LoginPage: React.FC = () => { const nameRef = useRef(); const passwordRef = useRef(); const { login } = useAuth(); - const { navigate } = useNavigate(); + const history = useHistory(); const handleCheck = () => { setRemember(!remember); @@ -44,7 +44,7 @@ const LoginPage: React.FC = () => { const password = passwordRef.current?.value; if (name && password) { login(name, password, remember).then(success => { - if (success) navigate('profile'); + if (success) history.push(`/profile/${login}`); else setError(true); }); } diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx index 4e681f5..1f41879 100644 --- a/src/pages/ProfilePage/MoreMenu.tsx +++ b/src/pages/ProfilePage/MoreMenu.tsx @@ -1,11 +1,11 @@ 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'; -import { useNavigate } from '../../hooks/useNavigate'; const ITEM_HEIGHT = 48; @@ -21,7 +21,7 @@ const MoreMenu: React.FC = () => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const { logout } = useAuth(); - const { navigate } = useNavigate(); + const history = useHistory(); const open = Boolean(anchorEl); @@ -31,7 +31,7 @@ const MoreMenu: React.FC = () => { const handleLogout = () => { logout(); - navigate('auth'); + history.push('/login'); }; const handleClose = () => { diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx index e283a0e..9e081ca 100644 --- a/src/pages/RegistrationPage/RegistrationPage.tsx +++ b/src/pages/RegistrationPage/RegistrationPage.tsx @@ -1,10 +1,10 @@ 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'; -import { useNavigate } from '../../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ @@ -31,7 +31,7 @@ const RegistrationPage: React.FC = () => { const emailRef = useRef(); const passwordRef = useRef(); const { login } = useAuth(); - const { navigate } = useNavigate(); + const history = useHistory(); const onClick = () => { const username = usernameRef.current?.value; @@ -40,7 +40,7 @@ const RegistrationPage: React.FC = () => { if (username && password) { post('/users', { username, password, email }) .then(() => login(username, password)) - .then(() => navigate('profile')); + .then(() => history.push(`/profile/${username}`)); } else setError(true); }; -- cgit v1.2.3 From b446a83ff24ed5ea2233c544446557ee29f44364 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 09:49:38 +0300 Subject: refactor: use native Route component --- src/components/Header/Header.tsx | 2 +- src/pages/Page.tsx | 3 +-- src/pages/ProfilePage/ProfilePage.tsx | 7 +++---- src/pages/Route.tsx | 11 ----------- 4 files changed, 5 insertions(+), 18 deletions(-) delete mode 100644 src/pages/Route.tsx diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 9c42c31..5aa66ba 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -54,7 +54,7 @@ const Header: React.FC = () => { }; const handleFeed = (): void => { - history.push('/feed') + history.push('/feed'); }; const handleProfile = (): void => { diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 34a1046..668b171 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; -import { Switch } from 'react-router-dom'; +import { Switch, Route } from 'react-router-dom'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; @@ -10,7 +10,6 @@ import LoginPage from './LoginPage/LoginPage'; import RegistrationPage from './RegistrationPage/RegistrationPage'; import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; -import Route from './Route'; const useStyles = makeStyles(theme => ({ diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index b81c70f..ae94b9f 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -29,12 +29,11 @@ const ProfilePage: React.FC = () => { if (username) { get(`/users?username=${username}`).then(response => { - if (!response.data.length) return redirect(); // TODO: handle this case + if (!response.data.length) redirect(); // TODO: handle this case setUserInfo(response.data[0]); setIsInfoLoading(false); }).catch(() => redirect()); - } else redirect() - + } else redirect(); }, [username, user, history]); @@ -54,7 +53,7 @@ const ProfilePage: React.FC = () => { )); }); } - }, [userInfo]) + }, [userInfo]); return ( diff --git a/src/pages/Route.tsx b/src/pages/Route.tsx deleted file mode 100644 index fdd6f96..0000000 --- a/src/pages/Route.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Route as BaseRoute } from 'react-router-dom'; - - -const Route: React.FC = ({ component: Component, ...rest }) => { - const render: React.FC = (props) => ; - - return ; -}; - -export default Route; -- cgit v1.2.3 From f55374d5328f672dbce47e8d452ce17d02ced9f8 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 11:13:00 +0300 Subject: feat: add redirect tips to auth pages --- src/pages/LoginPage/LoginPage.tsx | 23 ++++++++++++++++++++- src/pages/RegistrationPage/RegistrationPage.tsx | 27 ++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index 367ed6b..2bc7e5a 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -23,6 +23,15 @@ const useStyles = makeStyles(theme => ({ formHeader: { textAlign: 'center', fontSize: 25 + }, + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' } })); @@ -50,7 +59,9 @@ const LoginPage: React.FC = () => { } }; - // TODO: Add registration redirect + const handleRegistration = () => { + history.push('/registration'); + }; return ( <> @@ -74,6 +85,16 @@ const LoginPage: React.FC = () => { /> +
+
{'Don\'t have an account?'}
+ + Sign up + +
); }; diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx index 9e081ca..8936c2d 100644 --- a/src/pages/RegistrationPage/RegistrationPage.tsx +++ b/src/pages/RegistrationPage/RegistrationPage.tsx @@ -21,6 +21,15 @@ const useStyles = makeStyles(theme => ({ formHeader: { textAlign: 'center', fontSize: 25 + }, + formTransfer: { + display: 'flex', + justifyContent: 'center' + }, + transferButton: { + marginLeft: 10, + color: 'green', + cursor: 'pointer' } })); @@ -33,7 +42,7 @@ const RegistrationPage: React.FC = () => { const { login } = useAuth(); const history = useHistory(); - const onClick = () => { + const handleSubmit = () => { const username = usernameRef.current?.value; const password = passwordRef.current?.value; const email = emailRef.current?.value; @@ -44,7 +53,9 @@ const RegistrationPage: React.FC = () => { } else setError(true); }; - // TODO: add login redirect + const handleLogin = () => { + history.push('/login'); + }; return ( <> @@ -66,8 +77,18 @@ const RegistrationPage: React.FC = () => { error={error} helperText={error && 'This field is required!'} /> - + +
+
{'Already have an account?'}
+ + Log in + +
); }; -- cgit v1.2.3 From f0a53feb38c5bbec8a94bbf4440a1ce184876013 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 11:23:13 +0300 Subject: feat: lowercase all username inputs --- src/pages/LoginPage/LoginPage.tsx | 4 ++-- src/pages/RegistrationPage/RegistrationPage.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index 2bc7e5a..335cbb1 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -49,11 +49,11 @@ const LoginPage: React.FC = () => { }; const handleSubmit = async () => { - const name = nameRef.current?.value; + 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/${login}`); + if (success) history.push(`/profile/${name}`); else setError(true); }); } diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx index 8936c2d..829211d 100644 --- a/src/pages/RegistrationPage/RegistrationPage.tsx +++ b/src/pages/RegistrationPage/RegistrationPage.tsx @@ -43,7 +43,7 @@ const RegistrationPage: React.FC = () => { const history = useHistory(); const handleSubmit = () => { - const username = usernameRef.current?.value; + const username = usernameRef.current?.value?.toLowerCase(); const password = passwordRef.current?.value; const email = emailRef.current?.value; if (username && password) { -- cgit v1.2.3 From 104c658fc411536e09931191721411de448f964f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 8 Aug 2020 11:24:49 +0300 Subject: fix: remove unnecessary curlybrackets --- src/pages/RegistrationPage/RegistrationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx index 829211d..18a9379 100644 --- a/src/pages/RegistrationPage/RegistrationPage.tsx +++ b/src/pages/RegistrationPage/RegistrationPage.tsx @@ -80,7 +80,7 @@ const RegistrationPage: React.FC = () => {
-
{'Already have an account?'}
+
Already have an account?