Skip to content

Commit 1fc5c9f

Browse files
bensohhbensohh
committed
Fix commented providerRef error
1 parent 5f284c8 commit 1fc5c9f

File tree

2 files changed

+103
-87
lines changed

2 files changed

+103
-87
lines changed

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

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ interface CollaborationProps {}
4040

4141
export default function CollaborationPage(props: CollaborationProps) {
4242
const router = useRouter();
43-
// const providerRef = useRef<WebrtcProvider | null>(null);
43+
const providerRef = useRef<WebrtcProvider | null>(null);
4444

4545
const editorRef = useRef<CollaborativeEditorHandle>(null);
4646

@@ -54,7 +54,9 @@ export default function CollaborationPage(props: CollaborationProps) {
5454
const [questionTitle, setQuestionTitle] = useState<string | undefined>(
5555
undefined
5656
);
57-
const [questionDocRefId, setQuestionDocRefId] = useState<string | undefined>(undefined);
57+
const [questionDocRefId, setQuestionDocRefId] = useState<string | undefined>(
58+
undefined
59+
);
5860
const [complexity, setComplexity] = useState<string | undefined>(undefined);
5961
const [categories, setCategories] = useState<string[]>([]); // Store the selected filter categories
6062
const [description, setDescription] = useState<string | undefined>(undefined);
@@ -71,7 +73,9 @@ export default function CollaborationPage(props: CollaborationProps) {
7173
return storedTime ? parseInt(storedTime) : 0;
7274
}); // State for count-up timer (TODO: currently using localstorage to store time, change to db stored time in the future)
7375
const stopwatchRef = useRef<NodeJS.Timeout | null>(null);
74-
const [matchedTopics, setMatchedTopics] = useState<string[] | undefined>(undefined);
76+
const [matchedTopics, setMatchedTopics] = useState<string[] | undefined>(
77+
undefined
78+
);
7579

7680
// Chat states
7781
const [messageToSend, setMessageToSend] = useState<string | undefined>(
@@ -142,31 +146,34 @@ export default function CollaborationPage(props: CollaborationProps) {
142146
throw new Error("Provider not initialized");
143147
}
144148
providerRef.current.awareness.setLocalStateField("codeSavedStatus", true);
145-
}
149+
};
146150

147151
const handleSubmitCode = async () => {
148152
if (!collaborationId) {
149153
throw new Error("Collaboration ID not found");
150154
}
151-
const data = await CreateOrUpdateHistory({
152-
title: questionTitle ?? "",
153-
code: code,
154-
language: selectedLanguage,
155-
user: currentUser ?? "",
156-
matchedUser: matchedUser ?? "",
157-
matchId: collaborationId ?? "",
158-
matchedTopics: matchedTopics ?? [],
159-
questionDocRefId: questionDocRefId ?? "",
160-
questionDifficulty: complexity ?? "",
161-
questionTopics: categories,
162-
}, collaborationId);
155+
const data = await CreateOrUpdateHistory(
156+
{
157+
title: questionTitle ?? "",
158+
code: code,
159+
language: selectedLanguage,
160+
user: currentUser ?? "",
161+
matchedUser: matchedUser ?? "",
162+
matchId: collaborationId ?? "",
163+
matchedTopics: matchedTopics ?? [],
164+
questionDocRefId: questionDocRefId ?? "",
165+
questionDifficulty: complexity ?? "",
166+
questionTopics: categories,
167+
},
168+
collaborationId
169+
);
163170
successMessage("Code saved successfully!");
164171
sendCodeSavedStatusToMatchedUser();
165-
}
172+
};
166173

167174
const handleCodeChange = (code: string) => {
168175
setCode(code);
169-
}
176+
};
170177

