Merge pull request #55 from CS3219-AY2425S1/revert-54-main

Revert "UI changes"

Author: yuxuanleong

Frontend/package.json

@@ -7,7 +7,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "ag-grid-react": "^32.3.2",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "jwt-decode": "^4.0.0",

Frontend/src/components/question/Question.jsx

@@ -7,9 +7,7 @@ import EditQn from "./EditQn";
 import questionService from "../../services/questions"
 import userService from "../../services/users";
 import categoryService from "../../services/categories";
-import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
-import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
-import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
+
 
 function Question() {
     const [questions, setQuestions] = useState([]);
@@ -52,6 +50,10 @@ function Question() {
             console.log('Error:', e);
         });
     }, []);
+
+    const easyQuestions = questions.filter(q => q.complexity === "Easy")
+    const mediumQuestions = questions.filter(q => q.complexity === "Medium")
+    const hardQuestions = questions.filter(q => q.complexity === "Hard")
 
     const addQuestion = (newQuestion) => {
         setQuestions((prevQuestions) => [...prevQuestions, newQuestion]);
@@ -126,67 +128,52 @@ function Question() {
     };
 
 
-    const renderQuestionsTable = () => {
-        const CustomButtonComponent = (props) => {
-            const question = props.data
-            return <ButtonGroup className="mb-2">
-                <button 
-                    className='btn btn-success' 
-                    onClick={() => handleShowEditModal(question)}
-                >
-                    Edit
-                </button>
-                <button className='btn btn-danger' size="sm"
-                    onClick={() => handleShowDelete(question._id)}>
-                    Delete
-                </button>
-            </ButtonGroup>
-        };
-
-        const colDefs = [
-            { field: "id", flex: 1, wrapText: true, sort: "asc" },
-            { field: "title", flex: 2 },
-            { field: "description", flex: 5, wrapText: true, autoHeight: true},
-            { field: "complexity", flex: 1.5,
-                comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
-                    if (valueA == valueB) return 0;
-                    if (valueA == "Easy" || valueB == "Hard") return -1;
-                    if (valueA == "Hard" || valueB == "Easy") return 1;
-                } 
-            }
-        ];
-
-        if (isAdmin) {
-            colDefs = [
-                { field: "id", flex: 1, wrapText: true, sort: "asc" },
-                { field: "title", flex: 2 },
-                { field: "description", flex: 5, wrapText: true, autoHeight: true},
-                { field: "complexity", flex: 1.5,
-                    comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
-                        if (valueA == valueB) return 0;
-                        if (valueA == "Easy" || valueB == "Hard") return -1;
-                        if (valueA == "Hard" || valueB == "Easy") return 1;
-                    } 
-                },
-                { field: "action", width: 200, resizable: false,  sortable: false, cellRenderer: CustomButtonComponent }
-            ];
-        }
+    const renderQuestionsTable = (questions) => {
+      const sortedQuestions = [...questions].sort((a, b) => a.id - b.id)
 
         return (
-            <div
-              className="container-fluid ag-theme-quartz" // applying the Data Grid theme
-              style={{ height: 500 }} // the Data Grid will fill the size of the parent container
-            >
-                <AgGridReact
-                    rowData={questions}
-                    columnDefs={colDefs}
-                />
-            </div>
+            <Table>
+                <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Title</th>
+                  <th>Description</th>
+                  <th>Category</th>
+                  {isAdmin && (<th>Action</th>)}
+                </tr>
+                </thead>
+                <tbody>
+                {sortedQuestions.map((question) => (
+                    <tr key={question.id}>
+                        <td>{question.id}</td>
+                        <td>{question.title}</td>
+                        <td>{question.description}</td>
+                        <td>{question.category ? question.category.join(", ") : ''}</td>
+                        {isAdmin && (
+                            <td>
+                                <ButtonGroup className="mb-2">
+                                    <button 
+                                        className='btn btn-success' 
+                                        onClick={() => handleShowEditModal(question)}
+                                    >
+                                        Edit
+                                    </button>
+                                    <button className='btn btn-danger' size="sm"
+                                        onClick={() => handleShowDelete(question._id)}>
+                                        Delete
+                                    </button>
+                                </ButtonGroup>
+                            </td>
+                        )}
+                    </tr>
+                ))}
+                </tbody>
+            </Table>
         );
     };
 
     return (
-        <div className="container-fluid">
+        <div className="d-flex">
             <div className='bg-white rounded p-3 m-3'>
                 <div className="d-flex justify-content-between">
                     <h1>Questions</h1>
@@ -207,7 +194,14 @@ function Question() {
                 <hr/>
 
                 <div className="container">
-                    {renderQuestionsTable()}
+                    <h2 className="p-2">Easy Questions</h2>
+                    {renderQuestionsTable(easyQuestions)}
+
+                    <h2 className="p-2">Medium Questions</h2>
+                    {renderQuestionsTable(mediumQuestions)}
+
+                    <h2 className="p-2">Hard Questions</h2>
+                    {renderQuestionsTable(hardQuestions)}
 
                         {/* Edit Modal */}
                         <Modal show={showEditModal} onHide={handleCloseEditModal} backdrop="static">

Frontend/src/components/user/EditProfilePage.jsx

@@ -27,14 +27,14 @@ function EditProfilePage() {
     return(
         <div>
             <NavigationBar/>
-            {/* <div className="row"> */}
-                {/* <div className="Navbar col-2">
+            <div className="row">
+                <div className="Navbar col-2">
                     <ProfileSidebar userID={userID}/>
-                </div> */}
-                {/* <div className="col-10"> */}
+                </div>
+                <div className="col-10">
                     <EditProfile/>
-                {/* </div> */}
-            {/* </div> */}
+                </div>
+            </div>
         </div>
     );
 }

Frontend/src/components/user/HistoryPage.jsx

@@ -33,14 +33,14 @@ function HistoryPage() {
     return(
         <div>
             <NavigationBar/>
-            {/* <div className="row"> */}
-                {/* <div className="Navbar col-2">
+            <div className="row">
+                <div className="Navbar col-2">
                     <ProfileSidebar userID={userID}/>
-                </div> */}
-                <div className="container-fluid p-5">
+                </div>
+                <div className="col-10">
                     <HistoryTable userID={userID}/>
                 </div>
-            {/* </div> */}
+            </div>
         </div>
     );
 }