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";

export function App() {
    const queryClient = new QueryClient();

    return (
        <FlashProvider>
            <QueryClientProvider client={queryClient}>
                <Router base={"/dashboard"}>
                    <div class="columns is-gapless dashboard-frame">
                        <Sidebar></Sidebar>
                        <div class="column is-main-content">
                            <Switch>
                                <Route path={"/:guild/reminders"} component={Guild}></Route>
                                <Route>
                                    <Welcome />
                                </Route>
                            </Switch>
                        </div>
                    </div>
                </Router>
            </QueryClientProvider>
        </FlashProvider>
    );
}
