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>
This commit is contained in:
Nuwan 2026-01-15 22:38:57 +05:30
parent d870784a18
commit 81de545e49
1 changed files with 31 additions and 29 deletions

View File

@ -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>
)}