jude
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import {Sidebar} from "../Sidebar";
|
|
import {QueryClient, QueryClientProvider} from "react-query";
|
|
import {Route, Router, Switch} from "wouter";
|
|
import {Welcome} from "../Welcome";
|
|
import {Guild} from "../Guild";
|
|
import {FlashProvider} from "./FlashProvider";
|
|
import {TimezoneProvider} from "./TimezoneProvider";
|
|
import {User} from "../User";
|
|
import {GuildReminders} from "../Guild/GuildReminders";
|
|
import {GuildTodos} from "../Guild/GuildTodos";
|
|
import {ColorSchemeProvider, useColorScheme} from "./ColorSchemeProvider";
|
|
import {useEffect} from "preact/hooks";
|
|
|
|
const InnerApp = () => {
|
|
const {colorScheme} = useColorScheme();
|
|
|
|
useEffect(() => {
|
|
const body = document.querySelector("body");
|
|
body.className = body.className.replace(/scheme-\w+/g, "");
|
|
body.classList.add(`scheme-${colorScheme}`);
|
|
}, [colorScheme]);
|
|
|
|
return (
|
|
<Router base={"/dashboard"}>
|
|
<div class={`columns is-gapless dashboard-frame scheme-${colorScheme}`}>
|
|
<Sidebar/>
|
|
<div class="column is-main-content">
|
|
<div style={{margin: "0 12px 12px 12px"}}>
|
|
<Switch>
|
|
<Route path={"/@me/reminders"} component={User}></Route>
|
|
<Route path={"/:guild/reminders"}>
|
|
<Guild>
|
|
<GuildReminders/>
|
|
</Guild>
|
|
</Route>
|
|
<Route path={"/:guild/todos"}>
|
|
<Guild>
|
|
<GuildTodos/>
|
|
</Guild>
|
|
</Route>
|
|
<Route>
|
|
<Welcome/>
|
|
</Route>
|
|
</Switch>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Router>
|
|
);
|
|
};
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
export function App() {
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ColorSchemeProvider>
|
|
<TimezoneProvider>
|
|
<FlashProvider>
|
|
<InnerApp/>
|
|
</FlashProvider>
|
|
</TimezoneProvider>
|
|
</ColorSchemeProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|