feat: add session polling to detect expired JWT and auto-update auth state

Author: elainefan331

src/App.tsx

@@ -4,6 +4,7 @@ import Routes from "components/Routes";
 import theme from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useGAPageviews } from "hooks/useGAPageviews";
+import { useSessionPoller } from "hooks/useSessionPoller";
 import { useEffect, useState } from "react";
 import React from "react";
 import { BrowserRouter, useLocation } from "react-router-dom";
@@ -26,6 +27,7 @@ function AuthHandler() {
   const navigate = useNavigate();
   const hasProcessedOAuthRef = React.useRef(false);
 
+  useSessionPoller();
   // Handle browser back/forward navigation
   useEffect(() => {
     const handlePopState = () => {

src/components/User/Dashboard/DatasetOrganizer/LLMPanel.tsx

@@ -18,7 +18,13 @@ import {
   getConversionScriptPrompt,
   getBIDSPlanPrompt,
 } from "./utils/llmPrompts";
-import { Close, ContentCopy, Download, AutoAwesome } from "@mui/icons-material";
+import {
+  Close,
+  ContentCopy,
+  Download,
+  AutoAwesome,
+  DriveFileMove,
+} from "@mui/icons-material";
 import {
   Box,
   Paper,
@@ -1427,7 +1433,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
                   ? "✓  2. Generate BIDS Trio"
                   : "2. Generate BIDS Trio"}
               </Button>
-              <Typography
+              {/* <Typography
                 variant="body2"
                 sx={{
                   textAlign: "left",
@@ -1436,7 +1442,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
                 }}
               >
                 Ready to Generate Script ↓
-              </Typography>
+              </Typography> */}
             </Box>
           </Box>
 
@@ -1456,7 +1462,7 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
               "&.Mui-disabled": { background: "#e0e0e0", color: "#9e9e9e" },
             }}
           >
-            {loading ? "Generating..." : "3a. Generate BIDSPlan.yaml"}
+            {loading ? "Generating..." : "3. Generate BIDSPlan.yaml"}
           </Button>
 
           {/* <Button
@@ -1531,17 +1537,16 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
             >
               Copy
             </Button>
-            <Button
+            {/* <Button
               size="small"
               startIcon={<Download />}
               // onClick={handleDownload}
               // disabled={!generatedScript}
               onClick={bidsPlan ? handleDownloadPlan : handleDownload}
               disabled={!bidsPlan && !generatedScript}
             >
-              {/* Download */}
               {bidsPlan ? "Download BIDSPlan.yaml" : "Download Script"}
-            </Button>
+            </Button> */}
             <Button
               size="small"
               startIcon={<Download />}
@@ -1553,13 +1558,12 @@ const LLMPanel: React.FC<LLMPanelProps> = ({
             </Button>
             <Button
               size="small"
-              startIcon={<Download />}
+              startIcon={<DriveFileMove />}
               onClick={handleSaveZip}
               disabled={!bidsPlan || !trioGenerated}
               sx={{ color: Colors.darkGreen, borderColor: Colors.darkGreen }}
-              variant="outlined"
             >
-              💾 Save to VFS
+              Save to Virtual File System
             </Button>
           </Box>
 

src/components/User/Dashboard/DatasetOrganizer/index.tsx

@@ -281,9 +281,9 @@ const DatasetOrganizer: React.FC = () => {
               },
             }}
           >
-            Generate BIDS Script
+            Generate BIDS Plan
           </Button>
-          <Button
+          {/* <Button
             variant="contained"
             startIcon={<GetApp />}
             onClick={handleExportJSON}
@@ -298,7 +298,7 @@ const DatasetOrganizer: React.FC = () => {
             }}
           >
             Export JSON
-          </Button>
+          </Button> */}
           <Button
             variant="contained"
             startIcon={<Save />}

src/hooks/useSessionPoller.ts

@@ -0,0 +1,43 @@
+import { useAppDispatch } from "./useAppDispatch";
+import { useAppSelector } from "./useAppSelector";
+import { useEffect, useRef } from "react";
+import { getCurrentUser } from "redux/auth/auth.action";
+
+const POLL_INTERVAL_MS = 5 * 60 * 1000; // 5 minutes
+
+export const useSessionPoller = () => {
+  const dispatch = useAppDispatch();
+  const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Interval polling
+  useEffect(() => {
+    if (!isLoggedIn) {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      return;
+    }
+
+    intervalRef.current = setInterval(() => {
+      dispatch(getCurrentUser());
+    }, POLL_INTERVAL_MS);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isLoggedIn, dispatch]);
+
+  // Immediate check when user returns to the tab
+  useEffect(() => {
+    if (!isLoggedIn) return;
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        dispatch(getCurrentUser());
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [isLoggedIn, dispatch]);
+};