From 22dc7a5399469cd84e97505b941cc14478a7130f Mon Sep 17 00:00:00 2001
From: KenChanA <chanhingwahkendrick@gmail.com>
Date: Wed, 23 Apr 2025 21:41:06 -0400
Subject: [PATCH] Removed accordion and updated versions

---
 .../components/LiveResults/LiveResults.tsx    | 89 ++++++++-----------
 .../QuestionsDisplay/QuestionDisplay.tsx      | 56 ++++--------
 package-lock.json                             | 31 ++++++-
 package.json                                  |  4 +-
 4 files changed, 87 insertions(+), 93 deletions(-)

diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx
index cad75b5..a35a672 100644
--- a/client/src/components/LiveResults/LiveResults.tsx
+++ b/client/src/components/LiveResults/LiveResults.tsx
@@ -1,7 +1,6 @@
 // LiveResults.tsx
 import React, { useState } from 'react';
 
-import { Accordion } from 'react-bootstrap';
 import { Socket } from 'socket.io-client';
 import { QuestionType } from '../../Types/QuestionType';
 import './liveResult.css';
@@ -26,59 +25,47 @@ interface LiveResultsProps {
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
-    const [activeKey, setActiveKey] = useState<string | null>('0');
-
-    const toggleAccordion = () => {
-        setActiveKey(activeKey === '0' ? null : '0');
-    };
 
     return (
-        <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
-            <Accordion.Item eventKey="0">
-                <Accordion.Header>
-                    <div className="text-2xl text-bold">{activeKey === '0' ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
-                </Accordion.Header>
-                <Accordion.Body>
-                        <div className="action-bar mb-1">
-                            <FormGroup row>
-                                <FormControlLabel
-                                    label={<div className="text-sm">Afficher les noms</div>}
-                                    control={
-                                        <Switch
-                                            value={showUsernames}
-                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                                setShowUsernames(e.target.checked)
-                                            }
-                                        />
-                                    }
-                                />
-                                <FormControlLabel
-                                    label={<div className="text-sm">Afficher les réponses</div>}
-                                    control={
-                                        <Switch
-                                            value={showCorrectAnswers}
-                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                                setShowCorrectAnswers(e.target.checked)
-                                            }
-                                        />
-                                    }
-                                />
-                            </FormGroup>
-                        </div>
-
-                        <div className="table-container">
-
-                            <LiveResultsTable
-                                students={students}
-                                questions={questions}
-                                showCorrectAnswers={showCorrectAnswers}
-                                showSelectedQuestion={showSelectedQuestion}
-                                showUsernames={showUsernames}
+        <div>
+            <div className="action-bar mb-1">
+                <FormGroup row>
+                    <FormControlLabel
+                        label={<div className="text-sm">Afficher les noms</div>}
+                        control={
+                            <Switch
+                                value={showUsernames}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    setShowUsernames(e.target.checked)
+                                }
                             />
-                        </div>
-                </Accordion.Body>
-            </Accordion.Item>
-        </Accordion>
+                        }
+                    />
+                    <FormControlLabel
+                        label={<div className="text-sm">Afficher les réponses</div>}
+                        control={
+                            <Switch
+                                value={showCorrectAnswers}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    setShowCorrectAnswers(e.target.checked)
+                                }
+                            />
+                        }
+                    />
+                </FormGroup>
+            </div>
+
+            <div className="table-container">
+
+                <LiveResultsTable
+                    students={students}
+                    questions={questions}
+                    showCorrectAnswers={showCorrectAnswers}
+                    showSelectedQuestion={showSelectedQuestion}
+                    showUsernames={showUsernames}
+                />
+            </div>
+        </div>
     );
 };
 
diff --git a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
index edf99f2..6b31ee2 100644
--- a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Question } from 'gift-pegjs';
 
-import { Accordion } from 'react-bootstrap';
 import { FormControlLabel, Switch } from '@mui/material';
 
 import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuestionDisplay';
@@ -37,11 +36,6 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     // }, [isMobile]);
     
     const [showResults, setShowResults] = useState<boolean>(false);
-    const [activeKey, setActiveKey] = useState<string | null>('0');
-
-    const toggleAccordion = () => {
-        setActiveKey(activeKey === '0' ? null : '0');
-    };
 
     let questionTypeComponent = null;
     switch (question?.type) {
@@ -99,38 +93,21 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     }
     return (
         <>
-            {showAnswerToggle ? (
-                <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
-                    <Accordion.Item eventKey="0">
-                        <Accordion.Header>
-                            {activeKey === '0' ? 'Afficher les questions' : 'Masquer les questions'}
-                        </Accordion.Header>
-                        <Accordion.Body>
-                            <FormControlLabel
-                            label={<div className="text-sm">Afficher les résultats</div>}
-                            control={
-                                <Switch
-                                    value={showResults}
-                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                        setShowResults(e.target.checked)
-                                    }
-                                    />
-                                }
-                            />
-                            <div className="question-container">
-                                {questionTypeComponent ? (
-                                    <>
-                                        {questionTypeComponent}
-                                    </>
-                                ) : (
-                                    <div>Question de type inconnue</div>
-                                )}
-                            </div>
-                        </Accordion.Body>
-                    </Accordion.Item>
-                </Accordion>
-            ) : (
-                <div className="question-container">
+            {showAnswerToggle && (
+                <FormControlLabel
+                    label={<div className="text-sm">Afficher les résultats</div>}
+                    control={
+                        <Switch
+                            value={showResults}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                setShowResults(e.target.checked)
+                            }
+                        />
+                    }
+                />
+            )}
+
+            <div className="question-container">
                 {questionTypeComponent ? (
                     <>
                         {questionTypeComponent}
@@ -138,8 +115,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                 ) : (
                     <div>Question de type inconnue</div>
                 )}
-                </div>
-            )}
+            </div>
         </>
     );
 };
diff --git a/package-lock.json b/package-lock.json
index 144d2f8..fb5535d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,18 @@
   "packages": {
     "": {
       "dependencies": {
-        "axios-mock-adapter": "^2.1.0"
+        "@popperjs/core": "^2.11.8",
+        "axios-mock-adapter": "^2.1.0",
+        "bootstrap": "^5.3.5"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
       }
     },
     "node_modules/asynckit": {
@@ -37,6 +48,24 @@
         "axios": ">= 0.17.0"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz",
+      "integrity": "sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
diff --git a/package.json b/package.json
index a8332a4..ca7551a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,7 @@
 {
   "dependencies": {
-    "axios-mock-adapter": "^2.1.0"
+    "@popperjs/core": "^2.11.8",
+    "axios-mock-adapter": "^2.1.0",
+    "bootstrap": "^5.3.5"
   }
 }