Skip to content

Commit b5d0bcf

Browse files
tienbkutienbku
committed
update project for new react and react-router-dom
1 parent 42afb86 commit b5d0bcf

File tree

9 files changed

+6380
-21110
lines changed

9 files changed

+6380
-21110
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 13916 deletions
This file was deleted.

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9-
"axios": "^0.20.0",
10-
"bootstrap": "^4.5.2",
11-
"react": "^16.13.1",
12-
"react-dom": "^16.13.1",
13-
"react-redux": "^7.2.1",
14-
"react-router-dom": "^5.2.0",
15-
"react-scripts": "3.4.3",
9+
"axios": "^0.27.2",
10+
"bootstrap": "^4.6.1",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-redux": "^8.0.1",
14+
"react-router-dom": "^6.4.0",
15+
"react-scripts": "5.0.1",
1616
"react-validation": "^3.0.7",
17-
"redux": "^4.0.5",
18-
"redux-thunk": "^2.3.0",
19-
"validator": "^13.1.1"
17+
"redux": "^4.2.0",
18+
"redux-thunk": "^2.4.1",
19+
"validator": "^13.7.0"
2020
},
2121
"scripts": {
2222
"start": "react-scripts start",

‎src/App.js‎

Lines changed: 79 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, useCallback } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { Router, Switch, Route, Link } from "react-router-dom";
3+
import { Routes, Route, Link, useLocation } from "react-router-dom";
44

55
import "bootstrap/dist/css/bootstrap.min.css";
66
import "./App.css";
@@ -16,8 +16,6 @@ import BoardAdmin from "./components/BoardAdmin";
1616
import { logout } from "./actions/auth";
1717
import { clearMessage } from "./actions/message";
1818

19-
import { history } from "./helpers/history";
20-
2119
// import AuthVerify from "./common/AuthVerify";
2220
import EventBus from "./common/EventBus";
2321

@@ -28,11 +26,13 @@ const App = () => {
2826
const { user: currentUser } = useSelector((state) => state.auth);
2927
const dispatch = useDispatch();
3028

29+
let location = useLocation();
30+
3131
useEffect(() => {
32-
history.listen((location) => {
32+
if (["/login", "/register"].includes(location.pathname)) {
3333
dispatch(clearMessage()); // clear message when changing location
34-
});
35-
}, [dispatch]);
34+
}
35+
}, [dispatch, location]);
3636