171178
// Fetch the question on initialisation
172179
useEffect(() => {
@@ -175,11 +182,13 @@ export default function CollaborationPage(props: CollaborationProps) {
175182
}
176183

177184
// Retrieve details from localstorage
178-
const questionDocRefId: string = localStorage.getItem("questionDocRefId") ?? "";
185+
const questionDocRefId: string =
186+
localStorage.getItem("questionDocRefId") ?? "";
179187
const collabId: string = localStorage.getItem("collabId") ?? "";
180188
const matchedUser: string = localStorage.getItem("matchedUser") ?? "";
181189
const currentUser: string = localStorage.getItem("user") ?? "";
182-
const matchedTopics: string[] = localStorage.getItem("matchedTopics")?.split(",") ?? [];
190+
const matchedTopics: string[] =
191+
localStorage.getItem("matchedTopics")?.split(",") ?? [];
183192

184193
// Set states from localstorage
185194
setCollaborationId(collabId);
@@ -377,10 +386,10 @@ export default function CollaborationPage(props: CollaborationProps) {
377386
Code
378387
</div>
379388
{/* TODO: Link to execution service for code submission */}
380-
<Button
381-
icon={<SendOutlined />}
382-
iconPosition="end"
383-
onClick={() => handleSubmitCode()}
389+
<Button
390+
icon={<SendOutlined />}
391+
iconPosition="end"
392+
onClick={() => handleSubmitCode()}
384393
>
385394
Submit
386395
</Button>

‎apps/frontend/src/components/CollaborativeEditor/CollaborativeEditor.tsx‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ interface CollaborativeEditorProps {
3232
language: string;
3333
setMatchedUser: Dispatch<SetStateAction<string>>;
3434
handleCloseCollaboration: (type: string) => void;
35-
// providerRef: MutableRefObject<WebrtcProvider | null>;
35+
// providerRef: MutableRefObject<WebrtcProvider | null>;
3636
matchedUser: string;
3737
onCodeChange: (code: string) => void;
3838
}
@@ -84,57 +84,57 @@ const CollaborativeEditor = forwardRef(
8484
const languageConf = new Compartment();
8585

8686
// Referenced: https://codemirror.net/examples/config/#dynamic-configuration
87-
const autoLanguage = EditorState.transactionExtender.of((tr) => {
88-
if (!tr.docChanged) return null;
89-
90-
const snippet = tr.newDoc.sliceString(0, 100);
91-
92-
// Handle code change
93-
props.onCodeChange(tr.newDoc.toString());
94-
95-
// Test for various language
96-
const docIsPython = /^\s*(def|class)\s/.test(snippet);
97-
const docIsJava = /^\s*(class|public\s+static\s+void\s+main)\s/.test(
98-
snippet
99-
); // Java has some problems
100-
const docIsCpp = /^\s*(#include|namespace|int\s+main)\s/.test(snippet); // Yet to test c++
101-
const docIsGo = /^(package|import|func|type|var|const)\s/.test(snippet);
102-
103-
let newLanguage;
104-
let languageType;
105-
let languageLabel;
106-
107-
if (docIsPython) {
108-
newLanguage = python();
109-
languageLabel = "Python";
110-
languageType = pythonLanguage;
111-
} else if (docIsJava) {
112-
newLanguage = java();
113-
languageLabel = "Java";
114-
languageType = javaLanguage;
115-
} else if (docIsGo) {
116-
newLanguage = go();
117-
languageLabel = "Go";
118-
languageType = goLanguage;
119-
} else if (docIsCpp) {
120-
newLanguage = cpp();
121-
languageLabel = "C++";
122-
languageType = cppLanguage;
123-
} else {
124-
newLanguage = javascript(); // Default to JavaScript
125-
languageLabel = "JavaScript";
126-
languageType = javascriptLanguage;
127-
}
128-
129-
const stateLanguage = tr.startState.facet(language);
130-
if (languageType == stateLanguage) return null;
131-
132-
setSelectedLanguage(languageLabel);
133-
134-
return {
135-
effects: languageConf.reconfigure(newLanguage),
136-
};
137-
});
87+
const autoLanguage = EditorState.transactionExtender.of((tr) => {
88+
if (!tr.docChanged) return null;
89+
90+
const snippet = tr.newDoc.sliceString(0, 100);
91+
92+
// Handle code change
93+
props.onCodeChange(tr.newDoc.toString());
94+
95+
// Test for various language
96+
const docIsPython = /^\s*(def|class)\s/.test(snippet);
97+
const docIsJava = /^\s*(class|public\s+static\s+void\s+main)\s/.test(
98+
snippet
99+
); // Java has some problems
100+
const docIsCpp = /^\s*(#include|namespace|int\s+main)\s/.test(snippet); // Yet to test c++
101+
const docIsGo = /^(package|import|func|type|var|const)\s/.test(snippet);
102+
103+
let newLanguage;
104+
let languageType;
105+
let languageLabel;
106+
107+
if (docIsPython) {
108+
newLanguage = python();
109+
languageLabel = "Python";
110+
languageType = pythonLanguage;
111+
} else if (docIsJava) {
112+
newLanguage = java();
113+
languageLabel = "Java";
114+
languageType = javaLanguage;
115+
} else if (docIsGo) {
116+
newLanguage = go();
117+
languageLabel = "Go";
118+
languageType = goLanguage;
119+
} else if (docIsCpp) {
120+
newLanguage = cpp();
121+
languageLabel = "C++";
122+
languageType = cppLanguage;
123+
} else {
124+
newLanguage = javascript(); // Default to JavaScript
125+
languageLabel = "JavaScript";
126+
languageType = javascriptLanguage;
127+
}
128+
129+
const stateLanguage = tr.startState.facet(language);
130+
if (languageType == stateLanguage) return null;
131+
132+
setSelectedLanguage(languageLabel);
133+
134+
return {
135+
effects: languageConf.reconfigure(newLanguage),
136+
};
137+
});
138138

139139
const [messageApi, contextHolder] = message.useMessage();
140140

@@ -235,20 +235,27 @@ const CollaborativeEditor = forwardRef(
235235
}
236236
}
237237
});
238-
238+
239239
// Listener for awareness updates to receive status changes from peers
240-
provider.awareness.on("update", ({ added, updated } : AwarenessUpdate) => {
241-
added.concat(updated).filter(clientId => clientId !== provider.awareness.clientID).forEach((clientID) => {
242-
const state = provider.awareness.getStates().get(clientID) as Awareness;
243-
if (state && state.codeSavedStatus) {
244-
// Display the received status message
245-
messageApi.open({
246-
type: "success",
247-
content: `${props.matchedUser ?? "Peer"} saved code successfully!`,
240+
provider.awareness.on("update", ({ added, updated }: AwarenessUpdate) => {
241+
added
242+
.concat(updated)
243+
.filter((clientId) => clientId !== provider.awareness.clientID)
244+
.forEach((clientID) => {
245+
const state = provider.awareness
246+
.getStates()
247+
.get(clientID) as Awareness;
248+
if (state && state.codeSavedStatus) {
249+
// Display the received status message
250+
messageApi.open({
251+
type: "success",
252+
content: `${
253+
props.matchedUser ?? "Peer"
254+
} saved code successfully!`,
255+
});
256+
}
248257
});
249-
}
250258
});
251-
});
252259

253260
const state = EditorState.create({
254261
doc: ytext.toString(),

0 commit comments

Comments
 (0)