From 50b3cb329b7f75932563732a3daccf7656c8c6d8 Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:36:07 -0400
Subject: [PATCH] Add app routing (#366)

---
 app/src/App.tsx                |  4 ++--
 app/src/lib/routes/index.ts    | 24 ++++++++++++++++++++++++
 app/src/routes/Provider.tsx    | 11 +++++++++++
 app/src/routes/index.tsx       | 23 +++++++++++++++++++++++
 app/src/routes/login/index.tsx |  5 +++++
 5 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 app/src/lib/routes/index.ts
 create mode 100644 app/src/routes/Provider.tsx
 create mode 100644 app/src/routes/index.tsx
 create mode 100644 app/src/routes/login/index.tsx

diff --git a/app/src/App.tsx b/app/src/App.tsx
index dee81314..5a24d55d 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -5,7 +5,7 @@ import AppBar from './components/AppBar';
 import { ThemeProvider } from './components/theme-provider';
 import { Toaster } from './components/ui/toaster';
 import { AuthManager } from './lib/auth';
-import ProjectEditor from './routes/project';
+import Routes from './routes';
 
 const AuthContext = createContext(new AuthManager());
 export const useAuthManager = () => useContext(AuthContext);
@@ -15,7 +15,7 @@ function App() {
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
             <TooltipProvider>
                 <AppBar />
-                <ProjectEditor />
+                <Routes />
                 <Announcement />
                 <Toaster />
             </TooltipProvider>
diff --git a/app/src/lib/routes/index.ts b/app/src/lib/routes/index.ts
new file mode 100644
index 00000000..48e4c679
--- /dev/null
+++ b/app/src/lib/routes/index.ts
@@ -0,0 +1,24 @@
+import { makeAutoObservable } from 'mobx';
+import { sendAnalytics } from '../utils';
+
+export enum Route {
+    EDITOR = 'editor',
+    LOGIN = 'login',
+}
+
+export class RouteManager {
+    private currentRoute: Route = Route.EDITOR;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    get route() {
+        return this.currentRoute;
+    }
+
+    set route(newRoute: Route) {
+        this.route = newRoute;
+        sendAnalytics('navigate', { route: newRoute });
+    }
+}
diff --git a/app/src/routes/Provider.tsx b/app/src/routes/Provider.tsx
new file mode 100644
index 00000000..20343f0d
--- /dev/null
+++ b/app/src/routes/Provider.tsx
@@ -0,0 +1,11 @@
+import { RouteManager } from '@/lib/routes';
+import { createContext, ReactNode, useContext } from 'react';
+
+const RouteContext = createContext(new RouteManager());
+export const useRouteManager = () => useContext(RouteContext);
+
+const RouteProvider = ({ children }: { children: ReactNode }) => {
+    return <RouteContext.Provider value={useRouteManager()}>{children}</RouteContext.Provider>;
+};
+
+export default RouteProvider;
diff --git a/app/src/routes/index.tsx b/app/src/routes/index.tsx
new file mode 100644
index 00000000..5869caed
--- /dev/null
+++ b/app/src/routes/index.tsx
@@ -0,0 +1,23 @@
+import { Route } from '@/lib/routes';
+import { observer } from 'mobx-react-lite';
+import ProjectEditor from './project';
+import RouteProvider, { useRouteManager } from './Provider';
+
+const Routes = observer(() => {
+    const routeManager = useRouteManager();
+
+    function renderRoutes() {
+        switch (routeManager.route) {
+            case Route.EDITOR:
+                return <ProjectEditor />;
+            case Route.LOGIN:
+                return <div>Login</div>;
+            default:
+                return <div>404: Unknown route</div>;
+        }
+    }
+
+    return <RouteProvider>{renderRoutes()}</RouteProvider>;
+});
+
+export default Routes;
diff --git a/app/src/routes/login/index.tsx b/app/src/routes/login/index.tsx
new file mode 100644
index 00000000..710b56c9
--- /dev/null
+++ b/app/src/routes/login/index.tsx
@@ -0,0 +1,5 @@
+const Login = () => {
+    return <>Login</>;
+};
+
+export default Login;