41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Loader2 } from "lucide-react";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { readRoute, type AppRoute } from "@/application/route";
|
||
|
|
import { CanvasWorkspace } from "@/ui/pages/CanvasWorkspace";
|
||
|
|
import { HomePage } from "@/ui/pages/HomePage";
|
||
|
|
import { ProjectsRoutePage } from "@/ui/pages/ProjectsRoutePage";
|
||
|
|
import { useAuth } from "@/ui/auth/AuthProvider";
|
||
|
|
|
||
|
|
export function App() {
|
||
|
|
const { isAuthenticated, openLogin } = useAuth();
|
||
|
|
const [route, setRoute] = useState<AppRoute | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setRoute(readRoute());
|
||
|
|
const handleRoute = () => setRoute(readRoute());
|
||
|
|
window.addEventListener("hashchange", handleRoute);
|
||
|
|
return () => window.removeEventListener("hashchange", handleRoute);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (route?.name === "project" && !isAuthenticated) {
|
||
|
|
openLogin();
|
||
|
|
}
|
||
|
|
}, [isAuthenticated, openLogin, route]);
|
||
|
|
|
||
|
|
if (!route) {
|
||
|
|
return (
|
||
|
|
<div className="workspace-loading">
|
||
|
|
<Loader2 className="spin" size={28} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (route.name === "project" && !isAuthenticated) return <HomePage />;
|
||
|
|
if (route.name === "project") return <CanvasWorkspace projectId={route.id} />;
|
||
|
|
if (route.name === "projects") return <ProjectsRoutePage />;
|
||
|
|
return <HomePage />;
|
||
|
|
}
|