Skip to content

Commit e4a6b1a

Browse files
charltonatorcharltonator
committed
make clickable questions and larger title
1 parent b09c008 commit e4a6b1a

File tree

1 file changed

+143
-104
lines changed

1 file changed

+143
-104
lines changed

‎frontend/src/components/Questions/QuestionsTable.tsx‎

Lines changed: 143 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,168 @@
1-
import React, { useEffect, useState } from 'react';
2-
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Select, MenuItem, TablePagination, SelectChangeEvent } from '@mui/material';
1+
// InterviewQuestionsTable.tsx
2+
3+
import React, { useEffect, useState } from "react";
4+
import { Link } from "react-router-dom";
5+
import {
6+
Table,
7+
TableBody,
8+
TableCell,
9+
TableContainer,
10+
TableHead,
11+
TableRow,
12+
Paper,
13+
Select,
14+
MenuItem,
15+
TablePagination,
16+
SelectChangeEvent,
17+
} from "@mui/material";
318
import { useData } from "../../data/data.context";
419

520
interface Question {
21+
id: string;
622
title: string;
723
tags: string[];
824
categories: string[];
925
constraints: string[];
1026
difficulty: string;
11-
//description: string;
27+
description: string;
28+
examples: any;
1229
}
1330

14-
const ITEMS_PER_PAGE_OPTIONS = [5, 10];
31+
const ITEMS_PER_PAGE_OPTIONS = [5, 10]; // Number of items to display per page
1532

