From 2ccf0b79e6659d3f66336abe7086f3229669d2f4 Mon Sep 17 00:00:00 2001
From: andrewtan2000 <andrew_tan2000@hotmail.com>
Date: Tue, 27 Aug 2024 16:56:28 +0800
Subject: [PATCH] Allow question count preview

---
 app/(main)/quiz/page.tsx | 77 +++++++++++++++++++++++++++++++++++-----
 types/questions.d.ts     |  3 +-
 2 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/app/(main)/quiz/page.tsx b/app/(main)/quiz/page.tsx
index 437e442..c108100 100644
--- a/app/(main)/quiz/page.tsx
+++ b/app/(main)/quiz/page.tsx
@@ -23,6 +23,8 @@ const QuizPage: React.FC = () => {
     const router = useRouter();
     const [selectedTopicNodes, setSelectedTopicNodes] = useState<string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[] | null>();
     const [topicNodes, setTopicNodes] = useState<any>(null);
+    const [selectedTopics, setSelectedTopics] = useState<number[]>([]);
+    const [selectedSkills, setSelectedSkills] = useState<number[]>([]);
 
     const [quiz, setQuiz] = useState<Quiz.ApiResponse | null>(null);
     const [isQuizOngoing, setIsQuizOngoing] = useState<boolean>(true);
@@ -159,7 +161,8 @@ const QuizPage: React.FC = () => {
 
     const [visible, setVisible] = useState(false);
 
-    const [questionCount, setQuestionCount] = useState<number | null>(null);
+    const [selectedQuestionCount, setSelectedQuestionCount] = useState<number>(0);
+    const [generatedQuestionCount, setGeneratedQuestionCount] = useState<number>(0);
 
     const getNodeName = (key: string) => {
         const findNode = (nodes: any[], key: string): string | null => {
@@ -189,6 +192,64 @@ const QuizPage: React.FC = () => {
             .join('');
     };
 
+
+    useEffect(() => {
+        let newSelectedTopics: number[] = [];
+        let newSelectedSkills: number[] = [];
+
+        if (selectedTopicNodes) {
+            Object.entries(selectedTopicNodes).forEach(([key, data]) => {
+                let topic_skill = key.split('-');
+                if (topic_skill.length > 1) {
+                    newSelectedSkills.push(parseInt(topic_skill[1]));
+                } else {
+                    newSelectedTopics.push(parseInt(topic_skill[0]));
+                }
+            });
+        }
+
+        setSelectedTopics(newSelectedTopics);
+        setSelectedSkills(newSelectedSkills);
+    }, [selectedTopicNodes]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (activeTab === 1) { // Assuming the "Options" tab has index 1
+                console.log('selectedTopics', selectedTopics);
+                console.log('selectedSkills', selectedSkills);
+    
+                const retrieveQuestionRequest = {
+                    topics: selectedTopics,
+                    skills: selectedSkills,
+                    pageNumber: 0,
+                    pageSize: 60
+                };
+    
+                console.log('retrieveQuestionRequest', retrieveQuestionRequest);
+                try {
+                    const mcqResponse = await QuestionsService.retrieveMCQ(retrieveQuestionRequest);
+                    console.log('mcqResponse', mcqResponse);
+    
+                        console.log('count', mcqResponse);
+                    if (mcqResponse && mcqResponse) {
+                        // Extract unique ids
+                        const uniqueIds = new Set(mcqResponse.map(mcq => mcq.id));
+                        const count = uniqueIds.size;
+                        setGeneratedQuestionCount(count);
+                    } else {
+                        setGeneratedQuestionCount(0);
+                    }
+                } catch (error) {
+                    console.error('Error retrieving MCQs:', error);
+                    setGeneratedQuestionCount(0);
+                }
+            }
+        };
+    
+        fetchData();
+    }, [activeTab, selectedTopics, selectedSkills]);
+
+
     return (
         <div className="grid">
             <div className="col-12">
@@ -244,22 +305,22 @@ const QuizPage: React.FC = () => {
                                     <div className="grid">
                                         <div className="col-12 md:col-6 mb-5">
                                             <p>
-                                                Default question count will be two.
+                                                {generatedQuestionCount} questions will be generated.
                                                 <br />
                                             </p>
                                         </div>
                                         <div className="col-12 md:col-6 mb-5">
                                             <InputNumber
-                                                value={questionCount}
+                                                value={selectedQuestionCount}
                                                 onValueChange={(e) => {
                                                     const value = e.value;
                                                     if (typeof value === 'number' || value === null) {
-                                                        setQuestionCount(value);
+                                                        setSelectedQuestionCount(value);
                                                     } else {
-                                                        setQuestionCount(null); // Handle unexpected types
+                                                        setSelectedQuestionCount(0); // Handle unexpected types
                                                     }
                                                 }}
-                                                placeholder="Enter count (0-100)"
+                                                placeholder={generatedQuestionCount}
                                             />
                                         </div>
                                         <div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
@@ -271,12 +332,12 @@ const QuizPage: React.FC = () => {
                                     <div className="grid">
                                         <div className="col-12 md:col-6 mb-5">
                                             <p>
-                                                Question count:
+                                            {selectedQuestionCount ? selectedQuestionCount : generatedQuestionCount} questions will be generated.
                                                 <br />
                                             </p>
                                         </div>
                                         <div className="col-12 md:col-6 mb-5">
-                                            <InputNumber value={questionCount} onValueChange={(e) => setQuestionCount(e.value ?? null)} placeholder="2" disabled />
+                                            <InputNumber value={selectedQuestionCount} placeholder="0" disabled />
                                         </div>
                                         <div className="col-12 md:col-6 mb-5">
                                             <InputTextarea value={renderSelectedNodes()} rows={5} cols={30} autoResize disabled />
diff --git a/types/questions.d.ts b/types/questions.d.ts
index e171f1c..e2966e1 100644
--- a/types/questions.d.ts
+++ b/types/questions.d.ts
@@ -46,7 +46,8 @@ declare namespace Questions {
     }
 
     interface RetrieveQuestionRequest {
-        ids?: number[];
+        topics?: number[];
+        skills?: number[];
         pageNumber?: number;
         pageSize?: number;
     }