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 (limited to 'src/pages') 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 (limited to 'src/pages') 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 (limited to 'src/pages') 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 (limited to 'src/pages') 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/pages/Page.tsx | 40 +++++++++++++++++++--------------------- src/pages/urls.ts | 2 +- 2 files changed, 20 insertions(+), 22 deletions(-) (limited to 'src/pages') 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(-) (limited to 'src/pages') 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/pages/ProfilePage/ProfilePage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/pages') 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 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/pages/Page.tsx | 13 ++++++------- src/pages/ProfilePage/ProfilePage.tsx | 5 ++--- src/pages/urls.ts | 8 -------- 3 files changed, 8 insertions(+), 18 deletions(-) delete mode 100644 src/pages/urls.ts (limited to 'src/pages') 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/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 +++--- 5 files changed, 16 insertions(+), 16 deletions(-) (limited to 'src/pages') 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/pages/Page.tsx | 3 +-- src/pages/ProfilePage/ProfilePage.tsx | 7 +++---- src/pages/Route.tsx | 11 ----------- 3 files changed, 4 insertions(+), 17 deletions(-) delete mode 100644 src/pages/Route.tsx (limited to 'src/pages') 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(-) (limited to 'src/pages') 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(-) (limited to 'src/pages') 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(-) (limited to 'src/pages') 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?