diff options
-rw-r--r-- | src/hooks/useNavigate.tsx | 42 | ||||
-rw-r--r-- | src/index.tsx | 2 | ||||
-rw-r--r-- | src/pages/HomePage/HomePage.tsx | 8 | ||||
-rw-r--r-- | src/pages/HomePage/ReviewForm.tsx | 6 | ||||
-rw-r--r-- | src/pages/LoginPage/LoginPage.tsx | 6 | ||||
-rw-r--r-- | src/pages/ProfilePage/MoreMenu.tsx | 6 | ||||
-rw-r--r-- | src/pages/RegistrationPage/RegistrationPage.tsx | 6 |
7 files changed, 17 insertions, 59 deletions
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<ContextType>({ - page: landingPage, - setPage: () => {}, - navigate: () => {} -}); - -const useProvideNavigation = () => { - const [page, setPage] = useState<Page>(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 <Provider value={navigation}>{children}</Provider>; -}; - -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<Feedback[]>([]); 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 = <Link href="https://github.com/which-ecosystem">GitHub</Link>; 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<string>(''); const [score, setScore] = useState<number>(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<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); 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<HTMLButtonElement | null>(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<HTMLInputElement>(); const passwordRef = useRef<HTMLInputElement>(); 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); }; |