reformat files and add layout for class detail page

mtech-31-quemistry · Sep 18, 2024 · 0b3cbcb · 0b3cbcb
1 parent 1ba02d6
commit 0b3cbcb
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 28 deletions.
diff --git a/app/(main)/classes/details/page.tsx b/app/(main)/classes/details/page.tsx
@@ -1,11 +1,21 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import AppMessages, { AppMessage } from '@/components/AppMessages';
+import React, { useRef } from 'react';
 
 const ClassDetails = () => {
     const classId = useSearchParams().get('id');
+    const appMsg = useRef<AppMessage>(null);
 
-    return <div>{classId}</div>;
+    return (
+        <div className="grid">
+            <AppMessages ref={appMsg} isAutoDismiss={true} />
+            <div className="col-12">
+                <div className="card">{classId}</div>
+            </div>
+        </div>
+    );
 };
 
 export default ClassDetails;
diff --git a/app/(main)/quiz/history/page.tsx b/app/(main)/quiz/history/page.tsx
@@ -118,12 +118,7 @@ const QuizHistory: React.FC = () => {
     };
 
     const idBodyTemplate = (rowData: ProcessedQuiz) => {
-        return (
-            <Button
-                label={rowData.id.toString()}
-                onClick={() => handleQuizClick(rowData.id)}
-            />
-        );
+        return <Button label={rowData.id.toString()} onClick={() => handleQuizClick(rowData.id)} />;
     };
 
     if (loading) {
@@ -152,4 +147,4 @@ const QuizHistory: React.FC = () => {
     );
 };
 
-export default QuizHistory;
+export default QuizHistory;
diff --git a/app/(main)/quiz/page.tsx b/app/(main)/quiz/page.tsx
@@ -406,11 +406,7 @@ const QuizPage: React.FC = () => {
                                 </div>
                                 <div className="col-12 md:col-6 mb-5">
                                     Select the (max) question count desired
-                                    <InputText
-                                        type="text"
-                                        value="0"
-                                        onChange={(e) => setQuestionCount(e.target.value)}
-                                    />
+                                    <InputText type="text" value="0" onChange={(e) => setQuestionCount(e.target.value)} />
                                 </div>
                             </div>
                             <div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
@@ -513,7 +509,7 @@ const QuizPage: React.FC = () => {
                     )}
                 </div>
             </div>
-        </div >
+        </div>
     );
 };
 

diff --git a/app/(main)/quiz/results/page.tsx b/app/(main)/quiz/results/page.tsx
@@ -36,12 +36,7 @@ const ResultsPage: React.FC = () => {
 
     return (
         <div>
-            <ResultsTopComponent
-                onQuestionClick={handleQuestionClick}
-                currentQuestionIndex={currentQuestionIndex}
-                quizId={quizId}
-                onReload={handleReload}
-            />
+            <ResultsTopComponent onQuestionClick={handleQuestionClick} currentQuestionIndex={currentQuestionIndex} quizId={quizId} onReload={handleReload} />
             {quiz && (
                 <ResultsBottomComponent
                     currentQuestionIndex={currentQuestionIndex}

diff --git a/components/AppMessages.tsx b/components/AppMessages.tsx
@@ -72,7 +72,7 @@ const AppMessages = forwardRef<AppMessage, Props>((props, ref) =>{
         }
     }));
     return (
-        <div className='col-12'>
+        <div className="w-full">
             <Messages ref={msgs} />
         </div>
     )

diff --git a/layout/ResultsBottomComponent.tsx b/layout/ResultsBottomComponent.tsx
@@ -38,19 +38,25 @@ export default function ResultsBottomComponent({ currentQuestionIndex, quiz }: R
                                     <span dangerouslySetInnerHTML={{ __html: option.text }}></span>
                                     {isAttemptedAndIsAnswer && (
                                         <div className="explanation-container-review" style={{ color: 'Green' }}>
-                                            <div className="explanation-container-review"><strong>You chose this. </strong></div>
+                                            <div className="explanation-container-review">
+                                                <strong>You chose this. </strong>
+                                            </div>
                                             <div className="explanation-container-review">{option.explanation}</div>
                                         </div>
                                     )}
                                     {isAttemptedAndIsNotAnswer && (
                                         <div className="explanation" style={{ color: 'Red' }}>
-                                            <div className="explanation-container-review"><strong>You chose this.</strong></div>
+                                            <div className="explanation-container-review">
+                                                <strong>You chose this.</strong>
+                                            </div>
                                             <div className="explanation-container-review">{option.explanation}</div>
                                         </div>
                                     )}
                                     {isAllUnattempted && (
                                         <div className="explanation" style={{ color: 'Gray' }}>
-                                            <div className="explanation-container-review"><i>You skipped this.</i></div>
+                                            <div className="explanation-container-review">
+                                                <i>You skipped this.</i>
+                                            </div>
                                         </div>
                                     )}
                                     {isNotAttemptedAndIsAnswer && (
@@ -65,4 +71,4 @@ export default function ResultsBottomComponent({ currentQuestionIndex, quiz }: R
             </ul>
         </div>
     );
-}
+}
diff --git a/layout/ResultsTopComponent.tsx b/layout/ResultsTopComponent.tsx
@@ -64,7 +64,7 @@ export default function ResultsTopComponent({ onQuestionClick, currentQuestionIn
     const specificQuiz = quiz.quizzes.find((quiz: Quiz.QuizTaken) => quiz.id === parseInt(quizId, 10));
 
     if (!specificQuiz || !specificQuiz.mcqs || specificQuiz.mcqs.length === 0) {
-        return <div className='card'>No questions available for this quiz</div>;
+        return <div className="card">No questions available for this quiz</div>;
     }
 
     // Update the progress calculation
@@ -92,7 +92,9 @@ export default function ResultsTopComponent({ onQuestionClick, currentQuestionIn
                 ))}
             </div>
             <ResultsBottomComponent currentQuestionIndex={currentQuestionIndex} quiz={specificQuiz} />
-            <div className="mb-3"><Button onClick={handleBackToHistory}>Quiz History</Button></div>
+            <div className="mb-3">
+                <Button onClick={handleBackToHistory}>Quiz History</Button>
+            </div>
         </div>
     );
-}
+}