remind stewart the URL and claude tries to fix reflection bug

Author: hcientist

README.md

@@ -39,3 +39,7 @@ This is the frontend for MusicCPR.org
 ## GitHub Container Registry (GHCR)
 
 **Note:** For the workflow to push packages, you may need to ensure your repository settings allow GitHub Actions to create packages. Go to Settings → Actions → General → Workflow permissions and ensure "Read and write permissions" is enabled.
+
+## DAW Testing
+
+Go here Stewart! http://localhost:3000/courses/6th-grade-band/freedom-2040-band-1/Perform/Melody/activity/1

components/activity/ActivityInstructions.jsx

@@ -6,7 +6,7 @@
 
 import { Card, Form, Alert } from 'react-bootstrap';
 import { FaCheckCircle, FaLock } from 'react-icons/fa';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 export default function ActivityInstructions({
   step,
@@ -17,22 +17,22 @@ export default function ActivityInstructions({
   onResponseChange,
 }) {
   const [localResponses, setLocalResponses] = useState(questionResponses);
+  const debounceTimers = useRef({});
 
-  useEffect(() => {
-    setLocalResponses(questionResponses);
-  }, [questionResponses]);
-
-  const handleChange = (questionId, value) => {
+  const handleChange = useCallback((questionId, value) => {
     setLocalResponses((prev) => ({
       ...prev,
       [questionId]: value,
     }));
 
-    // Debounce the save
+    // Debounce the API save to avoid excessive requests
     if (onResponseChange) {
-      onResponseChange(questionId, value);
+      clearTimeout(debounceTimers.current[questionId]);
+      debounceTimers.current[questionId] = setTimeout(() => {
+        onResponseChange(questionId, value);
+      }, 500);
     }
-  };
+  }, [onResponseChange]);
 
   const isQuestionUnlocked = (question) => {
     if (!question.requiredOperation) return true;

hooks/useActivityProgress.js

@@ -125,16 +125,16 @@ export function useActivityProgress({ slug, assignmentId, initialStep = 1, email
   const saveResponse = useCallback(async (questionId, response) => {
     if (!slug || !assignmentId) return;
 
+    // Update local state optimistically before the API call
+    setQuestionResponses(prev => ({
+      ...prev,
+      [questionId]: response,
+    }));
+
     try {
       const saveResponseFn = mutateSaveQuestionResponse({ slug, assignmentId });
       const updatedProgress = await saveResponseFn({ questionId, response });
 
-      // Update local state
-      setQuestionResponses(prev => ({
-        ...prev,
-        [questionId]: response,
-      }));
-
       return updatedProgress;
     } catch (error) {
       console.error('Failed to save response:', error);