Files
llink/js/src/App.tsx
T

70 lines
1.9 KiB
TypeScript

import { useEffect } from "react";
import { HashRouter, Routes, Route } from "react-router-dom";
import { TooltipProvider } from "@/components/ui/tooltip";
import { useAuthStore } from "@/stores/auth-store";
import { LoginPage } from "@/features/auth/login-page";
import { } from "@/firebase";
import {
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
import SettingsPage from "@/features/settings-page";
import NetworkSelector from "@/features/network-selector";
import NetworkRoot from "@/features/network-root";
import ParticleViewResolver from "@/features/particles/particle-view-resolver";
import Layout from "@/features/layout";
import { Button } from "@/components/ui/button";
const queryClient = new QueryClient();
const App = () => {
const status = useAuthStore((s) => s.status);
const restoreSession = useAuthStore((s) => s.restoreSession);
useEffect(() => {
restoreSession();
}, [restoreSession]);
if (status === "idle" || status === "restoring") {
return (
<div className="flex min-h-screen items-center justify-center">
<p className="text-muted-foreground text-sm">Loading...</p>
</div>
);
}
if (status !== "authenticated") {
return <LoginPage />;
}
return <AuthenticatedApp />;
};
function AuthenticatedApp() {
return (
<HashRouter>
<Routes>
<Route path="settings" element={<SettingsPage />} />
<Route path="/">
<Route index element={<Layout><NetworkSelector /></Layout>} />
<Route path=":networkId">
<Route index element={<Layout><NetworkRoot /></Layout>} />
<Route path="*" element={<ParticleViewResolver />} />
</Route>
</Route>
</Routes>
</HashRouter>
);
}
const AppWithProviders = () => (
<TooltipProvider>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</TooltipProvider>
);
export default AppWithProviders;