Add app routing (#366)

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>

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 });
+ }
+}

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;

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;

app/src/routes/login/index.tsx

@@ -0,0 +1,5 @@
+const Login = () => {
+ return <>Login</>;
+};
+
+export default Login;