tutu/src/App.tsx

92 lines
2.5 KiB
TypeScript
Raw Normal View History

2024-07-14 12:28:44 +00:00
import { Route, Router } from "@solidjs/router";
import { ThemeProvider } from "@suid/material";
import {
Component,
createRenderEffect,
createSignal,
ErrorBoundary,
lazy,
2024-09-26 09:23:40 +00:00
onCleanup,
} from "solid-js";
2024-07-14 12:28:44 +00:00
import { useRootTheme } from "./material/mui.js";
import {
Provider as ClientProvider,
createMastoClientFor,
type Session,
} from "./masto/clients.js";
import { $accounts } from "./accounts/stores.js";
import { useStore } from "@nanostores/solid";
2024-09-26 09:23:40 +00:00
import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
2024-07-14 12:28:44 +00:00
const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
const AccountMastodonOAuth2Callback = lazy(
() => import("./accounts/MastodonOAuth2Callback.js"),
);
const TimelineHome = lazy(() => import("./timelines/Home.js"));
2024-07-22 13:57:04 +00:00
const Settings = lazy(() => import("./settings/Settings.js"));
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
2024-07-14 12:28:44 +00:00
const Routing: Component = () => {
return (
<Router>
2024-07-22 13:57:04 +00:00
<Route path="/" component={TimelineHome}>
<Route path=""></Route>
<Route path="/settings" component={Settings}></Route>
<Route path="/:acct/:id" component={TootBottomSheet}></Route>
2024-07-22 13:57:04 +00:00
</Route>
2024-07-14 12:28:44 +00:00
<Route path={"/accounts"}>
<Route path={"/sign-in"} component={AccountSignIn} />
<Route
path={"/oauth2/mastodon"}
component={AccountMastodonOAuth2Callback}
/>
2024-07-14 12:28:44 +00:00
</Route>
</Router>
);
};
const App: Component = () => {
const theme = useRootTheme();
const accts = useStore($accounts);
const clientStore = createSignal<Session[]>([]);
2024-09-26 09:23:40 +00:00
const lang = useLanguage();
createRenderEffect(() => {
const [, setClients] = clientStore;
setClients(
accts().map((x) => ({ account: x, client: createMastoClientFor(x) })),
);
});
2024-09-26 09:23:40 +00:00
createRenderEffect(() => {
const root = document.querySelector(":root")!;
root.setAttribute("lang", lang());
});
onCleanup(() => {
const root = document.querySelector(":root")!;
root.removeAttribute("lang");
});
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
2024-08-05 08:24:34 +00:00
2024-07-14 12:28:44 +00:00
return (
<ErrorBoundary
fallback={(err, reset) => {
console.error(err);
2024-08-05 08:24:34 +00:00
return <UnexpectedError error={err} />;
}}
>
<ThemeProvider theme={theme()}>
2024-09-26 09:23:40 +00:00
<DateFnScope>
<ClientProvider value={clientStore}>
<Routing />
</ClientProvider>
</DateFnScope>
</ThemeProvider>
</ErrorBoundary>
2024-07-14 12:28:44 +00:00
);
};
export default App;