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,30 +1,66 @@
+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 (
    <>
-      <SessionProvider session={session}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem={false}
-          value={{
-            light: "light",
-            dark: darkTheme.className,
-          }}
-        >
-          <Navigation />
-          <Component {...pageProps} />
-          <Toaster />
-        </ThemeProvider>
-      </SessionProvider>
+      <Head>
+        <title>XRPL Hooks Playground</title>
+      </Head>
+      <IdProvider>
+        <SessionProvider session={session}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem={false}
+            value={{
+              light: "light",
+              dark: darkTheme.className,
+            }}
+          >
+            <Navigation />
+            <Component {...pageProps} />
+            <Toaster
+              toastOptions={{
+                className: css({
+                  backgroundColor: "$mauve1",
+                  color: "$mauve10",
+                  fontSize: "$sm",
+                  ".dark &": {
+                    backgroundColor: "$mauve4",
+                    color: "$mauve12",
+                  },
+                })(),
+              }}
+            />
+          </ThemeProvider>
+        </SessionProvider>
+      </IdProvider>
    </>
  );
 }