Open modal if no gist id or files

2021-11-25 17:28:41 +02:00
parent a0eda59982
commit 2582981d85
1 changed files with 52 additions and 16 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,15 +1,38 @@
+import { useEffect } from "react";
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "next-themes";
 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 { fetchFiles, state } from "../state";

 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 (
    <>
+      <Head>
+        <title>XRPL Hooks Playground</title>
+      </Head>
+      <IdProvider>
        <SessionProvider session={session}>
          <ThemeProvider
            attribute="class"
@@ -22,9 +45,22 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
          >
            <Navigation />
            <Component {...pageProps} />
-          <Toaster />
+            <Toaster
+              toastOptions={{
+                className: css({
+                  backgroundColor: "$mauve1",
+                  color: "$mauve10",
+                  fontSize: "$sm",
+                  ".dark &": {
+                    backgroundColor: "$mauve4",
+                    color: "$mauve12",
+                  },
+                })(),
+              }}
+            />
          </ThemeProvider>
        </SessionProvider>
+      </IdProvider>
    </>
  );
 }