Demo connect buttong

Author: stevensJourney

demos/react-supabase-todolist/src/app/views/layout.tsx

@@ -1,3 +1,6 @@
+import { LOGIN_ROUTE, SQL_CONSOLE_ROUTE, TODO_LISTS_ROUTE } from '@/app/router';
+import { useNavigationPanel } from '@/components/navigation/NavigationPanelContext';
+import { useSupabase } from '@/components/providers/SystemProvider';
 import ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -17,16 +20,15 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Menu,
+  MenuItem,
   Toolbar,
   Typography,
   styled
 } from '@mui/material';
-import React from 'react';
 import { usePowerSync, useStatus } from '@powersync/react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useSupabase } from '@/components/providers/SystemProvider';
-import { useNavigationPanel } from '@/components/navigation/NavigationPanelContext';
-import { LOGIN_ROUTE, SQL_CONSOLE_ROUTE, TODO_LISTS_ROUTE } from '@/app/router';
 
 export default function ViewsLayout({ children }: { children: React.ReactNode }) {
   const powerSync = usePowerSync();
@@ -37,6 +39,8 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
   const [openDrawer, setOpenDrawer] = React.useState(false);
   const { title } = useNavigationPanel();
 
+  const [connectionAnchor, setConnectionAnchor] = React.useState<null | HTMLElement>(null);
+
   const NAVIGATION_ITEMS = React.useMemo(
     () => [
       {
@@ -72,16 +76,47 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
             color="inherit"
             aria-label="menu"
             sx={{ mr: 2 }}
-            onClick={() => setOpenDrawer(!openDrawer)}
-          >
+            onClick={() => setOpenDrawer(!openDrawer)}>
             <MenuIcon />
           </IconButton>
           <Box sx={{ flexGrow: 1 }}>
             <Typography>{title}</Typography>
           </Box>
           <NorthIcon sx={{ marginRight: '-10px' }} color={status?.dataFlowStatus.uploading ? 'primary' : 'inherit'} />
           <SouthIcon color={status?.dataFlowStatus.downloading ? 'primary' : 'inherit'} />
-          {status?.connected ? <WifiIcon /> : <SignalWifiOffIcon />}
+          <Box
+            sx={{ cursor: 'pointer' }}
+            onClick={(event) => {
+              setConnectionAnchor(event.currentTarget);
+            }}>
+            {status?.connected ? <WifiIcon /> : <SignalWifiOffIcon />}
+            {/* Allows for manual connection and disconnect for testing purposes */}
+            <Menu
+              id="connection-menu"
+              anchorEl={connectionAnchor}
+              open={Boolean(connectionAnchor)}
+              onClose={() => setConnectionAnchor(null)}>
+              {status?.connected ? (
+                <MenuItem
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setConnectionAnchor(null);
+                    powerSync.disconnect();
+                  }}>
+                  Disconnect
+                </MenuItem>
+              ) : supabase ? (
+                <MenuItem
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setConnectionAnchor(null);
+                    powerSync.connect(supabase);
+                  }}>
+                  Connect
+                </MenuItem>
+              ) : null}
+            </Menu>
+          </Box>
         </Toolbar>
       </S.TopBar>
       <Drawer anchor={'left'} open={openDrawer} onClose={() => setOpenDrawer(false)}>
@@ -95,8 +130,7 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
                   await item.beforeNavigate?.();
                   navigate(item.path);
                   setOpenDrawer(false);
-                }}
-              >
+                }}>
                 <ListItemIcon>{item.icon()}</ListItemIcon>
                 <ListItemText primary={item.title} />
               </ListItemButton>