Skip to content

Commit 7380d56

Browse files
feat: Protected and private routes (#54)
* feat: protected and private routes * fix: toFixed(2)
1 parent ad25762 commit 7380d56

File tree

4 files changed

+74
-48
lines changed

4 files changed

+74
-48
lines changed

src/AllRoutes.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { lazy, useEffect } from 'react';
2+
3+
import { Route, Routes } from 'react-router-dom';
4+
import { useAppDispatch, useAppSelector } from './store/hooks';
5+
import { isloggedIn, loggedIn } from './store/User/UserSlice';
6+
7+
const Home = lazy(() => import('./pages/Home/Home'));
8+
const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
9+
const MapDesigner = lazy(() => import('./components/MapDesigner/MapDesigner'));
10+
const History = lazy(
11+
() => import('./components/CommitHistory/HistoryMain/History'),
12+
);
13+
const Login = lazy(() => import('./pages/Auth/LoginForm'));
14+
const Register = lazy(() => import('./pages/Auth/RegisterForm'));
15+
const Leaderboard = lazy(() => import('./components/Leaderboard/Leaderboard'));
16+
const BattleTV = lazy(() => import('./components/BattleTV/BattleTV'));
17+
const Verify = lazy(
18+
() => import('./components/Auth/Auth/Register/ActivateUser/ActivateUser'),
19+
);
20+
const ResetPassword = lazy(
21+
() =>
22+
import(
23+
'./components/Auth/Auth/Login/ForgetPassword/ResetpasswordVerifcation'
24+
),
25+
);
26+
const IncompleteProfile = lazy(
27+
() =>
28+
import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
29+
);
30+
31+
export default function AllRoutes(): JSX.Element {
32+
const dispatch = useAppDispatch();
33+
const logIn = useAppSelector(isloggedIn);
34+
35+
useEffect(() => {
36+
if (localStorage.getItem('token')) {
37+
dispatch(loggedIn());
38+
}
39+
}, []);
40+
41+
return logIn ? (
42+
<Routes>
43+
<Route path="/" element={<Home />} />
44+
<Route path="/dashboard" element={<Dashboard />} />
45+
<Route path="/mapdesigner" element={<MapDesigner />} />
46+
<Route path="/history" element={<History />} />
47+
<Route path="/leaderboard" element={<Leaderboard />} />
48+
<Route path="/battletv" element={<BattleTV />} />
49+
<Route path="/activate" element={<Verify />} />
50+
<Route path="/incomplete-profile" element={<IncompleteProfile />} />
51+
</Routes>
52+
) : (
53+
<Routes>
54+
<Route path="/" element={<Home />} />
55+
<Route path="/login" element={<Login />} />
56+
<Route path="/register" element={<Register />} />
57+
<Route path="/activate" element={<Verify />} />
58+
<Route path="/reset-password" element={<ResetPassword />} />
59+
</Routes>
60+
);
61+
}

src/components/BattleTV/BattleTV.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function PaginatedItems() {
9797
{[...match.games.values()][0].coinsUsed}
9898
</div>
9999
<div className={styles.destruction}>
100-
{[...match.games.values()][0].destruction}
100+
{[...match.games.values()][0].destruction.toFixed(2)}
101101
</div>
102102
<div
103103
className={styles.watchButton}
@@ -111,11 +111,9 @@ function PaginatedItems() {
111111
Watch
112112
</div>
113113
<div className={styles.destruction}>
114-
{
115-
[...match.games.values()][
116-
[...match.games.values()].length === 1 ? 0 : 1
117-
].destruction
118-
}
114+
{[...match.games.values()][
115+
[...match.games.values()].length === 1 ? 0 : 1
116+
].destruction.toFixed(2)}
119117
</div>
120118
<div className={styles.coinused}>
121119
{

src/main.tsx

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,25 @@ import React, { Suspense, lazy } from 'react';
22
import ReactDOM from 'react-dom';
33
import 'bootstrap/dist/css/bootstrap.min.css';
44
import styles from './main.module.css';
5-
import { HashRouter, Routes, Route } from 'react-router-dom';
5+
import { HashRouter } from 'react-router-dom';
66
import Toast from './components/Toast/Toast';
77
import { store } from './store/store';
88
import { Provider } from 'react-redux';
99
import { PersistGate } from 'redux-persist/integration/react';
1010
import { persistStore } from 'redux-persist';
1111
import Loader from './components/Loader/Loader';
1212
import './websocket/websocket';
13+
import AllRoutes from './AllRoutes';
1314

1415
const persistor = persistStore(store);
15-
const Home = lazy(() => import('./pages/Home/Home'));
16-
const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
1716
const NavBar = lazy(() => import('./components/NavBar/NavBar'));
18-
const MapDesigner = lazy(() => import('./components/MapDesigner/MapDesigner'));
1917
const SideBar = lazy(() => import('./components/SideBar/SideBar'));
20-
const History = lazy(
21-
() => import('./components/CommitHistory/HistoryMain/History'),
22-
);
23-
const Login = lazy(() => import('./pages/Auth/LoginForm'));
24-
const Register = lazy(() => import('./pages/Auth/RegisterForm'));
2518
const EditorSettings = lazy(
2619
() => import('./components/EditorSettings/EditorSettings'),
2720
);
28-
const Leaderboard = lazy(() => import('./components/Leaderboard/Leaderboard'));
29-
const BattleTV = lazy(() => import('./components/BattleTV/BattleTV'));
3021
const SelfMatchModal = lazy(
3122
() => import('./components/SelfMatchMakingModal/SelfMatchMakeModal'),
3223
);
33-
const Verify = lazy(
34-
() => import('./components/Auth/Auth/Register/ActivateUser/ActivateUser'),
35-
);
36-
const ResetPassword = lazy(
37-
() =>
38-
import(
39-
'./components/Auth/Auth/Login/ForgetPassword/ResetpasswordVerifcation'
40-
),
41-
);
42-
43-
const IncompleteProfile = lazy(
44-
() =>
45-
import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
46-
);
4724

4825
ReactDOM.render(
4926
<React.StrictMode>
@@ -57,22 +34,7 @@ ReactDOM.render(
5734
<div className={styles.mainWindow}>
5835
<SideBar />
5936
<div className={styles.gameArea}>
60-
<Routes>
61-
<Route path="/" element={<Home />} />
62-
<Route path="/dashboard" element={<Dashboard />} />
63-
<Route path="/mapdesigner" element={<MapDesigner />} />
64-
<Route path="/history" element={<History />} />
65-
<Route path="/login" element={<Login />} />
66-
<Route path="/register" element={<Register />} />
67-
<Route path="/leaderboard" element={<Leaderboard />} />
68-
<Route path="/battletv" element={<BattleTV />} />
69-
<Route path="/activate" element={<Verify />} />
70-
<Route path="/reset-password" element={<ResetPassword />} />
71-
<Route
72-
path="/incomplete-profile"
73-
element={<IncompleteProfile />}
74-
/>
75-
</Routes>
37+
<AllRoutes />
7638
</div>
7739
</div>
7840
</Suspense>

src/store/User/UserSlice.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,9 @@ export const UserSlice = createSlice({
130130
switchRegister: state => {
131131
state.isRegistered = false;
132132
},
133+
loggedIn: state => {
134+
state.isloggedIn = true;
135+
},
133136
logout: state => {
134137
state.user = initialState.user;
135138
state.isloggedIn = initialState.isloggedIn;
@@ -223,7 +226,9 @@ export const UserSlice = createSlice({
223226
});
224227
},
225228
});
226-
export const { switchRegister, logout, creditionals } = UserSlice.actions;
229+
230+
export const { switchRegister, logout, creditionals, loggedIn } =
231+
UserSlice.actions;
227232
export const user = (state: RootState): User => state.user.user;
228233
export const loading = (state: RootState): boolean => state.user.loading;
229234
export const isRegistered = (state: RootState): boolean =>

0 commit comments

Comments
 (0)