Fix join help queue race (#589)

Author: jon-bell

app/course/[course_id]/office-hours/[queue_id]/new/newRequestForm.tsx

@@ -10,7 +10,7 @@ import {
   useHelpRequestStudents,
   useHelpRequestTemplates,
   useHelpQueues,
-  useHelpQueueAssignments,
+  useActiveHelpQueueAssignments,
   useOfficeHoursController
 } from "@/hooks/useOfficeHoursRealtime";
 import {
@@ -119,12 +119,13 @@ export default function HelpRequestForm() {
   const isLoadingQueues = false; // Individual hooks don't expose loading state
   const connectionError = null; // Will be handled by connection status if needed
 
-  // Get help queue assignments to check for active staff
-  const allHelpQueueAssignments = useHelpQueueAssignments();
+  // Get active help queue assignments to check for active staff
+  // Uses useActiveHelpQueueAssignments which subscribes to individual item changes
+  // for proper reactivity when staff starts/stops working
+  const activeHelpQueueAssignments = useActiveHelpQueueAssignments();
   const queueIdsWithActiveStaff = useMemo(() => {
-    const activeAssignments = allHelpQueueAssignments.filter((assignment) => assignment.is_active);
-    return new Set(activeAssignments.map((a) => a.help_queue_id));
-  }, [allHelpQueueAssignments]);
+    return new Set(activeHelpQueueAssignments.map((a) => a.help_queue_id));
+  }, [activeHelpQueueAssignments]);
 
   // Get all help requests and students data from realtime
   const allHelpRequests = useHelpRequests();
@@ -310,28 +311,39 @@ export default function HelpRequestForm() {
     ).length;
   }, [selectedHelpQueue, allHelpRequests]);
 
