indexx.dev
forked from
chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network
tealfm-slices.wisp.place
tealfm
slices
1import { StrictMode, Suspense } from "react";
2import { createRoot } from "react-dom/client";
3import { BrowserRouter, Routes, Route } from "react-router-dom";
4import "./index.css";
5import App from "./App.tsx";
6import Profile from "./Profile.tsx";
7import TopTracks from "./TopTracks.tsx";
8import TopAlbums from "./TopAlbums.tsx";
9import LoadingFallback from "./LoadingFallback.tsx";
10import { RelayEnvironmentProvider } from "react-relay";
11import { Environment, Network, type FetchFunction } from "relay-runtime";
12
13const HTTP_ENDPOINT =
14 "https://api.slices.network/graphql?slice=at://did:plc:fpruhuo22xkm5o7ttr2ktxdo/network.slices.slice/3m257yljpbg2a";
15
16const fetchGraphQL: FetchFunction = async (request, variables) => {
17 const resp = await fetch(HTTP_ENDPOINT, {
18 method: "POST",
19 headers: { "Content-Type": "application/json" },
20 body: JSON.stringify({ query: request.text, variables }),
21 });
22 if (!resp.ok) {
23 throw new Error("Response failed.");
24 }
25 return await resp.json();
26};
27
28const environment = new Environment({
29 network: Network.create(fetchGraphQL),
30});
31
32createRoot(document.getElementById("root")!).render(
33 <StrictMode>
34 <BrowserRouter>
35 <RelayEnvironmentProvider environment={environment}>
36 <Suspense fallback={<LoadingFallback />}>
37 <Routes>
38 <Route path="/" element={<App />} />
39 <Route path="/tracks" element={<TopTracks />} />
40 <Route path="/albums" element={<TopAlbums />} />
41 <Route path="/profile/:handle" element={<Profile />} />
42 </Routes>
43 </Suspense>
44 </RelayEnvironmentProvider>
45 </BrowserRouter>
46 </StrictMode>
47);