Skip to content

Commit 4297c31

Browse files
tituschewxjtituschewxj
committed
feat: fetch from backend for a submission
1 parent 5484438 commit 4297c31

File tree

5 files changed

+166
-108
lines changed

5 files changed

+166
-108
lines changed

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

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ import { WebrtcProvider } from "y-webrtc";
3636
import { Compartment, EditorState } from "@codemirror/state";
3737
import { basicSetup, EditorView } from "codemirror";
3838
import { javascript } from "@codemirror/lang-javascript";
39+
import { GetHistory, GetUserQuestionHistories } from "@/app/services/history";
40+
import { ValidateUser, VerifyTokenResponseType } from "@/app/services/user";
41+
42+
interface Submission {
43+
submittedAt: string;
44+
language: string;
45+
matchedUser: string;
46+
code: string;
47+
}
3948

4049
export default function QuestionPage() {
4150
const [isLoading, setIsLoading] = useState<boolean>(true); // Store the states related to table's loading
@@ -52,7 +61,6 @@ export default function QuestionPage() {
5261

5362
const router = useRouter();
5463
const editorRef = useRef(null);
55-
const providerRef = useRef<WebrtcProvider | null>(null);
5664
const languageConf = new Compartment();
5765

5866
// Retrieve the docRefId from query params during page navigation
@@ -65,9 +73,13 @@ export default function QuestionPage() {
6573
const [complexity, setComplexity] = useState<string | undefined>(undefined);
6674
const [categories, setCategories] = useState<string[]>([]); // Store the selected filter categories
6775
const [description, setDescription] = useState<string | undefined>(undefined);
76+
const [username, setUsername] = useState<string>("");
77+
const [userQuestionHistories, setUserQuestionHistories] =
78+
useState<History[]>();
79+
const [submission, setSubmission] = useState<Submission>();
6880

6981
const state = EditorState.create({
70-
doc: "TODO: parse from code",
82+
doc: "",
7183
extensions: [
7284
basicSetup,
7385
languageConf.of(javascript()),
@@ -93,20 +105,53 @@ export default function QuestionPage() {
93105
.finally(() => {
94106
setIsLoading(false);
95107
});
108+
}, [docRefId]);
96109

110+
useEffect(() => {
111+
ValidateUser().then((data: VerifyTokenResponseType) => {
112+
setUsername(data.data.username);
113+
});
114+
}, []);
115+
116+
useEffect(() => {
97117
const view = new EditorView({
98118
state,
99119
parent: editorRef.current || undefined,
100120
});
101121

122+
// TODO: get from a specific history which was selected.
123+
GetHistory("182d0ae6db66fdbefb657f09df3a44a8").then((data: any) => {
124+
setSubmission({
125+
submittedAt: data.createdAt,
126+
language: data.language,
127+
matchedUser: data.matchedUser,
128+
code: data.code,
129+
});
130+
131+
view.dispatch(
132+
view.state.update({
133+
changes: { from: 0, to: state.doc.length, insert: data.code },
134+
})
135+
);
136+
});
137+
102138
return () => {
103139
// Cleanup on component unmount
104140
view.destroy();
105141
};
106-
}, [docRefId]);
142+
}, []);
107143

108-
// TODO: retrieve history
109-
const history: any[] = [];
144+
useEffect(() => {
145+
GetUserQuestionHistories(username, docRefId).then((data: any) => {
146+
setUserQuestionHistories(data);
147+
});
148+
}, [docRefId, username]);
149+
150+
useEffect(() => {
151+
GetUserQuestionHistories(username, docRefId).then((data: any) => {
152+
setUserQuestionHistories(data);
153+
});
154+
}, [docRefId, username]);
110155

111156
const columns = [
112157
{
@@ -115,9 +160,9 @@ export default function QuestionPage() {
115160
key: "id",
116161
},
117162
{
118-
title: "Attempted at",
119-
dataIndex: "attemptedAt",
120-
key: "attemptedAt",
163+
title: "Submitted at",
164+
dataIndex: "createdAt",
165+
key: "createdAt",
121166
},
122167
{
123168
title: "Language",
@@ -159,7 +204,7 @@ export default function QuestionPage() {
159204
<div style={{ margin: "10px" }}>
160205
<Table
161206
rowKey="id"
162-
dataSource={history}
207+
dataSource={userQuestionHistories}
163208
columns={columns}
164209
loading={isLoading}
165210
/>
@@ -174,6 +219,23 @@ export default function QuestionPage() {
174219
Submitted Code
175220
</div>
176221
</div>
222+
<div
223+
style={{
224+
margin: "10px",
225+
display: "flex",
226+
flexDirection: "row",
227+
}}
228+
>
229+
<div className="submission-header-detail">
230+
Submitted at: {submission?.submittedAt || "-"}
231+
</div>
232+
<div className="submission-header-detail">
233+
Language: {submission?.language || "-"}
234+
</div>
235+
<div className="submission-header-detail">
236+
Matched with: {submission?.matchedUser || "-"}
237+
</div>
238+
</div>
177239

178240
{/* TODO: add details of attempt here */}
179241
{/* TODO: set value of code, refactor to look like collab editor but not editable */}
@@ -190,7 +252,7 @@ export default function QuestionPage() {
190252
overflow: "scroll",
191253
border: "1px solid #ddd",
192254
}}
193-
/>
255+
></div>
194256
</div>
195257
</div>
196258
</Row>

‎apps/frontend/src/app/question/[id]/styles.scss‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -66,32 +66,6 @@
6666
padding: 1rem;
6767
}
6868

69-
.chat-container {
70-
border: 2px solid #463f3a;
71-
border-radius: 10px;
72-
width: 100%;
73-
padding: 1rem;
74-
}
75-
76-
.chat-message-box {
77-
margin-top: 1rem;
78-
height: 365px;
79-
border: 1px solid #d9d9d9;
80-
border-radius: 6px;
81-
overflow-y: scroll;
82-
}
83-
84-
.chat-header-message {
85-
font-size: 14px;
86-
color: #c6c6c6;
87-
margin: 3px auto;
88-
text-align: center;
89-
}
90-
91-
.chat-typing-box {
92-
margin-top: 1rem;
93-
}
94-
9569
.question-title,
9670
.test-title,
9771
.code-title,
@@ -163,3 +137,8 @@
163137
.code-viewer {
164138
resize: none;
165139
}
140+
141+
.submission-header-detail {
142+
font-weight: normal;
143+
padding: 0px 10px 0px 10px;
144+
}

‎apps/frontend/src/app/services/history.ts‎

Lines changed: 84 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,102 @@
11
const HISTORY_SERVICE_URL = process.env.NEXT_PUBLIC_HISTORY_SERVICE_URL;
22

33
export interface History {
4-
title: string;
5-
code: string;
6-
language: string;
7-
user: string;
8-
matchedUser: string;
9-
matchId: string;
10-
matchedTopics: string[];
11-
questionDocRefId: string;
12-
questionDifficulty: string;
13-
questionTopics: string[];
14-
createdAt?: string;
15-
updatedAt?: string;
4+
title: string;
5+
code: string;
6+
language: string;
7+
user: string;
8+
matchedUser: string;
9+
historyDocRefId: string;
10+
matchedTopics: string[];
11+
questionDocRefId: string;
12+
questionDifficulty: string;
13+
questionTopics: string[];
14+
createdAt?: string;
15+
updatedAt?: string;
1616
}
1717

1818
export const CreateOrUpdateHistory = async (
19-
history: History,
20-
matchId: string,
19+
history: History,
20+
historyDocRefId: string
2121
): Promise<History> => {
22-
const response = await fetch(
23-
`${HISTORY_SERVICE_URL}histories/${matchId}`,
24-
{
25-
method: "PUT",
26-
headers: {
27-
"Content-Type": "application/json",
28-
},
29-
body: JSON.stringify(history),
30-
}
31-
);
32-
33-
if (response.status === 200) {
34-
return response.json();
35-
} else {
36-
throw new Error(
37-
`Error saving history: ${response.status} ${response.statusText}`
38-
);
22+
const response = await fetch(
23+
`${HISTORY_SERVICE_URL}histories/${historyDocRefId}`,
24+
{
25+
method: "PUT",
26+
headers: {
27+
"Content-Type": "application/json",
28+
},
29+
body: JSON.stringify(history),
3930
}
40-
}
31+
);
4132

42-
export const GetHistory = async (
43-
matchId: string,
44-
): Promise<History> => {
45-
const response = await fetch(
46-
`${HISTORY_SERVICE_URL}histories/${matchId}`,
47-
{
48-
method: "GET",
49-
headers: {
50-
"Content-Type": "application/json",
51-
},
52-
}
33+
if (response.status === 200) {
34+
return response.json();
35+
} else {
36+
throw new Error(
37+
`Error saving history: ${response.status} ${response.statusText}`
5338
);
39+
}
40+
};
5441

55-
if (response.status === 200) {
56-
return response.json();
57-
} else {
58-
throw new Error(
59-
`Error reading history: ${response.status} ${response.statusText}`
60-
);
42+
export const GetHistory = async (historyDocRefId: string): Promise<History> => {
43+
const response = await fetch(
44+
`${HISTORY_SERVICE_URL}histories/${historyDocRefId}`,
45+
{
46+
method: "GET",
47+
headers: {
48+
"Content-Type": "application/json",
49+
},
6150
}
62-
}
51+
);
52+
53+
if (response.status === 200) {
54+
return response.json();
55+
} else {
56+
throw new Error(
57+
`Error reading history: ${response.status} ${response.statusText}`
58+
);
59+
}
60+
};
6361

6462
export const GetUserHistories = async (
65-
username: string,
63+
username: string
6664
): Promise<History[]> => {
67-
const response = await fetch(
68-
`${HISTORY_SERVICE_URL}histories/${username}`,
69-
{
70-
method: "GET",
71-
headers: {
72-
"Content-Type": "application/json",
73-
},
74-
}
65+
const response = await fetch(`${HISTORY_SERVICE_URL}histories/${username}`, {
66+
method: "GET",
67+
headers: {
68+
"Content-Type": "application/json",
69+
},
70+
});
71+
72+
if (response.status === 200) {
73+
return response.json();
74+
} else {
75+
throw new Error(
76+
`Error reading user histories: ${response.status} ${response.statusText}`
7577
);
78+
}
79+
};
7680

77-
if (response.status === 200) {
78-
return response.json();
79-
} else {
80-
throw new Error(
81-
`Error reading user histories: ${response.status} ${response.statusText}`
82-
);
81+
export const GetUserQuestionHistories = async (
82+
username: string,
83+
questionDocRefId: string
84+
): Promise<History[]> => {
85+
const response = await fetch(
86+
`${HISTORY_SERVICE_URL}histories/user/${username}/question/${questionDocRefId}`,
87+
{
88+
method: "GET",
89+
headers: {
90+
"Content-Type": "application/json",
91+
},
8392
}
84-
}
93+
);
94+
95+
if (response.status === 200) {
96+
return response.json();
97+
} else {
98+
throw new Error(
99+
`Error reading user histories: ${response.status} ${response.statusText}`
100+
);
101+
}
102+
};

‎apps/history-service/handlers/listquestionhistory.go‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ func (s *Service) ListUserQuestionHistories(w http.ResponseWriter, r *http.Reque
1414

1515
// Parse request
1616
username := chi.URLParam(r, "username")
17+
questionDocRefID := chi.URLParam(r, "questionDocRefId")
1718

1819
// Reference collection
1920
collRef := s.Client.Collection("collaboration-history")
2021

2122
// Query data
22-
iterUser := collRef.Where("user", "==", username).Documents(ctx)
23-
iterMatchedUser := collRef.Where("matchedUser", "==", username).Documents(ctx)
23+
iterUser := collRef.Where("user", "==", username).Where("questionDocRefId", "==", questionDocRefID).Documents(ctx)
24+
iterMatchedUser := collRef.Where("matchedUser", "==", username).Where("questionDocRefId", "==", questionDocRefID).Documents(ctx)
2425

2526
// Map data
2627
var histories []models.CollaborationHistory

‎apps/history-service/main.go‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,8 @@ func registerRoutes(r *chi.Mux, service *handlers.Service) {
7878
r.Route("/histories", func(r chi.Router) {
7979
r.Post("/", service.CreateHistory)
8080
r.Get("/{historyDocRefId}", service.ReadHistory)
81-
r.Route("/{username}", func(r chi.Router) {
82-
r.Get("/", service.ListUserHistories)
83-
r.Get("/{questionDocRefId}", service.ListUserQuestionHistories)
84-
})
81+
r.Get("/user/{username}", service.ListUserHistories)
82+
r.Get("/user/{username}/question/{questionDocRefId}", service.ListUserQuestionHistories)
8583
})
8684
}
8785

0 commit comments

Comments
 (0)