v2: ID verification by state, 15 photos/5 albums, 20 quick replies, logo, mobile polish

src/components/Providers.tsx

@@ -1,12 +1,22 @@
 "use client";
 
-import { useState, useEffect, createContext, useContext } from "react";
+import { useState, useEffect, createContext, useContext, useCallback } from "react";
 import { AgeGate } from "@/components/AgeGate";
 import { Nav } from "@/components/Nav";
-import { AuthProvider } from "@/lib/auth/context";
+import { MobileHeader } from "@/components/MobileHeader";
+import { IdVerificationModal } from "@/components/IdVerificationModal";
+import { AuthProvider, useAuth } from "@/lib/auth/context";
+import {
+  mustBlurExplicit,
+  requiresIdVerification,
+  getUserState,
+  isIdVerified,
+} from "@/lib/id-verification";
 
 const ActiveCountContext = createContext<(n: number) => void>(() => {});
 const VanillaModeContext = createContext(false);
+const IdBlurContext = createContext(false);
+const OpenIdVerificationContext = createContext<() => void>(() => {});
 
 export function useSetActiveCount() {
   return useContext(ActiveCountContext);
@@ -16,45 +26,105 @@ export function useVanillaMode() {
   return useContext(VanillaModeContext);
 }
 
+export function useIdBlur() {
+  return useContext(IdBlurContext);
+}
+
+export function useOpenIdVerification() {
+  return useContext(OpenIdVerificationContext);
+}
+
 interface ProvidersProps {
   children: React.ReactNode;
 }
 
-export function Providers({ children }: ProvidersProps) {
-  const [verified, setVerified] = useState(false);
+function InnerProviders({ children }: ProvidersProps) {
+  const { profile } = useAuth();
   const [vanillaMode, setVanillaMode] = useState(false);
   const [activeCount, setActiveCount] = useState(0);
-  const [mounted, setMounted] = useState(false);
+  const [idBlur, setIdBlur] = useState(false);
+  const [idModalOpen, setIdModalOpen] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
-    setVerified(localStorage.getItem("eg_age_verified") === "true");
     setVanillaMode(localStorage.getItem("eg_vanilla_mode") === "true");
-  }, []);
+    setIdBlur(mustBlurExplicit(profile?.id_verified));
+
+    const state = getUserState();
+    if (
+      requiresIdVerification(state) &&
+      !isIdVerified(profile?.id_verified) &&
+      localStorage.getItem("eg_id_verification_prompted") !== "true"
+    ) {
+      const timer = setTimeout(() => setIdModalOpen(true), 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [profile?.id_verified]);
 
   const handleVanillaToggle = (v: boolean) => {
     setVanillaMode(v);
     localStorage.setItem("eg_vanilla_mode", String(v));
   };
 
+  const handleIdVerified = useCallback(() => {
+    setIdBlur(false);
+    localStorage.setItem("eg_id_verification_prompted", "true");
+  }, []);
+
+  const openIdVerification = useCallback(() => {
+    setIdModalOpen(true);
+  }, []);
+
+  return (
+    <VanillaModeContext.Provider value={vanillaMode}>
+      <IdBlurContext.Provider value={idBlur}>
+        <OpenIdVerificationContext.Provider value={openIdVerification}>
+        <Nav
+          vanillaMode={vanillaMode}
+          onVanillaToggle={handleVanillaToggle}
+          activeCount={activeCount}
+          onIdVerifyClick={openIdVerification}
+          idBlur={idBlur}
+        />
+        <MobileHeader
+          vanillaMode={vanillaMode}
+          onVanillaToggle={handleVanillaToggle}
+          activeCount={activeCount}
+        />
+        <main className="md:pt-14 pt-12 pb-16 md:pb-0 min-h-screen min-h-[100dvh]">
+          <ActiveCountContext.Provider value={setActiveCount}>
+            {children}
+          </ActiveCountContext.Provider>
+        </main>
+        <IdVerificationModal
+          open={idModalOpen}
+          onClose={() => {
+            setIdModalOpen(false);
+            localStorage.setItem("eg_id_verification_prompted", "true");
+          }}
+          onVerified={handleIdVerified}
+        />
+        </OpenIdVerificationContext.Provider>
+      </IdBlurContext.Provider>
+    </VanillaModeContext.Provider>
+  );
+}
+
+export function Providers({ children }: ProvidersProps) {
+  const [verified, setVerified] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    setVerified(localStorage.getItem("eg_age_verified") === "true");
+  }, []);
+
   if (!mounted) return null;
 
   return (
     <>
       {!verified && <AgeGate onVerified={() => setVerified(true)} />}
       <AuthProvider>
-        <VanillaModeContext.Provider value={vanillaMode}>
-          <Nav
-            vanillaMode={vanillaMode}
-            onVanillaToggle={handleVanillaToggle}
-            activeCount={activeCount}
-          />
-          <main className="md:pt-14 pb-16 md:pb-0 min-h-screen">
-            <ActiveCountContext.Provider value={setActiveCount}>
-              {children}
-            </ActiveCountContext.Provider>
-          </main>
-        </VanillaModeContext.Provider>
+        <InnerProviders>{children}</InnerProviders>
       </AuthProvider>
     </>
   );