Merge pull request #115 from CS3219-AY2425S1/add-question-description-view

Add Question Description Modal in User History

Author: njxue

backend/question-service/controllers/historyController.ts

@@ -35,6 +35,7 @@ export const getUserHistoryEntries = async (req: any, res: Response) => {
         title: entry.question.title,
         difficulty: entry.question.difficulty,
         topics: entry.question.categories.map((cat: any) => cat.name),
+        description: entry.question.description,
         attemptCodes: entry.attemptCodes.filter((attemptCode) => attemptCode && attemptCode !== ""),
       };
     });

frontend/src/domain/entities/HistoryEntry.ts

@@ -7,5 +7,6 @@ export interface HistoryEntry {
     title: string;
     difficulty: 'Easy' | 'Medium' | 'Hard';
     topics: string[];
+    description: string;
     attemptCodes: string[];
 }

frontend/src/presentation/components/RecentAttemptsTable.tsx

@@ -8,7 +8,7 @@ import { historyUseCases } from "domain/usecases/HistoryUseCases";
 import { ReactMarkdown } from "./common/ReactMarkdown";
 import TabPane from "antd/es/tabs/TabPane";
 import { useNavigate } from "react-router-dom";
-import { EyeOutlined, TeamOutlined } from "@ant-design/icons"; // Importing additional icons
+import { EyeOutlined, TeamOutlined } from "@ant-design/icons";
 
 const formatDate = (dateString: string): string => {
   const options: Intl.DateTimeFormatOptions = {
@@ -42,7 +42,7 @@ const calculateDuration = (start: string, end: string): string => {
 };
 
 export const RecentAttemptsTable: React.FC = () => {
-  const navigate = useNavigate(); // Initialized navigate
+  const navigate = useNavigate();
 
   // State Definitions
   const [recentAttemptsData, setRecentAttemptsData] = useState<HistoryEntry[]>([]);
@@ -53,6 +53,10 @@ export const RecentAttemptsTable: React.FC = () => {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [currentCodes, setCurrentCodes] = useState<string[]>([]);
 
+  // Modal State for Viewing Description
+  const [isDescriptionModalVisible, setIsDescriptionModalVisible] = useState<boolean>(false);
+  const [currentDescription, setCurrentDescription] = useState<string>('');
+
   // Fetch Recent Attempts on Component Mount
   useEffect(() => {
     fetchRecentAttempts();
@@ -130,6 +134,18 @@ export const RecentAttemptsTable: React.FC = () => {
     setCurrentCodes([]);
   };
 
+  // Function to Show Description Modal
+  const showDescriptionModal = (description: string) => {
+    setCurrentDescription(description);
+    setIsDescriptionModalVisible(true);
+  };
+
+  // Function to Close Description Modal
+  const handleDescriptionModalClose = () => {
+    setIsDescriptionModalVisible(false);
+    setCurrentDescription('');
+  };
+
   // Define Columns for the Table
   const columns: ColumnsType<HistoryEntry> = [
     {
@@ -169,7 +185,11 @@ export const RecentAttemptsTable: React.FC = () => {
       title: 'Title',
       dataIndex: 'title',
       key: 'title',
-      render: (text: string) => <Typography.Text>{text}</Typography.Text>,
+      render: (text: string, record: HistoryEntry) => (
+        <Typography.Link onClick={() => showDescriptionModal(record.description)}>
+          {text}
+        </Typography.Link>
+      ),
     },
     {
       title: 'Difficulty',
@@ -306,6 +326,18 @@ export const RecentAttemptsTable: React.FC = () => {
           <Empty description="No code available" />
         )}
       </Modal>
+
+      <Modal
+        title="Question Description"
+        open={isDescriptionModalVisible}
+        onCancel={handleDescriptionModalClose}
+        footer={null}
+        width={800}
+      >
+        <div style={{ height: '100%', overflow: 'auto', padding: '16px' }}>
+          <ReactMarkdown isReadOnly value={currentDescription} />
+        </div>
+      </Modal>
     </div>
   );
 };