```

add new hooks for fetching QuizCRQuestions and categories, update related components to use the new hooks, and refactor SelectCategory page to use the new API
```

002_source/ionic_mobile/src/pages/ConnectiveRevision/QuizRun.tsx

@@ -8,11 +8,15 @@ import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';
 import { listConectivesRevisionContent } from '../../public_data/listConectivesRevisionContent';
 import { shuffleArray } from '../../utils/shuffleArray';
 import QuizContent from './QuizContent';
+import fetchCRQuestions from '../../hooks/fetchCRQuestions';
+import { usePocketBase } from '../../hooks/usePocketBase';
 
 function ConnectiveRevisionQuizRun() {
   const router = useIonRouter();
-  const { p_route } = useParams<{ p_route: string }>();
-  const i_p_route = parseInt(p_route);
+  const { p_route: cat_id } = useParams<{ p_route: string }>();
+
+  // NOTE: abonded, should be updated with `i_cat_id` when done
+  const i_p_route = parseInt(cat_id);
 
   const { setTabActive } = useAppStateContext();
   const [question_list, setQuestionList] = useState<IQuestionJson[] | []>([]);
@@ -22,6 +26,9 @@ function ConnectiveRevisionQuizRun() {
   const [isOpenCorrectAnswer, setIsOpenCorrectAnswer] = useState(false);
   const [isOpenWrongAnswer, setIsOpenWrongAnswer] = useState(false);
   const [answer_list, setAnswerList] = useState<string[]>(['but', 'and', 'or', 'of', 'with']);
+
+  const { user, pb } = usePocketBase();
+
   const {
     setConnectiveRevisionCurrentTest,
     setConnectiveRevisionProgress,
@@ -79,19 +86,19 @@ function ConnectiveRevisionQuizRun() {
 
   useEffect(() => {
     (async () => {
-      const res_json = await listConectivesRevisionContent();
-      let temp_init_ans = res_json[i_p_route].init_ans;
+      const res_json = await fetchCRQuestions(cat_id, pb);
+      let temp_init_ans: string[] = res_json.items[0].init_answer;
 
       setInitAnswer(temp_init_ans);
-      let temp = res_json[i_p_route].content;
+      let temp = res_json.items;
       let shuffled_temp = shuffleArray(temp);
       // let shuffled_temp = temp;
       setQuestionList(shuffled_temp);
 
-      let question_meta_current = res_json[i_p_route].content[0];
+      let question_meta_current = res_json.items[0] as unknown as IQuestionMeta;
       setCurrentQuestionMeta({
-        question_idx: current_question_idx,
         ...question_meta_current,
+        question_idx: current_question_idx,
       });
     })();
     setTabActive(QUIZ_MAIN_MENU_LINK);
@@ -113,31 +120,7 @@ function ConnectiveRevisionQuizRun() {
             total_questions_num={question_list.length}
             answer_list={answer_list}
             quiz_idx={i_p_route + 1}
-            //
           />
-          {/*  */}
-          {/* <CorrectAnswerToast isOpen={isOpenCorrectAnswer} dismiss={() => setIsOpenCorrectAnswer(false)} /> */}
-          {/*  */}
-          {/* <WrongAnswerToast
-            correct_answer={current_question_meta.modal_ans}
-            isOpen={isOpenWrongAnswer}
-            dismiss={() => setIsOpenWrongAnswer(false)}
-          /> */}
-          {/*
-          <IonToast
-            isOpen={isOpenCorrectAnswer}
-            message='This answer is correct'
-            onDidDismiss={() => setIsOpenCorrectAnswer(false)}
-            duration={1000 - 100}
-            color='success'
-          ></IonToast>
-          <IonToast
-            isOpen={isOpenWrongAnswer}
-            message='This answer is wrong'
-            onDidDismiss={() => setIsOpenWrongAnswer(false)}
-            duration={1000 - 100}
-            color='danger'
-          ></IonToast> */}
         </IonContent>
       </IonPage>
     </>