fix(25-01): add async cleanup in JKSessionRecordingModal

- Add ignore flag pattern to audio preference useEffect
- Add ignore flag pattern to video sources useEffect
- Guard state updates with !ignore check
- Prevents "state update on unmounted component" warnings
This commit is contained in:
Nuwan 2026-02-24 23:19:31 +05:30
parent ef3d7a630e
commit 1c1e7e4a3f
1 changed files with 46 additions and 26 deletions

View File

@ -52,50 +52,70 @@ const JKSessionRecordingModal = ({ isOpen, toggle }) => {
//On mount get the audio store type from backend and set the radio button accordingly using jamClient.GetAudioRecordingPreference()
useEffect(() => {
let ignore = false;
const fetchAudioStoreType = async () => {
try {
if (jamClient) {
const pref = await jamClient.GetAudioRecordingPreference();
if (AUDIO_STORE_TYPE_MIX_AND_STEMS['backendValues'].includes(pref)) {
setAudioStoreType(AUDIO_STORE_TYPE_MIX_AND_STEMS['key']);
} else if (AUDIO_STORE_TYPE_MIX_ONLY['backendValues'].includes(pref)) {
setAudioStoreType(AUDIO_STORE_TYPE_MIX_ONLY['key']);
if (!ignore) {
if (AUDIO_STORE_TYPE_MIX_AND_STEMS['backendValues'].includes(pref)) {
setAudioStoreType(AUDIO_STORE_TYPE_MIX_AND_STEMS['key']);
} else if (AUDIO_STORE_TYPE_MIX_ONLY['backendValues'].includes(pref)) {
setAudioStoreType(AUDIO_STORE_TYPE_MIX_ONLY['key']);
}
}
}
} catch (error) {
console.error('Error fetching audio store type preference:', error);
if (!ignore) {
console.error('Error fetching audio store type preference:', error);
}
}
};
fetchAudioStoreType();
return () => {
ignore = true;
};
}, [jamClient]);
// Load available video sources when modal opens
useEffect(() => {
if (isOpen && jamClient) {
loadAvailableVideoSources();
}
}, [isOpen, jamClient]);
let ignore = false;
const loadAvailableVideoSources = async () => {
try {
if (jamClient && jamClient.getOpenVideoSources) {
const openSources = await jamClient.getOpenVideoSources();
console.log('Available video sources:', openSources);
const loadSources = async () => {
if (isOpen && jamClient) {
try {
if (jamClient.getOpenVideoSources) {
const openSources = await jamClient.getOpenVideoSources();
if (!ignore) {
console.log('Available video sources:', openSources);
// Map backend sources to frontend options
const sources = [];
if (openSources?.webcam1) sources.push(1); // WebCamRecordActive
if (openSources?.webcam2) sources.push(3); // WebCam2RecordActive
if (openSources?.screen_capture) sources.push(4); // DesktopRecordActive
if (openSources?.session_video) sources.push(2); // ScreenRecordActive
// Map backend sources to frontend options
const sources = [];
if (openSources?.webcam1) sources.push(1); // WebCamRecordActive
if (openSources?.webcam2) sources.push(3); // WebCam2RecordActive
if (openSources?.screen_capture) sources.push(4); // DesktopRecordActive
if (openSources?.session_video) sources.push(2); // ScreenRecordActive
setAvailableVideoSources(sources);
setAvailableVideoSources(sources);
}
}
} catch (error) {
if (!ignore) {
console.error('Error loading video sources:', error);
}
}
}
} catch (error) {
console.error('Error loading video sources:', error);
}
};
};
loadSources();
return () => {
ignore = true;
};
}, [isOpen, jamClient]);
const handleStartStopRecording = async () => {
setIsLoading(true);