3737
const logOut = useCallback(() => {
3838
dispatch(logout());
@@ -57,89 +57,88 @@ const App = () => {
5757
}, [currentUser, logOut]);
5858

5959
return (
60-
<Router history={history}>
61-
<div>
62-
<nav className="navbar navbar-expand navbar-dark bg-dark">
63-
<Link to={"/"} className="navbar-brand">
64-
bezKoder
65-
</Link>
66-
<div className="navbar-nav mr-auto">
60+
<div>
61+
<nav className="navbar navbar-expand navbar-dark bg-dark">
62+
<Link to={"/"} className="navbar-brand">
63+
bezKoder
64+
</Link>
65+
<div className="navbar-nav mr-auto">
66+
<li className="nav-item">
67+
<Link to={"/home"} className="nav-link">
68+
Home
69+
</Link>
70+
</li>
71+
72+
{showModeratorBoard && (
6773
<li className="nav-item">
68-
<Link to={"/home"} className="nav-link">
69-
Home
74+
<Link to={"/mod"} className="nav-link">
75+
Moderator Board
7076
</Link>
7177
</li>
78+
)}
7279

73-
{showModeratorBoard && (
74-
<li className="nav-item">
75-
<Link to={"/mod"} className="nav-link">
76-
Moderator Board
77-
</Link>
78-
</li>
79-
)}
80-
81-
{showAdminBoard && (
82-
<li className="nav-item">
83-
<Link to={"/admin"} className="nav-link">
84-
Admin Board
85-
</Link>
86-
</li>
87-
)}
88-
89-
{currentUser && (
90-
<li className="nav-item">
91-
<Link to={"/user"} className="nav-link">
92-
User
93-
</Link>
94-
</li>
95-
)}
96-
</div>
80+
{showAdminBoard && (
81+
<li className="nav-item">
82+
<Link to={"/admin"} className="nav-link">
83+
Admin Board
84+
</Link>
85+
</li>
86+
)}
9787

98-
{currentUser ? (
99-
<div className="navbar-nav ml-auto">
100-
<li className="nav-item">
101-
<Link to={"/profile"} className="nav-link">
102-
{currentUser.username}
103-
</Link>
104-
</li>
105-
<li className="nav-item">
106-
<a href="/login" className="nav-link" onClick={logOut}>
107-
LogOut
108-
</a>
109-
</li>
110-
</div>
111-
) : (
112-
<div className="navbar-nav ml-auto">
113-
<li className="nav-item">
114-
<Link to={"/login"} className="nav-link">
115-
Login
116-
</Link>
117-
</li>
118-
119-
<li className="nav-item">
120-
<Link to={"/register"} className="nav-link">
121-
Sign Up
122-
</Link>
123-
</li>
124-
</div>
88+
{currentUser && (
89+
<li className="nav-item">
90+
<Link to={"/user"} className="nav-link">
91+
User
92+
</Link>
93+
</li>
12594
)}
126-
</nav>
127-
128-
<div className="container mt-3">
129-
<Switch>
130-
<Route exact path={["/", "/home"]} component={Home} />
131-
<Route exact path="/login" component={Login} />
132-
<Route exact path="/register" component={Register} />
133-
<Route exact path="/profile" component={Profile} />
134-
<Route path="/user" component={BoardUser} />
135-
<Route path="/mod" component={BoardModerator} />
136-
<Route path="/admin" component={BoardAdmin} />
137-
</Switch>
13895
</div>
13996

140-
{/* <AuthVerify logOut={logOut}/> */}
97+
{currentUser ? (
98+
<div className="navbar-nav ml-auto">
99+
<li className="nav-item">
100+
<Link to={"/profile"} className="nav-link">
101+
{currentUser.username}
102+
</Link>
103+
</li>
104+
<li className="nav-item">
105+
<a href="/login" className="nav-link" onClick={logOut}>
106+
LogOut
107+
</a>
108+
</li>
109+
</div>
110+
) : (
111+
<div className="navbar-nav ml-auto">
112+
<li className="nav-item">
113+
<Link to={"/login"} className="nav-link">
114+
Login
115+
</Link>
116+
</li>
117+
118+
<li className="nav-item">
119+
<Link to={"/register"} className="nav-link">
120+
Sign Up
121+
</Link>
122+
</li>
123+
</div>
124+
)}
125+
</nav>
126+
127+
<div className="container mt-3">
128+
<Routes>
129+
<Route path="/" element={<Home />} />
130+
<Route path="/home" element={<Home />} />
131+
<Route path="/login" element={<Login />} />
132+
<Route path="/register" element={<Register />} />
133+
<Route path="/profile" element={<Profile />} />
134+
<Route path="/user" element={<BoardUser />} />
135+
<Route path="/mod" element={<BoardModerator />} />
136+
<Route path="/admin" element={<BoardAdmin />} />
137+
</Routes>
141138
</div>
142-
</Router>
139+
140+
{/* <AuthVerify logOut={logOut}/> */}
141+
</div>
143142
);
144143
};
145144

‎src/common/AuthVerify.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
2-
import { history } from '../helpers/history';
1+
import React, { useEffect } from "react";
2+
import { useLocation } from "react-router-dom";
33

44
const parseJwt = (token) => {
55
try {
@@ -10,7 +10,9 @@ const parseJwt = (token) => {
1010
};
1111

1212
const AuthVerify = (props) => {
13-
history.listen(() => {
13+
let location = useLocation();
14+
15+
useEffect(() => {
1416
const user = JSON.parse(localStorage.getItem("user"));
1517

1618
if (user) {
@@ -20,7 +22,7 @@ const AuthVerify = (props) => {
2022
props.logOut();
2123
}
2224
}
23-
});
25+
}, [location, props]);
2426

2527
return <div></div>;
2628
};

‎src/components/Login.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useRef } from "react";
22
import { useDispatch, useSelector } from "react-redux";
3-
import { Redirect } from 'react-router-dom';
3+
import { Navigate, useNavigate } from 'react-router-dom';
44

55
import Form from "react-validation/build/form";
66
import Input from "react-validation/build/input";
@@ -19,6 +19,8 @@ const required = (value) => {
1919
};
2020

2121
const Login = (props) => {
22+
let navigate = useNavigate();
23+
2224
const form = useRef();
2325
const checkBtn = useRef();
2426

@@ -51,7 +53,7 @@ const Login = (props) => {
5153
if (checkBtn.current.context._errors.length === 0) {
5254
dispatch(login(username, password))
5355
.then(() => {
54-
props.history.push("/profile");
56+
navigate("/profile");
5557
window.location.reload();
5658
})
5759
.catch(() => {
@@ -63,7 +65,7 @@ const Login = (props) => {
6365
};
6466

6567
if (isLoggedIn) {
66-
return <Redirect to="/profile" />;
68+
return <Navigate to="/profile" />;
6769
}
6870

6971
return (

‎src/components/Profile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
2-
import { Redirect } from 'react-router-dom';
2+
import { Navigate } from 'react-router-dom';
33
import { useSelector } from "react-redux";
44

55
const Profile = () => {
66
const { user: currentUser } = useSelector((state) => state.auth);
77

88
if (!currentUser) {
9-
return <Redirect to="/login" />;
9+
return <Navigate to="/login" />;
1010
}
1111

1212
return (

‎src/helpers/history.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import React from "react";
2-
import ReactDOM from "react-dom";
2+
import { createRoot } from "react-dom/client";
33
import { Provider } from "react-redux";
44
import store from "./store";
55
import "./index.css";
66
import App from "./App";
77
import * as serviceWorker from "./serviceWorker";
88

9-
ReactDOM.render(
9+
import { BrowserRouter } from "react-router-dom";
10+
11+
const container = document.getElementById("root");
12+
const root = createRoot(container);
13+
14+
root.render(
1015
<Provider store={store}>
11-
<App />
12-
</Provider>,
13-
document.getElementById("root")
16+
<BrowserRouter>
17+
<App />
18+
</BrowserRouter>
19+
</Provider>
1420
);
1521

1622
// If you want your app to work offline and load faster, you can chađinge

0 commit comments

Comments
 (0)