From 6a0b6ec911c39989a1af4322e2a32d75fddbb274 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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<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);
};
--
cgit v1.2.3