From 30412ff25fc874b6cb151c0d0db7c146fc7e2e73 Mon Sep 17 00:00:00 2001
From: Christopher Maujean <christopher@maujean.org>
Date: Thu, 31 Jul 2025 00:49:23 -0700
Subject: [PATCH] put nexgraph auth and data access behind a url based feature
 flag

---
 src/App.tsx                               | 90 ++++++++++++++---------
 src/components/layout/DashboardLayout.tsx |  1 -
 src/pages/AccountPage.tsx                 | 66 +++++++++--------
 src/utils/featureFlags.ts                 | 11 +++
 test-feature-flag.md                      | 19 +++++
 5 files changed, 120 insertions(+), 67 deletions(-)
 create mode 100644 src/utils/featureFlags.ts
 create mode 100644 test-feature-flag.md

diff --git a/src/App.tsx b/src/App.tsx
index 147493c..855666e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { OnboardingProvider } from '@/contexts/OnboardingContext';
 import { BrowserNGLdoProvider, useNextGraphAuth } from '@/lib/nextgraph';
-import type { NextGraphAuth } from '@/types/nextgraph';
 import DashboardLayout from '@/components/layout/DashboardLayout';
 import SocialContractPage from '@/pages/SocialContractPage';
 import GroupJoinPage from '@/pages/GroupJoinPage';
@@ -22,10 +21,11 @@ import AccountPage from '@/pages/AccountPage';
 import NotificationsPage from '@/pages/NotificationsPage';
 import { createAppTheme } from '@/theme/theme';
 import { Container, Box, Typography, Button } from '@mui/material';
+import { isNextGraphEnabled } from '@/utils/featureFlags';
 
 const theme = createAppTheme('light');
 
