PEER-248: Edit questions table title

Author: cyiting

frontend/src/assets/dummyData.ts

@@ -2,87 +2,80 @@ import { Question } from '@/types/question-types';
 
 export const dummyData: Question[] = [
   {
-    number: 1,
+    id: 1,
     attempted: true,
-    name: 'Basic Arrays',
+    title: 'Basic Arrays',
     difficulty: 'Easy',
     topic: ['Arrays', 'Basic'],
   },
   {
-    number: 2,
+    id: 2,
     attempted: false,
-    name: 'Sorting Algorithms',
+    title: 'Sorting Algorithms',
     difficulty: 'Medium',
     topic: ['Algorithms', 'Sorting'],
   },
   {
-    number: 3,
+    id: 3,
     attempted: true,
-    name: 'Graph Traversal',
+    title: 'Graph Traversal',
     difficulty: 'Hard',
     topic: ['Graphs', 'DFS', 'BFS'],
   },
   {
-    number: 4,
+    id: 4,
     attempted: false,
-    name: 'Dynamic Programming',
+    title: 'Dynamic Programming',
     difficulty: 'Hard',
     topic: ['Dynamic Programming'],
   },
   {
-    number: 5,
+    id: 5,
     attempted: true,
-    name: 'Binary Search Trees',
+    title: 'Binary Search Trees',
     difficulty: 'Medium',
     topic: ['Trees', 'Binary Search'],
   },
   {
-    number: 6,
+    id: 6,
     attempted: false,
-    name: 'Recursion Basics',
+    title: 'Recursion Basics',
     difficulty: 'Easy',
     topic: ['Recursion'],
   },
   {
-    number: 7,
+    id: 7,
     attempted: true,
-    name: 'Hash Tables',
+    title: 'Hash Tables',
     difficulty: 'Easy',
     topic: ['Data Structures', 'Hashing'],
   },
   {
-    number: 8,
+    id: 8,
     attempted: false,
-    name: 'Graph Algorithms',
+    title: 'Graph Algorithms',
     difficulty: 'Medium',
     topic: ['Graphs', 'Shortest Path'],
   },
   {
-    number: 9,
+    id: 9,
     attempted: true,
-    name: 'Object-Oriented Programming',
+    title: 'Object-Oriented Programming',
     difficulty: 'Medium',
     topic: ['OOP', 'Classes', 'Inheritance'],
   },
   {
-    number: 10,
+    id: 10,
     attempted: false,
-    name: 'Concurrency Basics',
+    title: 'Concurrency Basics',
     difficulty: 'Hard',
     topic: ['Concurrency', 'Multithreading'],
   },
   {
-    number: 11,
+    id: 11,
     attempted: true,
-    name: 'Machine Learning Introduction',
+    title: 'Machine Learning Introduction',
     difficulty: 'Medium',
     topic: ['Machine Learning', 'Algorithms'],
   },
-  {
-    number: 12,
-    attempted: false,
-    name: 'Database Normalization',
-    difficulty: 'Medium',
-    topic: ['Databases', 'Normalization'],
-  },
 ];

frontend/src/routes/questions/question-table.tsx

@@ -103,8 +103,8 @@ export function QuestionTable<TData, TValue>({
         </div>
         <Input
           placeholder='Search questions...'
-          value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-          onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+          value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
+          onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
           className='max-w-sm'
         />
       </div>

frontend/src/routes/questions/table-columns.tsx

@@ -14,8 +14,18 @@ export const columns: ColumnDef<Question>[] = [
     filterFn: 'equals',
   },
   {
-    accessorKey: 'name',
-    header: 'Name',
+    accessorKey: 'title',
+    header: 'Title',
+    cell: ({ row }) => {
+      const id: number = row.original.id;
+      const title: string = row.getValue('title');
+      console.log(row);
+      return (
+        <p>
+          {id}.&nbsp;{title}
+        </p>
+      );
+    },
   },
   {
     accessorKey: 'difficulty',

frontend/src/types/question-types.ts

@@ -1,6 +1,6 @@
 export type Question = {
-  number: number;
-  name: string;
+  id: number;
+  title: string;
   difficulty: 'Easy' | 'Medium' | 'Hard';
   topic: Array<string>;
   attempted: boolean;