Open modal if no gist id or files

This commit is contained in:
Valtteri Karesto
2021-11-25 17:28:41 +02:00
parent a0eda59982
commit 2582981d85

View File

@@ -1,30 +1,66 @@
import { useEffect } from "react";
import "../styles/globals.css"; import "../styles/globals.css";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
import Head from "next/head";
import { SessionProvider } from "next-auth/react"; import { SessionProvider } from "next-auth/react";
import { ThemeProvider } from "next-themes"; import { ThemeProvider } from "next-themes";
import { Toaster } from "react-hot-toast"; import { Toaster } from "react-hot-toast";
import { useRouter } from "next/router";
import { IdProvider } from "@radix-ui/react-id";
import { darkTheme } from "../stitches.config"; import { darkTheme, css } from "../stitches.config";
import Navigation from "../components/Navigation"; import Navigation from "../components/Navigation";
import { fetchFiles, state } from "../state";
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) { function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
const router = useRouter();
const slug = router.query?.slug;
const gistId = (Array.isArray(slug) && slug[0]) ?? null;
useEffect(() => {
if (gistId && router.isReady) {
fetchFiles(gistId);
} else {
if (!gistId && router.isReady) {
state.mainModalOpen = true;
}
}
}, [gistId, router.isReady]);
return ( return (
<> <>
<SessionProvider session={session}> <Head>
<ThemeProvider <title>XRPL Hooks Playground</title>
attribute="class" </Head>
defaultTheme="dark" <IdProvider>
enableSystem={false} <SessionProvider session={session}>
value={{ <ThemeProvider
light: "light", attribute="class"
dark: darkTheme.className, defaultTheme="dark"
}} enableSystem={false}
> value={{
<Navigation /> light: "light",
<Component {...pageProps} /> dark: darkTheme.className,
<Toaster /> }}
</ThemeProvider> >
</SessionProvider> <Navigation />
<Component {...pageProps} />
<Toaster
toastOptions={{
className: css({
backgroundColor: "$mauve1",
color: "$mauve10",
fontSize: "$sm",
".dark &": {
backgroundColor: "$mauve4",
color: "$mauve12",
},
})(),
}}
/>
</ThemeProvider>
</SessionProvider>
</IdProvider>
</> </>
); );
} }