Skip to content

Commit 1eb7b8e

Browse files
ngjiayuanngjiayuan
committed
2 parents c1e1f7a + 3e32a6a commit 1eb7b8e

File tree

8 files changed

+291
-431
lines changed

8 files changed

+291
-431
lines changed

‎src/components/Home.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect } from "react";
22
import { Box } from "@mui/material";
3+
import ButtonModal from "./MatchingService/MatchButton";
34

45
export default function Home() {
56
// Sample data for practice questions (you can replace this with actual data)
@@ -34,6 +35,7 @@ export default function Home() {
3435
</li>
3536
))}
3637
</ul>
38+
<ButtonModal />
3739
</div>
3840
</div>
3941
</Box>

‎src/components/MatchingService/MatchButton.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import Button from '@mui/material/Button';
3+
import Modal from '@mui/material/Modal';
4+
import MatchingForm from './MatchingForm';
5+
6+
export default function ButtonModal() {
7+
const [open, setOpen] = React.useState(false);
8+
const handleOpen = () => setOpen(true);
9+
const handleClose = () => setOpen(false);
10+
11+
return (
12+
<>
13+
<Button variant="contained" onClick={handleOpen}>
14+
Find a Match
15+
</Button>
16+
<Modal
17+
open={open}
18+
onClose={handleClose}
19+
aria-labelledby="modal-modal-title"
20+
aria-describedby="modal-modal-description"
21+
>
22+
<MatchingForm />
23+
</Modal>
24+
</>
25+
);
26+
}

‎src/components/MatchingService/MatchingForm.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as React from 'react';
2+
import { Box } from "@mui/material";
3+
import Button from '@mui/material/Button';
4+
import InputLabel from '@mui/material/InputLabel';
5+
import MenuItem from '@mui/material/MenuItem';
6+
import FormControl from '@mui/material/FormControl';
7+
import Select, { SelectChangeEvent } from '@mui/material/Select';
8+
9+
10+
const style = {
11+
position: 'absolute' as 'absolute',
12+
top: '50%',
13+
left: '50%',
14+
transform: 'translate(-50%, -50%)',
15+
width: '50%',
16+
display: 'flex-wrap',
17+
maxHeight: '60%',
18+
justifyContent: "center",
19+
textAlign: "center",
20+
bgcolor: 'background.paper',
21+
border: '2px solid #000',
22+
boxShadow: 24,
23+
overflow: 'auto',
24+
p: 4,
25+
};
26+
27+
const MatchingForm = React.forwardRef(function MatchingForm() {
28+
const [difficulty, setDifficulty] = React.useState('');
29+
const [category, setCategory] = React.useState('');
30+
const handleDiffChange = (event: SelectChangeEvent) => {
31+
setDifficulty(event.target.value);
32+
};
33+
const handleCatChange = (event: SelectChangeEvent) => {
34+
setCategory(event.target.value);
35+
};
36+
const handleConnect = () => {
37+
console.log('connecting...')
38+
}
39+
return (
40+
<Box sx={style}>
41+
<h2><center>Please select a difficulty and question category.</center></h2>
42+
<h4><center>We will attempt to connect you with a user who chose the same options as you within 30 seconds.</center></h4>
43+
<FormControl sx={{ mt: 1, width: '100%' }}>
44+
<InputLabel id="demo-simple-select-helper-label">Difficulty</InputLabel>
45+
<Select
46+
labelId="demo-simple-select-helper-label"
47+
id="demo-simple-select-helper"
48+
value={difficulty}
49+
label="Difficulty"
50+
onChange={handleDiffChange}
51+
>
52+
<MenuItem value="">
53+
<em>None</em>
54+
</MenuItem>
55+
<MenuItem value={'Easy'}>Easy</MenuItem>
56+
<MenuItem value={'Medium'}>Medium</MenuItem>
57+
<MenuItem value={'Hard'}>Hard</MenuItem>
58+
</Select>
59+
{/* <FormHelperText>Difficulty of Question</FormHelperText> */}
60+
</FormControl>
61+
<FormControl sx={{ mt: 1, mb: 1, width: '100%' }}>
62+
<InputLabel id="demo-simple-select-helper-label">Category</InputLabel>
63+
<Select
64+
labelId="demo-simple-select-helper-label"
65+
id="demo-simple-select-helper"
66+
value={category}
67+
label="Category"
68+
onChange={handleCatChange}
69+
>
70+
<MenuItem value="">
71+
<em>None</em>
72+
</MenuItem>
73+
<MenuItem value={'Algo'}>Algo</MenuItem>
74+
<MenuItem value={'ML'}>ML</MenuItem>
75+
</Select>
76+
{/* <FormHelperText>Difficulty of Question</FormHelperText> */}
77+
</FormControl>
78+
<Button sx={{ mt: '5%' }} variant="contained" onClick={handleConnect}>
79+
Connect
80+
</Button>
81+
</Box>
82+
);
83+
});
84+
85+
export default MatchingForm

