refactor: rename RootPage to AppPage and add Loader component

src/App.tsx

@@ -2,15 +2,16 @@ import { observer } from "mobx-react-lite";
 import React from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { AuthenticationGuard } from "./components/guards/AuthenticationGuard";
-import LoadingPage from "./pages/LoadingPage";
 import LoginPage from "./pages/LoginPage";
 import NotFoundPage from "./pages/NotFound";
 import RegistrationPage from "./pages/RegistrationPage";
 
 import { reaction } from "mobx";
+import Loader from "./components/Loader";
 import { UnauthenticatedGuard } from "./components/guards/UnauthenticatedGuard";
+import AppPage from "./pages/AppPage";
 import LogoutPage from "./pages/LogoutPage";
-import RootPage from "./pages/RootPage";
+import ChannelPage from "./pages/subpages/ChannelPage";
 import { useAppStore } from "./stores/AppStore";
 import { Globals } from "./utils/Globals";
 
@@ -54,36 +55,39 @@ function App() {
 		},
 	);
 
-	if (app.isAppLoading) {
-		return <LoadingPage />;
-	}
-
 	return (
-		<Routes>
-			<Route
-				index
-				path="/"
-				element={<AuthenticationGuard component={RootPage} />}
-			/>
-			<Route
-				index
-				path="/app"
-				element={<AuthenticationGuard component={RootPage} />}
-			/>
-			<Route
-				path="/login"
-				element={<UnauthenticatedGuard component={LoginPage} />}
-			/>
-			<Route
-				path="/register"
-				element={<UnauthenticatedGuard component={RegistrationPage} />}
-			/>
-			<Route
-				path="/logout"
-				element={<AuthenticationGuard component={LogoutPage} />}
-			/>
-			<Route path="*" element={<NotFoundPage />} />
-		</Routes>
+		<Loader>
+			<Routes>
+				<Route
+					index
+					path="/"
+					element={<AuthenticationGuard component={AppPage} />}
+				/>
+				<Route
+					path="/app"
+					element={<AuthenticationGuard component={AppPage} />}
+				/>
+				<Route
+					path="/channels/:channelId"
+					element={<AuthenticationGuard component={ChannelPage} />}
+				/>
+				<Route
+					path="/login"
+					element={<UnauthenticatedGuard component={LoginPage} />}
+				/>
+				<Route
+					path="/register"
+					element={
+						<UnauthenticatedGuard component={RegistrationPage} />
+					}
+				/>
+				<Route
+					path="/logout"
+					element={<AuthenticationGuard component={LogoutPage} />}
+				/>
+				<Route path="*" element={<NotFoundPage />} />
+			</Routes>
+		</Loader>
 	);
 }
 

src/components/Loader.tsx

@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import React from "react";
+import LoadingPage from "../pages/LoadingPage";
+import { useAppStore } from "../stores/AppStore";
+
+interface Props {
+	children: React.ReactNode;
+}
+function Loader(props: Props) {
+	const app = useAppStore();
+
+	if (!app.isReady) {
+		return <LoadingPage />;
+	}
+
+	return <>{props.children}</>;
+}
+
+export default observer(Loader);

src/pages/AppPage.tsx

@@ -0,0 +1,13 @@
+import { observer } from "mobx-react-lite";
+import { Navigate } from "react-router-dom";
+import Loader from "../components/Loader";
+
+function AppPage() {
+	return (
+		<Loader>
+			<Navigate to="/channels/@me" />
+		</Loader>
+	);
+}
+
+export default observer(AppPage);

src/pages/RootPage.tsx

@@ -1,53 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { useNavigate } from "react-router-dom";
-import styled from "styled-components";
-import Button from "../components/Button";
-import Container from "../components/Container";
-import GuildSidebar from "../components/GuildSidebar";
-import { useAppStore } from "../stores/AppStore";
-import LoadingPage from "./LoadingPage";
-
-const Wrapper = styled(Container)`
-	display: flex;
-	flex-direction: row;
-`;
-
-const Filler1 = styled.div`
-	flex: 1;
-	flex-basis: 330px;
-	background-color: red;
-`;
-
-const Filler2 = styled.div`
-	flex: 1;
-	flex-basis: 1170px;
-	background-color: blue;
-`;
-
-const Filler3 = styled.div`
-	flex: 1;
-	flex-basis: 348px;
-	background-color: orange;
-`;
-
-function RootPage() {
-	const app = useAppStore();
-	const navigate = useNavigate();
-
-	if (!app.isReady) {
-		return <LoadingPage />;
-	}
-
-	return (
-		<Wrapper>
-			<GuildSidebar />
-			<Filler1 />
-			<Filler2>
-				<Button onClick={() => navigate("/logout")}>Logout</Button>
-			</Filler2>
-			<Filler3 />
-		</Wrapper>
-	);
-}
-
-export default observer(RootPage);