From 81de545e49687a8a20ad05c9ebf77bcfbd6e9a0f Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 15 Jan 2026 22:38:57 +0530
Subject: [PATCH] fix(05-03): implement proper JamTrack close functionality

Fixes close functionality for both JamTrack player and session screen:

- Moved handleJamTrackClose to proper location with useCallback
- Player close button now calls full close handler (API + state cleanup)
- WindowPortal X button now calls full close handler
- Session screen close button uses same handler
- Clears selectedJamTrack, jamTrackStems, and jamTrackData on close
- Calls REST API closeJamTrack to notify server
- Removed duplicate handleJamTrackClose function

Close flow now properly:
1. Calls closeJamTrack REST API with session ID
2. Clears selectedJamTrack and jamTrackStems (hides stems in session)
3. Clears jamTrackData (closes player popup)
4. Shows success/error toast

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/components/client/JKSessionScreen.js  | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index b4bd2d86b..1b85ace71 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -206,20 +206,42 @@ const JKSessionScreen = () => {
   const jamTrackData = useSelector(selectJamTrackData);
   const showJamTrackPlayer = Boolean(jamTrackData);
 
-  // Stable callback for JamTrack player popup close
-  const handleJamTrackPlayerClose = useCallback(() => {
+  // Redux jam track state
+  const selectedJamTrack = useSelector(selectSelectedJamTrack);
+  const jamTrackStems = useSelector(selectJamTrackStems);
+
+  // JamTrack close handler (used by both player and session screen)
+  const handleJamTrackClose = useCallback(async () => {
+    console.log('Closing jam track');
+    try {
+      // Call the close jam track API
+      await closeJamTrack({ id: currentSession.id });
+
+      // Clear the selected jam track and stems (session screen)
+      dispatch(setSelectedJamTrack(null));
+      dispatch(setJamTrackStems([]));
+
+      // Clear the player popup data
+      dispatch(clearJamTrackData());
+
+      toast.success('JamTrack closed successfully');
+    } catch (error) {
+      console.error('Error closing jam track:', error);
+      toast.error('Failed to close JamTrack');
+    }
+  }, [currentSession, dispatch]);
+
+  // Stable callback for JamTrack player popup close (WindowPortal X button or ESC)
+  const handleJamTrackPlayerClose = useCallback(async () => {
     console.log('JKSessionScreen: JamTrack Player Popup closing');
-    dispatch(clearJamTrackData());
-  }, [dispatch]);
+    // Call the full close handler to clean up everything
+    await handleJamTrackClose();
+  }, [handleJamTrackClose]);
 
   // State for media controls popup (modal visibility now in Redux)
   const [mediaControlsOpened, setMediaControlsOpened] = useState(false);
   const [popupGuard, setPopupGuard] = useState(false); // Hard guard against infinite loops
 
-  // Redux jam track state
-  const selectedJamTrack = useSelector(selectSelectedJamTrack);
-  const jamTrackStems = useSelector(selectJamTrackStems);
-
   // Store references to registered message callbacks for cleanup
   const [registeredCallbacks, setRegisteredCallbacks] = useState([]);
 
@@ -885,23 +907,6 @@ const JKSessionScreen = () => {
     }
   };
 
-  const handleJamTrackClose = async () => {
-    console.log('Closing jam track');
-    try {
-      // Call the close jam track API
-      await closeJamTrack({ id: currentSession.id });
-
-      // Clear the selected jam track and stems
-      dispatch(setSelectedJamTrack(null));
-      dispatch(setJamTrackStems([]));
-
-      toast.success('JamTrack closed successfully');
-    } catch (error) {
-      console.error('Error closing jam track:', error);
-      toast.error('Failed to close JamTrack');
-    }
-  };
-
   const handleMetronomeSelected = async () => {
     console.log('Opening metronome');
     try {
@@ -1352,10 +1357,7 @@ const JKSessionScreen = () => {
             session={jamTrackData.session}
             currentUser={jamTrackData.currentUser}
             isPopup={true}
-            onClose={() => {
-              console.log('JKSessionScreen: JKSessionJamTrackPlayer onClose called');
-              dispatch(clearJamTrackData());
-            }}
+            onClose={handleJamTrackClose}
           />
         </WindowPortal>
       )}