-  // Validate that selected queue has active staff
+  // Validate that selected queue is available and has active staff
   useEffect(() => {
     if (selectedHelpQueue) {
       const selectedQueue = helpQueues.find((q) => q.id === selectedHelpQueue);
-      if (selectedQueue && !queueIdsWithActiveStaff.has(selectedHelpQueue)) {
+
+      // Check if queue exists in available queues list
+      if (!selectedQueue) {
+        // Queue is not available (available === false) or doesn't exist
+        const queueFromAll = allHelpQueues.find((q) => q.id === selectedHelpQueue);
+        if (queueFromAll) {
+          setError("help_queue", {
+            type: "manual",
+            message: "This queue is not currently accepting new requests. Please select a different queue."
+          });
+        }
+      } else if (!queueIdsWithActiveStaff.has(selectedHelpQueue)) {
         setError("help_queue", {
           type: "manual",
           message: "This queue is not currently staffed. Please select a queue with active staff members."
         });
       } else {
-        // Clear the error if queue has active staff
+        // Clear any manual queue errors if queue is available and staffed
         const errorMessage = errors.help_queue?.message;
         if (
           errors.help_queue?.type === "manual" &&
           typeof errorMessage === "string" &&
-          errorMessage.includes("not currently staffed")
+          (errorMessage.includes("not currently staffed") || errorMessage.includes("not currently accepting"))
         ) {
           clearErrors("help_queue");
         }
       }
     }
-  }, [selectedHelpQueue, helpQueues, queueIdsWithActiveStaff, setError, clearErrors, errors.help_queue]);
+  }, [selectedHelpQueue, helpQueues, allHelpQueues, queueIdsWithActiveStaff, setError, clearErrors, errors.help_queue]);
 
   const onSubmit = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {

app/course/[course_id]/office-hours/[queue_id]/new/page.tsx

@@ -2,7 +2,7 @@
 
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
-import { useHelpQueue, useHelpQueueAssignments } from "@/hooks/useOfficeHoursRealtime";
+import { useHelpQueue, useActiveHelpQueueAssignments } from "@/hooks/useOfficeHoursRealtime";
 import { Box, Card, Container, Text, Button } from "@chakra-ui/react";
 
 import HelpRequestForm from "./newRequestForm";
@@ -11,25 +11,31 @@ export default function NewRequestPage() {
   const { queue_id, course_id } = useParams();
   const router = useRouter();
   const helpQueue = useHelpQueue(Number(queue_id));
-  const allHelpQueueAssignments = useHelpQueueAssignments();
+  // Use the specialized hook that subscribes to individual item changes
+  const activeHelpQueueAssignments = useActiveHelpQueueAssignments();
 
-  // Check if queue has an active assignment
+  // Check if queue has an active assignment (staff is working)
   const hasActiveAssignment = useMemo(() => {
-    if (!allHelpQueueAssignments) return false;
-    return allHelpQueueAssignments.some(
-      (assignment) => assignment.help_queue_id === Number(queue_id) && assignment.is_active
-    );
-  }, [allHelpQueueAssignments, queue_id]);
+    if (!activeHelpQueueAssignments) return false;
+    return activeHelpQueueAssignments.some((assignment) => assignment.help_queue_id === Number(queue_id));
+  }, [activeHelpQueueAssignments, queue_id]);
+
+  // Check if queue is available for new requests (both available flag AND has active staff)
+  const isQueueOpen = helpQueue?.available && hasActiveAssignment;
 
   useEffect(() => {
-    if (helpQueue && !hasActiveAssignment) {
-      // Redirect back to queue page if queue has no active assignment
+    if (helpQueue && !isQueueOpen) {
+      // Redirect back to queue page if queue is not open for new requests
       router.replace(`/course/${course_id}/office-hours/${queue_id}`);
     }
-  }, [helpQueue, hasActiveAssignment, router, course_id, queue_id]);
+  }, [helpQueue, isQueueOpen, router, course_id, queue_id]);
+
+  // Show error message if queue is not open for new requests
+  if (helpQueue && !isQueueOpen) {
+    const reason = !helpQueue.available
+      ? "This queue is not currently accepting new requests."
+      : "This queue is not currently staffed.";
 
-  // Show error message if queue has no active assignment
-  if (helpQueue && !hasActiveAssignment) {
     return (
       <Container>
         <Box py={8}>
@@ -39,7 +45,7 @@ export default function NewRequestPage() {
                 Queue Closed for New Requests
               </Text>
               <Text color="fg.muted" mb={4}>
-                This queue is currently closed for new requests. You can still view existing requests and queue status.
+                {reason} You can still view existing requests and queue status.
               </Text>
               <Button onClick={() => router.push(`/course/${course_id}/office-hours/${queue_id}`)} variant="outline">
                 Back to Queue

components/help-queue/office-hours-header.tsx

@@ -8,7 +8,7 @@ import NextLink from "next/link";
 import { FaPlus } from "react-icons/fa";
 import { FiChevronRight, FiChevronDown } from "react-icons/fi";
 import { useMemo } from "react";
-import { useHelpQueueAssignments, useHelpQueues } from "@/hooks/useOfficeHoursRealtime";
+import { useActiveHelpQueueAssignments, useHelpQueues } from "@/hooks/useOfficeHoursRealtime";
 import { useClassProfiles } from "@/hooks/useClassProfiles";
 import { useParams, useRouter, usePathname } from "next/navigation";
 import { useOfficeHoursController } from "@/hooks/useOfficeHoursRealtime";
@@ -62,7 +62,9 @@ export function OfficeHoursHeader({
   const pathname = usePathname();
   const { private_profile_id } = useClassProfiles();
   const isInstructor = useIsInstructor();
-  const allQueueAssignments = useHelpQueueAssignments();
+  // Use the specialized hook that subscribes to individual item changes
+  // This ensures the header updates when staff starts/stops working
+  const activeQueueAssignments = useActiveHelpQueueAssignments();
   const helpQueues = useHelpQueues();
   const controller = useOfficeHoursController();
   const { helpQueueAssignments } = controller;
@@ -78,26 +80,26 @@ export function OfficeHoursHeader({
   }, [currentRequest?.queueId, queue_id]);
 
   // Get queues with active staff assignments (for student mode)
+  // Uses activeQueueAssignments which properly subscribes to is_active changes
   const queuesWithActiveStaff = useMemo(() => {
     if (isManageMode) return [];
-    const activeAssignments = allQueueAssignments.filter((assignment) => assignment.is_active);
-    const queueIdsWithActiveStaff = new Set(activeAssignments.map((a) => a.help_queue_id));
+    const queueIdsWithActiveStaff = new Set(activeQueueAssignments.map((a) => a.help_queue_id));
     return helpQueues
       .filter((queue) => queue.available && queueIdsWithActiveStaff.has(queue.id))
       .sort((a, b) => a.name.localeCompare(b.name));
-  }, [allQueueAssignments, helpQueues, isManageMode]);
+  }, [activeQueueAssignments, helpQueues, isManageMode]);
 
   // Get queues the TA is currently working
   const workingQueues = useMemo(() => {
     if (!isManageMode || !private_profile_id) return [];
-    return allQueueAssignments
-      .filter((assignment) => assignment.ta_profile_id === private_profile_id && assignment.is_active)
+    return activeQueueAssignments
+      .filter((assignment) => assignment.ta_profile_id === private_profile_id)
       .map((assignment) => {
         const queue = helpQueues.find((q) => q.id === assignment.help_queue_id);
         return queue;
       })
       .filter(Boolean);
-  }, [allQueueAssignments, helpQueues, private_profile_id, isManageMode]);
+  }, [activeQueueAssignments, helpQueues, private_profile_id, isManageMode]);
 
   const handleStartStopWorking = async (queueId: number, isWorking: boolean, assignmentId?: number) => {
     // Guard: check if private_profile_id is present before proceeding
@@ -315,8 +317,9 @@ export function OfficeHoursHeader({
                   // Stop all working queues
                   for (const queue of workingQueues) {
                     if (!queue) continue;
-                    const assignment = allQueueAssignments.find(
-                      (a) => a.ta_profile_id === private_profile_id && a.is_active && a.help_queue_id === queue.id
+                    // activeQueueAssignments already filtered for is_active === true
+                    const assignment = activeQueueAssignments.find(
+                      (a) => a.ta_profile_id === private_profile_id && a.help_queue_id === queue.id
                     );
                     if (assignment) {
                       await handleStartStopWorking(queue.id, true, assignment.id);

hooks/useOfficeHoursRealtime.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { OfficeHoursRealTimeController } from "@/lib/OfficeHoursRealTimeController";
-import TableController, { useTableControllerTableValues, useTableControllerValueById } from "@/lib/TableController";
+import TableController, {
+  useTableControllerTableValues,
+  useTableControllerValueById,
+  useListTableControllerValues
+} from "@/lib/TableController";
 import { createClient } from "@/utils/supabase/client";
 import {
   HelpRequestMessage,
@@ -11,7 +15,7 @@ import {
 import { Database } from "@/utils/supabase/SupabaseTypes";
 import { Box, Spinner } from "@chakra-ui/react";
 import { SupabaseClient } from "@supabase/supabase-js";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useCourseController } from "./useCourseController";
 import { ClassRealTimeController } from "@/lib/ClassRealTimeController";
 
@@ -619,6 +623,18 @@ export function useHelpQueueAssignments() {
   return useTableControllerTableValues(controller.helpQueueAssignments);
 }
 
+/**
+ * Returns only active help queue assignments (is_active === true).
+ * Uses useListTableControllerValues which subscribes to individual item changes,
+ * ensuring the data stays fresh when assignments are activated/deactivated.
+ */
+export function useActiveHelpQueueAssignments() {
+  const controller = useOfficeHoursController();
+  // Memoize predicate to avoid re-subscribing on every render
+  const isActivePredicate = useCallback((assignment: { is_active: boolean }) => assignment.is_active === true, []);
+  return useListTableControllerValues(controller.helpQueueAssignments, isActivePredicate);
+}
+
 export function useStudentKarmaNotes() {
   const controller = useOfficeHoursController();
   return useTableControllerTableValues(controller.studentKarmaNotes);