87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { IonButton, IonContent, IonModal, useIonRouter } from '@ionic/react';
|
|
import { Dispatch, FunctionComponent, SetStateAction, useRef } from 'react';
|
|
import { COLOR_TEXT } from '../../constants';
|
|
import { useAppStateContext } from '../../contexts/AppState';
|
|
import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';
|
|
|
|
interface AudioSeekBarProps {
|
|
show_confirm_user_exit: boolean;
|
|
setShowConfirmUserExit: Dispatch<SetStateAction<boolean>>;
|
|
url_push_after_user_confirm: string;
|
|
}
|
|
|
|
const ConfirmUserQuitQuiz: FunctionComponent<AudioSeekBarProps> = ({
|
|
show_confirm_user_exit,
|
|
setShowConfirmUserExit,
|
|
//
|
|
url_push_after_user_confirm,
|
|
}) => {
|
|
let { setListeningPracticeInProgress, setConnectiveRevisionInProgress, setMatchingFrenzyInProgress } =
|
|
useAppStateContext();
|
|
let { setTabActive } = useAppStateContext();
|
|
|
|
const modal = useRef<HTMLIonModalElement>(null);
|
|
const router = useIonRouter();
|
|
const { resetListeningPracticeCorrectionList } = useMyIonQuizContext();
|
|
|
|
return (
|
|
<>
|
|
<IonModal
|
|
isOpen={show_confirm_user_exit}
|
|
ref={modal}
|
|
// trigger='open-modal'
|
|
initialBreakpoint={0.25}
|
|
breakpoints={[0, 0.25, 0.5, 0.75]}
|
|
onDidDismiss={() => setShowConfirmUserExit(false)}
|
|
>
|
|
<IonContent className="ion-padding">
|
|
<div style={{ margin: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ color: COLOR_TEXT }}>Are you sure want to quit ?</div>
|
|
<div
|
|
style={{
|
|
margin: '2rem',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: '3rem',
|
|
}}
|
|
>
|
|
<IonButton
|
|
color="dark"
|
|
shape={'round'}
|
|
style={{ minWidth: '80px' }}
|
|
onClick={() => setShowConfirmUserExit(false)}
|
|
>
|
|
No
|
|
</IonButton>
|
|
<IonButton
|
|
fill="outline"
|
|
shape={'round'}
|
|
style={{ minWidth: '80px', color: COLOR_TEXT }}
|
|
color="dark"
|
|
onClick={() => {
|
|
setShowConfirmUserExit(false);
|
|
setListeningPracticeInProgress(false);
|
|
setMatchingFrenzyInProgress(false);
|
|
setConnectiveRevisionInProgress(false);
|
|
//
|
|
resetListeningPracticeCorrectionList();
|
|
//
|
|
setTabActive(url_push_after_user_confirm);
|
|
//
|
|
router.push(url_push_after_user_confirm, 'none', 'replace');
|
|
}}
|
|
>
|
|
Yes
|
|
</IonButton>
|
|
</div>
|
|
</div>
|
|
</IonContent>
|
|
</IonModal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ConfirmUserQuitQuiz;
|