Skip to content

Commit 27ce543

Browse files
SeeuSimSeeuSim
authored
Merge pull request #55 from CS3219-AY2425S1/bug/match-service-integration
Bug/match service integration
2 parents 97f8c31 + 80b745b commit 27ce543

File tree

4 files changed

+107
-73
lines changed

4 files changed

+107
-73
lines changed

‎backend/matching/src/services/get-match-items.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { IMatchItemsResponse, IMatchType } from '../types/index';
1+
import type { IMatchItemsResponse, IMatchType } from '@/types';
2+
23
import { createRoom } from './collab';
34
import { getRandomQuestion } from './question';
45
import { fetchAttemptedQuestions } from './user';
@@ -21,24 +22,26 @@ export async function getMatchItems(
2122
]);
2223

2324
const allAttemptedQuestions = [...new Set([...attemptedQuestions1, ...attemptedQuestions2])];
24-
25+
const topics = topic?.split('|') ?? [];
2526
const payload = {
2627
attemptedQuestions: allAttemptedQuestions,
2728
...(searchIdentifier === 'difficulty' && difficulty ? { difficulty } : {}),
28-
...(searchIdentifier === 'topic' && topic ? { topic } : {}),
29-
...(searchIdentifier === 'exact match' && topic && difficulty ? { topic, difficulty } : {}),
29+
...(searchIdentifier === 'topic' && topic ? { topic: topics } : {}),
30+
...(searchIdentifier === 'exact match' && topic && difficulty
31+
? { topic: topics, difficulty }
32+
: {}),
3033
};
3134

3235
// Get a random question
3336
const question = await getRandomQuestion(payload);
3437

35-
const roomName = await createRoom(userId1, userId2, question.id.toString());
38+
const roomId = await createRoom(userId1, userId2, question.id.toString());
3639