-const AppContent = () => {
+const NextGraphAppContent = () => {
   const nextGraphAuth = useNextGraphAuth();
   const { session, login, logout } = nextGraphAuth || {};
   
@@ -86,37 +86,53 @@ const AppContent = () => {
     );
   }
 
-  return (
-    <OnboardingProvider>
-      <Router>
-        <Routes>
-          <Route path="/onboarding" element={<SocialContractPage />} />
-          <Route path="/join-group" element={<GroupJoinPage />} />
-          
-          <Route path="/*" element={
-            <DashboardLayout>
-              <Routes>
-                <Route path="/" element={<FeedPage />} />
-                <Route path="/feed" element={<FeedPage />} />
-                <Route path="/import" element={<ImportPage />} />
-                <Route path="/contacts" element={<ContactListPage />} />
-                <Route path="/contacts/:id" element={<ContactViewPage />} />
-                <Route path="/groups" element={<GroupPage />} />
-                <Route path="/groups/:groupId" element={<GroupDetailPage />} />
-                <Route path="/groups/:groupId/info" element={<GroupInfoPage />} />
-                <Route path="/posts" element={<PostsOffersPage />} />
-                <Route path="/messages" element={<MessagesPage />} />
-                <Route path="/notifications" element={<NotificationsPage />} />
-                <Route path="/account" element={<AccountPage />} />
-                <Route path="/invite" element={<InvitationPage />} />
-                <Route path="/onboarding/setup" element={<OnboardingPage />} />
-              </Routes>
-            </DashboardLayout>
-          } />
-        </Routes>
-      </Router>
-    </OnboardingProvider>
-  );
+  return <AppRoutes />;
+};
+
+const MockAppContent = () => {
+  return <AppRoutes />;
+};
+
+const AppRoutes = () => (
+  <OnboardingProvider>
+    <Router>
+      <Routes>
+        <Route path="/onboarding" element={<SocialContractPage />} />
+        <Route path="/join-group" element={<GroupJoinPage />} />
+        
+        <Route path="/*" element={
+          <DashboardLayout>
+            <Routes>
+              <Route path="/" element={<FeedPage />} />
+              <Route path="/feed" element={<FeedPage />} />
+              <Route path="/import" element={<ImportPage />} />
+              <Route path="/contacts" element={<ContactListPage />} />
+              <Route path="/contacts/:id" element={<ContactViewPage />} />
+              <Route path="/groups" element={<GroupPage />} />
+              <Route path="/groups/:groupId" element={<GroupDetailPage />} />
+              <Route path="/groups/:groupId/info" element={<GroupInfoPage />} />
+              <Route path="/posts" element={<PostsOffersPage />} />
+              <Route path="/messages" element={<MessagesPage />} />
+              <Route path="/notifications" element={<NotificationsPage />} />
+              <Route path="/account" element={<AccountPage />} />
+              <Route path="/invite" element={<InvitationPage />} />
+              <Route path="/onboarding/setup" element={<OnboardingPage />} />
+            </Routes>
+          </DashboardLayout>
+        } />
+      </Routes>
+    </Router>
+  </OnboardingProvider>
+);
+
+const AppContent = () => {
+  const useNextGraph = isNextGraphEnabled();
+  
+  if (useNextGraph) {
+    return <NextGraphAppContent />;
+  }
+  
+  return <MockAppContent />;
 };
 
 function App() {
@@ -124,9 +140,13 @@ function App() {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Container maxWidth="lg">
-        <BrowserNGLdoProvider>
+        {isNextGraphEnabled() ? (
+          <BrowserNGLdoProvider>
+            <AppContent />
+          </BrowserNGLdoProvider>
+        ) : (
           <AppContent />
-        </BrowserNGLdoProvider>
+        )}
       </Container>
     </ThemeProvider>
   );
diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx
index 455493f..113f787 100644
--- a/src/components/layout/DashboardLayout.tsx
+++ b/src/components/layout/DashboardLayout.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useNextGraphAuth } from '@/lib/nextgraph';
 import {
   Box,
   Drawer,
diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx
index 808b04a..837562d 100644
--- a/src/pages/AccountPage.tsx
+++ b/src/pages/AccountPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNextGraphAuth } from '@/lib/nextgraph';
+import { isNextGraphEnabled } from '@/utils/featureFlags';
 import {
   Typography,
   Box,
@@ -61,6 +62,7 @@ const AccountPage = () => {
   const theme = useTheme();
   const [searchParams] = useSearchParams();
   const nextGraphAuth = useNextGraphAuth();
+  const useNextGraph = isNextGraphEnabled();
   
   // Initialize tab from URL parameter
   const initialTab = parseInt(searchParams.get('tab') || '0', 10);
@@ -596,38 +598,40 @@ const AccountPage = () => {
         </TabPanel>
       </Box>
 
-      {/* Logout Button - Always visible at bottom */}
-      <Box sx={{ mt: 3, mb: 2, textAlign: 'center' }}>
-        <Button
-          variant="outlined"
-          startIcon={<Logout />}
-          onClick={async () => {
-            try {
-              console.log('NextGraph Auth object:', nextGraphAuth);
-              console.log('Available methods:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'none');
-              
-              if (nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
-                console.log('Calling logout...');
-                await nextGraphAuth.logout();
-              } else {
-                console.log('Logout function not available or not a function');
+      {/* Logout Button - Only show in NextGraph mode */}
+      {useNextGraph && (
+        <Box sx={{ mt: 3, mb: 2, textAlign: 'center' }}>
+          <Button
+            variant="outlined"
+            startIcon={<Logout />}
+            onClick={async () => {
+              try {
+                console.log('NextGraph Auth object:', nextGraphAuth);
+                console.log('Available methods:', nextGraphAuth ? Object.keys(nextGraphAuth) : 'none');
+                
+                if (useNextGraph && nextGraphAuth?.logout && typeof nextGraphAuth.logout === 'function') {
+                  console.log('Calling logout...');
+                  await nextGraphAuth.logout();
+                } else {
+                  console.log('Logout function not available or not a function');
+                }
+              } catch (error) {
+                console.error('Logout failed:', error);
               }
-            } catch (error) {
-              console.error('Logout failed:', error);
-            }
-          }}
-          sx={{ 
-            color: 'error.main',
-            borderColor: 'error.main',
-            '&:hover': {
-              borderColor: 'error.dark',
-              backgroundColor: 'error.light'
-            }
-          }}
-        >
-          Logout
-        </Button>
-      </Box>
+            }}
+            sx={{ 
+              color: 'error.main',
+              borderColor: 'error.main',
+              '&:hover': {
+                borderColor: 'error.dark',
+                backgroundColor: 'error.light'
+              }
+            }}
+          >
+            Logout
+          </Button>
+        </Box>
+      )}
 
       {/* rCard Management Dialog */}
       <RCardManagement
diff --git a/src/utils/featureFlags.ts b/src/utils/featureFlags.ts
new file mode 100644
index 0000000..6167c4e
--- /dev/null
+++ b/src/utils/featureFlags.ts
@@ -0,0 +1,11 @@
+export const getFeatureFlags = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  
+  return {
+    useNextGraph: urlParams.get('nextgraph') === 'true'
+  };
+};
+
+export const isNextGraphEnabled = (): boolean => {
+  return getFeatureFlags().useNextGraph;
+};
\ No newline at end of file
diff --git a/test-feature-flag.md b/test-feature-flag.md
new file mode 100644
index 0000000..8fdf0a9
--- /dev/null
+++ b/test-feature-flag.md
@@ -0,0 +1,19 @@
+# Feature Flag Testing
+
+## Default Mode (Mock Data)
+- URL: `http://localhost:5173/`
+- Expected: App loads directly without NextGraph login
+- Features: Uses mock JSON data from `/public/contacts.json`
+- No logout button shown in Account page
+
+## NextGraph Mode  
+- URL: `http://localhost:5173/?nextgraph=true`
+- Expected: Shows NextGraph login screen initially
+- Features: Uses LDO and NextGraph auth system
+- Logout button shown in Account page
+
+## Implementation Details
+- Feature flag detected via URL parameter `nextgraph=true`
+- Utility: `/src/utils/featureFlags.ts`
+- Main conditional logic in `/src/App.tsx`
+- Account page conditionally shows logout in NextGraph mode only
\ No newline at end of file