Merge pull request #8 from MutinyWallet/check-if-approved

check with backend for approval

src/App.tsx

@@ -1,27 +1,17 @@
-import { Routes, Route } from "react-router-dom";
+import { useLoaderData } from "react-router-dom";
 
 import Join from "@/routes/Join";
-import Layout from "@/components/Layout";
-import SecretWaitlistSkipper from "@/routes/SecretWaitlistSkipper";
 import Home from "@/routes/Home";
-import Scanner from "@/routes/Scanner";
+import { WaitlistItem } from "./types";
 
 function App() {
-  let active = localStorage.getItem('active') || "";
+  const data = useLoaderData() as WaitlistItem | null;
+
   return (
-    <div className="App">
-
-      {/* globals such as header will go here  */}
-
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={active === "true" ? <Home /> : <Join />} />
-          <Route path="secretwaitlistskipper" element={<SecretWaitlistSkipper />} />
-          <Route path="scanner" element={<Scanner />} />
-        </Route>
-      </Routes>
-    </div>
-  );
+    <>
+      {data?.approval_date ? <Home /> : <Join />}
+    </>
+  )
 }
 
 export default App;

src/components/WaitlistAlreadyIn.tsx

@@ -1,6 +1,5 @@
 import Notes from "./Notes";
 import { NostrProvider } from "nostr-react";
-import { useState } from "react";
 
 const relayUrls = [
     "wss://nostr.zebedee.cloud",
@@ -13,15 +12,6 @@ const relayUrls = [
 ]
 
 export function WaitlistAlreadyIn() {
-    const [skipCount, setSkipCount] = useState(0);
-
-    function skipCounter() {
-        setSkipCount(skipCount + 1);
-        if (skipCount >= 6) {
-            window.location.href = "/secretwaitlistskipper";
-        }
-    }
-
     return (
         <main className='flex flex-col gap-2 sm:gap-4 py-8 px-4 max-w-xl mx-auto items-center drop-shadow-blue-glow'>
             <h1 className="text-4xl font-bold">You're on a list!</h1>
@@ -34,7 +24,6 @@ export function WaitlistAlreadyIn() {
                     <Notes />
                 </NostrProvider>
             </div>
-            <button className="opacity-0" onClick={skipCounter}>Skip</button>
         </main>
     );
 }

src/main.tsx

@@ -1,10 +1,31 @@
 import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import App from '@/App'
+import Scanner from '@/routes/Scanner';
 import './index.css'
+import { fetchApprovedStatus } from './utils/fetchApprovedLoader';
+import Layout from './components/Layout';
+
+let waitlist_id = localStorage.getItem('waitlist_id')
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        loader: async () => { return fetchApprovedStatus(waitlist_id || "") },
+        index: true,
+        element: <App />,
+      },
+      {
+        path: "scanner",
+        element: <Scanner />,
+      },
+    ],
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
+  <RouterProvider router={router} />
 )

src/routes/SecretWaitlistSkipper.tsx

@@ -1,30 +0,0 @@
-import button from "@/styles/button";
-import { useState } from "react";
-
-export default function SecretWaitlistSkipper() {
-    const [active] = useState(localStorage.getItem('active') || "");
-
-    function toggleSkipWaitlist() {
-        // If active in localstorage is true, set to false, otherwie set to true
-        if (active === "true") {
-            localStorage.setItem("active", "false");
-        } else {
-            localStorage.setItem("active", "true");
-        }
-
-        // Redirect to index
-        window.location.href = "/";
-    }
-    return (
-        <div className="w-full h-screen flex flex-col items-center justify-center">
-            <div className="flex-0">
-                {active === "true" &&
-                    <button className={button({ intent: "active" })} onClick={toggleSkipWaitlist}><span className="drop-shadow-sm shadow-black">I love waiting, hate cheating</span></button>
-                }
-                {active !== "true" &&
-                    <button className={button({ intent: "active" })} onClick={toggleSkipWaitlist}><span className="drop-shadow-sm shadow-black">I hate waiting, love cheating</span></button>
-                }
-            </div>
-        </div>
-    )
-}

src/types/index.ts

@@ -0,0 +1,7 @@
+export type WaitlistItem = {
+    user_type: "nostr" | "email"
+    id: string
+    comment: string
+    date: string
+    approval_date: string
+}

src/utils/fetchApprovedLoader.ts

@@ -0,0 +1,14 @@
+import { WaitlistItem } from "@/types";
+
+export async function fetchApprovedStatus(waitlistId: string): Promise<WaitlistItem | null> {
+    // Fetch the waitlist status from the backend
+    // Will error if it doesn't exist so we just return undefined
+    try {
+        let res = await fetch(`https://waitlist.mutiny-waitlist.workers.dev/waitlist/${waitlistId}`)
+        let data = await res.json();
+        return data
+    } catch (e) {
+        console.error(e)
+        return null
+    }
+}