3740
console.log('Successfully got match items');
3841
return {
39-
roomName,
42+
roomId,
4043
questionId: question.id,
41-
question,
44+
// question,
4245
};
4346
} catch (error) {
4447
console.error('Error in getMatchItems:', error);

‎backend/matching/src/types/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,20 +54,20 @@ export interface IServiceResponse<T> {
5454

5555
export interface IQuestion {
5656
id: number;
57-
title: string;
58-
description: string;
59-
difficulty: string;
60-
topic: string[];
57+
// title: string;
58+
// description: string;
59+
// difficulty: string;
60+
// topic: string[];
6161
}
6262

6363
export interface IGetRandomQuestionPayload {
6464
attemptedQuestions: number[];
6565
difficulty?: string;
66-
topic?: string;
66+
topic?: Array<string>;
6767
}
6868

6969
export interface IMatchItemsResponse {
70-
roomName: string;
70+
roomId: string;
7171
questionId: number;
72-
question: IQuestion;
72+
// question: IQuestion;
7373
}

‎frontend/src/routes/match/match-form.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ interface MatchFormProps {
2929
topics: string[];
3030
}
3131

32+
const DIFFICULTIES = ['Easy', 'Medium', 'Hard'] as const;
33+
3234
export const MatchForm = ({ topics }: MatchFormProps) => {
3335
const [isModalOpen, setIsModalOpen] = useState(false);
3436

@@ -105,9 +107,11 @@ export const MatchForm = ({ topics }: MatchFormProps) => {
105107
</SelectTrigger>
106108
</FormControl>
107109
<SelectContent>
108-
<SelectItem value='easy'>Easy</SelectItem>
109-
<SelectItem value='medium'>Medium</SelectItem>
110-
<SelectItem value='hard'>Hard</SelectItem>
110+
{DIFFICULTIES.map((value, index) => (
111+
<SelectItem key={index} value={value}>
112+
{value}
113+
</SelectItem>
114+
))}
111115
</SelectContent>
112116
</Select>
113117
<FormMessage />

‎frontend/src/routes/match/waiting-room/waiting.tsx‎

Lines changed: 83 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -88,60 +88,63 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
8888

8989
socket.on(WS_EVENT.CONNECT, () => {
9090
console.log('Connected to server');
91-
socket.emit(WS_EVENT.JOIN_ROOM, socketPort);
92-
socket.emit(WS_EVENT.START_QUEUING, {
93-
roomId: socketPort,
94-
userId: getUserId(),
95-
topic: values?.selectedTopics,
96-
difficulty: values?.difficulty,
97-
});
98-
socket.on(MATCHING_EVENT.QUEUED, () => {
99-
setUIState((prevState) => ({ ...prevState, connected: true }));
100-
});
101-
102-
socket.on(WS_EVENT.MESSAGE, (data) => {
103-
console.log('Message from server:', data);
104-
});
105-
106-
socket.on(MATCHING_EVENT.MATCHING, () => {
107-
console.log('Matching in progress');
108-
setUIState((prev) => ({ ...prev, canCancel: false }));
109-
});
110-
111-
socket.on(MATCHING_EVENT.PENDING, () => {
112-
console.log('Waiting in pool');
113-
setUIState((prev) => ({ ...prev, canCancel: true }));
114-
});
115-
116-
socket.on(MATCHING_EVENT.SUCCESS, (data) => {
117-
console.log(`Received match: ${JSON.stringify(data)}`);
118-
119-
const roomId = data?.roomId;
120-
const questionId = data?.questionId;
121-
countdownRef.current = 0;
122-
clearInterval(timerRef.current!);
123-
124-
setUIState((prevState) => ({ ...prevState, uiState: UI_STATUS.SUCCESS_STATUS }));
125-
updateDescription(`RoomId: ${roomId}\nQuestionId: ${questionId} `);
126-
socket.close();
127-
});
128-
129-
socket.on(MATCHING_EVENT.FAILED, () => {
130-
countdownRef.current = 0;
131-
setUIState((prevState) => ({ ...prevState, uiState: UI_STATUS.FAILED_STATUS }));
132-
});
133-
134-
socket.on(MATCHING_EVENT.ERROR, (errorMessage: string) => {
135-
countdownRef.current = 0;
136-
setUIState((prevState) => ({
137-
...prevState,
138-
uiState: { ...UI_STATUS.FAILED_STATUS, description: errorMessage },
139-
}));
140-
});
141-
142-
socket.on(MATCHING_EVENT.DISCONNECT, () => {
143-
socket.close();
144-
});
91+
});
92+
93+
socket.emit(WS_EVENT.JOIN_ROOM, socketPort);
94+
95+
socket.emit(WS_EVENT.START_QUEUING, {
96+
roomId: socketPort,
97+
userId: getUserId(),
98+
topic: values?.selectedTopics,
99+
difficulty: values?.difficulty,
100+
});
101+
102+
socket.on(MATCHING_EVENT.QUEUED, () => {
103+
setUIState((prevState) => ({ ...prevState, connected: true }));
104+
});
105+
106+
socket.on(WS_EVENT.MESSAGE, (data) => {
107+
console.log('Message from server:', data);
108+
});
109+
110+
socket.on(MATCHING_EVENT.MATCHING, () => {
111+
console.log('Matching in progress');
112+
setUIState((prev) => ({ ...prev, canCancel: false }));
113+
});
114+
115+
socket.on(MATCHING_EVENT.PENDING, () => {
116+
console.log('Waiting in pool');
117+
setUIState((prev) => ({ ...prev, canCancel: true }));
118+
});
119+
120+
socket.on(MATCHING_EVENT.SUCCESS, (data) => {
121+
console.log(`Received match: ${JSON.stringify(data)}`);
122+
123+
const roomId = data?.roomId;
124+
const questionId = data?.questionId;
125+
countdownRef.current = 0;
126+
clearInterval(timerRef.current!);
127+
128+
setUIState((prevState) => ({ ...prevState, uiState: UI_STATUS.SUCCESS_STATUS }));
129+
updateDescription(`RoomId: ${roomId}\nQuestionId: ${questionId} `);
130+
socket.close();
131+
});
132+
133+
socket.on(MATCHING_EVENT.FAILED, () => {
134+
countdownRef.current = 0;
135+
setUIState((prevState) => ({ ...prevState, uiState: UI_STATUS.FAILED_STATUS }));
136+
});
137+
138+
socket.on(MATCHING_EVENT.ERROR, (errorMessage: string) => {
139+
countdownRef.current = 0;
140+
setUIState((prevState) => ({
141+
...prevState,
142+
uiState: { ...UI_STATUS.FAILED_STATUS, description: errorMessage },
143+
}));
144+
});
145+
146+
socket.on(MATCHING_EVENT.DISCONNECT, () => {
147+
socket.close();
145148
});
146149

147150
return () => {
@@ -170,7 +173,24 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
170173
<h1 className='mb-4 text-3xl'>{uiState.header}</h1>
171174
<div className='flex flex-col items-center justify-center'>
172175
{uiState.icon}
173-
<p className='mt-4 whitespace-pre-wrap text-lg'>{uiState.description}</p>
176+
{uiState.description.startsWith('RoomId') ? (
177+
<p className='flex flex-col gap-1'>
178+
<div className='flex flex-col gap-0'>
179+
<label className='text-lg'>Room Id:</label>
180+
<span className='text-md max-w-[400px] truncate text-balance font-mono'>
181+
{uiState.description.split('\nQuestionId: ')[0].replace('RoomId:', '')}
182+
</span>
183+
</div>
184+
<div className='flex flex-col'>
185+
<label className='text-lg'>Question Id:</label>
186+
<span className='font-mono text-lg'>
187+
{uiState.description.split('\nQuestionId: ')[1]}
188+
</span>
189+
</div>
190+
</p>
191+
) : (
192+
<p className='mt-4 whitespace-pre-wrap text-lg'>{uiState.description}</p>
193+
)}
174194
</div>
175195
{countdownRef.current > 0 || isCancelling ? (
176196
<Button
@@ -182,7 +202,14 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
182202
Cancel
183203
</Button>
184204
) : (
185-
<Button className='mt-5' variant='outline' onClick={() => setIsModalOpen(false)}>
205+
<Button
206+
className='mt-5'
207+
variant='outline'
208+
onClick={() => {
209+
setIsModalOpen(false);
210+
// form?.reset()
211+
}}
212+
>
186213
Back
187214
</Button>
188215
)}

0 commit comments

Comments
 (0)