diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx index 9b9f8b720..d203d7944 100644 --- a/src/advanced-settings/AdvancedSettings.jsx +++ b/src/advanced-settings/AdvancedSettings.jsx @@ -23,9 +23,11 @@ import SettingsSidebar from './settings-sidebar/SettingsSidebar'; import validateAdvancedSettingsData from './utils'; import messages from './messages'; import ModalError from './modal-error/ModalError'; +import { useAdvancedSettings } from './hooks'; const AdvancedSettings = ({ intl, courseId }) => { const dispatch = useDispatch(); + const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false); const [showDeprecated, setShowDeprecated] = useState(false); const [errorModal, showErrorModal] = useState(false); @@ -36,43 +38,26 @@ const AdvancedSettings = ({ intl, courseId }) => { const [isEditableState, setIsEditableState] = useState(false); const [hasInternetConnectionError, setInternetConnectionError] = useState(false); - useEffect(() => { - dispatch(fetchCourseAppSettings(courseId)); - dispatch(fetchProctoringExamErrors(courseId)); - }, [courseId]); - - const advancedSettingsData = useSelector(getCourseAppSettings); - const savingStatus = useSelector(getSavingStatus); - const proctoringExamErrors = useSelector(getProctoringExamErrors); - const settingsWithSendErrors = useSelector(getSendRequestErrors) || {}; - const loadingSettingsStatus = useSelector(getLoadingStatus); - - const isLoading = loadingSettingsStatus === RequestStatus.IN_PROGRESS; - const updateSettingsButtonState = { - labels: { - default: intl.formatMessage(messages.buttonSaveText), - pending: intl.formatMessage(messages.buttonSavingText), - }, - disabledStates: ['pending'], - }; const { + advancedSettingsData, + isLoading, + updateSettingsButtonState, proctoringErrors, mfeProctoredExamSettingsUrl, - } = proctoringExamErrors; - - useEffect(() => { - if (savingStatus === RequestStatus.SUCCESSFUL) { - setIsQueryPending(false); - setShowSuccessAlert(true); - setIsEditableState(false); - setTimeout(() => setShowSuccessAlert(false), 15000); - window.scrollTo({ top: 0, behavior: 'smooth' }); - showSaveSettingsPrompt(false); - } else if (savingStatus === RequestStatus.FAILED && !hasInternetConnectionError) { - setErrorFields(settingsWithSendErrors); - showErrorModal(true); - } - }, [savingStatus]); + loadingSettingsStatus, + savingStatus, + } = useAdvancedSettings({ + dispatch, + courseId, + intl, + setIsQueryPending, + setShowSuccessAlert, + setIsEditableState, + showSaveSettingsPrompt, + showErrorModal, + setErrorFields, + hasInternetConnectionError, + }); if (isLoading) { // eslint-disable-next-line react/jsx-no-useless-fragment diff --git a/src/advanced-settings/hooks.js b/src/advanced-settings/hooks.js new file mode 100644 index 000000000..9de28ff7a --- /dev/null +++ b/src/advanced-settings/hooks.js @@ -0,0 +1,62 @@ +import { useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import { RequestStatus } from '../data/constants'; +import { fetchCourseAppSettings, fetchProctoringExamErrors } from './data/thunks'; +import { + getCourseAppSettings, getSavingStatus, getProctoringExamErrors, getSendRequestErrors, getLoadingStatus, +} from './data/selectors'; +import messages from './messages'; + +/* eslint-disable import/prefer-default-export */ +export const useAdvancedSettings = ({ + dispatch, courseId, intl, setIsQueryPending, setShowSuccessAlert, setIsEditableState, showSaveSettingsPrompt, + showErrorModal, setErrorFields, hasInternetConnectionError, +}) => { + useEffect(() => { + dispatch(fetchCourseAppSettings(courseId)); + dispatch(fetchProctoringExamErrors(courseId)); + }, [courseId]); + + const advancedSettingsData = useSelector(getCourseAppSettings); + const savingStatus = useSelector(getSavingStatus); + const proctoringExamErrors = useSelector(getProctoringExamErrors); + const settingsWithSendErrors = useSelector(getSendRequestErrors) || {}; + const loadingSettingsStatus = useSelector(getLoadingStatus); + + const isLoading = loadingSettingsStatus === RequestStatus.IN_PROGRESS; + const updateSettingsButtonState = { + labels: { + default: intl.formatMessage(messages.buttonSaveText), + pending: intl.formatMessage(messages.buttonSavingText), + }, + disabledStates: ['pending'], + }; + const { + proctoringErrors, + mfeProctoredExamSettingsUrl, + } = proctoringExamErrors; + + useEffect(() => { + if (savingStatus === RequestStatus.SUCCESSFUL) { + setIsQueryPending(false); + setShowSuccessAlert(true); + setIsEditableState(false); + setTimeout(() => setShowSuccessAlert(false), 15000); + window.scrollTo({ top: 0, behavior: 'smooth' }); + showSaveSettingsPrompt(false); + } else if (savingStatus === RequestStatus.FAILED && !hasInternetConnectionError) { + setErrorFields(settingsWithSendErrors); + showErrorModal(true); + } + }, [savingStatus]); + + return { + advancedSettingsData, + isLoading, + updateSettingsButtonState, + proctoringErrors, + mfeProctoredExamSettingsUrl, + loadingSettingsStatus, + savingStatus, + }; +};