‎src/components/Questions/QuestionsTable.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// InterviewQuestionsTable.tsx
2+
3+
import React, { useEffect, useState } from 'react';
4+
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Select, MenuItem, TablePagination, SelectChangeEvent } from '@mui/material';
5+
import { useData } from "../../data/data.context";
6+
7+
interface Question {
8+
title: string;
9+
tags: string[];
10+
categories: string[];
11+
constraints: string[];
12+
difficulty: string;
13+
description: string;
14+
}
15+
16+
const ITEMS_PER_PAGE_OPTIONS = [5, 10]; // Number of items to display per page
17+
18+
const InterviewQuestionsTable: React.FC = () => {
19+
const [questionsData, setQuestions] = useState<Question[]>([]);
20+
const [currentPage, setCurrentPage] = useState<number>(1);
21+
const [itemsPerPage, setItemsPerPage] = useState<number>(ITEMS_PER_PAGE_OPTIONS[0]);
22+
const { questions, getQuestions } = useData();
23+
24+
useEffect(() => {
25+
async function getInterviewQuestions() {
26+
await getQuestions();
27+
}
28+
getInterviewQuestions();
29+
console.log("here");
30+
// eslint-disable-next-line react-hooks/exhaustive-deps
31+
}, []);
32+
33+
useEffect(() => {
34+
setQuestions(questions);
35+
//console.log(questionsData);
36+
}, [questions]);
37+
38+
const handlePageChange = (event: unknown, newPage: number) => {
39+
setCurrentPage(newPage);
40+
};
41+
42+
const handleChangeItemsPerPage = (
43+
event: SelectChangeEvent<unknown>,
44+
) => {
45+
setItemsPerPage(event.target.value as number);
46+
setCurrentPage(1);
47+
};
48+
49+
const indexOfLastQuestion = currentPage * itemsPerPage;
50+
const indexOfFirstQuestion = indexOfLastQuestion - itemsPerPage;
51+
const currentQuestions = questionsData.slice(indexOfFirstQuestion, indexOfLastQuestion);
52+
53+
return (
54+
<><div style={{ maxHeight: '300px', overflowY: 'auto', width: '80%' }}>
55+
<TableContainer component={Paper} style={{ margin: '10px', padding: '10px' }}>
56+
<Table style={{ minWidth: 650, fontSize: '14px' }}>
57+
<TableHead>
58+
<TableRow >
59+
<TableCell>Title</TableCell>
60+
<TableCell>Tags</TableCell>
61+
<TableCell>Categories</TableCell>
62+
<TableCell>Constraints</TableCell>
63+
<TableCell>Difficulty</TableCell>
64+
<TableCell>Description</TableCell>
65+
</TableRow>
66+
</TableHead>
67+
<TableBody>
68+
{currentQuestions.map((question, index) => (
69+
<TableRow key={index}>
70+
<TableCell>{question.title}</TableCell>
71+
<TableCell>{question.tags.join(', ')}</TableCell>
72+
<TableCell>{question.categories.join(', ')}</TableCell>
73+
<TableCell>{question.constraints.join(', ')}</TableCell>
74+
<TableCell>{question.difficulty}</TableCell>
75+
<TableCell>{question.description}</TableCell>
76+
</TableRow>
77+
))}
78+
</TableBody>
79+
</Table>
80+
</TableContainer>
81+
</div><div style={{ display: 'flex', alignItems: 'center' }}>
82+
<Select
83+
value={itemsPerPage}
84+
onChange={handleChangeItemsPerPage}
85+
style={{ marginTop: '10px' }}
86+
>
87+
{ITEMS_PER_PAGE_OPTIONS.map((option) => (
88+
<MenuItem key={option} value={option}>
89+
{`${option} per page`}
90+
</MenuItem>
91+
))}
92+
</Select>
93+
94+
<TablePagination
95+
rowsPerPageOptions={[]}
96+
component="div"
97+
count={questionsData.length}
98+
rowsPerPage={itemsPerPage}
99+
page={currentPage - 1}
100+
onPageChange={handlePageChange} />
101+
</div></>
102+
103+
);
104+
};
105+
106+
export default InterviewQuestionsTable;

0 commit comments

Comments
 (0)