Skip to content

Commit 0a054a7

Browse files
solomonng2001solomonng2001
committed
Merge branch 'main' into solomon/add-curl-test-cases-for-create-and-edit
2 parents 074e74c + 5242266 commit 0a054a7

File tree

6 files changed

+493
-14
lines changed

6 files changed

+493
-14
lines changed

‎apps/question-service/src/app/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export default function Home() {
181181
dataIndex: "categories",
182182
key: "categories",
183183
render: (categories: string[]) =>
184-
categories.map((category) => <Tag>{category}</Tag>),
184+
categories.map((category) => <Tag key={category}>{category}</Tag>),
185185
},
186186
{
187187
title: "Difficulty",
@@ -364,6 +364,7 @@ export default function Home() {
364364
</div>
365365
<div className="content-table">
366366
<Table
367+
rowKey="id"
367368
dataSource={questions}
368369
columns={columns}
369370
loading={isLoading}

‎apps/question-service/src/app/question/[id]/page.tsx‎

Lines changed: 223 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,223 @@
1-
"use client";
2-
3-
import { useSearchParams } from "next/navigation";
4-
5-
const QuestionPage = (): JSX.Element => {
6-
const searchParams = useSearchParams();
7-
const docRefId = searchParams.get("data");
8-
9-
// TODO: use docRefId to fetch the data via the service function and display the data below
10-
return <div>Hello World! {docRefId}</div>;
11-
};
12-
13-
export default QuestionPage;
1+
"use client";
2+
import Header from "@/components/Header/header";
3+
import {
4+
Button,
5+
Col,
6+
Dropdown,
7+
Layout,
8+
message,
9+
Menu,
10+
Row,
11+
TableProps,
12+
Tag,
13+
Select,
14+
} from "antd";
15+
import { Content } from "antd/es/layout/layout";
16+
import {
17+
DeleteOutlined,
18+
EditOutlined,
19+
PlusCircleOutlined,
20+
LeftOutlined,
21+
RightOutlined,
22+
CaretRightOutlined,
23+
ClockCircleOutlined,
24+
CommentOutlined,
25+
CheckCircleOutlined,
26+
} from "@ant-design/icons";
27+
import "./styles.scss";
28+
import { useEffect, useState } from "react";
29+
import { Question, GetSingleQuestion } from "../../services/question";
30+
import React from "react";
31+
import TextArea from "antd/es/input/TextArea";
32+
import { useSearchParams } from "next/navigation";
33+
import { ProgrammingLanguageOptions } from "@/utils/SelectOptions";
34+
35+
export default function Home() {
36+
const [isLoading, setIsLoading] = useState<boolean>(true); // Store the states related to table's loading
37+
38+
// Message States
39+
const [messageApi, contextHolder] = message.useMessage();
40+
41+
const error = (message: string) => {
42+
messageApi.open({
43+
type: "error",
44+
content: message,
45+
});
46+
};
47+
48+
// Retrieve the docRefId from query params during page navigation
49+
const searchParams = useSearchParams();
50+
const docRefId: string = searchParams?.get("data") ?? "";
51+
52+
// Code Editor States
53+
const [questionTitle, setQuestionTitle] = useState<string | undefined>(
54+
undefined
55+
);
56+
const [complexity, setComplexity] = useState<string | undefined>(undefined);
57+
const [categories, setCategories] = useState<string[]>([]); // Store the selected filter categories
58+
const [description, setDescription] = useState<string | undefined>(undefined);
59+
const [selectedItem, setSelectedItem] = useState("python"); // State to hold the selected language item
60+
61+
// When code editor page is initialised, fetch the particular question, and display in code editor
62+
useEffect(() => {
63+
if (!isLoading) {
64+
setIsLoading(true);
65+
}
66+
67+
GetSingleQuestion(docRefId).then((data: any) => {
68+
setQuestionTitle(data.title);
69+
setComplexity(data.complexity);
70+
setCategories(data.categories);
71+
setDescription(data.description);
72+
});
73+
}, [docRefId]);
74+
75+
return (
76+
<div>
77+
{contextHolder}
78+
<Layout className="code-editor-layout">
79+
<Header />
80+
<Content className="code-editor-content">
81+
<Row className="entire-page">
82+
<Col className="col-boxes" span={7}>
83+
<Row className="problem-description boxes">
84+
<div className="problem-description-info">
85+
<div className="problem-description-top">
86+
<h3 className="problem-description-title">
87+
{questionTitle}
88+
</h3>
89+
<text className="problem-solve-status">
90+
Solved&nbsp;
91+
<CheckCircleOutlined />
92+
</text>
93+
</div>
94+
<div className="complexity-div">
95+
<Tag
96+
className="complexity-tag"
97+
style={{
98+
color:
99+
complexity === "easy"
100+
? "#2DB55D"
101+
: complexity === "medium"
102+
? "orange"
103+
: "red",
104+
}}
105+
>
106+
{complexity &&
107+
complexity.charAt(0).toUpperCase() +
108+
complexity.slice(1)}
109+
</Tag>
110+
</div>
111+
<div id="tag-container" className="tag-container">
112+
<text className="topic-label">Topics: </text>
113+
{categories.map((category) => (
114+
<Tag key={category}>{category}</Tag>
115+
))}
116+
</div>
117+
<div className="description-text">
118+
<text>{description}</text>
119+
</div>
120+
</div>
121+
</Row>
122+
<Row className="test-cases boxes">
123+
<div className="test-cases-div">
124+
<div className="test-cases-top">
125+
<h3 className="testcase-title">Testcases</h3>
126+
<Button className="runtestcases-button">
127+
Run testcases
128+
<CaretRightOutlined />
129+
</Button>
130+
</div>
131+
<div className="testcase-buttons">
132+
<Button>Case 1</Button>
133+
<Button>Case 2</Button>
134+
<PlusCircleOutlined />
135+
</div>
136+
<div className="testcase-code-div">
137+
<TextArea
138+
className="testcase-code"
139+
placeholder="Testcases code"
140+
/>
141+
</div>
142+
</div>
143+
</Row>
144+
</Col>
145+
<Col className="col-boxes" span={11}>
146+
<Row className="code-editor boxes">
147+
<div className="code-editor-div">
148+
<div className="code-editor-top">
149+
<h3 className="code-editor-title">
150+
<LeftOutlined />
151+
<RightOutlined style={{ marginRight: "4px" }} />
152+
Code
153+
</h3>
154+
<Button className="submit-solution-button">
155+
Submit Solution
156+
<CaretRightOutlined />
157+
</Button>
158+
</div>
159+
<div className="language-select">
160+
<div>
161+
<text className="language-text">
162+
Select Language:&nbsp;
163+
</text>
164+
<Select
165+
className="select-language-button"
166+
defaultValue={selectedItem}
167+
onSelect={(val) => setSelectedItem(val)}
168+
options={ProgrammingLanguageOptions}
169+
/>
170+
</div>
171+
</div>
172+
<div className="code-editor-code-div">
173+
<TextArea
174+
className="code-editor-code"
175+
placeholder="Insert code here"
176+
></TextArea>
177+
</div>
178+
</div>
179+
</Row>
180+
</Col>
181+
<Col span={6} className="col-boxes">
182+
<Row className="session-details boxes">
183+
<div className="session-details-div">
184+
<div className="session-details-top">
185+
<h3 className="session-details-title">
186+
<ClockCircleOutlined />
187+
&nbsp;Session Details
188+
</h3>
189+
<Button className="end-session-button">End</Button>
190+
</div>
191+
<div className="session-details-text-div">
192+
<div className="session-details-text">
193+
<text className="session-headers">Start Time: </text>
194+
01:23:45
195+
<br />
196+
<text className="session-headers">
197+
Session Duration:{" "}
198+
</text>
199+
01:23:45
200+
<br />
201+
<text className="session-headers">Matched with: </text>
202+
John Doe
203+
</div>
204+
</div>
205+
</div>
206+
</Row>
207+
<Row className="chat-box boxes">
208+
<div className="chat-box-div">
209+
<div className="chat-box-top">
210+
<h3 className="chat-box-title">
211+
<CommentOutlined />
212+
&nbsp;Chat
213+
</h3>
214+
</div>
215+
</div>
216+
</Row>
217+
</Col>
218+
</Row>
219+
</Content>
220+
</Layout>
221+
</div>
222+
);
223+
}

0 commit comments

Comments
 (0)