Merge pull request CS3219-AY2324S1#255 from CS3219-AY2324S1/dev-lhy

Bugfix: resolve table page length bug
anthonynmh · Nov 12, 2023 · 637f646 · 637f646
2 parents ed95c7e + f34773d
commit 637f646
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 55 deletions.
diff --git a/frontend/src/components/Question/QuestionContent.js b/frontend/src/components/Question/QuestionContent.js
@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import { renderTags, getComplexityColor } from'./index';
 import '../../css/QuestionContent.css';
 
 const QuestionContent = ({ question }) => {
@@ -8,29 +9,6 @@ const QuestionContent = ({ question }) => {
     return DOMPurify.sanitize(html);
   };
 
-  const renderTags = (tags) => {
-    return tags?.map((tag, index) => {
-      return (
-        <span key={index} className='badge bg-secondary'>
-          {tag}
-        </span>
-      );
-    });
-  };
-
-  const getComplexityColor = (complexity) => {
-    switch (complexity) {
-      case 'Easy':
-        return 'bg-success';
-      case 'Medium':
-        return 'bg-warning';
-      case 'Hard':
-        return 'bg-danger';
-      default:
-        return 'bg-primary';
-    }
-  };
-
   return (
     <div className='question-content-container'>
       <div className='card-body'>

diff --git a/frontend/src/components/Question/QuestionList.js b/frontend/src/components/Question/QuestionList.js
@@ -4,6 +4,7 @@ import $ from 'jquery';
 
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { renderTags, getComplexityColor } from './index';
 import Spinner from '../Spinner';
 import { getQuestions } from '../../api/QuestionApi';
 import { errorHandler } from '../../utils/errors';
@@ -21,8 +22,8 @@ const QuestionList = () => {
   const tbConsts = Tables.Questions;
 
   // The '-pre' postfix is needed, do not change
-  $.fn.dataTable.ext.type.order[ tbConsts.CustomSort.ColumnName + '-pre']
-    = function ( a ) {
+  $.fn.dataTable.ext.type.order[tbConsts.CustomSort.ColumnName + '-pre']
+    = function (a) {
       return $.inArray(a, tbConsts.CustomSort.SortOrder);
     };
 
@@ -52,7 +53,7 @@ const QuestionList = () => {
 
       // Initialize DataTables
       const pageLengthPref =
-        sessionStorage.getItem('question-table-page-length') ||
+        parseInt(sessionStorage.getItem('question-table-page-length')) ||
         tbConsts.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
         pageLength: pageLengthPref,
@@ -63,7 +64,7 @@ const QuestionList = () => {
       });
 
       // Attach listener: on table pageLength change
-      $(tableRef.current).on('length.dt', function ( e, settings, len ) {
+      $(tableRef.current).on('length.dt', function (e, settings, len) {
         sessionStorage.setItem('question-table-page-length', len);
       });
     }
@@ -77,36 +78,13 @@ const QuestionList = () => {
     navigate('/question/new');
   };
 
-  const RenderTags = (tags) => {
-    return tags?.map((tag, index) => {
-      return (
-        <span key={index} className='badge bg-secondary'>
-          {tag}
-        </span>
-      );
-    });
-  };
-
-  const getComplexityColor = (complexity) => {
-    switch (complexity) {
-      case 'Easy':
-        return 'bg-success';
-      case 'Medium':
-        return 'bg-warning';
-      case 'Hard':
-        return 'bg-danger';
-      default:
-        return 'bg-primary';
-    }
-  };
-
   const questionList = tableData.map((question, index) => (
     <tr key={question._id} onClick={() => handleRowClick(question._id)}>
       <th scope='row'>{index + 1}</th>
       <td style={{ maxWidth: '300px', wordWrap: 'break-word' }}>
         {question.title}
       </td>
-      <td>{RenderTags(question.tags)}</td>
+      <td>{renderTags(question.tags)}</td>
       <td>
         <span className={`badge ${getComplexityColor(question?.complexity)}`}>
           {question.complexity}

diff --git a/frontend/src/components/Question/index.js b/frontend/src/components/Question/index.js
@@ -1,3 +1,22 @@
 export { default as QuestionList } from './QuestionList';
 export { default as QuestionContent } from './QuestionContent';
 export { default as QuestionForm } from './QuestionForm';
+
+export function renderTags(tags) {
+    return tags?.map((tag, index) => {
+      return (
+        <span key={index} className='badge bg-secondary'>
+          {tag}
+        </span>
+      );
+    });
+  };
+
+export function getComplexityColor(complexity) {
+    switch (complexity) {
+      case 'Easy':   return 'bg-success';
+      case 'Medium': return 'bg-warning';
+      case 'Hard':   return 'bg-danger';
+      default:       return 'bg-primary';
+    }
+  };
diff --git a/frontend/src/components/SubmissionHistory/SubmissionList.js b/frontend/src/components/SubmissionHistory/SubmissionList.js
@@ -46,14 +46,14 @@ const SubmissionList = () => {
 
       // Initialize DataTables
       const pageLengthPref =
-        sessionStorage.getItem('submission-table-page-length') ||
+        parseInt(sessionStorage.getItem('submission-table-page-length')) ||
         Tables.Submissions.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
         pageLength: pageLengthPref
       });
 
       // Attach listener: on table pageLength change
-      $(tableRef.current).on('length.dt', function ( e, settings, len ) {
+      $(tableRef.current).on('length.dt', function (e, settings, len) {
         sessionStorage.setItem('submission-table-page-length', len);
       });
     }

diff --git a/frontend/src/components/User/UserList.js b/frontend/src/components/User/UserList.js
@@ -60,14 +60,14 @@ const UserList = () => {
 
       // Initialize DataTables
       const pageLengthPref =
-        sessionStorage.getItem('user-table-page-length') ||
+        parseInt(sessionStorage.getItem('user-table-page-length')) ||
         Tables.Users.DEFAULT_PAGE_LENGTH;
       dataTableRef.current = $(tableRef.current).DataTable({
         pageLength: pageLengthPref
       });
 
       // Attach listener: on table pageLength change
-      $(tableRef.current).on('length.dt', function ( e, settings, len ) {
+      $(tableRef.current).on('length.dt', function (e, settings, len) {
         sessionStorage.setItem('user-table-page-length', len);
       });
     }