PEER-248: Connect question list and details

Author: cyiting

frontend/src/assets/dummyData.ts

@@ -1,4 +1,4 @@
-import { Question } from '@/routes/questions/logic';
+import { Question } from '@/types/question-types';
 
 export const dummyData: Question[] = [
   {

frontend/src/lib/router.tsx

@@ -11,7 +11,7 @@ import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
 import { ROUTES } from './routes';
-import { QuestionsList } from '@/routes/questions/list';
+import { Questions } from '@/routes/questions/main';
 
 export const router = createBrowserRouter([
   {
@@ -27,7 +27,7 @@ export const router = createBrowserRouter([
             children: [
               {
                 path: ROUTES.QUESTIONS,
-                element: <QuestionsList />,
+                element: <Questions />,
               },
               {
                 path: ROUTES.QUESTION_DETAILS,

frontend/src/routes/questions/list.tsx

@@ -1,11 +1,23 @@
 import { useEffect, useState } from 'react';
 import { columns } from './table-columns';
 import { QuestionTable } from './question-table';
-import { fetchQuestions, Question, ROWS_PER_PAGE } from './logic';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { IGetQuestionsResponse } from '@/types/question-types';
+import { IGetQuestionsResponse, Question } from '@/types/question-types';
+import { useCrumbs } from '@/lib/hooks/use-crumbs';
+import { WithNavBanner } from '@/components/blocks/authed/with-nav-banner';
+import { dummyData } from '@/assets/dummyData';
+
+const ROWS_PER_PAGE = 12;
+async function fetchQuestions(): Promise<IGetQuestionsResponse> {
+  return {
+    questions: dummyData,
+    totalQuestions: 20,
+  };
+}
+
+export function Questions() {
+  const { crumbs } = useCrumbs();
 
-export default function Questions() {
   const [questions, setQuestions] = useState<Question[]>([]);
 
   const { data, error, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useInfiniteQuery<
@@ -40,8 +52,10 @@ export default function Questions() {
   }, [data]);
 
   return (
-    <div className='container mx-auto py-10'>
-      <QuestionTable columns={columns} data={questions} isError={isError} />
-    </div>
+    <WithNavBanner crumbs={crumbs}>
+      <div className='container mx-auto py-3'>
+        <QuestionTable columns={columns} data={questions} isError={isError} />
+      </div>
+    </WithNavBanner>
   );
 }

frontend/src/routes/questions/logic.ts

@@ -17,11 +17,14 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from '@radix-ui/react-icons';
 import { Pagination, PaginationContent, PaginationItem } from '@/components/ui/pagination';
 import { Input } from '@/components/ui/input';
-
-import { DIFFICULTY_OPTIONS, ROWS_PER_PAGE } from './logic';
 import {
   Select,
   SelectContent,
@@ -30,6 +33,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 interface QuestionTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -44,7 +48,7 @@ export function QuestionTable<TData, TValue>({
 }: QuestionTableProps<TData, TValue>) {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: ROWS_PER_PAGE,
+    pageSize: 12,
   });
 
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -74,7 +78,7 @@ export function QuestionTable<TData, TValue>({
       <div className='flex items-center py-4'>
         <div className='mr-2'>
           <Select onValueChange={handleStatusFilterChange}>
-            <SelectTrigger className='w-[110px]'>
+            <SelectTrigger className='w-[140px]'>
               <SelectValue placeholder='Status' />
             </SelectTrigger>
             <SelectContent>
@@ -86,18 +90,14 @@ export function QuestionTable<TData, TValue>({
         </div>
         <div className='mr-2'>
           <Select onValueChange={handleDifficultyFilterChange}>
-            <SelectTrigger className='w-[110px]'>
+            <SelectTrigger className='w-[140px]'>
               <SelectValue placeholder='Difficulty' />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value='all'>All</SelectItem>
-              {DIFFICULTY_OPTIONS.map((difficulty) => {
-                return (
-                  <SelectItem key={difficulty.toLowerCase()} value={difficulty}>
-                    {difficulty}
-                  </SelectItem>
-                );
-              })}
+              <SelectItem value='Easy'>Easy</SelectItem>
+              <SelectItem value='Medium'>Medium</SelectItem>
+              <SelectItem value='Hard'>Hard</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -131,7 +131,9 @@ export function QuestionTable<TData, TValue>({
                 <TableRow key={row.id}>
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      <Link to={`/questions/${row.id}`}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </Link>
                     </TableCell>
                   ))}
                 </TableRow>
@@ -149,6 +151,16 @@ export function QuestionTable<TData, TValue>({
       <Pagination className='flex items-center justify-end space-x-2 py-4'>
         <PaginationContent>
           <PaginationItem>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => table.firstPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <DoubleArrowLeftIcon />
+            </Button>
+          </PaginationItem>
+          <PaginationItem className='mr-1'>
             <Button
               variant='outline'
               size='sm'
@@ -158,7 +170,10 @@ export function QuestionTable<TData, TValue>({
               <ArrowLeftIcon />
             </Button>
           </PaginationItem>
-          <PaginationItem>
+          <PaginationItem className='text-sm'>
+            {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          </PaginationItem>
+          <PaginationItem className='ml-1'>
             <Button
               variant='outline'
               size='sm'
@@ -168,6 +183,16 @@ export function QuestionTable<TData, TValue>({
               <ArrowRightIcon />
             </Button>
           </PaginationItem>
+          <PaginationItem>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => table.lastPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <DoubleArrowRightIcon />
+            </Button>
+          </PaginationItem>
         </PaginationContent>
       </Pagination>
     </div>

frontend/src/routes/questions/main.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@/components/ui/badge';
+import { Question } from '@/types/question-types';
 import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { ColumnDef } from '@tanstack/react-table';
-import { Question } from './logic';
 
 export const columns: ColumnDef<Question>[] = [
   {
@@ -20,7 +20,12 @@ export const columns: ColumnDef<Question>[] = [
   {
     accessorKey: 'difficulty',
     header: 'Difficulty',
-    cell: ({ getValue }) => getValue(),
+    cell: ({ getValue }) => {
+      const difficulty = getValue() as string;
+      return (
+        <Badge variant={difficulty.toLowerCase() as 'easy' | 'medium' | 'hard'}>{difficulty}</Badge>
+      );
+    },
     filterFn: 'equals',
   },
   {
@@ -31,7 +36,7 @@ export const columns: ColumnDef<Question>[] = [
       return (
         <div>
           {topics.map((topic) => (
-            <Badge className='mr-1 text-xs' key={topic} variant='outline'>
+            <Badge className='mr-1 text-xs' key={topic} variant='secondary'>
               {topic}
             </Badge>
           ))}

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

@@ -1,4 +1,10 @@
-import { Question } from '../routes/questions/logic';
+export type Question = {
+  number: number;
+  name: string;
+  difficulty: 'Easy' | 'Medium' | 'Hard';
+  topic: Array<string>;
+  attempted: boolean;
+};
 
 export type IGetQuestionsResponse = {
   questions: Array<Question>;