slices.network
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
add new frontend client using graphql and relay, get graphql schema at feature parity with the xrpc endpoints
1import { StrictMode, Suspense } from "react";
2import { createRoot } from "react-dom/client";
3import { BrowserRouter, Routes, Route } from "react-router-dom";
4import "./index.css";
5import Home from "./pages/Home.tsx";
6import Profile from "./pages/Profile.tsx";
7import ProfileSettings from "./pages/ProfileSettings.tsx";
8import SliceOverview from "./pages/SliceOverview.tsx";
9import SliceLexiconDetail from "./pages/SliceLexiconDetail.tsx";
10import SliceRecords from "./pages/SliceRecords.tsx";
11import SliceApiDocs from "./pages/SliceApiDocs.tsx";
12import SliceJetstream from "./pages/SliceJetstream.tsx";
13import SliceSync from "./pages/SliceSync.tsx";
14import SliceSyncJob from "./pages/SliceSyncJob.tsx";
15import SliceSettings from "./pages/SliceSettings.tsx";
16import OAuthClients from "./pages/OAuthClients.tsx";
17import Docs from "./pages/Docs.tsx";
18import DocsDetail from "./pages/DocsDetail.tsx";
19import Login from "./pages/Login.tsx";
20import Waitlist from "./pages/Waitlist.tsx";
21import LoadingFallback from "./LoadingFallback.tsx";
22import { RelayAuthProvider } from "./lib/relay-auth-provider.tsx";
23import { useSession, SessionContext } from "./lib/useSession.ts";
24import { ProtectedRoute } from "./components/ProtectedRoute.tsx";
25
26function App() {
27 const sessionData = useSession();
28
29 // Wait for session to load before rendering anything
30 if (sessionData.isLoading) {
31 return <LoadingFallback />;
32 }
33
34 return (
35 <SessionContext.Provider value={sessionData}>
36 <BrowserRouter>
37 <RelayAuthProvider>
38 <Suspense fallback={<LoadingFallback />}>
39 <Routes>
40 <Route path="/login" element={<Login />} />
41 <Route path="/waitlist" element={<Waitlist />} />
42 <Route path="/" element={<Home />} />
43 <Route path="/docs" element={<ProtectedRoute><Docs /></ProtectedRoute>} />
44 <Route path="/docs/:slug" element={<ProtectedRoute><DocsDetail /></ProtectedRoute>} />
45 <Route path="/profile/:handle" element={<Profile />} />
46 <Route path="/profile/:handle/settings" element={<ProtectedRoute><ProfileSettings /></ProtectedRoute>} />
47 <Route path="/profile/:handle/slice/:rkey" element={<SliceOverview />} />
48 <Route path="/profile/:handle/slice/:rkey/lexicons/:lexiconRkey" element={<SliceLexiconDetail />} />
49 <Route path="/profile/:handle/slice/:rkey/records" element={<SliceRecords />} />
50 <Route path="/profile/:handle/slice/:rkey/api-docs" element={<ProtectedRoute><SliceApiDocs /></ProtectedRoute>} />
51 <Route path="/profile/:handle/slice/:rkey/jetstream" element={<SliceJetstream />} />
52 <Route path="/profile/:handle/slice/:rkey/sync" element={<ProtectedRoute><SliceSync /></ProtectedRoute>} />
53 <Route path="/profile/:handle/slice/:rkey/sync/:jobId" element={<ProtectedRoute><SliceSyncJob /></ProtectedRoute>} />
54 <Route path="/profile/:handle/slice/:rkey/oauth" element={<ProtectedRoute><OAuthClients /></ProtectedRoute>} />
55 <Route path="/profile/:handle/slice/:rkey/settings" element={<ProtectedRoute><SliceSettings /></ProtectedRoute>} />
56 </Routes>
57 </Suspense>
58 </RelayAuthProvider>
59 </BrowserRouter>
60 </SessionContext.Provider>
61 );
62}
63
64createRoot(document.getElementById("root")!).render(
65 <StrictMode>
66 <App />
67 </StrictMode>
68);