1633
const InterviewQuestionsTable: React.FC = () => {
17-
const [questionsData, setQuestions] = useState<Question[]>([]);
18-
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
19-
const [currentPage, setCurrentPage] = useState<number>(1);
20-
const [itemsPerPage, setItemsPerPage] = useState<number>(ITEMS_PER_PAGE_OPTIONS[0]);
21-
const { questions, getQuestions } = useData();
34+
const [questionsData, setQuestions] = useState<Question[]>([]);
35+
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
36+
const [currentPage, setCurrentPage] = useState<number>(1);
37+
const [itemsPerPage, setItemsPerPage] = useState<number>(
38+
ITEMS_PER_PAGE_OPTIONS[0]
39+
);
40+
const { questions, getQuestions } = useData();
2241

23-
useEffect(() => {
24-
async function getInterviewQuestions() {
25-
getQuestions();
26-
}
27-
getInterviewQuestions();
42+
useEffect(() => {
43+
async function getInterviewQuestions() {
44+
getQuestions();
45+
}
46+
getInterviewQuestions();
47+
// console.log("here");
2848
// eslint-disable-next-line react-hooks/exhaustive-deps
29-
}, []);
30-
31-
useEffect(() => {
32-
setQuestions(questions);
33-
}, [questions]);
49+
}, []);
3450

35-
const handleCategoriesChange = (event: SelectChangeEvent<unknown>) => {
36-
setSelectedCategories(event.target.value as string[]);
37-
};
51+
useEffect(() => {
52+
setQuestions(questions);
53+
//console.log(questionsData);
54+
}, [questions]);
3855

39-
const uniqueCategories = Array.from(new Set(questionsData.flatMap(question => question.categories)));
56+
const handleCategoriesChange = (event: SelectChangeEvent<unknown>) => {
57+
setSelectedCategories(event.target.value as string[]);
58+
};
4059

41-
const filteredQuestions = questionsData.filter(question =>
42-
selectedCategories.length === 0 ||
43-
selectedCategories.some(cat => question.categories.includes(cat))
44-
);
60+
const uniqueCategories = Array.from(new Set(questionsData.flatMap(question => question.categories)));
4561

46-
const handlePageChange = (event: unknown, newPage: number) => {
47-
setCurrentPage(newPage);
48-
};
62+
const filteredQuestions = questionsData.filter(question =>
63+
selectedCategories.length === 0 ||
64+
selectedCategories.some(cat => question.categories.includes(cat))
65+
);
4966

50-
const handleChangeItemsPerPage = (
51-
event: SelectChangeEvent<unknown>,
52-
) => {
53-
setItemsPerPage(event.target.value as number);
54-
setCurrentPage(1);
55-
};
67+
const handlePageChange = (event: unknown, newPage: number) => {
68+
setCurrentPage(newPage);
69+
};
5670

57-
const indexOfLastQuestion = currentPage * itemsPerPage;
58-
const indexOfFirstQuestion = indexOfLastQuestion - itemsPerPage;
59-
const currentQuestions = filteredQuestions.slice(indexOfFirstQuestion, indexOfLastQuestion);
71+
const handleChangeItemsPerPage = (event: SelectChangeEvent<unknown>) => {
72+
setItemsPerPage(event.target.value as number);
73+
setCurrentPage(1);
74+
};
6075

61-
return (
62-
<>
63-
{/* Category Filter */}
64-
<Select
65-
multiple
66-
value={selectedCategories}
67-
onChange={handleCategoriesChange}
68-
renderValue={(selected) => (selected as string[]).join(', ')}
69-
style={{ marginTop: '10px', marginBottom: '10px', width: '80%' }}
70-
>
71-
{uniqueCategories.map((category) => (
72-
<MenuItem key={category} value={category}>
73-
{category}
74-
</MenuItem>
75-
))}
76-
</Select>
76+
const indexOfLastQuestion = currentPage * itemsPerPage;
77+
const indexOfFirstQuestion = indexOfLastQuestion - itemsPerPage;
78+
const currentQuestions = filteredQuestions.slice(
79+
indexOfFirstQuestion,
80+
indexOfLastQuestion
81+
);
7782

78-
<div style={{ maxHeight: '300px', overflowY: 'auto', width: '80%' }}>
79-
<TableContainer component={Paper} style={{ margin: '10px', padding: '10px' }}>
80-
<Table style={{ minWidth: 650, fontSize: '14px' }}>
81-
<TableHead>
82-
<TableRow>
83-
<TableCell>Title</TableCell>
84-
<TableCell>Tags</TableCell>
85-
<TableCell>Categories</TableCell>
86-
<TableCell>Constraints</TableCell>
87-
<TableCell>Difficulty</TableCell>
88-
</TableRow>
89-
</TableHead>
90-
<TableBody>
91-
{currentQuestions.map((question: Question, index: number) => (
92-
<TableRow key={index}>
93-
<TableCell>{question.title}</TableCell>
94-
<TableCell>{question.tags.join(', ')}</TableCell>
95-
<TableCell>{question.categories.join(', ')}</TableCell>
96-
<TableCell>{question.constraints.join(', ')}</TableCell>
97-
<TableCell>{question.difficulty}</TableCell>
98-
</TableRow>
99-
))}
100-
</TableBody>
101-
</Table>
102-
</TableContainer>
103-
</div>
104-
<div style={{ display: 'flex', alignItems: 'center' }}>
105-
<Select
106-
value={itemsPerPage}
107-
onChange={handleChangeItemsPerPage}
108-
style={{ marginTop: '10px' }}
109-
>
110-
{ITEMS_PER_PAGE_OPTIONS.map((option) => (
111-
<MenuItem key={option} value={option}>
112-
{`${option} per page`}
113-
</MenuItem>
114-
))}
115-
</Select>
83+
return (
84+
<>
85+
{/* Category Filter */}
86+
<Select
87+
multiple
88+
value={selectedCategories}
89+
onChange={handleCategoriesChange}
90+
renderValue={(selected) => (selected as string[]).join(", ")}
91+
style={{ marginTop: "10px", marginBottom: "10px", width: "80%" }}
92+
>
93+
{uniqueCategories.map((category) => (
94+
<MenuItem key={category} value={category}>
95+
{category}
96+
</MenuItem>
97+
))}
98+
</Select>
99+
<div style={{ maxHeight: "300px", overflowY: "auto", width: "80%" }}>
100+
<TableContainer
101+
component={Paper}
102+
style={{ margin: "10px", padding: "10px" }}
103+
>
104+
<Table style={{ minWidth: 650, fontSize: "14px" }}>
105+
<TableHead>
106+
<TableRow>
107+
<TableCell>Title</TableCell>
108+
<TableCell>Tags</TableCell>
109+
<TableCell>Categories</TableCell>
110+
{/* <TableCell>Constraints</TableCell> */}
111+
<TableCell>Difficulty</TableCell>
112+
{/* <TableCell>Description</TableCell> */}
113+
</TableRow>
114+
</TableHead>
115+
<TableBody>
116+
{currentQuestions.map((question: Question, index: number) => (
117+
<TableRow key={index}>
118+
<TableCell>
119+
<Link
120+
to={`/question/${question.id}`}
121+
style={{
122+
textDecoration: "none",
123+
color: "inherit",
124+
fontSize: "16px", // Adjust to your preference
125+
fontWeight: "bold",
126+
}}
127+
>
128+
{question.title}
129+
</Link>
130+
</TableCell>
131+
<TableCell>{question.tags.join(", ")}</TableCell>
132+
<TableCell>{question.categories.join(", ")}</TableCell>
133+
{/* <TableCell>{question.constraints.join(', ')}</TableCell> */}
134+
<TableCell>{question.difficulty}</TableCell>
135+
{/* <TableCell>{question.description}</TableCell> */}
136+
</TableRow>
137+
))}
138+
</TableBody>
139+
</Table>
140+
</TableContainer>
141+
</div>
142+
<div style={{ display: "flex", alignItems: "center" }}>
143+
<Select
144+
value={itemsPerPage}
145+
onChange={handleChangeItemsPerPage}
146+
style={{ marginTop: "10px" }}
147+
>
148+
{ITEMS_PER_PAGE_OPTIONS.map((option) => (
149+
<MenuItem key={option} value={option}>
150+
{`${option} per page`}
151+
</MenuItem>
152+
))}
153+
</Select>
116154

117-
<TablePagination
118-
rowsPerPageOptions={[]}
119-
component="div"
120-
count={filteredQuestions.length}
121-
rowsPerPage={itemsPerPage}
122-
page={currentPage - 1}
123-
onPageChange={handlePageChange} />
124-
</div>
125-
</>
126-
);
155+
<TablePagination
156+
rowsPerPageOptions={[]}
157+
component="div"
158+
count={questionsData.length}
159+
rowsPerPage={itemsPerPage}
160+
page={currentPage - 1}
161+
onPageChange={handlePageChange}
162+
/>
163+
</div>
164+
</>
165+
);
127166
};
128167

129-
export default InterviewQuestionsTable;
168+
export default InterviewQuestionsTable;

0 commit comments

Comments
 (0)