66 Input ,
77 Layout ,
88 Modal ,
9+ message ,
910 Row ,
1011 Select ,
1112 Tabs ,
@@ -31,24 +32,33 @@ import { ProgrammingLanguageOptions } from "@/utils/SelectOptions";
3132import CollaborativeEditor , {
3233 CollaborativeEditorHandle ,
3334} from "@/components/CollaborativeEditor/CollaborativeEditor" ;
35+ import { CreateOrUpdateHistory } from "@/app/services/history" ;
36+ import { Language } from "@codemirror/language" ;
37+ import { WebrtcProvider } from "y-webrtc" ;
3438
3539interface CollaborationProps { }
3640
3741export default function CollaborationPage ( props : CollaborationProps ) {
3842 const router = useRouter ( ) ;
43+ // const providerRef = useRef<WebrtcProvider | null>(null);
3944
4045 const editorRef = useRef < CollaborativeEditorHandle > ( null ) ;
4146
4247 const [ isLoading , setIsLoading ] = useState < boolean > ( false ) ;
4348
4449 // Code Editor States
50+ const [ historyDocRefId , setHistoryDocRefId ] = useState < string | undefined > (
51+ undefined
52+ ) ;
53+ const [ code , setCode ] = useState < string > ( "" ) ;
4554 const [ questionTitle , setQuestionTitle ] = useState < string | undefined > (
4655 undefined
4756 ) ;
57+ const [ questionDocRefId , setQuestionDocRefId ] = useState < string | undefined > ( undefined ) ;
4858 const [ complexity , setComplexity ] = useState < string | undefined > ( undefined ) ;
4959 const [ categories , setCategories ] = useState < string [ ] > ( [ ] ) ; // Store the selected filter categories
5060 const [ description , setDescription ] = useState < string | undefined > ( undefined ) ;
51- const [ selectedLanguage , setSelectedLanguage ] = useState ( "javascript " ) ; // State to hold the selected language item
61+ const [ selectedLanguage , setSelectedLanguage ] = useState ( "Javascript " ) ; // State to hold the selected language item
5262
5363 // Session states
5464 const [ collaborationId , setCollaborationId ] = useState < string | undefined > (
@@ -61,6 +71,7 @@ export default function CollaborationPage(props: CollaborationProps) {
6171 return storedTime ? parseInt ( storedTime ) : 0 ;
6272 } ) ; // State for count-up timer (TODO: currently using localstorage to store time, change to db stored time in the future)
6373 const stopwatchRef = useRef < NodeJS . Timeout | null > ( null ) ;
74+ const [ matchedTopics , setMatchedTopics ] = useState < string [ ] | undefined > ( undefined ) ;
6475
6576 // Chat states
6677 const [ messageToSend , setMessageToSend ] = useState < string | undefined > (
@@ -116,25 +127,68 @@ export default function CollaborationPage(props: CollaborationProps) {
116127 ) ;
117128 } ;
118129
130+ // Message
131+ const [ messageApi , contextHolder ] = message . useMessage ( ) ;
132+
133+ const successMessage = ( message : string ) => {
134+ messageApi . open ( {
135+ type : "success" ,
136+ content : message ,
137+ } ) ;
138+ } ;
139+
140+ const sendCodeSavedStatusToMatchedUser = ( ) => {
141+ if ( ! providerRef . current ) {
142+ throw new Error ( "Provider not initialized" ) ;
143+ }
144+ providerRef . current . awareness . setLocalStateField ( "codeSavedStatus" , true ) ;
145+ }
146+
147+ const handleSubmitCode = async ( ) => {
148+ if ( ! collaborationId ) {
149+ throw new Error ( "Collaboration ID not found" ) ;
150+ }
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 ) ;
163+ successMessage ( "Code saved successfully!" ) ;
164+ sendCodeSavedStatusToMatchedUser ( ) ;
165+ }
166+
167+ const handleCodeChange = ( code : string ) => {
168+ setCode ( code ) ;
169+ }
170+
119171 // Fetch the question on initialisation
120172 useEffect ( ( ) => {
121173 if ( ! isLoading ) {
122174 setIsLoading ( true ) ;
123175 }
124176
125177 // Retrieve details from localstorage
126- const docRefId : string = localStorage . getItem ( "docRefId " ) ?? "" ;
178+ const questionDocRefId : string = localStorage . getItem ( "questionDocRefId " ) ?? "" ;
127179 const collabId : string = localStorage . getItem ( "collabId" ) ?? "" ;
128180 const matchedUser : string = localStorage . getItem ( "matchedUser" ) ?? "" ;
129181 const currentUser : string = localStorage . getItem ( "user" ) ?? "" ;
182+ const matchedTopics : string [ ] = localStorage . getItem ( "matchedTopics" ) ?. split ( "," ) ?? [ ] ;
130183
131184 // Set states from localstorage
132185 setCollaborationId ( collabId ) ;
133186 setMatchedUser ( matchedUser ) ;
134187 setCurrentUser ( currentUser ) ;
188+ setMatchedTopics ( matchedTopics ) ;
189+ setQuestionDocRefId ( questionDocRefId ) ;
135190
136- // Fetch question and set question states
137- GetSingleQuestion ( docRefId ) . then ( ( data : Question ) => {
191+ GetSingleQuestion ( questionDocRefId ) . then ( ( data : Question ) => {
138192 setQuestionTitle ( `${ data . id } ${ data . title } ) ;
139193 setComplexity ( data . complexity ) ;
140194 setCategories ( data . categories ) ;
@@ -202,13 +256,18 @@ export default function CollaborationPage(props: CollaborationProps) {
202256 // Remove localstorage variables for collaboration
203257 localStorage . removeItem ( "session-duration" ) ; // TODO: Remove this after collaboration backend data stored
204258 localStorage . removeItem ( "user" ) ;
205- localStorage . removeItem ( "collabId" ) ;
206- localStorage . removeItem ( "docRefId" ) ;
207259 localStorage . removeItem ( "matchedUser" ) ;
260+ localStorage . removeItem ( "collabId" ) ;
261+ localStorage . removeItem ( "questionDocRefId" ) ;
262+ localStorage . removeItem ( "matchedTopics" ) ;
263+
264+ // Redirect back to matching page
265+ router . push ( "/matching" ) ;
208266 } ;
209267
210268 return (
211269 < Layout className = "collaboration-layout" >
270+ { contextHolder }
212271 < Header selectedKey = { undefined } />
213272 < Content className = "collaboration-content" >
214273 < Modal
@@ -318,10 +377,10 @@ export default function CollaborationPage(props: CollaborationProps) {
318377 Code
319378 </ div >
320379 { /* TODO: Link to execution service for code submission */ }
321- < Button
322- icon = { < SendOutlined /> }
323- iconPosition = "end"
324- className = "code-submit-button"
380+ < Button
381+ icon = { < SendOutlined /> }
382+ iconPosition = "end"
383+ onClick = { ( ) => handleSubmitCode ( ) }
325384 >
326385 Submit
327386 </ Button >
@@ -334,6 +393,9 @@ export default function CollaborationPage(props: CollaborationProps) {
334393 language = { selectedLanguage }
335394 setMatchedUser = { setMatchedUser }
336395 handleCloseCollaboration = { handleCloseCollaboration }
396+ // providerRef={providerRef}
397+ matchedUser = { matchedUser }
398+ onCodeChange = { handleCodeChange }
337399 />
338400 ) }
339401 </ div >
0 commit comments