init commit,

002_source/ionic_mobile/src/components/ConfirmUserQuitQuiz/index.tsx

@@ -0,0 +1,86 @@
+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;