feat: Protected and private routes (#54)

* feat: protected and private routes

* fix: toFixed(2)

Author: PriyanshuDangi

src/AllRoutes.tsx

@@ -0,0 +1,61 @@
+import { lazy, useEffect } from 'react';
+
+import { Route, Routes } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from './store/hooks';
+import { isloggedIn, loggedIn } from './store/User/UserSlice';
+
+const Home = lazy(() => import('./pages/Home/Home'));
+const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
+const MapDesigner = lazy(() => import('./components/MapDesigner/MapDesigner'));
+const History = lazy(
+  () => import('./components/CommitHistory/HistoryMain/History'),
+);
+const Login = lazy(() => import('./pages/Auth/LoginForm'));
+const Register = lazy(() => import('./pages/Auth/RegisterForm'));
+const Leaderboard = lazy(() => import('./components/Leaderboard/Leaderboard'));
+const BattleTV = lazy(() => import('./components/BattleTV/BattleTV'));
+const Verify = lazy(
+  () => import('./components/Auth/Auth/Register/ActivateUser/ActivateUser'),
+);
+const ResetPassword = lazy(
+  () =>
+    import(
+      './components/Auth/Auth/Login/ForgetPassword/ResetpasswordVerifcation'
+    ),
+);
+const IncompleteProfile = lazy(
+  () =>
+    import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
+);
+
+export default function AllRoutes(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const logIn = useAppSelector(isloggedIn);
+
+  useEffect(() => {
+    if (localStorage.getItem('token')) {
+      dispatch(loggedIn());
+    }
+  }, []);
+
+  return logIn ? (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/dashboard" element={<Dashboard />} />
+      <Route path="/mapdesigner" element={<MapDesigner />} />
+      <Route path="/history" element={<History />} />
+      <Route path="/leaderboard" element={<Leaderboard />} />
+      <Route path="/battletv" element={<BattleTV />} />
+      <Route path="/activate" element={<Verify />} />
+      <Route path="/incomplete-profile" element={<IncompleteProfile />} />
+    </Routes>
+  ) : (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+      <Route path="/activate" element={<Verify />} />
+      <Route path="/reset-password" element={<ResetPassword />} />
+    </Routes>
+  );
+}

src/components/BattleTV/BattleTV.tsx

@@ -97,7 +97,7 @@ function PaginatedItems() {
                       {[...match.games.values()][0].coinsUsed}
                     </div>
                     <div className={styles.destruction}>
-                      {[...match.games.values()][0].destruction}
+                      {[...match.games.values()][0].destruction.toFixed(2)}
                     </div>
                     <div
                       className={styles.watchButton}
@@ -111,11 +111,9 @@ function PaginatedItems() {
                       Watch
                     </div>
                     <div className={styles.destruction}>
-                      {
-                        [...match.games.values()][
-                          [...match.games.values()].length === 1 ? 0 : 1
-                        ].destruction
-                      }
+                      {[...match.games.values()][
+                        [...match.games.values()].length === 1 ? 0 : 1
+                      ].destruction.toFixed(2)}
                     </div>
                     <div className={styles.coinused}>
                       {

src/main.tsx

@@ -2,48 +2,25 @@ import React, { Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import styles from './main.module.css';
-import { HashRouter, Routes, Route } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 import Toast from './components/Toast/Toast';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistStore } from 'redux-persist';
 import Loader from './components/Loader/Loader';
 import './websocket/websocket';
+import AllRoutes from './AllRoutes';
 
 const persistor = persistStore(store);
-const Home = lazy(() => import('./pages/Home/Home'));
-const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'));
 const NavBar = lazy(() => import('./components/NavBar/NavBar'));
-const MapDesigner = lazy(() => import('./components/MapDesigner/MapDesigner'));
 const SideBar = lazy(() => import('./components/SideBar/SideBar'));
-const History = lazy(
-  () => import('./components/CommitHistory/HistoryMain/History'),
-);
-const Login = lazy(() => import('./pages/Auth/LoginForm'));
-const Register = lazy(() => import('./pages/Auth/RegisterForm'));
 const EditorSettings = lazy(
   () => import('./components/EditorSettings/EditorSettings'),
 );
-const Leaderboard = lazy(() => import('./components/Leaderboard/Leaderboard'));
-const BattleTV = lazy(() => import('./components/BattleTV/BattleTV'));
 const SelfMatchModal = lazy(
   () => import('./components/SelfMatchMakingModal/SelfMatchMakeModal'),
 );
-const Verify = lazy(
-  () => import('./components/Auth/Auth/Register/ActivateUser/ActivateUser'),
-);
-const ResetPassword = lazy(
-  () =>
-    import(
-      './components/Auth/Auth/Login/ForgetPassword/ResetpasswordVerifcation'
-    ),
-);
-
-const IncompleteProfile = lazy(
-  () =>
-    import('./components/Auth/Auth/Login/IncompleteProfile/incompeleteProfile'),
-);
 
 ReactDOM.render(
   <React.StrictMode>
@@ -57,22 +34,7 @@ ReactDOM.render(
             <div className={styles.mainWindow}>
               <SideBar />
               <div className={styles.gameArea}>
-                <Routes>
-                  <Route path="/" element={<Home />} />
-                  <Route path="/dashboard" element={<Dashboard />} />
-                  <Route path="/mapdesigner" element={<MapDesigner />} />
-                  <Route path="/history" element={<History />} />
-                  <Route path="/login" element={<Login />} />
-                  <Route path="/register" element={<Register />} />
-                  <Route path="/leaderboard" element={<Leaderboard />} />
-                  <Route path="/battletv" element={<BattleTV />} />
-                  <Route path="/activate" element={<Verify />} />
-                  <Route path="/reset-password" element={<ResetPassword />} />
-                  <Route
-                    path="/incomplete-profile"
-                    element={<IncompleteProfile />}
-                  />
-                </Routes>
+                <AllRoutes />
               </div>
             </div>
           </Suspense>

src/store/User/UserSlice.ts

@@ -130,6 +130,9 @@ export const UserSlice = createSlice({
     switchRegister: state => {
       state.isRegistered = false;
     },
+    loggedIn: state => {
+      state.isloggedIn = true;
+    },
     logout: state => {
       state.user = initialState.user;
       state.isloggedIn = initialState.isloggedIn;
@@ -223,7 +226,9 @@ export const UserSlice = createSlice({
       });
   },
 });
-export const { switchRegister, logout, creditionals } = UserSlice.actions;
+
+export const { switchRegister, logout, creditionals, loggedIn } =
+  UserSlice.actions;
 export const user = (state: RootState): User => state.user.user;
 export const loading = (state: RootState): boolean => state.user.loading;
 export const isRegistered = (state: RootState): boolean =>