List Completed

mtech-31-quemistry · Aug 22, 2024 · 7bfad63 · 7bfad63
1 parent b495dea
commit 7bfad63
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 14 deletions.
diff --git a/app/(main)/quiz/history/page.tsx b/app/(main)/quiz/history/page.tsx
@@ -81,7 +81,7 @@ const QuizHistory: React.FC = () => {
             <div className="col-12">
                 <div className="card">
                     <h5>Quizzes</h5>
-                    <p>You currently have an ongoing quiz.</p>
+                    <p>You currently have completed {quiz?.quizzes.length || 0} quizzes.</p>
                     <DataTable value={quiz?.quizzes} tableStyle={{ minWidth: '50rem' }}>
                         <Column field="id" header="Quiz Id"></Column>
                         <Column field="points" header="Points"></Column>

diff --git a/app/(main)/quiz/page.tsx b/app/(main)/quiz/page.tsx
@@ -15,7 +15,9 @@ import { Dialog } from 'primereact/dialog';
 import { TreeSelect, TreeSelectSelectionKeysType } from "primereact/treeselect";
 import { useRouter } from 'next/navigation';
 import React, { Fragment } from 'react';
-
+import { InputNumber } from 'primereact/inputnumber';
+import { TreeTable } from 'primereact/treetable';
+import { InputTextarea } from 'primereact/inputtextarea'; // Correct import statement
 
 const QuizPage: React.FC = () => {
   const router = useRouter();
@@ -162,6 +164,34 @@ const renderField = (labelTextName: string, value: string, onChange: (e: React.C
 
 const [visible, setVisible] = useState(false);
 
+const [questionCount, setQuestionCount] = useState<number | null>(null);
+
+const getNodeName = (key) => {
+  const findNode = (nodes, key) => {
+      for (const node of nodes) {
+          if (node.key == key) {
+              return node.data.name;
+          }
+          if (node.children) {
+              const result = findNode(node.children, key);
+              if (result) return result;
+          }
+      }
+      return null;
+  };
+
+  return findNode(topicNodes, key);
+};
+
+const renderSelectedNodes = () => {
+  if (!selectedTopicNodes) return '';
+
+  return Object.entries(selectedTopicNodes).map(([key, data]) => {
+      const name = getNodeName(key);
+      return `${name}\n`;
+  }).join('');
+};
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -194,23 +224,37 @@ const [visible, setVisible] = useState(false);
                                 </div>
                             </TabPanel>
                             <TabPanel header="Options">
+                  <div className="grid">
+                    <div className="col-12 md:col-6 mb-5">
+                      <p>Default question count will be two.<br /></p>
+                    </div>
+                    <div className="col-12 md:col-6 mb-5">
+                      <InputNumber
+                        value={questionCount}
+                        onValueChange={(e) => setQuestionCount(e.value)}
+                        placeholder="Enter count (0-100)"
+                      />
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
+                      <Button label="Next" onClick={() => setActiveTab(2)}></Button>
+                    </div>
+                  </div>
+                </TabPanel>
+                            <TabPanel header="Review">
                                 <div className="grid"> 
                                     <div className="col-12 md:col-6 mb-5">
-                                      <p>Default question count will be two.<br/></p>
+                                      <p>Question count:<br /></p>
                                     </div>
                                     <div className="col-12 md:col-6 mb-5">
-                                    </div> 
-                                    <div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
-                                        <Button label="Next" onClick={()=> {setActiveTab(2)}}></Button>
-                                    </div>
-                                </div>
-                            </TabPanel>
-                            <TabPanel header="Review">
-                                <div className="grid"> 
-                                    <div className="col-12 md:col-6 mb-5">
-                                      <p>Default question count will be two.</p>
+                                      <InputNumber
+                                        value={questionCount}
+                                        onValueChange={(e) => setQuestionCount(e.value)}
+                                        placeholder="2"
+                                        disabled
+                                      />
                                     </div>
                                     <div className="col-12 md:col-6 mb-5">
+                                      <InputTextarea value={renderSelectedNodes()} rows={5} cols={30} autoResize disabled />
                                     </div> 
                                     <div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
                                         <Button onClick={() => { 

diff --git a/app/(main)/quiz/quiz.css b/app/(main)/quiz/quiz.css
@@ -0,0 +1,13 @@
+.multi-line-treeselect .p-treeselect-label-container {
+    white-space: normal !important;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+}
+
+.multi-line-treeselect .p-treeselect-label {
+    white-space: normal !important;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+}
diff --git a/service/QuizService.tsx b/service/QuizService.tsx
@@ -1,7 +1,7 @@
 import { Quiz } from '@/types';
 
 export const QuizService = {
-  startNewQuiz: async (topics: number[], skills: number[]): Promise<Quiz.ApiResponse> => {
+  startNewQuiz: async (topics: number[], skills: number[]): Promise<Quiz.ApiResponse | false> => {
     try {
       console.log('Fetching data from API...');
       const response = await fetch(`${process.env.NEXT_PUBLIC_QUEMISTRY_QUIZZES_URL}`, {
@@ -20,6 +20,12 @@ export const QuizService = {
           pageSize: 60,
         }),
       });
+
+      if (response.status === 409) {
+        console.log('Conflict: Quiz could not be started due to a conflict.');
+        return false;
+      }
+
       const responseData: Quiz.ApiResponse = await response.json();
       console.log('Data fetched successfully:', responseData);
       return responseData;